React material-table如何自定义列宽并禁止单元格内容自动换行

问题原因 #

你遇到的是material-table的常见坑：库默认给所有单元格设置了最小宽度200px，且你开启的选择列、操作列也会占用表格宽度，你之前分配列宽时没有把这两部分宽度算入总占比，导致自定义宽度失效。

解决方法 #

1. 调窄ID列

在ID列的headerStyle和cellStyle中同时覆盖默认的最小宽度限制，三个宽度属性（width、minWidth、maxWidth）统一设置为你需要的数值即可生效，这里推荐用固定px单位代替百分比，避免多列占比计算误差：

{
  title: "Id",
  field: "id",
  type: "numeric",
  headerStyle: {
    backgroundColor: "purple",
    width: "60px",
    minWidth: "60px",
    maxWidth: "60px"
  },
  cellStyle: {
    width: "60px",
    minWidth: "60px",
    maxWidth: "60px",
    overflow: "hidden"
  }
}

如果需要全局清除默认最小宽度限制，可以在useStyles的root样式中添加以下规则：

root: {
  maxWidth: "600px",
  paddingTop: "2px",
  '& .MuiTableCell-root': {
    minWidth: 'unset !important'
  }
}

2. 时间列禁止换行

给时间列的cellStyle添加不换行规则，过长内容可以选择显示省略号避免溢出：

{
  title: "Time",
  field: "time",
  type: "string",
  headerStyle: {
    backgroundColor: "red",
    width: "120px",
    minWidth: "120px",
    maxWidth: "120px"
  },
  cellStyle: {
    width: "120px",
    minWidth: "120px",
    maxWidth: "120px",
    whiteSpace: "nowrap", // 禁止换行
    overflow: "hidden",
    textOverflow: "ellipsis" // 过长内容显示省略号，不需要可以删掉
  }
}

注意保留options里的tableLayout: "fixed"配置，这是固定列宽生效的前提。

内容的提问来源于stack exchange，提问作者David Sargrad