javascript - DataGrid React Material UI RowsCount not updating correctly

Question

i'm trying to do some pagination on my App, so i'm using Material UI's Datagrid compoenet, here is how i'm using it:

{!hasTable && !isLoading
  ? <><h1>Choose a table from DB to start</h1></>
  : <DataGrid
    pagination
    rows={rowsValue}
    columns={colValue}
    page={datagridPage}
    pageSize={datagridPageSize}
    rowCount={datagridRowCount}
    onPageChange={DatagridPageChange}
    onPageSizeChange={handlePageSize}
    paginationMode="server"
  />}

Everything is working fine, except for the RowsCount. I'm Getting RowsCount on the event onPageChange (i've tried in other function that executes before onPageChange, but if no success as well).

So, here is the function:

    const [datagridRowCount, setDataGridRowCount] = useState(0);
    const DatagridPageChange = async (event: any) => {
    setDatagridPage(event.page);
    try {
      setIsLoading(true);
      if (activeFilters.length > 0) {
        const response = await countFilterFunction(value, activeFilters, columnsAliasandName);
        setDatagridRowCount(response.data);
      } else {
        const response = await countFilterFunction(value, 0, columnsAliasandName);
        setDatagridRowCount(response.data);
      }
    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    };
};

so, normally this method don't work and the material ui automatically giver the rowNumber the numbers of rows of rowsValue.

So, what I'm missing, am i being clear enough?

Thanks.

question from:https://stackoverflow.com/questions/66063904/datagrid-react-material-ui-rowscount-not-updating-correctly

Answer 1

Waitting for answers