Table Cell 📱

The TableCell component renders individual cells in your table. It's highly flexible, supporting custom rendering, editing, and styling options to display your data exactly how you want it.

Features 🎯

🎨 Multiple rendering options
✏️ Editable cell support
📐 Flexible width control
🎯 Custom component overrides
♿ Full accessibility support
🎭 With/without Tailwind styling

Basic Usage

Here's a simple example of how to use TableCell:

import { TableCell } from '@shakibdshy/react-tablegrid';
 
function MyTableCell() {
  return (
    <TableCell
      column={column}
      row={rowData}
      rowIndex={0}
      value={cellValue}
    />
  );
}

Props

Required Props

`column`

Column configuration object.

const column: Column<T> = {
  id: 'name',
  header: 'Name',
  accessorKey: 'name',
  // Optional cell renderer
  cell: ({ value, row, onChange }) => <div>{value}</div>,
};

`row`

The data object for the current row.

const row = {
  id: 1,
  name: 'John',
  email: 'john@example.com',
};

`rowIndex`

The index of the current row.

<TableCell rowIndex={0} />

`value`

The value to display in the cell.

<TableCell value={row[column.accessorKey]} />

Optional Props

`className`

Add custom CSS classes to the cell.

<TableCell className="custom-cell" />

`width`

Set the cell width in pixels.

<TableCell width={200} />

`style`

Add custom inline styles.

<TableCell style={{ backgroundColor: '#f5f5f5' }} />

`components`

Override the default cell rendering.

<TableCell
  components={{
    Cell: ({ value, row, column }) => (
      <div className="custom-cell">{value}</div>
    ),
  }}
/>

`withoutTailwind`

Use without Tailwind CSS.

Type: boolean
Default: false

<TableCell withoutTailwind={true} />

`isEditing`

Whether the cell is in edit mode.

Type: boolean
Default: false

<TableCell isEditing={true} />

Rendering Priority

The TableCell component follows this rendering priority:

customRender prop (if provided)
components.Cell (if provided)
column.cell (if defined)
Default rendering (converts value to string)

Advanced Features

1. Custom Cell Rendering

You can customize cell rendering in multiple ways:

// Using customRender prop
<TableCell
  customRender={(column, row, value) => (
    <div className="flex items-center gap-2">
      <Icon name={value as string} />
      <span>{value}</span>
    </div>
  )}
/>
 
// Using components prop
<TableCell
  components={{
    Cell: ({ value, row, column }) => (
      <div className="status-badge">
        {value}
      </div>
    ),
  }}
/>
 
// Using column.cell
const column = {
  id: 'status',
  cell: ({ value, onChange }) => (
    <StatusBadge
      status={value}
      onChange={onChange}
    />
  ),
};

2. Editable Cells

Handle cell editing with onChange callbacks:

function EditableCell() {
  return (
    <TableCell
      column={{
        cell: ({ value, onChange }) => (
          <input
            value={value}
            onChange={(e) => onChange(e.target.value)}
          />
        ),
      }}
      onRowChange={(rowIndex, field, value) => {
        // Update your data
        updateData(rowIndex, field, value);
      }}
    />
  );
}

3. Cell Width Control

Control cell width and sizing:

<TableCell
  width={200}
  style={{
    minWidth: '100px',
    maxWidth: '300px',
  }}
/>

Styling Guide

With Tailwind (Default)

<TableCell
  className="px-4 py-2 hover:bg-gray-50"
  style={{
    height: '48px',
  }}
/>

Without Tailwind

<TableCell
  withoutTailwind={true}
  className="rtg-cell"
/>

Examples

Basic Text Cell

function SimpleCell() {
  return (
    <TableCell
      column={{ id: 'name', accessorKey: 'name' }}
      row={{ name: 'John Doe' }}
      rowIndex={0}
      value="John Doe"
    />
  );
}

Formatted Number Cell

function CurrencyCell() {
  return (
    <TableCell
      column={{
        id: 'price',
        cell: ({ value }) => (
          <div className="text-right">
            ${Number(value).toFixed(2)}
          </div>
        ),
      }}
      value={99.99}
      rowIndex={0}
      row={{ price: 99.99 }}
    />
  );
}

Interactive Cell

function ActionCell() {
  return (
    <TableCell
      column={{
        id: 'actions',
        cell: ({ row, onDelete }) => (
          <div className="flex gap-2">
            <button onClick={() => onDelete()}>
              Delete
            </button>
          </div>
        ),
      }}
      onRowDelete={(index) => {
        // Handle row deletion
        deleteRow(index);
      }}
    />
  );
}

Accessibility ♿

The TableCell component includes these accessibility features:

role="cell": Identifies the element as a table cell
aria-colindex: Provides the cell's column position
Proper data attributes for cell identification
Support for keyboard interaction in editable cells

Best Practices 💡

Choose Right Renderer: Use the appropriate rendering method for your needs
Handle Edits Safely: Validate changes in editable cells
Consistent Styling: Keep cell styles consistent across the table
Performance: Keep cell renderers simple and memoized
Mobile Support: Ensure cells work well on small screens
Error Handling: Handle null or undefined values gracefully
Accessibility: Maintain proper ARIA attributes

Table Cell

On this page