UX DataTables

Type to search columns, filters, options, and extensions.

↑↓ to navigate · Enter to open · Esc to close

Documentation

Fixed Header Extension

Keep the table header (and optionally footer) pinned while vertically scrolling the page

When To Use

Use Fixed Header for long tables where column headers must stay visible as the page scrolls, without relying on the DataTables core scrollY scrolling feature.

Minimal Example

use Pentiminax\UX\DataTables\Model\Extensions\FixedHeaderExtension;

$dataTable->addExtension(new FixedHeaderExtension());

Advanced Example

$dataTable->addExtension(
    new FixedHeaderExtension(
        header: true,
        footer: true,
        headerOffset: 56,
        footerOffset: 0,
    )
);

Set headerOffset when another fixed element, such as a sticky navigation bar, already occupies space at the top of the page, so the fixed header docks below it instead of underneath it.

Behavior

FixedHeader builds its floating header by cloning the live <table> element and appending the clone to <body>, reparenting the real <thead> into it while scrolling. The Stimulus controller recognizes and ignores this clone automatically (it carries the aria-hidden="true" marker FixedHeader sets on it), so it never tries to initialize a second DataTable on it. No application code is needed to handle this.

Frequent Pitfalls

  • Combining Fixed Header with the core scrollY / scrollX scrolling feature or with the Scroller extension: all three manage header positioning and are not intended to be used together.
  • Forgetting headerOffset when a sticky site header overlaps the fixed table header.