LifeDS

Component

Data Table

Powerful table built on @tanstack/react-table and the Table primitive. Supports sorting, filtering, pagination, row selection and column visibility.

columnsColumnDef<TData>[] — sorting, cell renderers, hiding
filterColumnIdenables the search input for a given column
DataTableColumnHeadersortable column header with direction icon
row selectionCheckbox in select column + header select-all

Payments — sorting, filtering, pagination, selection & row actions

ken99@example.comsuccess
$316.40
abe45@example.compending
$242.00
monserrat44@example.comprocessing
$837.50
silas22@example.comsuccess
$874.00
carmella@example.comfailed
$121.00
diego.martinez@example.comsuccess
$500.00
priya.k@example.compending
$63.25

7 row(s) total.

Page 1 of 1

Tokens used

10 semantic tokens consumed by this component.

--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder
--inputInput
bg-inputborder-input
--ringRing
ring-ringring
--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--secondarySecondary
bg-secondarytext-secondaryborder-secondary
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive