Right-aligning columns results in right-aligned headers in mobile view #1681
Description
When right-aligning a column, the mobile view will also have a right-aligned header in the mobile card view. This doesn't really make sense for a card view since the headers move to the left of the data.
Expected Behavior
In the mobile card view, headers should always be left-aligned since they appear vertically.
Current Behavior
Currently right-aligned headers are still right-aligned in vertical view.
Steps to Reproduce (for bugs)
https://codesandbox.io/s/vigorous-goldwasser-tb53v
- Right align one header in the table
- Use mobile view either default or with "responsive": "vertical"
Your Environment
| Tech | Version |
|---|---|
| Material-UI | 4.11.3 |
| MUI-datatables | 3.7.6 |
| React | 17.0.1 |
| browser | Chrome 89.0.4389.82 |