Change Expandable Icon in TableSelectCell to Better Conform to Material

[gabrielliwerant]

By the way, thank you for all your hard on this great library!

And now for a nitpick:

The icon to activate an expandable row is a right-facing arrow icon that animates clockwise 90 degrees. According to the material specs for collapsibles (https://material.io/design/components/lists.html#implementation, admittedly this applies to lists and not tables, but still sets a good precedent), the arrow should be downward facing for collapsed rows and then animate 180 degrees to the upward position for expanded rows.

Expected Behavior

Expandable icons should begin in the downward position for collapsed rows and then change to the upward position for expanded rows.

Current Behavior

Expandable icons begin in the rightward facing position for collapsed rows and then change to the downward position for expanded rows.

Minimal example:

<MUIDataTable
      title='Example'
      data={[['foo'], ['bar']]}
      columns={['data']}
      options={{
            expandableRows: true,
            renderExpandableRow: () => <tr><td>expanded</td></tr>
      }}
/>

It looks like everything needed to do this is in https://github.com/gregnb/mui-datatables/blob/master/src/components/TableSelectCell.js. If you think this would be a good first issue and you accept contributions, I would be happy to submit a PR.

Thank you for reading.

[gregnb]

hey @gabrielliwerant thanks for raising the issue. It's sort of on the line for me here so what I'll do is mark this open for community feedback

[gabrielliwerant]

Fair enough, thank you for looking!