如何调整material-table操作列宽度，删除多余空白空间？

• 该问题和隐藏列配置无关，是material-table默认给操作列设置了较大的最小宽度与内边距导致的空白冗余，按以下步骤修改即可：

1. 全局配置操作列样式 #

在MaterialTable组件的options属性中新增操作列专属样式配置，覆盖默认的宽距规则：

options={{
  paging: true,
  pageSize: 15,
  // 配置操作列单元格整体样式
  actionsColumnStyle: {
    maxWidth: "50px", // 可根据实际按钮大小调整，仅保留1个行操作按钮可设到40px
    padding: "0 4px",
    textAlign: "center",
  },
  // 配置操作列表头样式
  actionsColumnHeaderStyle: {
    maxWidth: "50px",
    padding: "0 4px",
    textAlign: "center",
  },
  // 若需要列宽更稳定可开启固定布局，配合普通列自定义width使用效果更好
  // tableLayout: "fixed",
}}

2. 简化行操作按钮的多余边距 #

删除单个action配置中不生效的headerStyle、padding属性，仅给图标配置去除默认边距的样式：

actions={[
  {
    icon: tableIcons.Edit,
    // 去掉图标默认内边距，缩小按钮占位
    iconProps: { style: { fontSize: "16px", padding: 0 } },
    tooltip: "Delete User",
    onClick: (event, rowData) => this.getRowValue(rowData.ID),
  },
  // 其余isFreeAction为true的按钮展示在表头右上角，不影响操作列宽度，无需修改
  {
    icon: tableIcons.Add,
    tooltip: "Add Request",
    isFreeAction: true,
    onClick: this.reset,
  },
  {
    icon: tableIcons.InfoIcon,
    tooltip: "Add Request",
    isFreeAction: true,
    onClick: this.Info,
  },
]}

3. 可选优化（列宽挤压问题适配） #

如果开启了tableLayout: "fixed"，可以给普通列也设置自定义宽度，避免内容被挤压：

const columns = [
  { title: 'Sl.No', field: 'ID', width: "80px" },
  { title: 'TDC', field: 'TDC', width: "100px" },
  { title: 'Customer Name', field: 'CustName', width: "150px" },
  { title: 'Supply Plant', field: 'SPCode', width: "120px" },
  { title: 'Cost Impact', field: 'Cost', width: "120px" },
  { title: 'Date', field: 'CreatedOn', width: "120px" },
];

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