DataTable

A serious data grid built on TanStack Table's headless sorting/pagination/selection logic, rendered entirely through the library's own Table primitives — so it looks and themes exactly like every other component, not like an embedded third-party widget. TanStack never appears in the import surface; column definitions are typed as DataTableColumn<T>, Labanaat's own name for the shape.

const people = [
{ id: "1", name: "Ada Lovelace", role: "Owner", status: "Active" },
{ id: "2", name: "Grace Hopper", role: "Admin", status: "Active" },
{ id: "3", name: "Alan Turing", role: "Member", status: "Invited" },
{ id: "4", name: "Katherine Johnson", role: "Member", status: "Active" },
{ id: "5", name: "Margaret Hamilton", role: "Admin", status: "Active" },
];

const columns = [
{
  accessorKey: "name",
  header: ({ column }) => <DataTableColumnHeader title="Name" column={column} />,
},
{ accessorKey: "role", header: "Role" },
{
  accessorKey: "status",
  header: "Status",
  cell: (info) => (
    <Badge variant={info.getValue() === "Active" ? "success" : "warning"}>{info.getValue()}</Badge>
  ),
},
];

function Demo() {
return <DataTable columns={columns} data={people} pageSize={3} />;
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Loading and empty states

<DataTable
columns={[{ accessorKey: "name", header: "Name" }, { accessorKey: "role", header: "Role" }]}
data={[]}
isLoading
/>

Editable — change the code above and the preview updates live.

<DataTable
columns={[{ accessorKey: "name", header: "Name" }, { accessorKey: "role", header: "Role" }]}
data={[]}
emptyTitle="No members yet"
emptyDescription="Invite your first teammate to get started."
/>

Editable — change the code above and the preview updates live.

Row selection

const people = [
{ id: "1", name: "Ada Lovelace", role: "Owner" },
{ id: "2", name: "Grace Hopper", role: "Admin" },
];
const columns = [
{ accessorKey: "name", header: "Name" },
{ accessorKey: "role", header: "Role" },
];
function Demo() {
return <DataTable columns={columns} data={people} enableRowSelection />;
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Installation

import { DataTable, DataTableColumnHeader, DataTablePagination } from "@labanaat/ui/data-table";
import type { DataTableColumn } from "@labanaat/ui/data-table";

Props

Prop	Type	Default	Description
columns	DataTableColumn<T>[]	—	Column definitions — same shape as TanStack's ColumnDef, re-exported under Labanaat's own name
data	T[]	—	Row data
isLoading	boolean	false	Shows skeleton rows instead of data
emptyTitle / emptyDescription	string	—	Shown via EmptyState when data is empty
sorting / onSortingChange	DataTableSortingState	—	Controlled sorting; omit to manage internally
enableRowSelection	boolean	false	Adds a leading checkbox column
rowSelection / onRowSelectionChange	RowSelectionState	—	Controlled row selection; omit to manage internally
pageSize	number	—	Enables built-in client-side pagination at this page size