Click any column header to cycle through ascending, descending, and unsorted states.
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design Liam Okonkwo Engineering Yuki Tanaka Product Elena Vasquez Engineering
Copy import { DataTable, DataTableColumnHeader } from '@mihcm/ui/DataTable' ;
const columns = [ { accessorKey: 'name' , header : ({ column }) => < DataTableColumnHeader column = { column } title = "Name" />, }, { accessorKey: 'department' , header : ({ column }) => < DataTableColumnHeader column = { column } title = "Department" />, }, ];
< DataTable columns = { columns } data = { employees } sortable /> Hold Shift and click additional column headers to sort by multiple columns simultaneously.
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design Liam Okonkwo Engineering Yuki Tanaka Product Elena Vasquez Engineering
Copy < DataTable columns = { columns } data = { employees } sortable multiSort /> Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design
Copy < DataTable columns = { columns } data = { employees } searchable searchPlaceholder = "Search employees..." paginated pageSize = { 5 } pageSizeOptions = { [ 5 , 10 , 20 ] } />
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design Liam Okonkwo Engineering Yuki Tanaka Product Elena Vasquez Engineering
Copy const [ selection , setSelection ] = useState ({});
< DataTable columns = { columns } data = { employees } selectable onRowSelectionChange = { setSelection } />
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design Liam Okonkwo Engineering Yuki Tanaka Product Elena Vasquez Engineering
Copy < DataTable columns = { columns } data = { employees } expandable renderSubComponent = { ({ row }) => ( < div className = "p-4" > < p >Email: { row.original.email } </ p > < p >Salary: $ { row.original.salary. toLocaleString () } </ p > </ div > ) } /> Enable columnFilterable for individual filter inputs in a dedicated filter row below the column headers. Text columns get a search input; number columns get a range filter when combined with faceted.
Copy < DataTable columns = { columns } data = { employees } columnFilterable /> Combines columnFilterable with faceted to show unique-value dropdowns for text columns and min/max range inputs for number columns.
Copy < DataTable columns = { columns } data = { employees } columnFilterable faceted /> Drag column borders to resize. Column widths persist during the session.
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design Liam Okonkwo Engineering Yuki Tanaka Product Elena Vasquez Engineering
Copy < DataTable columns = { columns } data = { employees } resizable /> Group rows by a column value. Grouped rows show an expand/collapse toggle with the group label and row count.
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product James Rivera Engineering Priya Patel Design Liam Okonkwo Engineering Yuki Tanaka Product Elena Vasquez Engineering
Copy < DataTable columns = { columns } data = { employees } groupable /> DataTable inherits all 5 visual variants from the Table primitive.
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product
Aisha Kumari Engineering Malik Chen Design Sara Johansson Product
Copy < DataTable columns = { columns } data = { employees } variant = "bordered" /> < DataTable columns = { columns } data = { employees } variant = "striped" /> < DataTable columns = { columns } data = { employees } variant = "minimal" /> < DataTable columns = { columns } data = { employees } variant = "card" /> All features enabled at once. Use wide with dense toolbars, selection, column filters, and resizing so the table keeps readable columns and scrolls horizontally when needed.
Copy < DataTable columns = { columns } data = { employees } searchable sortable multiSort paginated pageSize = { 5 } selectable columnVisibility columnFilterable faceted resizable wide expandable variant = "card" renderSubComponent = { ({ row }) => ( < div className = "p-4 bg-muted/30" > { /* Employee detail card */ } </ div > ) } /> 