DataTable

Full-featured data table powered by TanStack Table v8, rendered with MiHCM Table primitives. Sorting, filtering, pagination, row selection, column visibility, expandable rows, column resizing, column/row pinning, grouping, and faceted filtering — all toggled via boolean props. Inherits the 5 visual variants from Table.

When to use

Interactive tabular data that needs sorting, filtering, or pagination (employee lists, invoices, audit logs).
Selectable rows for batch actions (delete, export, assign).
Drill-down views with expandable row details.
Complex data exploration — combine column filters, faceted values, grouping, and multi-sort.

When NOT to use

For simple read-only tables — use Table directly.
For key-value pairs — use a Card or definition list.
For layout grids — never use tables for page layout.

Import

import { DataTable, DataTableColumnHeader, createColumnHelper } from '@mihcm/ui/DataTable';
import type { ColumnDef, TableVariant } from '@mihcm/ui/DataTable';

Basic usage

const columns: ColumnDef<Employee>[] = [
  {
    accessorKey: 'name',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
  },
  {
    accessorKey: 'email',
    header: ({ column }) => <DataTableColumnHeader column={column} title="Email" />,
  },
];
 
<DataTable columns={columns} data={employees} />

Features

Prop	What it enables
`searchable`	Global search input above the table
`sortable`	Click-to-sort column headers (default: true)
`multiSort`	Hold Shift to sort by multiple columns
`paginated`	Pagination bar with page size selector
`selectable`	Checkbox column for row selection
`columnVisibility`	Column show/hide dropdown
`expandable`	Chevron to expand rows with `renderSubComponent`
`columnFilterable`	Per-column filter inputs below headers
`resizable`	Drag column edges to resize
`columnPinnable`	Pin columns left/right via `pinnedColumns`
`rowPinnable`	Pin rows top/bottom via `pinnedRows`
`groupable`	Group rows by column values
`faceted`	Unique-value dropdowns and min/max range filters (requires `columnFilterable`)
`wide`	Preserve natural column width and use horizontal overflow for dense datasets
`headerTone`	Semantic header color inherited from `Table`
`headerClassName`	Tokenized Tailwind classes applied to every header cell

Variants

DataTable inherits all 5 visual variants from the underlying Table primitive. Set variant on the root — all internal table elements adapt automatically.

Variant	Description
`default`	Subtle row separators, no outer border. Clean & modern.
`bordered`	Full grid with vertical cell dividers and outer border.
`striped`	Alternating row backgrounds, no row borders.
`minimal`	Header underline only, no row borders at all.
`card`	Outer border with rounded corners, subtle separators.

<DataTable columns={columns} data={employees} variant="striped" />

Large datasets and header styling

Use pagination and wide for enterprise datasets where squeezing every column would harm readability:

<DataTable
  columns={columns}
  data={employees}
  paginated
  pageSize={50}
  wide
  headerTone="primary"
  headerClassName="normal-case tracking-normal"
/>

When columnFilterable is enabled, DataTable renders filters in a dedicated second header row. This keeps sort labels, resize handles, and filter controls readable when dense features are combined:

<DataTable
  columns={columns}
  data={employees}
  searchable
  columnVisibility
  columnFilterable
  selectable
  resizable
  wide
  paginated
/>

For massive server-side datasets, keep sorting/filtering/pagination state in the app and pass the current page into data. Do not render thousands of rows without pagination or virtualization.

Column definitions

Use DataTableColumnHeader in your column header function to get sort indicators automatically:

{
  accessorKey: 'salary',
  header: ({ column }) => <DataTableColumnHeader column={column} title="Salary" />,
  cell: ({ row }) => `$${row.getValue('salary').toLocaleString()}`,
}

Composition

Define columns using TanStack Table's ColumnDef API. Use DataTableColumnHeader for built-in sort indicators.
Pass enableRowSelection for checkbox-based row selection.
The table includes built-in pagination, search, and column visibility toggles.
For server-side pagination, pass manualPagination and handle onPaginationChange.

Table — presentational table primitives (no interactivity).
Pagination — standalone pagination component.
Checkbox — used internally for row selection.
Input — used internally for search.