如何基于条件为MDBDataTable单元格设置颜色？

MDBDataTable支持在表格单元格中插入JSX元素，所以可以通过预处理数据，给目标单元格添加条件样式来实现需求。以下是两种可行方案：

方案一：自定义CSS类 + 数据预处理 #

1. 先在项目的CSS文件中定义对应阈值的样式类：

/* 超过70%的绿色背景 */
.cell-high {
  background-color: #d4edda;
}
/* 超过50%的黄色背景 */
.cell-medium {
  background-color: #fff3cd;
}

2. 处理从MongoDB获取的原始数据，生成MDBDataTable所需的rows结构时，对目标字段做条件判断：

// 假设rawData是从MongoDB获取的原始数据数组
const tableRows = rawData.map(item => {
  // 提取百分比数值（如果数据带%符号，先转成纯数字）
  const percent = parseFloat(item.percentage.replace('%', ''));
  let cellClassName = '';
  
  if (percent > 70) {
    cellClassName = 'cell-high';
  } else if (percent > 50) {
    cellClassName = 'cell-medium';
  }

  return {
    ...item,
    // 用带类名的span包裹目标字段值
    percentage: <span className={cellClassName}>{item.percentage}</span>
  };
});

3. 在MDBDataTable中使用处理后的rows：

<MDBDataTable
  data={{
    columns: [
      { label: '数据名称', field: 'name' },
      { label: '占比', field: 'percentage' },
      // 其他列配置...
    ],
    rows: tableRows
  }}
/>

方案二：内联样式（无需额外CSS） #

如果不想单独写CSS类，可以直接通过内联样式实现：

const tableRows = rawData.map(item => {
  const percent = parseFloat(item.percentage.replace('%', ''));
  let cellStyle = {};

  if (percent > 70) {
    cellStyle = { backgroundColor: '#d4edda' };
  } else if (percent > 50) {
    cellStyle = { backgroundColor: '#fff3cd' };
  }

  return {
    ...item,
    percentage: <span style={cellStyle}>{item.percentage}</span>
  };
});

关键注意点 #

• 数值转换要准确：如果原始数据是带%的字符串，必须先转成数字再做阈值判断，避免字符串比较的错误
• MDBDataTable的rows字段支持传入JSX元素，所以用<span>包裹不会破坏表格的渲染结构
• 如果需要给整行设置样式，可以在rows的每个对象中添加className属性，逻辑和单元格样式一致

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