Material UI数据网格固定表头

Question

如何在Material UI Datagrid中实现表头固定？似乎使用Material UI Tables可以实现。但是我找不到在数据网格中实现此功能的选项。

- Kelvin

---

如果我们查看示例，我们可以看到datagrid的标题栏默认是粘性的(codesandBox)。 - antoineso

有更新吗？我也遇到了同样的问题。 - Rohit Nishad

我也有同样的问题... - Venky.m

Answer 1

看起来官方解决方案要么是指定固定高度，要么是将表格放在弹性容器内。

如果您想将表格部分放在可滚动的页面/容器中，这两个选项都不是很好，因为您可能会得到一个嵌套的滚动条。

通常在这种情况下，您需要使用autoHeight来显示完整的网格，并像常规HTML <table>一样具有真正的position: "sticky"头。

DataGrid目前不支持此功能，但仍可以通过调整内部的.css类来实现。我必须声明，这种解决方法会覆盖一些内部布局属性，因此可能会在以后的版本中出现问题。

export const StickyDataGrid = styled(DataGrid)(({theme}) => ({
    '& .MuiDataGrid-columnHeaders': {
        position: "sticky",
        // Replace background colour if necessary
        backgroundColor: theme.palette.background.paper,
        // Display header above grid data, but below any popups
        zIndex: theme.zIndex.mobileStepper - 1,
    },
    '& .MuiDataGrid-virtualScroller': {
        // Undo the margins that were added to push the rows below the previously fixed header
        marginTop: "0 !important"
    },
    '& .MuiDataGrid-main': {
        // Not sure why it is hidden by default, but it prevented the header from sticking
        overflow: "visible"
    }
}))

- Mike Rippon

Answer 2

如评论中所述，这是默认行为。

但是，有一些错误可以避免这种默认功能。在我的情况下，是我错过了一个属性：autoHeight={true}，它应该是false或者只是删除它。

这里有一个详细的代码示例，下面是Sandbox的链接：

import { DataGrid, GridToolbar } from "@mui/x-data-grid";
import React from "react";

export default function AdvanceTable() {
  
  const [pageSize, setPageSize] = React.useState(5);
  const [editRowsModel, setEditRowsModel] = React.useState({});

  const handleEditRowsModelChange = React.useCallback((model) => {
    // Set current edited cell
    setEditRowsModel(model);
  });

  return (
    <div>
      <div style={{ width: "100%", height: "80vh" }}>
        <DataGrid
          components={{
            Toolbar: GridToolbar
          }}
          rows={rows}
          columns={columns}
          disableSelectionOnClick
          checkboxSelection
          onEditRowsModelChange={handleEditRowsModelChange}
          pagination
          pageSize={pageSize}
          onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
          rowsPerPageOptions={[5, 10, 15]}
        />
      </div>
      <div style={{ marginBottom: 8 }}>
        <code>Edited table values: {JSON.stringify(editRowsModel)}</code>
      </div>
    </div>
  );
  
  // mock data:
  const columns = [
    { field: "id", headerName: "ID", width: 70 },
    {
      field: "firstName",
      headerName: "First name",
      editable: true,
      width: 180
    },
    { field: "lastName", headerName: "Last name", editable: true, width: 180 },
    {
      field: "age",
      headerName: "Age",
      type: "number",
      editable: true,
      width: 150
    }
  ];

  const rows = [
    { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
    { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
    { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
    { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
    { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
    { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
    { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
    { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
    { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
    { id: 41, lastName: "Stark", firstName: "Arya", age: 16 },
    { id: 51, lastName: "Targaryen", firstName: "Daenerys", age: null },
    { id: 61, lastName: "Melisandre", firstName: null, age: 150 },
    { id: 71, lastName: "Clifford", firstName: "Ferrara", age: 44 },
    { id: 81, lastName: "Frances", firstName: "Rossini", age: 36 },
    { id: 91, lastName: "Roxie", firstName: "Harvey", age: 65 }
  ];
}

沙盒示例

- 697

---

如果我们真的想要自动高度怎么办呢？ - chrismarx

最新的 MUI 数据表格允许您这样做： https://mui.com/components/data-grid/layout/https://codesandbox.io/s/tjdjw?file=/demo.js - 697