Data 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
1 storyView componentTable
Styled data table with header, body, and footer sections. Install Table from the VLLNT UI registry with the shadcn CLI.
Supported platforms:Web
What it is and when to use
Table is a set of unstyled, composable primitives — Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption — that render semantic HTML table markup with consistent styling. Reach for it when you want full control over rows and cells and only need the visual layer, not built-in sorting or pagination. It wraps the table in a horizontally scrollable container and adds hover and selected-row styles you compose yourself.
DataPreview
Switch between light and dark to inspect the embedded Storybook preview.
Styled data table with header, body, and footer sections. 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 | Browser rendering, DOM events, and ARIA semantics |
| Native | — | Not available |
Installation
Add 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/table.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Table?
- Table is a collection of composable React primitives — Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, and TableCaption — for building styled, semantic HTML tables.
- How do I add Table?
- Run `pnpm dlx shadcn@latest add https://ui.vllnt.com/r/table.json` to install it into your project via the shadcn CLI.
- Does Table include sorting or pagination?
- No. Table only renders the styled markup and a scrollable container; for built-in sorting, filtering, selection, and pagination use the Data Table component instead.