如何调整mui-datatables组件的列宽和单元格宽度 解决多余空间触发横向滚动问题

• 第一步：给columns配置固定宽度，同时为表头和单元格指定宽度样式
  你可以在定义columns时为每一列单独设置宽限限制，示例如下：

  const columns = (data) => [
    {
      name: "字段名1",
      label: "列1显示名称",
      options: {
        width: "15%", // 也可以使用像素单位，比如120px
        setCellProps: () => ({ style: { minWidth: "15%", maxWidth: "15%" } }),
        setHeaderProps: () => ({ style: { minWidth: "15%", maxWidth: "15%" } }),
      }
    },
    // 其余列按照实际展示需求依次配置宽度即可
  ]
  

• 第二步：调整组件options配置，开启固定表格布局，修改响应式触发规则
  在原有配置基础上新增表格布局相关参数，修改后的配置如下：

  <MUIDataTable
    data={data}
    columns={columns(data)}
    options={{
      filterType: "textField",
      responsive: "standard", // 替换原有的simple值，避免默认横向滚动触发规则过于敏感
      selectableRows: "none",
      search: false,
      filter: false,
      download: false,
      print: false,
      pagination: true,
      viewColumns: false,
      elevation: 0,
      selectToolbarPlacement: "none",
      rowsPerPageOptions: [10, 20, 40, 80, 100],
      // 新增以下配置
      tableProps: {
        style: {
          tableLayout: "fixed", // 强制表格按照设定的列宽渲染，避免自动分配多余空白空间
          width: "100%",
        }
      },
    }}
  />
  

• 第三步：如果仍存在多余空间或者异常滚动，可以覆盖组件默认CSS样式
  加入以下样式调整默认边距和内容溢出规则：

  .MUIDataTableBodyCell-root, .MUIDataTableHeadCell-root {
    padding: 8px 12px !important; /* 缩小默认内边距，避免不必要的空间占用 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 内容过长时自动省略，避免撑宽单元格 */
  }
  .MUIDataTable-responsiveBase {
    overflow-x: hidden !important; /* 强制关闭多余的横向滚动条 */
  }
  

内容的提问来源于stack exchange，提问作者Aymen LMIR