未能在资料ui资料集中设定页

Question

我有一张用资料用户界面做的桌子。当我转到下一页(2或3)和apply filter之后，页面停留在(2或3)，筛选结果看起来是空的，因为页面位于列表中的当前页面，没有筛选器。当有过滤器更改时，我想将页面设置为第1页，但我有问题。

我尝试使用setPage ()挂钩进行useGridApiRef，但是无论组件中发生什么，gridRef.current总是为空。

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;

Answer 1

问题是数据网格不支持apiRef。我需要升级到@material/x网格，以便能够使用apiRef并以编程方式操作表。