Implementing AG Grid

JavaScript
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

function DataGrid({ data }) {
  const columnDefs = [
    { field: 'name', headerName: 'Name', sortable: true, filter: true },
    { field: 'price', headerName: 'Price', type: 'numericColumn' },
    { field: 'change', headerName: 'Change %', cellRenderer: params => 
      `<span style="color: ${params.value > 0 ? 'green' : 'red'}">${params.value}%</span>` 
    }
  ];

  return (
    <div className="ag-theme-quartz" style={{ height: 400, width: '100%' }}>
      <AgGridReact
        rowData={data}
        columnDefs={columnDefs}
        defaultColDef={{
          flex: 1,
          minWidth: 100,
          resizable: true,
        }}
        pagination={true}
        paginationPageSize={20}
      />
    </div>
  );
}

Progress:

• Install dependencies and imports
• Define column configuration
• Set up row data structure
• Apply theme and styling
• Configure performance options
• Add enterprise features (if needed)
• Implement custom components
• Test with large datasets

1. Installation & Setup

Bash
npm install ag-grid-react ag-grid-community
# For enterprise features:
npm install ag-grid-enterprise

JavaScript
// Basic imports
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';

// Enterprise imports (if using)
import 'ag-grid-enterprise';

2. Column Definition Best Practices

JavaScript
const columnDefs = [
  {
    field: 'id',
    headerName: 'ID',
    width: 80,
    pinned: 'left',
    checkboxSelection: true
  },
  {
    field: 'name',
    headerName: 'Name',
    flex: 2, // Takes 2x space
    filter: 'agTextColumnFilter',
    sortable: true
  },
  {
    field: 'value',
    headerName: 'Value',
    type: 'numericColumn',
    valueFormatter: params => `$${params.value.toLocaleString()}`,
    aggFunc: 'sum'
  },
  {
    headerName: 'Actions',
    cellRenderer: params => 
      `<button onclick="handleAction(${params.data.id})">Edit</button>`,
    width: 120,
    suppressMenu: true
  }
];

3. Performance Configuration

JavaScript
const gridOptions = {
  // Virtualization for large datasets
  rowBuffer: 10,
  
  // Async rendering
  suppressAnimationFrame: false,
  
  // Column virtualization
  suppressColumnVirtualisation: false,
  
  // Batch updates
  suppressRowClickSelection: true,
  
  // Efficient sorting/filtering
  cacheQuickFilter: true,
  
  // Memory management
  purgeClosedRowNodes: true,
  maxConcurrentDatasourceRequests: 2
};

4. Enterprise Features Setup

JavaScript
// Row grouping
const columnDefs = [
  { field: 'country', rowGroup: true, hide: true },
  { field: 'sport', rowGroup: true, hide: true },
  { field: 'athlete', headerName: 'Athlete' },
  { field: 'medals', headerName: 'Medals', aggFunc: 'sum' }
];

// Server-side row model for infinite scrolling
const gridOptions = {
  rowModelType: 'serverSide',
  serverSideStoreType: 'partial',
  cacheBlockSize: 100,
  maxBlocksInCache: 10
};

Example 1: Financial Dashboard Input: Stock portfolio data with real-time updates

JavaScript
const stockColumns = [
  { field: 'ticker', pinned: 'left', width: 80 },
  { field: 'price', type: 'numericColumn', cellRenderer: 'agAnimateShowChangeCellRenderer' },
  { field: 'change', cellClassRules: {
    'price-up': 'x > 0',
    'price-down': 'x < 0'
  }}
];

// Real-time updates
useEffect(() => {
  const interval = setInterval(() => {
    gridRef.current.api.applyTransactionAsync({ update: newPriceData });
  }, 1000);
  return () => clearInterval(interval);
}, []);

Example 2: Data Analytics Grid Input: Large dataset with grouping and aggregation

JavaScript
const analyticsGrid = {
  columnDefs: [
    { field: 'region', rowGroup: true, hide: true },
    { field: 'product', rowGroup: true, hide: true },
    { field: 'sales', aggFunc: 'sum' },
    { field: 'profit', aggFunc: 'avg' }
  ],
  autoGroupColumnDef: {
    headerName: 'Group',
    minWidth: 200,
    cellRendererParams: { suppressCount: true }
  },
  groupDefaultExpanded: 1
};

Example 3: Custom Theme

JavaScript
import { themeQuartz } from 'ag-grid-community';

const customTheme = themeQuartz.withParams({
  accentColor: '#1976d2',
  backgroundColor: '#fafafa',
  borderColor: '#e0e0e0',
  chromeBackgroundColor: '#f5f5f5',
  fontFamily: 'Roboto, sans-serif',
  fontSize: 14,
  spacing: 8
});

<AgGridReact theme={customTheme} />