ag-grid-react

import React, { useState, useRef, useMemo, useCallback } from 'react'; import { AgGridReact } from 'ag-grid-react'; import 'ag-grid-community/styles/ag-grid.css'; import 'ag-grid-community/styles/ag-theme-alpine.css'; import type { ColDef, GridReadyEvent } from 'ag-grid-community'; interface RowData { make: string; model: string; price: number; } const AgGridExample: React.FC = () => { const gridRef = useRef<AgGridReact<RowData>>(null); const [rowData, setRowData] = useState<RowData[]>([ { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxster', price: 72000 }, { make: 'BMW', model: 'M5', price: 60000 }, { make: 'Audi', model: 'A4', price: 45000 }, ]); const [columnDefs] = useState<ColDef[]>([ { field: 'make', filter: true, sortable: true }, { field: 'model', filter: true, sortable: true }, { field: 'price', filter: true, sortable: true, valueFormatter: p => '€' + (p.value as number).toLocaleString() }, ]); const defaultColDef = useMemo<ColDef>(() => ({ flex: 1, minWidth: 100, resizable: true, }), []); const onGridReady = useCallback((params: GridReadyEvent) => { // Can use params.api to interact with the grid, e.g., fetch data dynamically // params.api.sizeColumnsToFit(); }, []); const clearFilters = useCallback(() => { gridRef.current?.api.setFilterModel(null); }, []); return ( <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}> <button onClick={clearFilters} style={{marginBottom: '10px'}}>Clear All Filters</button> <AgGridReact ref={gridRef} rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} onGridReady={onGridReady} pagination={true} paginationPageSize={10} animateRows={true} /> </div> ); }; export default AgGridExample;