Highlight rows in MUI-Datatables

Question

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

I checked their readme. I see https://github.com/gregnb/mui-datatables#customize-styling or `customRowRender` function might help. Check them. — canbax, Nov 14 '19 at 12:01
Thanks for you comment. Customize Styling does not work because I dont want to style all rows. `customRowRender` may work but I as far as I see I need to render each cell on my own when I use it. — Klaus, Nov 14 '19 at 13:07
maybe you can put an if statement for the row index. I don't know reactjs but there is such functionality on angular — canbax, Nov 14 '19 at 14:15

score 9 · Accepted Answer · answered Mar 19 '20 at 02:42

9

Here you go.

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

answered Mar 19 '20 at 02:42

Ramesh Patel

108
2
7

3

Although we both know that the code is straight forward, still it's preferred to add some explanation for it, as well as considering the question is posted quite a long time ago. – keikai Mar 19 '20 at 02:53
yeah... a little more explanation would be nice but it solved it for me. Thanks. – Klaus Apr 21 '20 at 08:17
Does not work if the row is selectable with a checkbox. – Robin Wieruch Oct 09 '20 at 12:29

score 1 · Answer 2 · answered Dec 01 '19 at 13:48

1

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.

answered Dec 01 '19 at 13:48

Rhaidzsal Ali

158
8

Hi Ali, when I use `customBodyRender` I have to render every column on my own right? The column settings will be ignored. – Klaus Dec 02 '19 at 12:46
Yes, since every column object in the `columns` array have their own `customBodyRender` property and the default column settings will be ignored. However, you might want to use `customRowRender` so you only have to lookup on a single attribute on every row to do your 'green background color' logic. – Rhaidzsal Ali Dec 02 '19 at 12:56
It is working but I am still not 100% happy with this solution for now :) – Klaus Dec 02 '19 at 13:56
Thanks for the accept! Sure, I understand your point. However, you can also submit a feature request to their repo if you want. :) – Rhaidzsal Ali Dec 05 '19 at 15:35

Highlight rows in MUI-Datatables

2 Answers2