title: Material Table rowStyle background color change based on cell value in
body: <p>I am trying to have the color of the row change colors based on the priority number. For example, if the priority is 4 the color of the entire row should be blue. The problem is that I'm unsure of how to achieve this. I know Material Table assigns ID's to the rows, but I have no way of accessing them. Below is what I have come up with so far. I need options[backgroundColor] to be set based on the priority number. I have a codesandbox here as well <a href="https://codesandbox.io/s/notifications-material-ui-spq45" rel="nofollow noreferrer">https://codesandbox.io/s/notifications-material-ui-spq45</a></p>
  <pre><code>import React from &quot;react&quot;;
  import { Container } from &quot;react-bootstrap&quot;;
  import MaterialTable from &quot;material-table&quot;;
  import FilterListIcon from &quot;@material-ui/icons/FilterList&quot;;
  import SearchIcon from &quot;@material-ui/icons/Search&quot;;
  import FirstPage from &quot;@material-ui/icons/FirstPage&quot;;
  import LastPage from &quot;@material-ui/icons/LastPage&quot;;
  import ChevronLeft from &quot;@material-ui/icons/ChevronLeft&quot;;
  import ChevronRight from &quot;@material-ui/icons/ChevronRight&quot;;
  import CloseIcon from &quot;@material-ui/icons/Close&quot;;
  
  function App() {
  
    //loop through the array of priority numbers, and display color based on number
    
    function colors(num) {
  
      for(let i = 0; i &lt; num.length; i++) {
      if (num[i] === 4) {
        options.rowStyle.backgroundColor = &quot;blue&quot;;
      }
  
      if (num[i] === 3) {
        options.rowStyle.backgroundColor = &quot;red&quot;;
      }
  
      console.log(num[i]);
    }
  }
  
    let data = [
      {
        date: &quot;06-29-2021&quot;,
        subject: &quot;CANBUS LOSS, Automatic Reboot!&quot;,
        message:
          &quot;SCMs CANBUS LOSS for more than 15 min, Automatic System Reboot!&quot;,
        category: &quot;System&quot;,
        priority: 4,
        error: &quot;SYS0080&quot;
      },
  
      {
        date: &quot;06-28-2021&quot;,
        subject: &quot;Reboot!&quot;,
        message: &quot;Automatic System Reboot!&quot;,
        category: &quot;Alarm&quot;,
        priority: 3,
        error: &quot;SYS0090&quot;
      },
      {
        date: &quot;06-25-2021&quot;,
        subject: &quot;Testing!&quot;,
        message: &quot;Generator not running!&quot;,
        category: &quot;Generator&quot;,
        priority: 2,
        error: &quot;SYS0050&quot;
      }
    ];
  
    let columns = [
      { title: &quot;Date&quot;, field: &quot;date&quot; },
      { title: &quot;Subject&quot;, field: &quot;subject&quot; },
      { title: &quot;Message&quot;, field: &quot;message&quot; },
      { title: &quot;Category&quot;, field: &quot;category&quot; },
      { title: &quot;Priority Level&quot;, field: &quot;priority&quot; },
      { title: &quot;Error Code&quot;, field: &quot;error&quot; }
    ];
  
    let options = {
      filtering: false,
      sorting: true,
      rowStyle: {
      fontFamily: &quot;Mulish-Regular&quot;,
      backgroundColor: &quot;&quot;
      
      
         
       
      },
      headerStyle: {
        fontFamily: &quot;Mulish-Regular&quot;,
        fontSize: &quot;1.1em&quot;,
        fontWeight: &quot;600&quot;,
        backgroundColor: &quot;#D1D1D8&quot;
      },
      searchFieldStyle: {
        fontFamily: &quot;Mulish-Regular&quot;
      }
    };
  // Loop through all the data and find the priority number, and put it in an array
  
    let map = data.map((x) =&gt; x.priority);
    console.log(map);
    colors(map);
  
    return (
      &lt;&gt;
        &lt;Container&gt;
          &lt;MaterialTable
            title=&quot;&quot;
            columns={columns}
            data={data}
            options={options}
            icons={{
              Filter: (props) =&gt; &lt;FilterListIcon style={{ fill: &quot;#2D3155 &quot; }} /&gt;,
              Search: (props) =&gt; &lt;SearchIcon style={{ fill: &quot;#2D3155 &quot; }} /&gt;,
              FirstPage: (props) =&gt; &lt;FirstPage style={{ fill: &quot;#2D3155 &quot; }} /&gt;,
              LastPage: (props) =&gt; &lt;LastPage style={{ fill: &quot;#2D3155 &quot; }} /&gt;,
              NextPage: (props) =&gt; &lt;ChevronRight style={{ fill: &quot;#2D3155 &quot; }} /&gt;,
              PreviousPage: (props) =&gt; (
                &lt;ChevronLeft style={{ fill: &quot;#2D3155 &quot; }} /&gt;
              ),
              SortArrow: (props) =&gt; (
                &lt;FilterListIcon
                  style={{ fill: &quot;#2D3155 &quot;, fontSize: &quot;1.4em&quot;, margin: &quot;.4em&quot; }}
                /&gt;
              ),
              ResetSearch: (props) =&gt; &lt;CloseIcon style={{ fill: &quot;#2D3155 &quot; }} /&gt;
            }}
          /&gt;
        &lt;/Container&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>