Cannot get gridApi in Ag-Grid using React hooks in Typescript

Question

I am using function component in react with typescript. Here is what my component looks like

const Table = (props: TableProps) => {

const [gridApi, setGridApi] = React.useState(() => {})

  const gridOptions = {
    rowData: rowData,
    columnDefs: columnDef,
    pagination: true,
  }

const onGridReady = (params) => {
    setGridApi(params.api);
}


  return (
    <div className="ag-theme-alpine" >
      <AgGridReact gridOptions={gridOptions} onGridReady={onGridReady}/>
    </div>
  );
};

I need to get the gridApi so I can use it in a handler for another component to do quick filtering.

Looking at the docs HERE, the recommended way is to grab the gridApi and store it in a state. Considering that I am using function component here is what I did

const [gridApi, setGridApi] = React.useState(() => {})

When I do this in the handler:

  const handleTableFilter = (filterText: string) => {
      gridApi.setQuickFilter(filterText) // error here - Property 'setQuickFilter' does not exist on type '() => void'.
  }

Typescript complains that Property 'setQuickFilter' does not exist on type '() => void'.

I also tried the pattern recommended for Javascript HERE but I could not quite figure that out too.

I would appreciate some help on how to store the gridApi in my use case (Typescript, React using Function components - react hooks). If possible, I would prefer a solution where I will not have to store a function in useState. If not, I a fine with any solution.

Answer 1

Here is what I ended up doing to get GridApi without error in Typescript ( Mike Abeln comments in the question pointed me in the right direction)

const Table = (props: TableProps) => {

// - - - - omitted code for column & row data from props - - - -

  const gridApiRef = useRef<any>(null); // <= defined useRef for gridApi

  const [rowData, setRowData] = useState<any[]>([]);
  const [columnDef, setColumnDef] = useState<any[]>([]);

// - - - - omitted code for useEffect updating rowData and ColumnDef - - - -

  const gridOptions = {
    pagination: true,
  }

const onGridReady = (params) => {
    params.api.resetRowHeights();
    gridApiRef.current = params.api // <= assigned gridApi value on Grid ready
}

  const handleTableFilter = (filterText: string) => {
    gridApiRef.current.setQuickFilter(filterText); // <= Used the GridApi here Yay!!!!!
  }

  return (
    <div className="ag-theme-alpine" >
      <AgGridReact columnDefs={columnDef} 
      rowData={rowData} 
      gridOptions={gridOptions} 
      onGridReady={onGridReady} 
      ref={gridApiRef}/> // the gridApiRef  here
    </div>
  );
};

Although I am seeing some performance issue on the table (the tables are huge with about 600K rows) but this answers the question on how to get GridApi and use it to filter

Answer 2

The type for the gridApiRef is <AgGridReact> from 'ag-grid-react/lib/agGridReact'.

Example:

import { AgGridReact } from 'ag-grid-react'
import { AgGridReact as AgGridReactType } from 'ag-grid-react/lib/agGridReact'

// Make sure it initialize as null.
const gridApiRef = useRef<AgGridReactType>(null); 

const [rowData, setRowData] = useState<any[]>([]);
const [columnDef, setColumnDef] = useState<any[]>([]);

useEffect(() => {
   fetch('url')
   .then(res => res.json())
   .then(data => setRowData(data)
}, [])


  return (
   <div className="ag-theme-alpine" >
      <AgGridReact 
         ref={gridApiRef}
         columnDefs={columnDef} 
         rowData={rowData} 
         gridOptions={gridOptions}/>
    </div>
  );

Here's a tutorial: https://thinkster.io/tutorials/using-ag-grid-with-react-getting-started. Not in typescript though.