@progress/kendo-react-grid/Grid.d.ts

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { GridProps } from './interfaces/GridProps.js';
import { GridColumnProps } from './interfaces/GridColumnProps.js';
import * as React from 'react';
/**
 * Represent the `ref` of the Grid component.
 */
export interface GridHandle {
    /**
     * Returns the HTML element of the Grid component.
     */
    element: HTMLDivElement | null;
    /**
     * The props values of the Spreadsheet.
     */
    props: GridProps;
    /**
     * A getter of the current columns. Gets the current column width or current columns, or any other [`GridColumnProps`](https://www.telerik.com/kendo-react-ui/components/grid/api/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.
     *
     * @example
     * ```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;
     * ```
     */
    columns: GridColumnProps[];
    /**
     * Method to allow the scroll to be set to a specific row index when the Grid is scrollable. It is zero based.
     *
     * @param options - Object, containing the rowIndex to which is going to be scrolled.
     */
    scrollIntoView: (options: {
        rowIndex: number;
    }) => void;
    /**
     * Method to fit columns according to their content.
     *
     * @param columnIds - Array of column ids to be fitted.
     */
    fitColumns: (columnIds: string[]) => 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.
     */
    exportAsPdf: () => 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.
     *
     * @returns A Promise that resolves when the CSV blob generation and save trigger complete
     *
     * @example
     * ```jsx
     * const grid = useRef<GridHandle>(null);
     * await grid.current?.saveAsCsv();
     * console.log('Export triggered!');
     * ```
     */
    saveAsCsv: () => Promise<void>;
    /**
     * 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.
     *
     * @returns A Blob containing the CSV data, or null if CSV export is not enabled
     *
     * @example
     * ```jsx
     * const grid = useRef<GridHandle>(null);
     * const blob = grid.current?.getCsvBlob();
     * if (blob) {
     *     // Upload to server or custom handling
     *     await uploadToServer(blob);
     * }
     * ```
     */
    getCsvBlob: () => Blob | null;
    /**
     * Gets the total number of items in the grid data source.
     * Used for pagination calculations and AI operations.
     *
     * @returns The total count of data items
     *
     * @example
     * ```jsx
     * const grid = useRef<GridHandle>(null);
     * const total = grid.current?.getTotal();
     * console.log(`Total items: ${total}`);
     * ```
     */
    getTotal: () => number;
    /**
     * Gets all leaf-level data items in the grid.
     * Returns actual data rows excluding group headers/footers.
     * Useful for AI operations and data processing.
     *
     * @returns Array of data items
     *
     * @example
     * ```jsx
     * const grid = useRef<GridHandle>(null);
     * const dataItems = grid.current?.getLeafDataItems();
     * console.log(`Leaf items: ${dataItems.length}`);
     * ```
     */
    getLeafDataItems: () => any[];
}
/**
 * Represents the [KendoReact Grid component](https://www.telerik.com/kendo-react-ui/components/grid).
 *
 * @remarks
 * Supported children components are: {@link GridColumn}, {@link GridToolbar}, {@link GridNoRecords}, {@link StatusBar}.
 *
 * @example
 * ```jsx
 * const App = () => {
 *     const [data, setData] = useState([
 *         { foo: 'A1', bar: 'B1' },
 *         { foo: 'A2', bar: 'B2' },
 *         { foo: 'A3', bar: 'B2' }
 *     ]);
 *
 *     return (
 *         <Grid data={data} reorderable={true}>
 *             <GridColumn field="foo" />
 *             <GridColumn field="bar" />
 *         </Grid>
 *     );
 * };
 *
 * export default App;
 * ```
 */
export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<GridHandle | null>>;