如何添加水平滚动条以访问 Material-UI 表中的溢出列

Posted 2023-02-22

【中文标题】如何添加水平滚动条以访问 Material-UI 表中的溢出列

【英文标题】：How to add a horizontal scrollbar to access overflow columns in Material-UI Table

【发布时间】：2020-10-29 19:57:16

【问题描述】：

我在我使用 MaterialTable 的反应应用程序中有一个具有固定表格布局的表格（在此处找到 material-table） ma​​terial-ui 中的组件。

问题出现在移动设备大小时，我希望有一个水平滚动条来查看溢出列。此刻，我添加了wordWrap: "break-word" 只是为了使桌子合适，但我想用一个单杠替换它。请提供帮助。

return (
    <MaterialTable
      title="Editable Example"
      columns=state.columns
      data=state.data
      options=
        rowStyle: 
          wordWrap: "break-word",
        ,
        padding: "dense",
        tableLayout: "fixed",
        actionsColumnIndex: -1,
        exportButton: true,
        draggable: true,
      editable=
        onRowAdd: (newData) =>
          new Promise((resolve) => 
            setTimeout(() => 
              resolve();
              setState((prevState) => 
                const data = [...prevState.data];
                data.push(newData);
                return  ...prevState, data ;
              );
            , 600);
          ),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => 
            setTimeout(() => 
              resolve();
              if (oldData) 
                setState((prevState) => 
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return  ...prevState, data ;
                );
              
            , 600);
          ),
        onRowDelete: (oldData) =>
          new Promise((resolve) => 
            setTimeout(() => 
              resolve();
              setState((prevState) => 
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return  ...prevState, data ;
              );
            , 600);
          ),
      
    />
  );

问题的直观说明如下所示

【参考方案1】：

将tableLayout设为auto（未修复）

Working demo

示例代码

<MaterialTable
      title="Editable Example"
      columns=state.columns
      data=state.data
      options=
        rowStyle: 
          wordWrap: "break-word",
        ,
        padding: "dense",
        tableLayout: "auto", //<-----here
        actionsColumnIndex: -1,
        exportButton: true,
        draggable: true,
     .....

【讨论】：

这并不是很有效，因为它为每个单元格添加了滚动条。我希望表格底部有 一个滚动条，以适应所有溢出列。

我明白了 - np - 我已经更新了答案...请检查 .. 我已经更新了代码框演示中的代码 .. 使用相同的链接（只需刷新浏览器）

可悲的是设置tableLayout: "auto", 不适用于我使用的那个特定表。它仅适用于您选择的表格，而不是我提供的表格。我可以切换到您使用的表格版本，但它的功能有限。它没有具有 add、update 和 delete 行操作的操作列，这正是我所需要的。

你能把你的代码放在codesandbox中并分享链接吗..

沙盒Link。我在沙盒中遇到的问题以及现在我理解为什么你的工作方式的原因是沙盒中的代码以一种奇怪的方式工作，但在反应应用程序中却没有。尝试构建一个 React 应用，然后添加表格并找到解决方案。

【参考方案2】：

你可以添加

overflow-x : auto

到父组件