有没有一种方法可以使用React-Table根据值对单个单元格进行样式设置？

Question

我想在React-Table中为单个单元格添加样式，但我无法实现。

const MOCK_DATA = [
  {
    amount: 1000,
    status: `SUCCESS`,
    updatedAt: 1629181927,
  },
  {
    amount: 2000,
    status: `FAILED`,
    updatedAt: 1629181927,
  },
];

export const COLUMNS = [
  {
    Header: 'Date',
    accessor: 'transactionDate',
  },
  {
    Header: 'Amount',
    accessor: 'amount',
  },
  {
    Header: 'Status',
    accessor: 'status',
  },
];

以下是 JSX 代码：

 <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>

假设我想根据数据的状态将单元格颜色更改为绿色或红色，我该如何实现？

注意：

- Vish

Answer 1

您可以在 react-table 中使用自定义单元格渲染选项。

  {
        Header: "Status",
        accessor: "status",
        Cell: (props) => {
          return (
            <p style={{ color: props.value === "SUCCESS" ? "green" : "red" }}>
              {props.value}
            </p>
          );
        }
      }

演示代码

当有多个状态需要为每个状态显示不同的颜色时，我们可以维护一个映射表。

const statusColorMap =  {
  SUCCESS: 'green',
  FAILED: 'red',
  PENDING: 'yellow'
  // etc 
}

现在我们可以这样做

<p style={{ color: statusColorMap[props.value] }}>{props.value}</p>;

- Shyam

---

这个方法确实有效，谢谢。但是最后一个问题，如果状态有三个值，并且想要添加第四个颜色，比如基于第三个条件的黄色，该怎么办？ - Vish

已更新我的回答和沙盒以涵蓋多種狀態。 - Shyam

Answer 2

你可以使用 status 来定义 class，就像这样。

 <tr {...row.getRowProps()} className={row.status === 'SUCCESS' ? 'active': 'warning'}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>

- Chuck