javascript - 突出显示MUI数据表中的行(Highlight rows in MUI-Datatables)

Question

I created a simple table using React.js and MUI-Datatables :

(我使用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}
/>

How can I add a custom CSS class to a single row inside the table.

(如何将自定义CSS类添加到表中的单行中。)

Lets say I want the second row with John Walsh to have a green background color.

(可以说，我希望John Walsh的第二行具有绿色背景色。)

  ask by Klaus translate from so

Answer 1

Just as a suggestion, i hope you get my idea :

(只是建议，我希望你能明白我的意思：)

For the CSS Part :

(对于CSS部分：)

.highlightRow {
  background-color :green;
}

highlight rows using react render

(使用react render突出显示行)

hasTobeHighlighted : function(data) {
      const isHovered = isSelected;
       for(var i=0; i< data.length;i++){
            if(data[i].includes('John Walsh'))
             return "highlightRow ";
       }

      return "";
    }

rows = React.createClass({
render: function() {
return ( 
      <MUIDataTable  title={"Employee List"}  data={data}  columns={columns}
       options={options} className={hasTobeHighlighted } />
       );
  }
});