Loading...
Loading...
> Sortable table column header with visual indicators for @tanstack/react-table integration.
1import { DataTableColumnHeader } from "@/components/ui/data-table-header"
| Project Alpha | Active | $12,500 |
| Project Beta | Pending | $8,300 |
| Project Gamma | Completed | $15,750 |
| Project Delta | Active | $9,200 |
1import { DataTableColumnHeader } from "@/components/ui/data-table-header";2import { useReactTable, ColumnDef } from "@tanstack/react-table";34const columns: ColumnDef<Data>[] = [5 {6 accessorKey: "name",7 header: ({ column }) => (8 <DataTableColumnHeader column={column} title="Project Name" />9 ),10 },11];1213const table = useReactTable({14 data,15 columns,16 getCoreRowModel: getCoreRowModel(),17 getSortedRowModel: getSortedRowModel(),18});
1<DataTableColumnHeader2 column={column}3 title="Column Name"4/>
1// Default state shows unsorted icon2<DataTableColumnHeader column={column} title="Project Name" />
1// When column.getIsSorted() === "asc"2// ArrowUp icon is displayed
1// When column.getIsSorted() === "desc"2// ArrowDown icon is displayed
1// When column.getCanSort() === false2// Renders without button or icons
| Prop | Type | Default | Description |
|---|---|---|---|
| column | Column<TData, TValue> | - | TanStack Table column instance |
| title | string | - | Display text for the column header |
| className | string | - | Additional CSS classes for the header container |