CODEWITHSUNDEEP
reactjsdynamic-columnsfixed-data-table
dhirajbasukala
dhirajbasukala

Reputation: 171

how to add dynamic columns in fixed data table

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.

Upvotes: 2

Views: 5442

Answers (1)

dhirajbasukala
dhirajbasukala

Reputation: 171

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}
  />
  )
    }
})}

Upvotes: 4

Related Questions