是否有方法使用基于值的反应表样式单个单元格?

Question

我想在反应表中设置单个单元格的样式，但是我不能这样做。

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>

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

注意:

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>;

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>