React-table: Hide <th> headers

[manelet]

I can't find an option to hide <th>
And if I do Header: null I still can see the empty <th>
I'm pretty sure I'm missing something.

Thanks for helping!

[tannerlinsley]

There is no option to hide the header. You could pass a custom header component that renders nothing using the TheadComponent prop and a noop component.

This is a question of implementation. We invite you to join the slack channel and ask for help there or on stack overflow. Thanks!

[hichamnaimi]

Hi manelgarcia,
You can use

getTheadThProps={function}

As a property for your reactTable to control each header style.
if you want to hide a specific header giving it's title you can do:

getTheadThProps={this.injectThProps}

with

 injectThProps = (state, rowInfo, column) => {
    if (column.Header === 'myHeaderTitle') {
      return {
        style: { display: 'none' }; // override style for 'myHeaderTitle'.
      }
    }
    // However you should return an object, if there is no styles you want to override do
  return {}; // no styles.
  }

[manelet]

Thanks! 👍

[ajeetshah]

We can hide (or customise) the table header using TheadComponent props as suggested by tannerlinsley as shown in below example:

const TheadComponent = props => null; // a component returning null (to hide) or you could write as per your requirement
<ReactTable 
    data={this.state.data}
    TheadComponent={TheadComponent}
    columns={columns}
/>