Page 5: Utilizing Grid API and Advanced Features

5. Utilizing Grid API and Advanced Features

AG Grid provides a comprehensive Grid API that allows you to programmatically control every aspect of the grid. This enables you to create dynamic user experiences and handle complex requirements.

5.1. Accessing and Using the Grid API

You can access the gridApi object via the onGridReady callback and use it to update grid data, change filter and sort states, and perform other operations.

import React, { useState, useCallback, useRef } from 'react';
import { AgGridReact } from 'ag-grid-react';

const MyAdvancedGrid = () => {
  const gridRef = useRef(null);
  const [rowData, setRowData] = useState([]); // Initial data

  const onGridReady = useCallback((params) => {
    gridRef.current = params.api; // Store gridApi
    // For example, load initial data
    fetch('https://www.ag-grid.com/example-assets/row-data.json')
      .then(resp => resp.json())
      .then(data => setRowData(data));
  }, []);

  const clearFilters = useCallback(() => {
    gridRef.current.setFilterModel(null); // Clear all filters
  }, []);

  return (
    <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
      <button onClick={clearFilters}>Clear Filters</button>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        onGridReady={onGridReady}
      ></AgGridReact>
    </div>
  );
};

5.2. Advanced Data Management and Features

• Server-Side Data: AG Grid offers Row Models (e.g., Infinite Row Model, Server-Side Row Model) that support server-side data loading and management for large datasets.
• Selection and Context Menus: Enable row selection using the rowSelection property and add custom context menus via getContextMenuItems.
• Cell Merging and Grouping: Implement complex table layouts using colSpan, rowSpan, and grouping features.
• Theming and Styling: Provides various built-in themes (ag-theme-alpine, ag-theme-balham, etc.) and allows for custom styling through CSS.
• Disable Unnecessary Features: On lower-performing devices, you can conditionally disable complex features like filtering or sorting for certain columns, or even destroy the grid instance using gridRef.current.destroy().

If you have completed all five steps, you are now ready to build powerful and flexible data table solutions using AG Grid React.