CODEWITHSUNDEEP
reactjsdatagridmaterial-ui
Dani
Dani

Reputation: 895

Failed to set page in material ui datagrid

I have a table made with material ui datagrid. When I go to the next page (2 or 3) and after apply filter, the page stay to (2 or 3) and the results of the filter seem empty because the page is at the current page in the list without filter. And I want to set the page to page 1 when there is filter change but I have issue.

I tried to setPage using the useGridApiRef() hooks but the gridRef.current is always null whatever happens in the component.

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { DataGrid, frFR, GridColDef, useGridApiRef } from '@material-ui/data-grid';
import { FC, useEffect, useRef } from 'react';
// Some other codes

const ListComponent: FC<ListComponentProps> = ({
  columns,
  rows,
  paths,
  clickSearchData,
  loading,
  onRowSelected,
  createNewData,
  withCreate,
  FilerComponent,
  floatingButtons,
  perPage,
}) => {
  const classes = useStyles();
  const theme = createMuiTheme({}, frFR);
  const gridRef = useGridApiRef();

  useEffect(() => {
    console.log('this is the ref', gridRef.current) // always null
    if(rows.length && gridRef.current) {
      console.log('got here') // never get here
      gridRef.current.setPage(0)
    }
  }, [rows.length, gridRef])

  return (
    <div>
      <div className={classes.content}>
        <div className={classes.item}>
          <div>
            <div className={classes.dataGrid}>
                <DataGrid
                  rows={rows}
                  columns={columns}
                  loading={loading}
                  pageSize={perPage || 20}
                  sortingOrder={['desc', 'asc']}
                  disableColumnMenu={true}
                  onRowClick={k => onRowSelected(k.row)}
                  hideFooterSelectedRowCount={true}
                  className={classes.tableRow}
                  apiRef={gridRef as any} // apiRef does not accept the gridRef without the as any
                />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ListComponent;

Upvotes: 1

Views: 1617

Answers (1)

Dani
Dani

Reputation: 895

The problem was that the apiRef is not supported by data-grid. I need to upgrade to @material-ui/x-grid to be able to use apiRef and manipulate the table programmatically.

Upvotes: 2

Related Questions