FAQ

Frequently asked questions about @gp-grid/react.

General

What browsers are supported?

gp-grid supports all modern browsers:

Chrome/Edge 88+
Firefox 78+
Safari 14+

Is gp-grid free to use?

Yes, gp-grid is open source and free to use in both personal and commercial projects.

What's the maximum dataset size?

There's no practical limit. The virtual scrolling architecture means performance is consistent regardless of dataset size. We've tested with 2 million rows.

Performance

Why is my grid slow to render?

Common causes:

Not using memoization: Wrap rowData in useMemo:

const rows = useMemo(() => data.map(transform), [data]);

Heavy custom renderers: Keep renderers simple, pre-compute values.
Too many columns: Consider horizontal virtualization for 50+ columns.

How do I improve scroll performance?

Increase overscan for smoother scrolling (at cost of more DOM nodes)
Simplify custom renderers
Ensure container has explicit dimensions

Styling

How do I enable dark mode?

Use the darkMode prop:

<Grid darkMode={true} ... />

For theme integration (e.g., next-themes), see the Styling Guide.

How do I customize the grid appearance?

Override CSS classes in your global styles. Common classes include .gp-grid-header, .gp-grid-cell--active, and .gp-grid-row. For complete styling options including Tailwind CSS and custom renderers, see the Styling Guide.

Data

How do I update a single cell?

Use a mutable data source:

const dataSource = createMutableClientDataSource(data, {
  getRowId: (row) => row.id,
});

dataSource.updateCell(rowId, "fieldName", newValue);

How do I refresh data from the server?

For server data sources, the grid automatically fetches when sort/filter changes. For manual refresh, recreate the data source:

const [key, setKey] = useState(0);

// Refresh
setKey(k => k + 1);

return <Grid key={key} dataSource={dataSource} ... />;

const exportToCSV = () => {
  const rows = dataSource.getAllRows(); // Your implementation
  // Convert to CSV and download
};

Troubleshooting

Grid shows no data

Check that rowData or dataSource is provided
Verify the container has explicit height
Check browser console for errors

Cells don't render correctly

Ensure field in column definition matches property name in data
Check cellDataType matches actual data type

Sorting doesn't work

Verify sortingEnabled is not set to false
Check column has sortable: true (default)
For server-side data, ensure server handles sort request

FAQ

FAQ