Some column headers don't render

Tags: #<Tag:0x00007f8b2b16f450>
#1

I am using React-tabs with the property “forceRenderTabPanel” on the top level element. This allows the column headers to be rendered, but also cuts a portion off.

The column headers render properly when I resize a column or make a change, which makes me think that I should be forcing a render to the table after I fill it with data.

  componentDidMount(){
    // load in the initial data from the server
    axios.get('http://localhost:3001/api/products', {headers: {
      'Access-Control-Allow-Origin': '*',
    },})
      .then(res => {
        const products = res.data;
        this.setState({products});
        this.updateColumnHeaders(products);
        this.hotTableComponent.current.hotInstance.render()
      })
  }

Did I miss something obvious, or did I go about this in an incorrect way?

#2

Hey @Brandon

Have you tried to use viewportColumnRenderingOffset option? If not please try to set it to 4 and let me know if it solves the issue.

You can also try to set a fixed width for the Handsontable width option.

#3

Yes, I have tried both of those options but I still have that little section of the column headers not rendering, although the width does fill the page.

#4

Hi @Brandon

Can you send a demo where this issue can be replicable?

#5