react js中如何让material data grid宽度填充父组件

Question

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

谁能帮我解决这个问题

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

Answer 1

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

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") || ""
      }`
  }
];

codesandbox - https://codesandbox.io/s/dry-https-7pp93?file=/src/App.js:266-850

Answer 2

在我的例子中，我包括 flex 和 minWidth 属性这有助于 table 在 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} ]

react js中如何让material data grid宽度填充父组件

how to make material data grid width to fill the parent component in react js

datagrid

reactjs

material-ui