Mind Dump, Tech And Life Blog
written by Ivan Alenko
published under license Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)copy! share!
posted at 16. Oct '19

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'}}>{cell.original.total}</div>,

That’s it, it should work now.

Add Comment