mui-datatables多行删除功能如何修改替换默认删除图标

完全可以实现，通过mui-datatables官方提供的customToolbarSelect配置项即可完成图标替换，且可以100%保留原有删除功能，不需要改动底层逻辑。

实现步骤 #

• 第一步：准备你需要替换的自定义图标，可以是Material UI内置图标，也可以是自行封装的SVG图标组件。
• 第二步：在表格的options配置中添加customToolbarSelect字段，该字段为函数类型，接收选中行信息、表格数据、选中状态控制三个入参，返回自定义的选中态工具栏内容。
• 第三步：在自定义工具栏中替换删除图标，绑定原有删除逻辑即可。

代码示例 #

// 引入依赖，这里以Material UI的DeleteForever图标作为自定义示例
import MUIDataTable from "mui-datatables";
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import { useState } from "react";

const ExampleTable = () => {
  // 表格数据源示例
  const [data, setData] = useState([
    ["Joe James", "Test Corp", "Yonkers", "NY"],
    ["John Walsh", "Test Corp", "Hartford", "CT"],
    ["Bob Herm", "Test Corp", "Tampa", "FL"],
    ["James Houston", "Test Corp", "Dallas", "TX"],
  ]);

  // 表格列配置示例
  const columns = ["Name", "Company", "City", "State"];

  const options = {
    selectableRows: "multiple", // 开启行选中，和你现有配置保持一致即可
    // 核心配置：自定义选中态工具栏
    customToolbarSelect: (selectedRows, displayData, setSelectedRows) => {
      // 复用原有删除逻辑
      const handleCustomDelete = () => {
        const updatedData = [...data];
        // 倒序删除避免索引偏移问题
        selectedRows.data
          .map(row => row.dataIndex)
          .sort((a, b) => b - a)
          .forEach(index => updatedData.splice(index, 1));
        // 更新数据源
        setData(updatedData);
        // 清空选中状态
        setSelectedRows([]);
      };

      return (
        <div style={{ padding: "8px" }}>
          {/* 替换为自定义图标，绑定删除逻辑 */}
          <DeleteForeverIcon
            onClick={handleCustomDelete}
            style={{ cursor: "pointer", color: "#d32f2f" }}
          />
        </div>
      );
    },
  };

  return <MUIDataTable title="员工列表" data={data} columns={columns} options={options} />;
};

export default ExampleTable;

补充说明 #

• 自定义图标无类型限制，只要是合法的React组件都可以直接替换，不需要适配额外规则。
• 如果需要保留原有选中工具栏的其他功能（比如批量导出等），只需要在返回的自定义工具栏节点中添加对应逻辑即可，不会和现有功能冲突。

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