Howto Align Resizable Header in React-Table

To resize a standard header, use these suggesions.

Resizable header contains additional nested div which makes these fixes uneffective.

We need to create custom CSS rules. It's ugly since I use styled-components, but well, react-table v6 is not mantained anymore and v7 is in beta.


do nothing


.react-table-header-align-center .rt-resizable-header-content {
  margin: 0 auto;


.react-table-header-align-right .rt-resizable-header-content {
  margin: 0 0 0 auto;

and add CSS class name to a column:

  headerClassName: 'react-table-header-align-right',
  Header: 'Total',
  Cell: cell => <div style={{ text-align: 'right'}}>{}</div>,

That's it, it should work now.