突出显示 MUI 数据表中的行

Question

我使用 React.js 和 MUI-Datatables 创建了一个简单的 table:

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 class 添加到 table 内的单行中。比方说，我希望 John Walsh 的第二行具有绿色背景色。

更新：

使用 customRowRender 可以设置特定行的样式，但我仍然不是 100% 满意该解决方案，因为某些功能（例如选择 table 行）不再开箱即用：

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

Answer 1

您可以选择使用 customRowRender 并为所选行提供您自己的样式。由于它们都是不同的组件，它们可能 'talk' 使用 props、上下文或某种状态管理相互

Answer 2

给你。

setRowProps: row => { 
        if (row[0] === "New") {
          return {
            style: { background: "snow" }
          };
        }
      }

突出显示 MUI 数据表中的行

Highlight rows in MUI-Datatables

javascript

reactjs

material-ui

mui-datatable