reactjs中如何让材质数据网格宽度填充父组件
我正在尝试显示所有列的数据网格应该采用相等的宽度以适合父组件。但是最后有一个空白空间,我无法删除它,也无法使列采用自动宽度以适应页面宽度。
任何人都可以帮我解决这个问题吗
回答
包括每个列级别的弹性值,如下所示,
const columns = [
{ field: "id", headerName: "ID", flex: 1 },
{ field: "firstName", headerName: "First name", flex: 1 },
{ field: "lastName", headerName: "Last name", flex: 1 },
{
field: "age",
headerName: "Age",
type: "number",
flex: 1
},
{
field: "fullName",
headerName: "Full name",
description: "This column has a value getter and is not sortable.",
sortable: false,
flex: 1,
valueGetter: (params) =>
`${params.getValue(params.id, "firstName") || ""} ${
params.getValue(params.id, "lastName") || ""
}`
}
];
代码和盒子 - https://codesandbox.io/s/dry-https-7pp93?file=/src/App.js:266-850