CODEWITHSUNDEEP
javascriptreactjsmaterial-uimui-datatable
Klaus
Klaus

Reputation: 1220

Highlight rows in MUI-Datatables

I created a simple table using React.js and 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. Lets say I want the second row with John Walsh to have a green background color.

Update:

Using customRowRender allows to style a certain row but I am still not 100% happy with the solution because certain features like selectable rows do not work out of the box anymore:

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

Upvotes: 4

Views: 12062

Answers (2)

Ramesh Patel
Ramesh Patel

Reputation: 108

Here you go. 

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

Upvotes: 9

Rhaidzsal Ali
Rhaidzsal Ali

Reputation: 168

You may opt to use the customRowRender and provide your own styles for a selected row. Since they are both different components, they may 'talk' to each other using props, context or some sort of state management.

Upvotes: 1

Related Questions