title: Add css styling to Reactable column
body: <p>I wish to add a conditional colored square instead of a number to a column in a Reactable table.</p>
  <p>For example, this table's Flag column will be Red if Flag &lt;=2 and Green if Flag &gt; 2.</p>
  <p>Reactable Table with Flag Column</p>
  <pre><code>library(&quot;tidyverse&quot;)
  library(&quot;reactable&quot;)
  
  df &lt;- iris %&gt;% 
    mutate(Flag = 1:150)
  
  reactable(df[1:4,],
            columns = list(
              Species = colDef(width = 70),
            #  Flag = colDef(width = 50),
              
              Flag = colDef(style = function(value) {
                if (value &gt; 2) {
                  my_class &lt;- &quot;box red&quot;
                } else if (value &lt;= 2) {
                  my_class &lt;- &quot;box green&quot;
                }  
                # This is wrong
                htmltools::div(class = class)
              })
            ))
  </code></pre>
  <p>This is the css file that I think will create my coloured square.</p>
  <pre><code> .row {
      display : flex;
      align-items : center;
      margin-bottom: 15px;
    }
  .box {
    height: 20px;
    width: 20px;
    border: 1px solid black;
    margin-right : 5px;
  }
  
  .red {
    background-color: red;
  }
  
  .green {
    background-color: green;
  }
  
  .blue {
    background-color: blue;
  }
  </code></pre>
  <p>I think this is a relevant Reactable <a href="https://glin.github.io/reactable/articles/cookbook/cookbook.html" rel="nofollow noreferrer">example</a> that has R and css in separate files as well as conditional formatting.</p>
  <p>R</p>
  <pre><code>orders &lt;- data.frame(
    Order = 2300:2304,
    Created = seq(as.Date(&quot;2019-04-01&quot;), by = &quot;day&quot;, length.out = 5),
    Customer = sample(rownames(MASS::painters), 5),
    Status = sample(c(&quot;Pending&quot;, &quot;Paid&quot;, &quot;Canceled&quot;), 5, replace = TRUE)
  )
  
  reactable(orders, columns = list(
    Status = colDef(cell = function(value) {
      class &lt;- paste0(&quot;tag status-&quot;, tolower(value))
      htmltools::div(class = class, value)
    })
  ))
  </code></pre>
  <p>css</p>
  <pre><code>.tag {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 12px;
  }
  
  .status-paid {
    background: hsl(116, 60%, 90%);
    color: hsl(116, 30%, 25%);
  }
  
  .status-pending {
    background: hsl(230, 70%, 90%);
    color: hsl(230, 45%, 30%);
  }
  
  .status-canceled {
    background: hsl(350, 70%, 90%);
    color: hsl(350, 45%, 30%);
  }
  </code></pre>
  <p>However, I can't reproduce this example with the colored ovals in the Status column. I'm not sure how to relate the R code to the css code.</p>