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

Question

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

有人可以帮我吗

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 属性，这有助于表格在 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 3

使用 flex 和 minWidth 使 datGrid 在页面加载时闪烁。 看起来像是渲染了多次