reactjs中如何让材质数据网格宽度填充父组件

Question

我正在尝试显示所有列的数据网格应该采用相等的宽度以适合父组件。但是最后有一个空白空间，我无法删除它，也无法使列采用自动宽度以适应页面宽度。

任何人都可以帮我解决这个问题吗

https://codesandbox.io/s/musing-montalcini-tn04y

Answer 1

就我而言，我包括了 flex 和 minWidth 属性，这有助于表在SM（小型）和（XS）超小型设备中显示完整数据。

const columns = [
    {field: "id", hide: true},
    {field: "transaction", headerName: "Transactions", minWidth: 330, flex: 1},
    {field: "date", headerName: "Date", minWidth: 100, flex: 1},
    {field: "type", headerName: "Type", minWidth: 100, flex: 1},
    {field: "price", headerName: "Price", minWidth: 110, flex: 1},
    {field: "gas", headerName: "Gas", minWidth: 110, flex: 1},
    {field: "total", headerName: "Total", minWidth: 110, flex: 1} ]

Answer 2

包括每个列级别的弹性值，如下所示，

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