A fast and extensible React data grid, with filtering, sorting, aggregation, and more.
The Data Grid is a React component built to provide a drop-in solution for displaying data-heavy tables with features like filtering, sorting, pagination, and more. Our execution is inspired by the ideaology of MUI's DataGrid component with the performance enhancements of TanStack Table.
Built for modern React and with a foundation of signals, the Data Grid is designed to provide a seamless and efficient experience for developers and users alike. With its powerful features and intuitive API, the Data Grid is the perfect solution for any data-heavy application.
The DataGrid component requires the following dependencies to be installed in
your local project:
Once you have installed the Data Grid, update the include array in your panda.config.ts file:
The Data Grid uses the Cerberus React library internally to ensure consistency. However, if your project does not use the Cerberus React library, you will need to export the Data Grid differently:
This will provide a Data Grid wrapped in the Cerberus Context Provider which provides the necessary context for the Data Grid to function correctly.
The Data Grid is built with TypeScript and provides type definitions for all props and methods. This ensures that your code is type-safe and helps catch errors early.
The Data Grid is built for modern React and is designed to work seamlessly with server-side
rendering frameworks like Next.js. Each example will display use client directives
when client-side rendering is required.
npm install @cerberus/data-grid@npm:@cerberus-design/data-gridpnpm add @cerberus/data-grid@npm:@cerberus-design/data-griddeno add npm:@cerberus/data-grid@npm:@cerberus-design/data-gridbun add @cerberus/data-grid@npm:@cerberus-design/data-grid