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

Posted 2023-02-22

【中文标题】材料表：如何改变列的宽度？

【英文标题】：Material-table: How change width of the columns?

【发布时间】：2020-10-13 19:01:04

【问题描述】：

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

width 列属性一直有效，直到我们的内容适合单元格：CodeSandbox 有什么办法可以解决吗？

【问题讨论】：

请阅读How to create a Minimal, Reproducible Example 和How do I ask a good question? 并相应地编辑您的问题。

我添加了一个指向沙盒的链接。这不是一个可重现的例子吗？

您应该将代码复制到问题本身中。不是每个人都可以访问外部网站，并且链接可能会随着时间的推移而中断。 - 来自“我如何提出一个好问题”。这样做将有助于人们回答您的问题。

【参考方案1】：

如果你想为每一列设置特定的宽度，我相信你需要指定选项 tableLayout: 'fixed' 。 docs 是这样引用它的：

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

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

 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"
    
  />

这里是sandbox。

祝你好运！

【讨论】：

我们可以使用 px 吗？前10px

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

制作 tableLayout: "Auto" 为我工作:)

【参考方案2】：

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

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

【参考方案3】：

此处发布的解决方案均不适用于最新版本的材料表（撰写本文时为 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'
  
/>

【参考方案4】：

我自己也遇到了同样的问题，这里提供的解决方案都不适合我，所以我会离开我的，以防有人发现它有帮助。这有点hacky，但我发现唯一一个可以与我的页面设置一起使用。我什至尝试从docs 粘贴示例，因为它在某些列上具有固定宽度，但这在我的页面上也不起作用。

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

【参考方案5】：

什么对我很有效

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