Table Row 📑

The TableRow component renders individual rows in your table. It handles row interactions, cell rendering, and supports features like row selection and pinned columns.

Features 🎯

🔍 Row selection with keyboard support
📌 Support for pinned columns
🎨 Custom cell rendering
📱 Responsive design
♿ Full accessibility support
🖱️ Interactive row events

Basic Usage

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

import { TableRow } from '@shakibdshy/react-tablegrid';
 
function MyTableRow() {
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
    />
  );
}

Props

Required Props

`tableInstance`

The table instance from useTableGrid hook.

const tableInstance = useTableGrid<YourDataType>({
  columns,
  data,
});

`row`

The data for this row.

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

`rowIndex`

The index of this row in the table.

<TableRow rowIndex={0} />

Optional Props

`className`

Add custom CSS classes to the row.

<TableRow className="custom-row" />

`cellClassName`

Add custom CSS classes to all cells in the row.

<TableRow cellClassName="custom-cell" />

`style`

Add custom inline styles.

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

`components`

Custom component overrides.

<TableRow
  components={{
    Cell: ({ column, row, value }) => (
      <div>Custom cell: {value}</div>
    ),
  }}
/>

`withoutTailwind`

Use without Tailwind CSS.

Type: boolean
Default: false

<TableRow withoutTailwind={true} />

`isSelected`

Whether the row is selected.

Type: boolean
Default: false

<TableRow isSelected={true} />

Advanced Features

1. Row Selection

Handle row selection with keyboard support:

function SelectableRow() {
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
      isSelected={isRowSelected}
      // Selection is handled through tableInstance
    />
  );
}

2. Custom Cell Rendering

Customize how cells are rendered:

function CustomCellRow() {
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
      components={{
        Cell: ({ column, row, value }) => (
          <div className="custom-cell">
            {column.id === 'status' ? (
              <StatusBadge status={value} />
            ) : (
              value
            )}
          </div>
        ),
      }}
    />
  );
}

3. Pinned Columns

Support for pinned columns with proper styling:

function RowWithPinnedColumns() {
  const tableInstance = useTableGrid({
    columns,
    data,
    pinnedColumns: {
      left: ['name'],
      right: ['actions'],
    },
  });
 
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
    />
  );
}

4. Virtual Scrolling Support

For use with virtualized tables:

function VirtualRow() {
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
      isVirtual={true}
      virtualStyle={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
      }}
    />
  );
}

Styling Guide

With Tailwind (Default)

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

Without Tailwind

<TableRow
  withoutTailwind={true}
  className="rtg-row"
  cellClassName="rtg-row-cell"
/>

Examples

Basic Row with Selection

function SelectableTableRow() {
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
      isSelected={isSelected}
      className={cn(
        "cursor-pointer",
        isSelected && "bg-blue-50"
      )}
    />
  );
}

Row with Custom Cells and Pinning

function CustomPinnedRow() {
  return (
    <TableRow
      tableInstance={tableInstance}
      row={rowData}
      rowIndex={0}
      components={{
        Cell: ({ column, value }) => {
          if (column.id === 'actions') {
            return (
              <div className="flex gap-2">
                <EditButton />
                <DeleteButton />
              </div>
            );
          }
          return value;
        },
      }}
    />
  );
}

Accessibility ♿

The TableRow component includes these accessibility features:

role="row": Identifies the element as a table row
aria-rowindex: Provides the row's position in the table
Keyboard navigation support (Enter/Space for selection)
Proper tabIndex management
Interactive elements properly labeled

Best Practices 💡

Handle Selection: Implement clear visual feedback for selection
Keyboard Navigation: Test and ensure keyboard navigation works
Custom Rendering: Keep custom cell renders performant
Consistent Heights: Maintain consistent row heights
Mobile Support: Ensure rows work well on small screens
Virtual Scrolling: Use virtual rows for large datasets
Accessibility: Maintain ARIA attributes and keyboard support

Table Row

On this page