突出显示 MUI 数据表中的行答案

【问题标题】：突出显示 MUI 数据表中的行
【发布时间】：2020-03-10 09:08:49
【问题描述】：

我使用 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 可以设置特定行的样式，但我仍然对解决方案不是 100% 满意，因为诸如可选择行之类的某些功能不再开箱即用：

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

【问题讨论】：

我查看了他们的自述文件。我看到github.com/gregnb/mui-datatables#customize-styling 或customRowRender 函数可能会有所帮助。检查它们。
感谢您的评论。自定义样式不起作用，因为我不想为所有行设置样式。 customRowRender 可能有效，但据我所知，使用时我需要自己渲染每个单元格。
也许您可以为行索引添加一个 if 语句。我不知道reactjs，但角度上有这样的功能

标签： javascript reactjs material-ui mui-datatable

【解决方案1】：

给你。

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

【讨论】：

虽然我们都知道代码是直截了当的，但还是最好为它添加一些解释，并且考虑到这个问题是很久以前发布的。
是的......多一点解释会很好，但它为我解决了它。谢谢。
如果可以使用复选框选择行，则不起作用。

【解决方案2】：

您可以选择使用customRowRender 并为选定的行提供您自己的样式。由于它们都是不同的组件，因此它们可以使用道具、上下文或某种状态管理相互“对话”。

【讨论】：

嗨 Ali，当我使用 customBodyRender 时，我必须自己渲染每一列吗？列设置将被忽略。
是的，因为columns 数组中的每个列对象都有自己的customBodyRender 属性，默认列设置将被忽略。但是，您可能想使用customRowRender，因此您只需在每一行上查找一个属性即可执行“绿色背景颜色”逻辑。
它正在工作，但我现在对这个解决方案仍然不是 100% 满意 :)
感谢您的接受！当然，我明白你的意思。但是，您也可以根据需要向他们的仓库提交功能请求。 :)