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

v440hwme  于 2023-01-07  发布在  Java
关注(0)|答案(6)|浏览(132)

我正在使用Google Material UI官方推荐的Material Table库作为数据表库,但在配置列宽时遇到了问题。
width属性一直有效,直到我们的内容适合单元格:CodeSandbox是否有解决方案?

e0uiprwp

e0uiprwp1#

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

这是sandbox
祝你好运!

ijnw1ujt

ijnw1ujt2#

动态列宽和标题使用“下方”样式

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

e0uiprwp3#

对我来说非常有效的是

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

lb3vh1jj4#

这里发布的解决方案都不适用于我最新版本的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'
  }}
/>
uajslkp6

uajslkp65#

我自己也在为同样的问题而挣扎,这里提供的解决方案没有一个适合我,所以我会留下我的,以防有人觉得它有用。它有点过时,但我发现这是唯一一个适合我的页面设置。我甚至尝试从文档中粘贴示例,因为它在一些列上有固定的宽度,但在我的页面上也不起作用。

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

jogvjijk6#

不支持高于4.11.4的材质-ui版本,请使用以下版本
@材料-用户界面/核心= 4.11.4材料表=1.69.0
这将解决问题

相关问题