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.

Based off those docs all you need to do is import the grid api and render it as a react component... why do you need to store it in state? You just import it. The third block of code from this docs link explains it. The error in your post comes from typescript and the fact that you currently are setting the state of gridApi to an empty function that returns nothing. You also seem to be using gridApi and setGridApi nowhere in your component. What is the purpose of that? — Michael Abeln
– Michael Abeln, Commented Jun 9, 2021 at 5:22
See the method somePointLater() in doc. You must be immediately use the gridAPI in handleTableFilter before you initialize the state. That cause the issue. And also gridAPI is an object but you initialized the state with an empty function which is type () => void. Either change the type of state to any or import the typeof gridAPI from the package and set it as the type of the state. — Dilshan
– Dilshan, Commented Jun 9, 2021 at 5:29
Another option is to do React.useState<GridApi>() then access it like so gridApi?.setQuickFilter(filterText) — Tar
– Tar, Commented Jul 7, 2021 at 7:05

papigee · Accepted Answer · 2021-06-11 01:03:57Z

11

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

answered Jun 11, 2021 at 1:03

papigee

7,5884 gold badges32 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kashif Khan Over a year ago

for me changing const gridApiRef = useRef(); to const gridApiRef = useRef<any>(null); just worked

Ozan Mudul Over a year ago

@KashifKhan this is not a recommended approach, you are making ts useless in this case

Asolace · Accepted Answer · 2022-05-11 12:10:21Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related