React Material-Table 如何给数组渲染的单元格内容添加逗号分隔符？

你不需要重写默认单元格组件，也不需要修改原始数据，两种轻量方案即可实现需求：

方案1：单数组列单独配置（推荐，适配少量数组字段场景） #

直接在对应列的配置中添加render属性，对数组字段做逗号分隔格式化即可：

const columns = [
  // 其他常规列配置保持不变
  {
    title: '工作站标签', // 替换为你的实际列名
    field: 'workstationTags', // 替换为你的数组字段名
    render: rowData => rowData.workstationTags?.join(', ') ?? ''
  }
]

// Material Table 调用时保持原有逻辑不变
<MaterialTable
  columns={columns}
  data={yourOriginalData}
  // 其他原有配置项
/>

方案2：全局统一处理数组字段（适配多数组字段场景） #

如果你的表格中有多个列都是数组格式，可以自定义Cell组件做统一判断，不用每个列重复写render逻辑：

import { MTableCell } from "@material-ui/core";

// 自定义包装单元格组件
const CustomTableCell = ({ row, column, ...restProps }) => {
  const cellValue = row[column.field];
  // 仅对数组类型的值做格式化，其他类型保持默认渲染逻辑
  if (Array.isArray(cellValue)) {
    return <MTableCell {...restProps}>{cellValue.join(', ')}</MTableCell>
  }
  return <MTableCell {...restProps}>{cellValue}</MTableCell>
}

// Material Table 调用时传入自定义组件
<MaterialTable
  columns={columns}
  data={yourOriginalData}
  components={{
    Cell: CustomTableCell
  }}
  // 其他原有配置项
/>

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