GridHandle

Updated on Feb 6, 2026

Represent the ref of the Grid component.

Name	Type	Default	Description
columns	GridColumnProps[]		A getter of the current columns. Gets the current column width or current columns, or any other GridColumnProps for each defined column. Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the ref callback. The following example demonstrates how to reorder the columns by dragging their handlers and check the properties afterwards. You can check the result in the browser console. jsx const App = () => { const [data, setData] = useState([ { foo: 'A1', bar: 'B1' }, { foo: 'A2', bar: 'B2' }, { foo: 'A3', bar: 'B2' } ]); const grid = useRef<GridHandle>(); return ( <div> <Grid data={data} reorderable={true} ref={grid}> <GridColumn field="foo" /> <GridColumn field="bar" /> </Grid> <Button onClick={() => console.log(JSON.stringify(grid.current?.columns))}> log current properties into browser console. </Button> </div> ); }; export default App;
element	"null" | HTMLDivElement		Returns the HTML element of the Grid component.
exportAsPdf	() => void		Method to trigger a PDF export of the Grid. The 'pdf' prop of the Grid should be set to true or object of setting that will be applied the exported Grid.
fitColumns	(columnIds: string[]) => void		Method to fit columns according to their content.
getCsvBlob	() => "null" | Blob		Method to get the CSV export as a Blob without triggering a download. Useful for uploading to a server or custom file handling. The 'csv' prop of the Grid should be set to true or an object of settings. jsx const grid = useRef<GridHandle>(null); const blob = grid.current?.getCsvBlob(); if (blob) { // Upload to server or custom handling await uploadToServer(blob); }
getLeafDataItems	() => any[]		Gets all leaf-level data items in the grid. Returns actual data rows excluding group headers/footers. Useful for AI operations and data processing. jsx const grid = useRef<GridHandle>(null); const dataItems = grid.current?.getLeafDataItems(); console.log(`Leaf items: ${dataItems.length}`);
getTotal	() => number		Gets the total number of items in the grid data source. Used for pagination calculations and AI operations. jsx const grid = useRef<GridHandle>(null); const total = grid.current?.getTotal(); console.log(`Total items: ${total}`);
props	GridProps		The props values of the Spreadsheet.
saveAsCsv	() => Promise<void>		Method to trigger a CSV export of the Grid and save the file. The 'csv' prop of the Grid should be set to true or an object of settings. Returns a Promise that resolves when the export is triggered. jsx const grid = useRef<GridHandle>(null); await grid.current?.saveAsCsv(); console.log('Export triggered!');
scrollIntoView	(options: { rowIndex: number; }) => void		Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.