MUI X 数据网格中的第一个最后一个按钮

Question

很抱歉重复这个问题，但我在文档中没有找到如何在分页的 MUI X 数据网格中输入第一个和最后一个按钮。有人可以给我更具体的来源吗？

import React from "react";
import { DataGrid } from "@mui/x-data-grid";
import Pagination from "@mui/material/Pagination";
import Stack from "@mui/material/Stack";

export default function EntityList(props: any) {
  return (
    <>
      <div className="outerDivNameBtn2">
        <DataGrid
          className="DatagridStyle2"
          rows={props.rows}
          columns={props.columns}
          onRowSelectionModelChange={(itm) => props.receiveId(itm)}
          initialState={{
            pagination: { paginationModel: { pageSize: 10 } },

            sorting: {
              sortModel: [{ field: props.sortName, sort: "asc" }],
            },
          }}
          pageSizeOptions={[5, 10, 25, 50, 100]}
          disableRowSelectionOnClick
        />
      </div>
    </>
  );
}

Answer 1

为了实现 MUI 数据网格中的第一页/最后一页，我创建了 github 上现有示例的分支，以使其与下面的最新版本兼容：

https://codesandbox.io/s/datagrid-v5-quick-start-forked-mty9tf

<DataGrid
  className={styles['datagrid']}
  checkboxSelection
  disableColumnFilter
  disableColumnSelector
  disableDensitySelector
  columns={columns}
  rows={rows}
  onRowSelectionModelChange={onRowSelectionModelChange}

  initialState={{
    ...data.initialState,
    pagination: { 
      paginationModel: { pageSize: 20 },
    },
  }}
  pageSizeOptions={[10, 20, 30, 50]}

  getRowId={(row: any) => row.userId}
  slots={{ toolbar: GridToolbar }}

  slotProps={{
    toolbar: {
      showQuickFilter: true,
      quickFilterProps: { debounceMs: 500 }
    },
    pagination: {
      ActionsComponent: TablePaginationActions // add table pagination with first/last page navigation
    }
  }}
/>

感谢原作者

flaviendelangle

:

https://github.com/mui/mui-x/issues/4249#issuecomment-1081914676