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.

Left

do nothing

Center

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

Right

.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.