Data Table Column Header

A @tanstack/react-table column's sort-and-hide menu, taking the column directly rather than a shared table instance.

	Size

tsx

1
2
3'use client';

import { getCoreRowModel, getSortedRowModel, useReactTable, type ColumnDef } from '@tanstack/react-table';

Installation

bash

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/data-table-column-header.json

Usage

tsx

import {
  DataTableColumnHeader,
  DataTableColumnHeaderContent,
  DataTableColumnHeaderHide,
  DataTableColumnHeaderSortAscending,
  DataTableColumnHeaderSortDescending,
  DataTableColumnHeaderTrigger,
} from '@/components/data-display/data-table-column-header';

It takes the column directly, since column defs live outside the render tree, as a column's header inside Data Table:

tsx

{
  accessorKey: 'name',
  header: ({ column }) => (
    <DataTableColumnHeader column={column}>
      <DataTableColumnHeaderTrigger>Name</DataTableColumnHeaderTrigger>
      <DataTableColumnHeaderContent>
        <DataTableColumnHeaderSortAscending />
        <DataTableColumnHeaderSortDescending />
        <DataTableColumnHeaderHide />
      </DataTableColumnHeaderContent>
    </DataTableColumnHeader>
  ),
}

A column that neither sorts nor hides takes its title as plain children, with no menu.

Composition

text

DataTableColumnHeader
|-- DataTableColumnHeaderTrigger
`-- DataTableColumnHeaderContent
    |-- DataTableColumnHeaderSortAscending
    |-- DataTableColumnHeaderSortDescending
    |-- DropdownMenuSeparator
    `-- DataTableColumnHeaderHide

API reference

DataTableColumnHeader

Renders a div and takes every prop a div takes, plus:

Prop	Type	Default
`column`	`Column<TData, TValue>`	required

Hands the column to its parts over context, which compose the column menu. It sets data-slot="data-table-column-header".

Renders shadcn's DropdownMenuTrigger and takes every prop it takes. The ghost button that opens the column menu: children are the column's title, followed by an animated icon for the column's sort direction that plays while the button is hovered or focused. It sets data-slot="data-table-column-header-trigger".

DataTableColumnHeaderContent

Renders shadcn's DropdownMenuContent and takes every prop it takes. It defaults align to start. It sets data-slot="data-table-column-header-content".

DataTableColumnHeaderSortAscending

Renders shadcn's DropdownMenuItem and takes every prop it takes. Sorts the header's column ascending; children default to "Asc" and override the copy. A caller's onClick runs first, and calling event.preventDefault() in it skips the sort. It sets data-slot="data-table-column-header-sort-ascending".

DataTableColumnHeaderSortDescending

Renders shadcn's DropdownMenuItem and takes every prop it takes. Sorts the header's column descending; children default to "Desc" and override the copy. A caller's onClick runs first, and calling event.preventDefault() in it skips the sort. It sets data-slot="data-table-column-header-sort-descending".

DataTableColumnHeaderHide

Renders shadcn's DropdownMenuItem and takes every prop it takes. Hides the header's column; children default to "Hide" and override the copy. A caller's onClick runs first, and calling event.preventDefault() in it skips the hide. It sets data-slot="data-table-column-header-hide".