title: Adding and removing CSS classes to the parent row based on the state of editable data in a child cell?
body: <p>I’m working with the <a href="https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data" rel="nofollow noreferrer">Editable Data</a> example and it’s going swimmingly. One feature I need to add that I’m unsure of is the ability to set CSS classes on row based on the state of the data in a child cell. For instance:</p>
  <ol>
  <li>the table has a <code>firstName</code> column and that column is editable;</li>
  <li>once the user clicks into the input and changes the value, the row should have an <code>.active</code> class added to it (either within an <code>onFocus</code> or <code>onChange</code> event);</li>
  <li>when they submit the change (<code>onBlur</code> or hit the <code>Enter</code> key), that row will also get a <code>.updating</code> class;</li>
  <li>if the update is successful, the <code>.active</code> and <code>.updating</code> classes are removed;</li>
  <li>if not, the <code>.updating</code> is removed and a new <code>.errored</code> class is added.</li>
  </ol>
  <p>Suggestions around intelligent ways to pass CSS classes around to the parent row like this based on a Cell’s editable input value?</p>
  <p>Should I keep this out of react-table entirely and just keep tracks of row using <code>useState</code> and the row id?</p>
  <p>Really appreciate any help I can get!</p>