Table is not visible when column data is coming from state

• Versions

“react”: “^17.0.0” “react-dom”: “^17.0.0”,

• Problem

I am formatting my table data in format required by GridTable in componentDidMount() and then storing it in the react state. Now the problem is that the data is not visible on the table. However, if I serve local column data and continue serving state data to row prop things are working fine. I am not able to understand what is wrong.

While checking the documentation I noticed that there is a prop function named onRowsRequest which handles async row rendering. But I could not find a similar prop function for columns.

For your reference this is how my render function looks like <GridTable columns={this.state.columns} rows={this.state.rows} />

• Little hack

As I was trying to figure out what is wrong, I found that using onColumnsChange props is kind of solving the problem. All I did was <GridTable onColumnsChange={this.handleColumnChange} columns={this.state.columns} rows={this.state.rows} /> and handleColumnChange = (event) => { return event; };.

However, this is not a props fix as I can not change column visibility and move columns.

Any help will be really appreciated. Thank you in advance.

[manmohitgrewal1]

It worked! Thanks a lot @NadavShaar

[NadavShaar]

The issue is that the table cannot be mounted without any columns, why not initialize the state with the data instead of waiting it to mount empty?

constructor(props) {
    super(props);
    this.state = {
      rows: this.createTableRows(),
      columns: this.createTableColumns()
    };
  }

And you can skip the componentDidMount lifecycle.