如何在React material-table工具栏添加自定义quotations功能按钮

实现思路 #

通过重写material-table内置Toolbar组件的方式插入自定义按钮，将自定义按钮放在原生Toolbar内容之前渲染，即可自然出现在原有"add item"按钮的左侧，完全不会影响表格原有功能的正常使用。

代码实现 #

// 引入依赖，根据你实际安装的包版本调整引入路径
import { useState } from 'react';
import MaterialTable, { MTableToolbar } from '@material-table/core';
import { Button, Modal, Box } from '@mui/material';

// 模态框基础样式，可按需调整
const modalStyle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: 400,
  bgcolor: 'background.paper',
  border: '2px solid #000',
  boxShadow: 24,
  padding: 24,
};

function TablePage() {
  // 控制模态框显示隐藏的状态
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 自定义工具栏组件
  const CustomToolbar = (props) => (
    <div>
      {/* 自定义quotations按钮，放在原生工具栏之前就会渲染在左侧 */}
      <Button 
        variant="contained" 
        onClick={() => setIsModalOpen(true)} 
        style={{ marginRight: 12, marginBottom: 8 }}
      >
        quotations
      </Button>
      {/* 渲染原生工具栏的所有原有功能，包括add item按钮 */}
      <MTableToolbar {...props} />
    </div>
  );

  return (
    <div>
      <MaterialTable
        // 保留你原本的表格列配置
        columns={[
          { title: '名称', field: 'name' },
          { title: '数量', field: 'amount', type: 'numeric' }
        ]}
        // 保留你原本的表格数据配置
        data={[
          { name: '示例项1', amount: 10 },
          { name: '示例项2', amount: 20 }
        ]}
        // 保留你原本的可编辑配置，add item功能完全不受影响
        editable={{
          onRowAdd: (newData) => {
            // 原有新增逻辑
            return Promise.resolve();
          },
          onRowUpdate: (newData, oldData) => {
            // 原有编辑逻辑
            return Promise.resolve();
          },
          onRowDelete: (oldData) => {
            // 原有删除逻辑
            return Promise.resolve();
          }
        }}
        // 核心配置：替换默认工具栏为自定义组件
        components={{
          Toolbar: CustomToolbar
        }}
        title="表格标题"
      />

      {/* 信息展示模态框 */}
      <Modal
        open={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        aria-labelledby="quotations-info-title"
      >
        <Box sx={modalStyle}>
          <h2 id="quotations-info-title">相关信息</h2>
          <p>此处放置你需要展示的所有信息内容</p>
        </Box>
      </Modal>
    </div>
  )
}

export default TablePage;

注意事项 #

• 如果你使用的是旧版material-table包，MTableToolbar的引入路径需要改为import { MTableToolbar } from 'material-table'
• 可以自行调整按钮的样式、模态框的内容和样式，匹配你的项目设计规范
• 原有表格的新增、编辑、删除等配置不需要做任何修改，完全保留原生功能

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