Table Header 📋

The TableHeader component is responsible for rendering the header section of your table. It's where your column titles live and handles features like sorting, column resizing, and pinning columns. Think of it as the top part of your table that helps users understand and organize the data below!

Features 🎯

📊 Column headers with sorting
📌 Pin columns to left or right
↔️ Resize columns easily
📱 Sticky header while scrolling
🎨 Easy to style and customize

Basic Usage

Here's a simple example of how to use the TableHeader:

import { TableHeader } from '@shakibdshy/react-tablegrid';
 
function MyTableHeader() {
  return (
    <TableHeader
      tableInstance={tableInstance}
      enableColumnResize={true}
    />
  );
}

Props

Required Props

`tableInstance`

The table instance from useTableGrid hook that manages the table state.

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

Optional Props

`className`

Add custom CSS classes to the header.

<TableHeader className="my-custom-header" />

`style`

Add custom inline styles.

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

`enableColumnResize`

Let users resize columns by dragging.

Type: boolean
Default: false

<TableHeader enableColumnResize={true} />

`TableColumnClassName`

Add custom CSS classes to each column header.

<TableHeader TableColumnClassName="custom-column" />

`headerRowClassName`

Add custom CSS classes to the header row.

<TableHeader headerRowClassName="custom-row" />

`withoutTailwind`

Use without Tailwind CSS (for custom styling).

Type: boolean
Default: false

<TableHeader withoutTailwind={true} />

Advanced Features

1. Pinned Columns

You can pin columns to the left or right side of the table:

const columns = [
  {
    id: 'name',
    header: 'Name',
    // This column will be pinned to the left
    accessorKey: 'name', // Will be used for pinning
  },
];
 
// In your table configuration
const pinnedColumns = {
  left: ['name'],
  right: ['actions']
};

2. Column Resizing

Enable column resizing with a simple prop:

<TableHeader
  enableColumnResize={true}
  // The column width will update as the user drags
/>

3. Custom Styling

Style your header exactly how you want:

<TableHeader
  className="bg-gray-100"
  TableColumnClassName="px-4 py-2 font-bold"
  headerRowClassName="border-b"
  style={{
    height: '48px',
  }}
/>

4. Without Tailwind

If you're not using Tailwind CSS:

<TableHeader
  withoutTailwind={true}
  className="rtg-header"
  TableColumnClassName="rtg-header-column"
  headerRowClassName="rtg-header-row"
/>

Examples

Basic Header with Sorting

function SortableHeader() {
  const tableInstance = useTableGrid<YourDataType>({
    columns: [
      {
        id: 'name',
        header: 'Name',
        accessorKey: 'name',
        sortable: true,
      },
      {
        id: 'age',
        header: 'Age',
        accessorKey: 'age',
        sortable: true,
      },
    ],
    data: yourData,
  });
 
  return (
    <TableHeader
      tableInstance={tableInstance}
      className="bg-white"
    />
  );
}

Header with Pinned Columns

function PinnedHeader() {
  const tableInstance = useTableGrid<YourDataType>({
    columns: [
      {
        id: 'name',
        header: 'Name',
        accessorKey: 'name',
      },
      {
        id: 'actions',
        header: 'Actions',
        accessorKey: 'actions',
      },
    ],
    data: yourData,
  });
 
  // Columns will be pinned based on their accessorKey
  const pinnedColumns = {
    left: ['name'],
    right: ['actions'],
  };
 
  return (
    <TableHeader
      tableInstance={tableInstance}
      className="relative"
    />
  );
}

Resizable Header

function ResizableHeader() {
  return (
    <TableHeader
      tableInstance={tableInstance}
      enableColumnResize={true}
      className="cursor-col-resize"
    />
  );
}

Styling Guide

With Tailwind (Default)

<TableHeader
  className="bg-white border-b"
  TableColumnClassName="px-4 py-2 font-semibold"
  headerRowClassName="hover:bg-gray-50"
/>

Without Tailwind

<TableHeader
  withoutTailwind={true}
  className="rtg-header"
  TableColumnClassName="rtg-header-column"
  headerRowClassName="rtg-header-row"
/>

Best Practices 💡

Keep Headers Clear: Use short, descriptive column headers
Enable Sorting: Add sorting for columns where it makes sense
Pin Important Columns: Pin frequently referenced columns
Responsive Design: Make sure headers work well on mobile
Consistent Styling: Keep header styles consistent with your app
Handle Overflow: Use ellipsis for long header text
Accessibility: Include proper ARIA labels

Table Header

On this page