Usage

The Datatable component is a powerful abstraction over TanStack Table, designed to render data views based on backend configurations while offering flexibility for UI customization, interactions, and actions.

Basic Example

The simplest way to use the Datatable is by passing a viewId. This ID links the component to a predefined configuration (columns, filters, etc.) typically managed on the backend.

import { Datatable } from "@your-scope/your-datatable-package";
 
export default function UsersTable() {
  return <Datatable viewId="users" />;
}

Enabling Selection

You can enable row selection by passing the selectedItems array and the onSelect callback. This allows external control over selected rows:

const [selected, setSelected] = useState<string[]>([]);
 
<Datatable
  viewId="projects"
  selectedItems={selected}
  onSelect={(rows) => setSelected(rows)}
/>;

Adding Row Actions

To add contextual actions for each row (like Edit, Delete, View), use the rowActions prop. This function receives the row object and returns a list of actions:

<Datatable
  viewId="users"
  rowActions={(row) => [
    { label: "Edit", onClick: () => editUser(row.original) },
    { label: "Delete", onClick: () => deleteUser(row.original.id) },
  ]}
/>

Each action supports label, icon, and onClick.

Styling the Table

The classNames prop lets you override styles for different parts of the table such as the table, headers, rows, and cells.

<Datatable
  viewId="tasks"
  classNames={{
    table: "border-separate border-spacing-y-2",
    header: "bg-muted text-left text-sm",
    row: "hover:bg-accent transition-colors",
  }}
/>

This enables full control over the table’s appearance using Tailwind classes (or any CSS class system).

Disable Column Resizing

If you want a simpler layout without column resizing, just set disableResizing to true:

<Datatable viewId="events" disableResizing />

That's it for getting started!
Next, check out the Props Reference or explore how to customize Styling further.