MUI：将分页移动到 DataGrid 的顶部？

Question

有谁知道如何将标准XGrid分页移到表格上方？或者我是否必须创建自己的自定义分页而不使用内置的 with XGrid？

Answer 1

没有公共 API 可以将分页组件放在顶部，但您可以使用以下 CSS 技巧：

const useStyles = makeStyles({
  grid: {
    display: "flex",
    flexDirection: "column-reverse"
  }
});

export default function App() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 100,
    maxColumns: 4
  });
  const classes = useStyles();

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        className={classes.grid}
        autoHeight
        pageSize={5}
        rowsPerPageOptions={[5, 10, 20]}
        {...data}
      />
    </div>
  );
}

现场演示