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 and its styles
The registry copies source into your application. Keep the generated stylesheet import in a global entry or alongside the client component, then define columns against your row type.
import { DataTable, type ColumnSetting } from "@/components/vibebox/data-table-pro";
import "@/components/vibebox/data-table-pro/datatable.css";
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} />;
}