Markdown Open in ChatGPT Open in Claude Edit on GitHub

Icons

Every glyph the table renders is a named slot. Override any subset via useDataTable({ icons }) (or app-wide via DataTableConfigProvider) to swap icon libraries or individual icons. Each value is an IconComponent — any component accepting a className.

tsx

import { ArrowUp, ArrowDown, MoreVertical } from "lucide-react"

const table = useDataTable({
  data,
  columns,
  icons: {
    sortAscending: ArrowUp,
    sortDescending: ArrowDown,
    columnActions: MoreVertical,
  },
})

See the Custom icons guide for swapping the whole set. The complete slot list and Remix Icon defaults:

Slot	Type	Default	Description
`sortAscending`#	`IconComponent`	`ArrowUp`	Header sort indicator: sorted ascending.
`sortDescending`#	`IconComponent`	`ArrowDown`	Header sort indicator: sorted descending.
`sortUnsorted`#	`IconComponent`	`ChevronsUpDown`	Header sort indicator: sortable but not sorted.
`columnActions`#	`IconComponent`	`MoreVertical`	Column-actions menu trigger in each header.
`filter`#	`IconComponent`	`Filter`	Filter toggle and filter menu items.
`filterOff`#	`IconComponent`	`FilterX`	Hide-filters state of the filter toggle and clear-filter items.
`advancedFilter`#	`IconComponent`	`ListFilter`	Advanced filter panel toggle.
`clearAll`#	`IconComponent`	`RotateCcw`	Show-all-columns reset action in the column menu.
`clearSort`#	`IconComponent`	`ListX`	Clear-sort item in the column menu. When not overridden but `clearAll` is, it uses your `clearAll`.
`clearFilter`#	`IconComponent`	`FilterX`	Clear-filter item in the column menu. When not overridden but `filterOff` is, it uses your `filterOff`.
`hide`#	`IconComponent`	`EyeOff`	Hide-column menu item.
`pin`#	`IconComponent`	`Pin`	Generic pin glyph. Any of `pinLeft`, `pinRight`, `pinTop` and `pinBottom` you don't override falls back to this one, unrotated.
`pinLeft`#	`IconComponent`	`PinLeft`	Pin-column-to-the-left menu item. The default needle points left.
`pinRight`#	`IconComponent`	`PinRight`	Pin-column-to-the-right menu item. The default needle points right.
`pinTop`#	`IconComponent`	`Pin`	Pin-row-to-the-top button while the row is unpinned. The default is the plain pin.
`pinBottom`#	`IconComponent`	`Pin`	Pin-row-to-the-bottom button while the row is unpinned (used when `rowPinningDisplayMode` is `"bottom"`). The default is the plain pin.
`pinnedRow`#	`IconComponent`	`Pin`	Shown on a pinned row's pin button.
`unpin`#	`IconComponent`	`PinOff`	Unpin column and unpin row actions.
`group`#	`IconComponent`	`Group`	Group-by menu item and grouping chips.
`columnVisibility`#	`IconComponent`	`Columns3`	Column-visibility (show/hide columns) toolbar button.
`density`#	`IconComponent`	`Rows3`	Density toggle toolbar button.
`fullscreenEnter`#	`IconComponent`	`Maximize2`	Full-screen toggle while not full screen.
`fullscreenExit`#	`IconComponent`	`Minimize2`	Full-screen toggle while full screen.
`search`#	`IconComponent`	`Search`	Global search button and search-mode menu.
`clear`#	`IconComponent`	`X`	Clear buttons (search box, filter inputs, grouping chips).
`pageFirst`#	`IconComponent`	`ChevronsLeft`	Pagination: first page. Mirrored in right-to-left tables.
`pagePrev`#	`IconComponent`	`ChevronLeft`	Pagination: previous page. Mirrored in right-to-left tables.
`pageNext`#	`IconComponent`	`ChevronRight`	Pagination: next page. Mirrored in right-to-left tables.
`pageLast`#	`IconComponent`	`ChevronsRight`	Pagination: last page. Mirrored in right-to-left tables.
`expanded`#	`IconComponent`	`ChevronDown`	Expand control of an expanded row or group.
`collapsed`#	`IconComponent`	`ChevronRight`	Expand control of a collapsed row or group. Mirrored in right-to-left tables.
`dragHandle`#	`IconComponent`	`GripVertical`	Drag grip for column and row reordering.
`edit`#	`IconComponent`	`Pencil`	Edit row / edit cell action.
`copy`#	`IconComponent`	`Copy`	Copy action in the cell menu.
`save`#	`IconComponent`	`Check`	Save action while editing a row.
`cancel`#	`IconComponent`	`X`	Cancel action while editing a row.
`calendar`#	`IconComponent`	`Calendar`	Date filter field trigger.

← PreviousLocalizationEvery user-facing string flows through a localization table.