Material-table：如何更改列的宽度？

Question

我正在使用由Google Material UI官方推荐的数据表格库Material Table，但在配置列宽度时遇到了问题。

列width属性只有当我们的内容适合单元格时才起作用：CodeSandbox 是否有解决方法？

- Karen

---

请阅读如何创建一个最小化、可重现的示例和如何提出一个好问题？，并相应地编辑您的问题。 - isAif

我已经添加了一个到沙盒的链接。这不是一个可重现的例子吗？ - Karen

你应该将代码复制到问题本身中。不是每个人都能访问外部网站，而且链接可能会随着时间的推移而失效。这样做将有助于回答你的问题的人们。 - isAif

Answer 1

如果您想为每列设置特定宽度，我认为您需要指定选项tableLayout:'fixed'。 文档是这样引用的:

tableLayout | auto or 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"
    }}
  />

这里是沙盒。

祝你好运！

- NicoE

---

我们可以使用像素(px)来实现吗？比如 10px。 - Rajath

@Rajath，是的，您可以在列定义中设置width: "100px"。也适用于rem单位。 - NicoE

制作tableLayout: “Auto”对我很有效 :) - Iftikhar

Answer 2

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

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

- Pritam

Answer 3

对我非常有效的方法

<MaterialTable
  title="Users"
  options={{
    rowStyle: {
      overflowWrap: 'break-word'
    }
  }}
  columns={[
    { 
      title: "Name",
      field: "name",
      width: "4%"
    }
  ]},
  data={userData}
/>

- stephen kilonzo

---

对我也起作用了。谢谢。 - Frosty

Answer 4

在我撰写此文时，最新版本的material-table（v1.69.3）中，这里发布的所有解决方案都对我无效。因此，我创建了一个codesandbox来测试不同设置的组合，直到找到最适合我的那个。

<MaterialTable
  columns={[
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
    {
      title: "Status",
      field: "status",
      cellStyle: {
        cellWidth: '15%'
      }
    }
  ]}
  data={users}
  options={{
    tableLayout: 'auto'
  }}
/>

- Fappaz

Answer 5

我自己也一直在苦苦挣扎，这里提供的解决方案都没有对我起作用，所以我会留下我的解决方法，以防有人发现它有用。它有点 hacky，但是是我找到的唯一能与我的页面设置配合使用的方法。我甚至尝试粘贴来自docs的示例，因为某些列具有固定宽度，但这在我的页面上也不起作用。

<MaterialTable
  title="Users"
  options={{
    rowStyle: {
      overflowWrap: 'break-word'
    }
  }}
  columns={[
    { 
      title: "Name",
      field: "name",
      cellStyle: {
        minWidth: 200,
        maxWidth: 200
      }
    }
  ]},
  data={userData}
/>

- Jacas

Answer 6

Material-ui 版本高于 4.11.4 不受支持，请使用以下版本

@material-ui/core = 4.11.4 material-table=1.69.0

这将解决问题

- sudesh sampath