---
title: Data Grid Overview
description: A fast and extensible React data grid, with filtering, sorting, aggregation, and more.
package: 'data-grid'
---





## What is Data Grid?

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.

> **Note:** The Data Grid is a client component.

## Installation


```bash
npm install @cerberus/data-grid@npm:@cerberus-design/data-grid
```


### Dependency Requirements

The `DataGrid` component requires the following dependencies to be installed in
your local project:

- [`react`](https://react.dev/)
- [`react-dom`](https://react.dev/)
- [`@pandacss/dev`](https://panda-css.com/docs/overview/getting-started)
- [`@cerberus/panda-preset`](https://cerberus.digitalu.design/docs/get-started/installation)

> **Note:** The Data Grid utilizes the Cerberus ecosystem to ensure styling, APIs, and customization are consistent.

## PandaCSS Setup

Once you have installed the Data Grid, update the `include` array in your `panda.config.ts` file:

<CodeSnippet
  snippet={`export default createCerberusConfig({
    include: [
      "./node_modules/@cerberus/data-grid/dist/panda.buildinfo.json",
      // ...your other stuff,
    ],
})`}
/>

## React

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:


```tsx

```

<br />

This will provide a Data Grid wrapped in the [Cerberus Context Provider](/docs/components/cerberus-context)
which provides the necessary context for the Data Grid to function correctly.

## Typescript

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.

## Server-side Rendering

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.