Styling the Datatable

The Datatable component offers flexibility in visual customization through the classNames prop. This prop allows you to apply custom classes (e.g., TailwindCSS or your own styles) to specific parts of the table structure—headers, rows, cells, and more—without needing to override internal logic or markup.

This makes it easy to integrate the table into your design system or match your application's theme.

How Styling Works

You can pass a classNames object to the Datatable component, where each key corresponds to a specific part of the table. The values should be strings containing one or more CSS class names.

<Datatable
  classNames={{
    wrapper: "border rounded-md",
    headers: "bg-muted text-sm font-medium",
    header: "p-3 uppercase tracking-wide",
    body: "divide-y",
    row: "hover:bg-accent",
    cell: "p-3 text-sm",
    actionsCell: "flex gap-2 justify-end",
    actionsHeader: "text-right px-4",
    resizehandle: "w-1 bg-gray-200 hover:bg-gray-400 cursor-col-resize"
  }}
/>

Available Styling Keys

Example Use Case

Here's a practical example using TailwindCSS for a minimal and clean table design:

<Datatable
  classNames={{
    wrapper: "rounded-lg border border-gray-200",
    headers: "bg-gray-50",
    header: "px-4 py-2 text-gray-700 font-semibold text-xs uppercase",
    body: "bg-white",
    row: "hover:bg-gray-100",
    cell: "px-4 py-2 text-sm text-gray-800",
    actionsCell: "px-4 py-2 flex gap-2 justify-end",
    actionsHeader: "px-4 py-2 text-right text-xs font-bold",
    resizehandle: "w-1 bg-blue-200 hover:bg-blue-400 cursor-col-resize"
  }}
/>

Notes

• All keys are optional—you can supply only the ones you wish to customize.
• This design is compatible with utility-first CSS libraries like TailwindCSS, but you can also use regular CSS class names.
• If you require deeper customization, consider overriding the component or wrapping it with your own logic.