React Data Grid
RevoGrid gives React applications a fast virtualized data grid without changing the core grid behavior. You pass columns and source as props, then use a ref when you need to call instance methods such as setCellEdit, scrollToRow, or getVisibleSource.
Install your React Data Grid
Install RevoGrid for React using the following command:
npm i @revolist/react-datagridpnpm add @revolist/react-datagridyarn add @revolist/react-datagridbun add @revolist/react-datagridMinimal setup
// 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 AppWorking with columns and source
In React, the most maintainable pattern is:
- keep
columnsstable unless configuration really changed - update
sourcefrom application state - use grid methods for imperative actions instead of reaching into internal DOM
Accessing grid instance methods
Use a ref to the wrapped grid element, then call the public API on the underlying instance:
import { useRef } from 'react';
function App() {
const gridRef = useRef<any>(null);
const focusFirstPriceCell = async () => {
await gridRef.current?.scrollToRow?.(0);
await gridRef.current?.setCellEdit?.(0, 'price');
};
return (
<>
<button onClick={focusFirstPriceCell}>Edit first price</button>
<RevoGrid ref={gridRef} columns={columns} source={source} />
</>
);
}Custom renderers and editors
Use these pages for React-specific customization:
Event handling
React apps usually listen for the same grid events as plain JavaScript:
beforeeditaftereditbeforefilterapplybeforesourceset
If you need to shape event-driven workflows, start with Event Patterns and Lifecycles.
SSR and client-only behavior
RevoGrid depends on browser APIs, so server-rendered React environments should load it on the client side. If your app uses Next.js or another SSR framework, render the grid in a client component or dynamically load it on the client.