Data feedback
Feature-rich table with sorting, filtering, and pagination.
pnpm add @quinkit/ui @tanstack/react-tableimport { DataTable } from "@quinkit/ui";Required packages
Powers DataTable sorting, filtering, and pagination. Add these packages before using this component:
@quinkit/ui@tanstack/react-tableInstall command is shown above. Without the peer package, imports will fail at build time.
Live previews · code · themes · viewport · dark mode
Click a column header to sort ascending, descending, or clear.
| Status | |||
|---|---|---|---|
| INV-1001 | Acme Inc | $1,240.00 | paid |
| INV-1002 | Globex | $890.00 | pending |
| INV-1003 | Initech | $2,310.00 | overdue |
| INV-1004 | Umbrella | $540.00 | paid |
| INV-1005 | Soylent | $1,720.00 | pending |
| INV-1006 | Hooli | $3,980.00 | paid |
Type to filter rows across all visible columns.
| Customer | Status | |
|---|---|---|
| Acme Inc | billing@acme.com | paid |
| Globex | ap@globex.io | pending |
| Initech | finance@initech.com | overdue |
| Umbrella | pay@umbrella.co | paid |
| Soylent | accounts@soylent.com | pending |
| Hooli | billing@hooli.xyz | paid |
| Pied Piper | ar@piedpiper.com | overdue |
| Stark Industries | pay@stark.com | paid |
| Wayne Enterprises | ap@wayne.com | pending |
| Wonka | sweets@wonka.com | paid |
Page through large datasets with previous and next controls.
| Invoice | Customer | Amount |
|---|---|---|
| INV-1001 | Acme Inc | $1,240.00 |
| INV-1002 | Globex | $890.00 |
| INV-1003 | Initech | $2,310.00 |
| INV-1004 | Umbrella | $540.00 |
| INV-1005 | Soylent | $1,720.00 |
| INV-1006 | Hooli | $3,980.00 |
| INV-1007 | Pied Piper | $460.00 |
| INV-1008 | Stark Industries | $5,230.00 |
| INV-1009 | Wayne Enterprises | $1,980.00 |
| INV-1010 | Wonka | $720.00 |
Use Previous / Next to page through 12 invoices (10 per page).
Show or hide columns on demand.
| Invoice | Customer | Amount | Status |
|---|---|---|---|
| INV-1001 | Acme Inc | $1,240.00 | paid |
| INV-1002 | Globex | $890.00 | pending |
| INV-1003 | Initech | $2,310.00 | overdue |
| INV-1004 | Umbrella | $540.00 | paid |
| INV-1005 | Soylent | $1,720.00 | pending |
| INV-1006 | Hooli | $3,980.00 | paid |
A per-row dropdown menu for contextual actions.
| Invoice | Customer | Amount | Status | |
|---|---|---|---|---|
| INV-1001 | Acme Inc | $1,240.00 | paid | |
| INV-1002 | Globex | $890.00 | pending | |
| INV-1003 | Initech | $2,310.00 | overdue | |
| INV-1004 | Umbrella | $540.00 | paid | |
| INV-1005 | Soylent | $1,720.00 | pending | |
| INV-1006 | Hooli | $3,980.00 | paid |
Switch between populated, loading, and empty results.
| Invoice | Customer | Status |
|---|---|---|
| INV-1001 | Acme Inc | paid |
| INV-1002 | Globex | pending |
| INV-1003 | Initech | overdue |
| INV-1004 | Umbrella | paid |
| INV-1005 | Soylent | pending |
DataTable is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.
pnpm add @quinkit/ui @tanstack/react-table@tanstack/react-table is a required peer dependency for DataTable.
bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.DataTable adheres to WAI-ARIA design patterns for accessible web components.
Keyboard Navigation
Tab / Shift + Tab — Focuses control and moves between interactive elements.Space / Enter — Triggers action or toggles selection.Escape — Closes open popovers, overlays, or dropdown menus.ARIA Standards
aria-* attributes.ring-ring) visible in both light & dark mode.Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.
npx shadcn@latest add https://quinkit-ui.vercel.app/r/data-table.json