React Data Grid
This page covers the key concepts of RevoGrid - a high-performance, customizable React Table and React Data Grid for managing large datasets.
Install your React Data Grid
Install RevoGrid for React using the following command:
npm
npm i @revolist/react-datagridpnpm
pnpm add @revolist/react-datagridyarn
yarn add @revolist/react-datagridbun
bun add @revolist/react-datagridBasic Setup
RevoGrid is designed to be highly performant, even with large datasets, by leveraging virtualization for both rows and columns. It allows you to render only the visible portion of the grid, significantly improving performance when dealing with large datasets.
Code
Below is an example of a basic setup using RevoGrid in React. The grid accepts columns and data through props and can be further customized to suit your specific needs.
tsx
// App.tsx
import { RevoGrid } from '@revolist/react-datagrid'
import { useState } from 'react'
/**
* note: columns & source need a "stable" reference in order to prevent infinite re-renders
*/
const columns = [
{
prop: 'name',
name: 'First',
},
{
prop: 'details',
name: 'Second',
},
]
function App() {
const [source] = useState([
{
name: '1',
details: 'Item 1',
},
{
name: '2',
details: 'Item 2',
},
])
return (
<>
<RevoGrid columns={columns} source={source} />
</>
)
}
export default App