如何根据表格中的行宽获得自由宽度列？

Question

我有以下代码：

return (
  <Box sx={{ height: 400 }}>
    <DataGrid columns={columns} rows={rows} />
  </Box>
)

我让表格呈现为：

我希望email的列自动采用最宽行单元格的宽度，所以我希望表格呈现如下：

我的列和行看起来简单如下：

const columns = [ { field: "firstName" }, { field: "lastName" }, ...etc ]
const rows = [ 
   { firstName: "Camil Pasa Sokak", lastName: "In The Village", ...etc },
   ... etc
]

如何在 MUI x（社区表，免费表）中做到这一点？

我希望email的列自动采用最宽行单元格的宽度

• 请注意：由于表格很宽，它会自动显示一个滚动条（x 和 y 滚动条）。 我想保留此功能，我想保留这些滚动条（来自 x 和 y）我不想禁用它们。

这是一个沙盒实例：https://codesandbox.io/s/strange-newton-z6pwj4?file=/src/App.js

Answer 1

查看您正在使用的数据表组件的文档，并不清楚 go 的最佳方法。 问题的症结在于这是一个 div + flexbox 表，而不是真正的 html 表。 因此，单列中的单元格并不像常规 html 表那样真正“绑定”到彼此。

有一个页面解决了column dimensions ，但我在那里找不到令人满意的解决方案。 我对maxWidth似乎什么也没做感到特别失望。 我得到的最接近的是设置固定的列宽，但我认为这不是你想要的：

const columns = [{
  field: "email", width: 300,
}]

然后我转到他们的样式单元格页面，这使您可以更好地控制样式，但这仍然不起作用，因为一个弹性单元格不会影响一列中所有弹性单元格的大小 - 每行都有一个根据 email 地址的大小不同大小的单元格。

const columns = [{
  field: "email", cellClassName: "foobar",
}]

<DataGrid columns={columns} rows={rows} sx={{
  "& .foobar": {
    maxWidth: "300px !important"
  }
}} />

所以，我最好的建议是遍历数据，找到最长的 email 地址，并以此为基础设置固定width 。 这有点糟糕，但我没有看到另一种为基于 flexbox 的表格正确设置尺寸的方法：

const longestEmail = rows.reduce((longest, row) => {
    return row.email.length > longest.length ? row.email : longest
}, '');

const columns = [{
  // play around with the multiplier until you find a suitable width
  field: "email", width: longestEmail.length * 9,
}]

Answer 2

这是来自文档.. 数字签名

 <DataGrid columns={[ { field: 'username', colSpan: 2, hideable: false }, { field: 'organization', sortable: false, filterable: false, hideable: false, }, { field: 'age', hideable: false }, ]} rows={rows} {...other} />

您可以使用 colspan 但它将列中的所有单元格设置为跨越给定数量的列。

 const columns = [{ field: "email",colSpan:2, },]