我使用React.js和MUI-Datatables创建了一个简单的表:
import MUIDataTable from "mui-datatables";
const columns = ["Name", "Company", "City", "State"];
const data = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];
const options = {
filterType: 'checkbox',
};
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
如何将自定义CSS类添加到表中的单行中。可以说,我希望John Walsh的第二行具有绿色背景颜色。
更新:
使用customRowRender
可以为特定的行设置样式,但是我对解决方案仍然不满意,因为某些功能(如可选行)不再可用:
const options = {
filterType: "checkbox",
customRowRender: (data, dataIndex, rowIndex) => {
let style = {};
if (data[0] === "John Walsh") {
style.backgroundColor = "green";
}
return (
<TableRow style={style}>
<TableCell />
<TableCell>
<Typography>{data[0]}</Typography>
</TableCell>
<TableCell>
<Typography>{data[1]}</Typography>
</TableCell>
<TableCell>
<Typography>{data[2]}</Typography>
</TableCell>
<TableCell>
<Typography>{data[3]}</Typography>
</TableCell>
</TableRow>
);
}
};
答案 0 :(得分:3)
您在这里。
setRowProps: row => {
if (row[0] === "New") {
return {
style: { background: "snow" }
};
}
}
答案 1 :(得分:1)
您可以选择使用customRowRender
并为选定的行提供您自己的样式。由于它们都是不同的组件,因此它们可以使用道具,上下文或某种状态管理彼此“交谈”。