Production-grade components for shadcn/ui
Shadcn-compatible React components with practical defaults and focused APIs. Install them with the CLI and own every line of source.
npx shadcn@latest add @emstein-ui/tableEverything a data table needs
Built on TanStack Table and TanStack Virtual, with the details handled for you.
Virtualized rows
Thousands of rows stay smooth because only the visible ones are rendered, with page or container scrolling.
Sorting
Click any header to sort. Choose the starting column, or start unsorted.
Column resizing
Drag a header edge to resize. Columns trade width with their neighbor, so layouts hold.
Row selection
An opt-in checkbox column with controlled or uncontrolled state, keyed by your row ids.
Smart column widths
Width presets for each column type, with extra space shared by a grow factor.
Footer summaries
Static footer content, or totals computed from the sorted rows.
One command. Your code.
The shadcn CLI writes the component into your project along with its dependencies. From there it's yours: typed, readable, and styled with your theme tokens.
- Typed column definitions
- Matches your shadcn/ui theme, including dark mode
- Drop down to table primitives whenever you need to
npx shadcn@latest add @emstein-ui/tableimport { Table, type EmsteinUITableColumn } from "@/components/emstein-ui/table"
const columns: EmsteinUITableColumn<Invoice>[] = [
{ key: "customer", label: "Customer", type: "longText" },
{ key: "status", label: "Status", type: "status" },
{ key: "amount", label: "Amount", type: "currency", align: "right" },
]
export function Invoices({ invoices }: { invoices: Invoice[] }) {
return (
<Table
data={invoices}
columns={columns}
getRowId={(invoice) => invoice.id}
selection={{}}
/>
)
}Start building with Emstein UI
Read the docs, try the live examples, and add your first component in under a minute.