gridcn1.2.2
ExamplesColumns & Pinning

Custom headers

ReactNode headers with live sort-state icons (string headers still work).

ColumnDef.header accepts a component, not just a string. The header subscribes to live grid state and re-renders when it changes. In sort header-click mode a custom header owns its own display: the built-in sort arrow is only appended to string headers.

Click the Name or Score header to sort: a minus means unsorted, an up icon ascending, a down icon descending.
Name
Email
Score
Silent Tiger
user0@example.com
4
Quick Lion
user1@example.com
89
Swift Wolf
user2@example.com
80
Eager Lion
user3@example.com
51
Eager Tiger
user4@example.com
83
Silent Wolf
user5@example.com
15
Swift Lion
user6@example.com
62
Eager Lion
user7@example.com
42
Eager Eagle
user8@example.com
35
Bold Tiger
user9@example.com
52
pnpm dlx shadcn@latest add @gridcn/data-grid-custom-headers-demo

What's in the demo

  • header: <span>ā€¦</span>: ReactNode headers on Name and Score
  • useDataGridSortState(): the live sort spec list. The icon follows unsorted ā†’ asc ā†’ desc
  • headerText: "Name": the accessible/aria text when header is not a plain string
  • Email stays a string header and gets the built-in sort arrow appended

Behavior reference

  • Custom headers: when to use a component header and the headerText contract
  • Pinning: the built-in header menu on string headers

Filtering

Quick search, per-column filters, faceted isAnyOf and isNoneOf, the header filter, and isBetween ranges.

Column layout

Persist widths, order, pins, and hidden columns (defaultColumnLayout in, onColumnLayoutChange out).

On this page

What's in the demoBehavior referenceRelated