Data Table Pro documentation
Ship dense data workflows without rebuilding the grid.
Data Table Pro by Vibebox is a source-delivered, typed React table with row and column virtualization, editing, selection, import/export, and local or remote-windowed data modes.
Requirements
Before you install
Use React 19, a modern bundler such as Next.js or Vite, and a project that can run the shadcn CLI. Data Table Pro uses browser workers and needs a measurable parent width and a non-zero table height.
Framework roadmap
React today. More frameworks next.
Data Table Pro is a React component available today in any React application. Next.js and Vite are verified React hosts—not separate framework adapters. Planned adapters are not currently installable.
ReactAvailable today · React component
Next.jsSupported today · React host
ViteSupported today · React host
VuePlanned adapter · not currently installable
Web ComponentsPlanned adapter · not currently installable
Paid source delivery
Purchase, then generate a one-use install link
- Sign in to your Vibebox account.
- Complete a paid purchase of Data Table Pro.
- Open account/purchases.
- Select Generate Install link for the paid purchase.
- Run the generated command in your project.
npx shadcn@latest add "https://YOUR_DOMAIN.com/r/data-table-pro.json?token=ONE_USE_TOKEN"First table
Import the component
The registry copies source into your application, and the component loads its colocated stylesheet automatically. Define columns against your row type and render the table.
import { DataTable, type ColumnSetting } from "@/components/vibebox/data-table-pro";
type Product = { name: string; stock: number };
const columns: ColumnSetting<Product>[] = [
{ id: "name", title: "Product", width: 220 },
{ id: "stock", title: "Stock", align: "right" },
];
export function Inventory({ rows }: { rows: Product[] }) {
return <DataTable dataSource={rows} columnSettings={columns} />;
}