如何为mui-datatables的现有排序、搜索按钮添加文本标签

组件本身没有提供直接给图标按钮追加相邻文本的配置项，通过官方开放的自定义插槽就能实现，不需要修改源码：

1. 顶部搜索按钮加文本 #

两种实现方式，按需选择即可：

• 方式一：覆盖默认搜索按钮组件，改动最小
  直接在options里加components配置，替换默认的纯图标搜索按钮，在图标后追加文本即可，原有搜索逻辑完全保留：

import { Button } from '@mui/material';

const options = {
  resizableColumns: true,
  selectableRows: "none",
  responsive: "standard",
  print: false,
  download: false,
  viewColumns: false,
  // 追加以下配置
  components: {
    SearchButton: (buttonProps) => {
      // 透传所有原生props，保证点击事件、原有样式不丢失
      return (
        <Button {...buttonProps} startIcon={buttonProps.children}>
          搜索
        </Button>
      )
    }
  }
};

• 方式二：完全自定义工具栏搜索区域
  如果需要调整搜索框、按钮的布局，就关掉默认搜索控件，用customToolbar渲染自定义的搜索模块：

import { Box, TextField, Button } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import { useState } from 'react';

// 组件内部
const [searchVal, setSearchVal] = useState('');
const options = {
  // 原有配置保持不变
  search: false, // 关闭默认搜索控件
  customToolbar: ({ onSearchChange }) => {
    return (
      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
        <TextField
          size="small"
          value={searchVal}
          onChange={(e) => {
            setSearchVal(e.target.value);
            onSearchChange(e.target.value); // 调用内置搜索方法，不需要自行实现过滤逻辑
          }}
          placeholder="输入关键词"
        />
        <Button startIcon={<SearchIcon />}>搜索</Button>
      </Box>
    )
  }
}

2. 表头排序按钮加文本 #

逐列配置customHeadRender自定义表头渲染即可，原有排序逻辑可以直接复用：

import { TableCell, Box } from '@mui/material';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';

const columns = [
  {
    name: "id",
    label: "ID",
    options: {
      customHeadRender: ({ index, label, sortDirection, toggleSort }) => {
        return (
          <TableCell 
            onClick={() => toggleSort(index)} 
            sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer' }}
          >
            {label}
            <Box component="span" sx={{fontSize: '0.875rem'}}>排序</Box>
            {sortDirection === 'asc' 
              ? <ArrowUpwardIcon fontSize="small" /> 
              : sortDirection === 'desc'
                ? <ArrowDownwardIcon fontSize="small" />
                : null
            }
          </TableCell>
        )
      }
    }
  },
  // 其余列按相同格式配置即可
];

如果所有列都要加统一的排序文本，直接全局覆盖TableHeadCell组件即可，不需要逐列写配置。

提示：如果使用的是MUI v5 + mui-datatables 4.x以上版本，自定义组件时记得透传所有传入props，避免丢失默认的交互、样式逻辑。

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