Why is TableRow not hoverable in Grommet?

Question

I'm using grommet to develop an app. A bunch of the components in the library have an onClick prop and when you supply a callback function to the onClick prop of a component it becomes hoverable. But this doesn't seem to happen for the TableRow component. Fiddle here. It shouldbn't be too difficult to fix this with some css but I'm wondering if it's some design concept that I'm missing out on(i.e. A reason why TableRows in particular are not hoverable) or if there's a more grommet-esque to make TableRows hoverable.

Code:

index.html:

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

index.js:

var Box = Grommet.Box;
var Table = Grommet.Table;
var TableRow = Grommet.TableRow;
var TableHeader = Grommet.TableHeader;

const NotHoverable = () => {

let data = [{"name": "John", "title": "Developer", "city": "Dublin"},
            {"name": "Paul", "title": "Architect", "city": "Bristol"},
            {"name": "Mary", "title": "CTO", "city": "Berlin"},
            {"name": "Frank", "title": "Ops", "city": "New York"},
            {"name": "Jane", "title": "HR", "city": "Tokyo"}]

  return (
    <Box pad='small'>
      <Table>
        <TableHeader labels={["name", "title", "city"]} />
        <tbody>
          {data.map( (component, index) => 
            <TableRow onClick={() => console.log('Row Clicked!')} style={{"borderBottom": "1px solid"}} >
              <td>
                {component.name}
              </td>
              <td>
                {component.title}
              </td>
              <td>
                {component.city}
              </td>
            </TableRow>
          )}
        </tbody>
      </Table>
    </Box>
  )
}

const Hoverable = () => 
  <Box colorIndex={'grey-1'} onClick={() => console.log('Box clicked')}>
    Hoverable Box
  </Box>

ReactDOM.render(
  <Box>
    <NotHoverable />
    <hr />
    <Hoverable />
  </Box>,
  document.getElementById('container')
);

Answer 1

Grommet is designed with a mobile-first, or at least mobile-friendly, philosophy.

While a click is broadly equivalent to a tap, a mouse hover has no analogue on a touch device. onClick is almost a misnomer, as it comes from an abstract JavaScript-y way of thinking about it - many components have onActive or onSelect handlers instead.

As you've noted yourself, it's fairly easy to remedy this with some CSS or SCSS - just keep in mind mobile users will never see it. :)