how to add dynamic columns in fixed data table

Question

I am trying to acheive a dynamicallly populated columns with data, using facebooks's fixed data table. I receive data with columns ranging from 10 - 100. So my intent was to create columns dynamically. Below is what I have tried

Class App extensd React.Component{
  render(){
    return (
            <Table
              rowHeight={50}
              headerHeight={30}
              groupHeaderHeight={30}
              rowsCount={10}
              width={tableWidth}
              height={500}
              {...this.props}>
              
            {["firstName","lastName","bs","email"].forEach(function(columnName){
            return <Column
                    columnKey={columnName}
                    header={ <Cell>Header</Cell>}
                    cell={<Cell>Cell Content</Cell>}
                    width={200}
  />
  )
    }
})}

It doesn't work. Has anyone tried anything like that before? Any help will be appreciated. Thank you in advance.

you have misspelled extends. Also the tags you open needs to be closed with closing tags if there are child components inside — Kishore Barik
– Kishore Barik, Commented Mar 28, 2016 at 13:20
In addition to the misspellings, the forEach method does not return a new array; you need to use map instead. — Jeff Wooden
– Jeff Wooden, Commented Mar 28, 2016 at 14:15

dhirajbasukala · Accepted Answer · 2016-03-28 17:51:13Z

4

What worked was, replacing forEach with map. Thanks @jeff-Wooden.

Class App extends React.Component{
  render(){
    return (
            <Table
              rowHeight={50}
              headerHeight={30}
              groupHeaderHeight={30}
              rowsCount={10}
              width={tableWidth}
              height={500}
              {...this.props}>
              
            {["firstName","lastName","bs","email"].map(function(columnName){
            return <Column
                    columnKey={columnName}
                    header={ <Cell>Header</Cell>}
                    cell={<Cell>Cell Content</Cell>}
                    width={200}
  />
  )
    }
})}

answered Mar 28, 2016 at 17:51

dhirajbasukala

1712 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add dynamic columns in fixed data table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related