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>

      );

    }

  };