Fixed header

Set fixedHeader to keep the column headers visible while the user scrolls through a long dataset. The table body becomes independently scrollable within a container whose height is controlled by fixedHeaderScrollHeight.

import DataTable, { type TableColumn } from 'react-data-table-component';

const columns: TableColumn<Employee>[] = [
  { name: '#', selector: r => r.id, width: '60px' },
  { name: 'Name', selector: r => r.name, sortable: true },
  { name: 'Department', selector: r => r.department, sortable: true },
  {
    name: 'Salary',
    selector: r => r.salary,
    sortable: true,
    right: true,
    format: r => `$${r.salary.toLocaleString()}`,
  },
  { name: 'Status', selector: r => r.status },
];

<DataTable
  columns={columns}
  data={data} // large dataset
  fixedHeader
  fixedHeaderScrollHeight="300px"
  highlightOnHover
/>;

How it works

When fixedHeader is enabled, the responsive wrapper gainsoverflow-y: auto and the max-height you set viafixedHeaderScrollHeight. The column header row getsposition: sticky; top: 0 so it remains in view as the body scrolls within that container.

Because the scroll container is the responsive wrapper, horizontal scrolling for wide tables continues to work normally. Both axes scroll together, but the header sticks on the vertical axis.

Turning the scroll container off

responsive={false} removes the table's own horizontal scroll container, letting wide content overflow into the parent instead. It exists for a few specific situations:

• Parent-owned scrolling. The table sits inside your own scroll container (a dashboard panel, a split view, several tables sharing one horizontal scrollbar). Nesting the table's overflow-x: auto inside yours would produce scrollbars within scrollbars.
• Print and PDF export. An overflow container clips everything past the fold; disabling it lets the full table width render in print stylesheets.
• Table dictates layout. You want the page itself to widen or scroll rather than the table.

<div className="my-own-scroll-container">
  <DataTable columns={columns} data={data} responsive={false} />
  <OtherWidgetSharingTheScroll />
</div>;

Trade-offs: features that rely on the table's own scrollport degrade. Pinned columns stick against whatever scroll container the parent provides, which usually works, but the custom pinned-columns scrollbar does not render, and the native one is left visible instead.fixedHeader still creates a vertical scroll container regardless, since a height cap without overflow is meaningless. Leave responsive on (the default) unless one of the cases above applies.

With pagination

Fixed header and pagination work together without any extra configuration. The scroll height only constrains the table body rows. The pagination bar sits below the responsive wrapper and is always fully visible.

<DataTable
  columns={columns}
  data={data}
  fixedHeader
  fixedHeaderScrollHeight="400px"
  pagination
  paginationPerPage={20}
/>;

With selection

The checkbox column header scrolls with all other headers and stays fixed. The select-all checkbox remains accessible at the top of the scrollable area.

<DataTable columns={columns} data={data} fixedHeader fixedHeaderScrollHeight="350px" selectableRows />;

Tracking scroll position with onScroll

The onScroll prop fires on every scroll event inside the table body. It receives a standard React.UIEvent<HTMLDivElement> so you can read scrollTop,scrollLeft, or any other scroll geometry from event.target.

const [scrollTop, setScrollTop] = useState(0);

<DataTable
  columns={columns}
  data={data}
  fixedHeader
  fixedHeaderScrollHeight="300px"
  onScroll={e => setScrollTop(Math.round((e.target as HTMLDivElement).scrollTop))}
/>;

Prop reference

See it combined with other features in the Audit log viewer recipe.