Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

JSX rendering dynamic TableHeaderColumn

See original GitHub issue

I am trying to dynamically generate the TableHeaderColumn within the BootstrapTable component, although cannot do it and receive an error.

The following works:

<BootstrapTable
            data={products2} striped={true} hover={true} condensed={true} columnFilter={true} pagination={true} search={true}>
            <TableHeaderColumn dataField="id" isKey={true} dataAlign="left" width="70px" dataSort={true}>#</TableHeaderColumn>
            <TableHeaderColumn dataField="carfilename" dataSort={true} width="300px">Car filename</TableHeaderColumn>
            <TableHeaderColumn dataField="local" dataSort={true} width="300px">local</TableHeaderColumn>
            <TableHeaderColumn dataField="localDev" dataSort={true} width="300px">localDEV</TableHeaderColumn>
            <TableHeaderColumn dataField="DEV" dataSort={true} width="300px">DEV</TableHeaderColumn>
            <TableHeaderColumn dataField="TRN" dataSort={true} width="300px">TRN</TableHeaderColumn>
</BootstrapTable>

However I need to generate the environment columns dynamically, but the following does not work:

<BootstrapTable data={products2} striped={true} hover={true} condensed={true} columnFilter={true} pagination={true} search={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="left" width="70px" dataSort={true}>#</TableHeaderColumn><TableHeaderColumn dataField="carfilename" dataSort={true} width="300px">Car filename</TableHeaderColumn>
      {envColumns}            
</BootstrapTable>

Related code: envColumns.push(<EnvironmentHeaderColumn envname={envvalue.envName} key={envkey} />);

var EnvironmentHeaderColumn = React.createClass({
    render: function () {
        var env = this.props.envname;
        // console.log('env is ' + env);

        return (
            <TableHeaderColumn dataField={env} dataAlign="center">{env}</TableHeaderColumn>
        );
    }
});

I receive the following error in Google Chrome:

Uncaught TypeError: Cannot read property ‘children’ of undefined

Issue Analytics

State:
Created 7 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

tester5commented, Sep 30, 2016

thanks very much for your help Allen. I managed to resolve some issues with column alignment (i.e. by fixing the # width) as well as use the advanced column filter. I also used the column formatter and applied some conditional styling to it. All good so far 😃

1reaction

AllenFangcommented, Sep 29, 2016

@tester5, sorry for lately reply,

Cause you leave one column in the BootstrapTable child, like your snippet,

<BootstrapTable data={products2} striped={true} hover={true} condensed={true} columnFilter={true} pagination={true} search={true}>
      <TableHeaderColumn dataField="id" isKey={true} dataAlign="left" width="70px" dataSort={true}>#</TableHeaderColumn><TableHeaderColumn dataField="carfilename" dataSort={true} width="300px">Car filename</TableHeaderColumn>
      {envColumns}            
</BootstrapTable>

you can fix it by following:

<BootstrapTable data={products2} striped={true} hover={true} condensed={true} columnFilter={true} pagination={true} search={true} keyField='id'>
      {envColumns}            
</BootstrapTable>

Thanks 😃