材料表：如何更改列的宽度？

Question

我正在使用Google Material UI 官方推荐的Material Table库作为数据表库，并且在配置列宽时遇到了麻烦。

Columnwidth属性一直在工作，直到我们的内容适合单元格：CodeSandbox 是否有任何解决方案可以解决该问题？

Answer 1

如果你想为每一列设置特定的宽度，我相信你需要指定 option tableLayout: 'fixed' 。该文档是指它是这样的：

表格布局 | 自动或固定 | 使列宽算法自动或固定

所以你的代码可能是这样的：

 const tableColumns = [
    { title: "Lorem ipsum", field: "lorem", width: "10%" }, // fixed column width
    { title: "Name", field: "name", width: "80%" },
    { title: "Custom status", field: "customStatus", width: "10%" }]


 <MaterialTable
    tableRef={tableRef}
    columns={tableColumns}
    data={tableData}
    onRowClick={(evt, selectedRow) =>
      setSelectedRow(selectedRow.tableData.id)
    }
    title="Remote Data Example"
    options={{
      rowStyle: rowData => ({
        backgroundColor:
          selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
      }),
      tableLayout: "fixed"
    }}
  />

这是沙箱。

祝你好运！

Answer 2

使用以下样式动态列宽和标题

        columns={[
          {
            title: 'Create Date',
            field: 'create_date',
            cellStyle: {
             whiteSpace: 'nowrap'
            },
           ...
           ]}
        options={{
          headerStyle: {
            backgroundColor: '#DEF3FA',
            color: 'Black',
             whiteSpace: 'nowrap'
          },
           ...
         }