title: Highlight rows in MUI-Datatables
body: <p>I created a simple table using React.js and <a href="https://github.com/gregnb/mui-datatables" rel="nofollow noreferrer">MUI-Datatables</a>:</p>
  
  <pre><code>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',
  };
  
  &lt;MUIDataTable
    title={"Employee List"}
    data={data}
    columns={columns}
    options={options}
  /&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Using <code>customRowRender</code> 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:</p>
  
  <pre><code>const options = {
      filterType: "checkbox",
      customRowRender: (data, dataIndex, rowIndex) =&gt; {
        let style = {};
        if (data[0] === "John Walsh") {
          style.backgroundColor = "green";
        }
        return (
          &lt;TableRow style={style}&gt;
            &lt;TableCell /&gt;
            &lt;TableCell&gt;
              &lt;Typography&gt;{data[0]}&lt;/Typography&gt;
            &lt;/TableCell&gt;
            &lt;TableCell&gt;
              &lt;Typography&gt;{data[1]}&lt;/Typography&gt;
            &lt;/TableCell&gt;
            &lt;TableCell&gt;
              &lt;Typography&gt;{data[2]}&lt;/Typography&gt;
            &lt;/TableCell&gt;
            &lt;TableCell&gt;
              &lt;Typography&gt;{data[3]}&lt;/Typography&gt;
            &lt;/TableCell&gt;
          &lt;/TableRow&gt;
        );
      }
    };
  </code></pre>