如何移除material-table中的全选复选框或自定义全选交互逻辑？

方案1：直接移除全选复选框（无额外功能） #

通过自定义SelectionHeader组件覆盖默认的表头全选框位置，直接返回空即可隐藏全选入口，代码示例如下：

import MaterialTable from 'material-table';

function App() {
  return (
    <MaterialTable
      // 原有columns、data等配置保持不变
      options={{
        selection: true,
        // 其他原有options配置不变
      }}
      components={{
        // 覆盖全选框所在的头部组件，直接返回空实现隐藏
        SelectionHeader: () => null,
      }}
    />
  )
}

方案2：保留全选框位置、禁用全选功能并弹出自定义提示 #

如果需要保留占位、用户点击时给出提示，可以按如下方式实现：

import MaterialTable from 'material-table';
import { Checkbox, Snackbar } from '@material-ui/core';
import { useState } from 'react';

function App() {
  // 控制提示弹窗显隐
  const [tipVisible, setTipVisible] = useState(false);

  return (
    <>
      <MaterialTable
        // 原有columns、data等配置保持不变
        options={{
          selection: true,
          // 其他原有options配置不变
        }}
        components={{
          SelectionHeader: () => (
            <Checkbox 
              checked={false}
              disabled
              onClick={(e) => {
                e.preventDefault();
                setTipVisible(true);
              }}
            />
          )
        }}
      />
      {/* 自定义提示弹窗 */}
      <Snackbar
        open={tipVisible}
        autoHideDuration={3000}
        onClose={() => setTipVisible(false)}
        message="暂不支持全选所有数据操作"
      />
    </>
  )
}

低版本兼容备用方案 #

如果你使用的material-table版本较低不支持SelectionHeader自定义插槽，可以通过CSS隐藏全选框：

/* 可根据实际渲染的DOM类名调整选择器 */
.MuiTableHead-root .MuiTableCell-root:first-child .MuiCheckbox-root {
  display: none !important;
}

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