React-table: Word Wrap in Table Header

[rseningen]

Is there a way to automatically wrap the text in the table header? I have several columns and the text in the headers is being truncated.

[gary-menzel]

Change the overflow to unset - by default, overflow is hidden on every cell.

You can do that either by setting the headerStyle on each column definition or using one of the appropriate get*Props overrides to return the style you want.

[rseningen]

Thanks for your help Gary. That removed the ellipsis for me, but wasn't what I was after. I was trying to get the text to wrap to the next line. I was able to force line breaks with this:

Header:() => <div>This is my<br/>long header</div>

[debgong]

A more general solution is to add a custom class:

.wordwrap {
  white-space: pre-line !important;
  word-wrap: break-word;
}

Then add the following prop your column definition: headerClassName: "wordwrap"

[americos]

Or if you want to apply your wordwarp class to all headers:

import ReactTable, { ReactTableDefaults } from 'react-table'

const columnDefaults = { ...ReactTableDefaults.column, headerClassName: 'wordwrap' }
...
return (
  <ReactTable
    ...Other props go here
    column={columnDefaults}
  />
)