材料表:如何更改列的宽度?

IT技术 javascript reactjs material-ui material-table
2021-04-19 22:09:10

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

Columnwidth属性一直在工作,直到我们的内容适合单元格:CodeSandbox 是否有任何解决方案来解决这个问题?

5个回答

如果你想为每一列设置特定的宽度,我相信你需要指定选项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"
    }}
  />

这是沙箱

祝你好运!

我们可以用px来做吗?前任10px
2021-05-22 22:09:10
制作 tableLayout:“自动”对我有用:)
2021-05-29 22:09:10
@Rajath 是的,您可以width: "100px"在列定义中进行设置也适用于rem单位。
2021-06-07 22:09:10

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

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

在最新版本的材料表(撰写本文时为 v1.69.3)上,此处发布的所有解决方案均不适合我,因此我创建了一个代码沙盒来测试不同的设置组合,直到找到最适合我的组合。

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

什么对我非常有用

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

我自己也一直在苦苦挣扎,这里提供的任何解决方案都不适合我,所以如果有人觉得有帮助,我会离开我的。这有点 hacky 但我发现唯一一个可以与我的页面设置一起使用。我什至尝试粘贴文档中的示例,因为它在某些列上具有固定宽度,但这在我的页面上也不起作用。

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