MUI DataGrid 显示全部行问题求助

要让MUI DataGrid一次性显示所有行，别再纠结height: '100%'了，直接用下面的方法：

• 核心配置：给DataGrid添加autoHeight属性，同时禁用分页

  • autoHeight会让表格根据行的数量自动计算高度，完全适配内容，不用手动设置固定高度或百分比高度
  • 禁用分页（pagination={false}）是为了避免默认分页机制只显示部分行

• 修改后的示例代码：

import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 70 },
  { field: 'firstName', headerName: 'First name', width: 130 },
  { field: 'lastName', headerName: 'Last name', width: 130 },
  { field: 'age', headerName: 'Age', type: 'number', width: 90 },
];

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 },
];

export default function Demo() {
  return (
    <div style={{ width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        autoHeight // 关键：自动适配内容高度
        pagination={false} // 关键：禁用分页，显示所有行
      />
    </div>
  );
}

• 为什么height: '100%'无效？
  当你设置height: '100%'时，表格高度是继承父容器的高度，但如果父容器没有设置明确的固定高度，表格就会收缩到最小高度，只能显示少量行。而autoHeight是让表格自身根据内容计算高度，不受父容器高度限制。

内容的提问来源于stack exchange，提问作者HelloWorld1