Part props (slotProps)

Every part of the table — the scroll surface, rows, cells, toolbars, the search box, edit fields and more — accepts extra props through the slotProps option. Use it to add classes, styles, data-* attributes, ARIA attributes or event handlers without copying the component.

const table = useDataTable({
  data,
  columns,
  slotProps: {
    surface: { className: "max-h-[600px]" },
    bodyRow: ({ row }) => ({
      className: row.original.overdue ? "bg-destructive/10" : undefined,
    }),
    bodyCell: { className: "tabular-nums" },
    searchInput: { placeholder: "Search people…" },
  },
})

Each part takes either an object of props, or a function that receives the part's context (always including table) and returns props.

How props combine

Your props are merged with the table's own, so you add to the built-in behavior rather than replacing it:

• className — combined with the table's classes (conflicting Tailwind classes resolve in your favor).
• style — merged; your keys win.
• Event handlers (onClick, onKeyDown, …) — both run, the table's first.
• ref — both refs receive the element.
• Anything else — yours replaces the table's.

Column-level parts

A column can target its own cells through meta.slotProps. It supports headCell, filterCell, bodyCell, footerCell and editField, and is applied after the table-level props:

const columns: DataTableColumnDef<Person>[] = [
  {
    accessorKey: "salary",
    header: "Salary",
    meta: {
      slotProps: {
        bodyCell: ({ row }) => ({
          className:
            row.original.salary > 100_000 ? "font-semibold" : undefined,
        }),
        editField: { inputMode: "numeric", min: 0 },
      },
    },
  },
]

Parts

Related