Table Column 📊

The TableColumn component renders individual column headers in your table. It handles sorting, resizing, and other column-specific features to make your table more interactive and user-friendly.

Features 🎯

🔄 Sorting with visual indicators
↔️ Column resizing
📌 Column pinning support
🎨 Custom styling options
♿ Full accessibility support
🎯 Custom header content

Basic Usage

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

import { TableColumn } from '@shakibdshy/react-tablegrid';
 
function MyTableColumn() {
  return (
    <TableColumn
      tableInstance={tableInstance}
      column={{
        id: 'name',
        header: 'Name',
        sortable: true,
      }}
    />
  );
}

Props

Required Props

`tableInstance`

The table instance from useTableGrid hook.

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

`column`

Column configuration object.

interface Column {
  id: string;
  header: string | (() => React.ReactNode);
  sortable?: boolean;
  accessorKey?: string;
  className?: string;
}

Optional Props

`className`

Add custom CSS classes to the column.

<TableColumn className="custom-column" />

`width`

Set the column width in pixels.

<TableColumn width={200} />

`style`

Add custom inline styles.

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

`enableColumnResize`

Enable column resizing.

Type: boolean
Default: false

<TableColumn enableColumnResize={true} />

`withoutTailwind`

Use without Tailwind CSS.

Type: boolean
Default: false

<TableColumn withoutTailwind={true} />

Advanced Features

1. Sortable Columns

Make columns sortable with built-in sort indicators:

const column = {
  id: 'name',
  header: 'Name',
  sortable: true,
  accessorKey: 'name',
};
 
<TableColumn
  tableInstance={tableInstance}
  column={column}
/>

2. Custom Header Content

Use a function to render custom header content:

const column = {
  id: 'status',
  header: () => (
    <div className="flex items-center gap-2">
      <StatusIcon />
      <span>Status</span>
    </div>
  ),
};
 
<TableColumn
  tableInstance={tableInstance}
  column={column}
/>

3. Resizable Columns

Enable column resizing with drag handles:

<TableColumn
  tableInstance={tableInstance}
  column={column}
  enableColumnResize={true}
  width={200}
/>

4. Column Styling

Style your columns with or without Tailwind:

// With Tailwind
<TableColumn
  className="bg-gray-50 hover:bg-gray-100"
  style={{ height: '48px' }}
/>
 
// Without Tailwind
<TableColumn
  withoutTailwind={true}
  className="rtg-column"
/>

Examples

Basic Sortable Column

function SortableColumn() {
  const tableInstance = useTableGrid<YourDataType>({
    columns,
    data,
  });
 
  return (
    <TableColumn
      tableInstance={tableInstance}
      column={{
        id: 'name',
        header: 'Name',
        sortable: true,
        accessorKey: 'name',
      }}
      className="bg-white"
    />
  );
}

Resizable Column with Custom Header

function ResizableCustomColumn() {
  return (
    <TableColumn
      tableInstance={tableInstance}
      column={{
        id: 'status',
        header: () => (
          <div className="flex items-center space-x-2">
            <span>Status</span>
            <InfoIcon className="text-gray-400" />
          </div>
        ),
      }}
      enableColumnResize={true}
      width={150}
    />
  );
}

Pinned Column

function PinnedColumn() {
  return (
    <TableColumn
      tableInstance={tableInstance}
      column={{
        id: 'actions',
        header: 'Actions',
        accessorKey: 'actions',
      }}
      className="sticky right-0 z-[35]"
    />
  );
}

Accessibility ♿

The TableColumn component includes these accessibility features:

role="columnheader": Identifies the element as a column header
aria-sort: Indicates current sort state (ascending/descending/none)
aria-colindex: Provides the column's position in the table
Sort buttons with descriptive aria-label

Best Practices 💡

Clear Headers: Use clear, concise header text
Appropriate Sorting: Only enable sorting for sortable data types
Reasonable Widths: Set appropriate min/max widths for resizable columns
Consistent Styling: Maintain consistent styling across columns
Mobile-Friendly: Ensure headers work well on smaller screens
Performance: Use memo for custom header content
Accessibility: Keep ARIA labels descriptive and meaningful

Table Column

On this page