如何在Material-Table中自定义status列的渲染效果？

实现该效果不需要更换组件库，利用Material-Table列配置自带的render属性，搭配基础样式或者Material UI原生的Chip标签组件即可实现，且完全不影响原有搜索、筛选功能，代码改动量极小。

实现步骤 #

• 保留原有列的field属性配置，保证原生搜索、筛选逻辑正常运行
• 定义状态值与显示样式的映射表，方便后续迭代维护
• 给Status列添加render属性，根据每行的状态值返回对应样式的标签元素

核心代码示例 #

首先定义状态映射配置，可根据自身业务的状态枚举调整，key和接口返回的Status字段值保持一致：

const STATUS_CONFIG = {
  Approved: { text: "已通过", bgColor: "#e8f5e9", textColor: "#2e7d32" },
  Pending: { text: "待审核", bgColor: "#fff8e1", textColor: "#f57c00" },
  Rejected: { text: "已驳回", bgColor: "#ffebee", textColor: "#c62828" },
  Draft: { text: "草稿", bgColor: "#f5f5f5", textColor: "#616161" }
}

改造Status列配置：

const columns = [
  {
    title: "Status",
    field: "Status",
    render: (rowData) => {
      const currentStatus = STATUS_CONFIG[rowData.Status] || {
        text: rowData.Status,
        bgColor: "#f5f5f5",
        textColor: "#616161"
      };
      // 不想引入额外组件可以直接用手写span实现标签样式
      return (
        <span
          style={{
            padding: "4px 12px",
            borderRadius: "16px",
            backgroundColor: currentStatus.bgColor,
            color: currentStatus.textColor,
            fontSize: "0.875rem",
            fontWeight: 500
          }}
        >
          {currentStatus.text}
        </span>
      );
    }
  },
  // 其余列配置保持原有逻辑不变
];

如果项目已经引入Material UI组件库，可直接用Chip组件替代手写span，减少样式代码：

// MUI5 引入路径
import Chip from '@mui/material/Chip';
// MUI4 引入路径为 @material-ui/core/Chip

// render 内写法
return <Chip 
  size="small" 
  label={currentStatus.text} 
  sx={{bgcolor: currentStatus.bgColor, color: currentStatus.textColor, fontWeight: 500}} 
/>

完整整合示例 #

原有配置的表头样式、行交替变色等逻辑可以完全保留，直接替换对应代码即可：

import { useState } from 'react';
import MaterialTable from '@material-table/core';
import Chip from '@mui/material/Chip';

const STATUS_CONFIG = {
  Approved: { text: "已通过", bgColor: "#e8f5e9", textColor: "#2e7d32" },
  Pending: { text: "待审核", bgColor: "#fff8e1", textColor: "#f57c00" },
  Rejected: { text: "已驳回", bgColor: "#ffebee", textColor: "#c62828" },
  Draft: { text: "草稿", bgColor: "#f5f5f5", textColor: "#616161" }
};

export default function IntakeTable() {
  const [intakes, setIntakes] = useState({ intakes: [] });

  const columns = [
    {
      title: "Status",
      field: "Status",
      render: (rowData) => {
        const config = STATUS_CONFIG[rowData.Status] || {
          text: rowData.Status,
          bgColor: "#f5f5f5",
          textColor: "#616161"
        };
        return <Chip 
          size="small" 
          label={config.text} 
          sx={{ bgcolor: config.bgColor, color: config.textColor, fontWeight: 500 }} 
        />
      }
    }
  ];

  return (
    <MaterialTable
      data={intakes.intakes}
      columns={columns}
      // 原有表头样式配置保留即可
      options={{
        headerStyle: {
          backgroundColor: '#1976d2',
          color: '#fff',
          fontWeight: 600
        }
      }}
      // 原有交替行样式配置保留即可
      rowStyle={(data, index) => index % 2 === 0 ? { backgroundColor: '#fafafa' } : { backgroundColor: '#ffffff' }}
    />
  );
}

注意事项 #

• 只要保留列的field属性配置，Material-Table原生的全局搜索、列筛选功能不会受自定义渲染影响，不需要额外编写匹配逻辑
• 状态的颜色、文本可直接修改STATUS_CONFIG映射表调整，不需要修改渲染逻辑
• 不需要引入Ant Design等额外组件库，不会增加额外打包体积

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