Table
Styled data table with header, body, and footer sections. Install Table from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
1 storyView componentData Table
Enhanced data table with sorting, filtering, selection, and pagination controls. Install Data Table from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Data Table is a batteries-included React table built on TanStack Table. Reach for it when a plain table is not enough and you need sorting, a global search box, per-column faceted filters, row selection with checkboxes, and client-side pagination out of the box. You pass column definitions and data; it manages sorting, filter, selection, and page state internally. Toggles let you turn filtering, pagination, or selection off per instance.
DataPreview
Switch between light and dark to inspect the embedded Storybook preview.
Enhanced data table with sorting, filtering, selection, and pagination controls. Part of the data family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0, @tanstack/react-table | Browser rendering, DOM events, and ARIA semantics |
| Native | — | Not available |
Installation
Add Data Table to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/data-table.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Data Table?
- Data Table is a React data grid built on TanStack Table that adds sorting, global search, column filters, row selection, and pagination on top of the base Table primitives.
- How do I add Data Table?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/data-table.json` to install it into your project via the shadcn CLI.
- How is Data Table different from Table?
- Table is a set of unstyled markup primitives you wire up yourself, while Data Table is a ready-made component that manages sorting, filtering, selection, and pagination state internally from column and data props.