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.
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 | — |
sortDescending | IconComponent | ArrowDown | — |
sortUnsorted | IconComponent | ChevronsUpDown | — |
columnActions | IconComponent | MoreVertical | — |
filter | IconComponent | Filter | — |
filterOff | IconComponent | FilterX | — |
advancedFilter | IconComponent | ListFilter | Advanced filter panel toggle. |
clearAll | IconComponent | RotateCcw | Clear-sort / show-all reset action. |
hide | IconComponent | EyeOff | — |
pin | IconComponent | Pin | — |
pinnedRow | IconComponent | Pin | — |
unpin | IconComponent | PinOff | — |
group | IconComponent | Group | — |
columnVisibility | IconComponent | Columns3 | — |
density | IconComponent | Rows3 | — |
fullscreenEnter | IconComponent | Maximize2 | — |
fullscreenExit | IconComponent | Minimize2 | — |
search | IconComponent | Search | — |
clear | IconComponent | X | — |
pageFirst | IconComponent | ChevronsLeft | — |
pagePrev | IconComponent | ChevronLeft | — |
pageNext | IconComponent | ChevronRight | — |
pageLast | IconComponent | ChevronsRight | — |
expanded | IconComponent | ChevronDown | — |
collapsed | IconComponent | ChevronRight | — |
dragHandle | IconComponent | GripVertical | — |
edit | IconComponent | Pencil | — |
save | IconComponent | Check | — |
cancel | IconComponent | X | — |
calendar | IconComponent | Calendar | — |