Data Table - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/data-table

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { DataTable } from "@/components/ui/data-table"

<DataTable columns={columns} data={data} />

Examples

Budget Table

Production budget table.

API Reference

Prop	Type	Default	Description
`columns`*	`ColumnDef<T>[]`	—	Table column definitions.
`data`*	`T[]`	—	Table data array.

	Role	Department		Status
Sarah Chen	Director of Photography	Camera	$850.00	confirmed
Mike Johnson	Gaffer	Electric	$650.00	confirmed
Emily Davis	Key Grip	Grip	$600.00	pending
James Wilson	Sound Mixer	Sound	$750.00	confirmed
Lisa Park	1st AC	Camera	$550.00	confirmed
David Brown	Best Boy Electric	Electric	$500.00	pending
Anna Martinez	Script Supervisor	Production	$450.00	confirmed
Chris Taylor	2nd AC	Camera	$400.00	declined

0 of 8 row(s) selected.