Can we have dynamic headers in spreadjs?

Question

I have integrated spreadJS with react framework. In spreadjs they only use the header name specified in JSON and accordingly the data get displayed in the spreadsheet.

Can we have dynamic headers and their respective value using JSON?

import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';

this.data = [
    {
        "id": 1934,
        "date": "2018-11-01",
        "value": 10.0
    },
    {
        "id": 1935,
        "date": "2018-12-01",
        "value": 10.0
    },
    {
        "id": 1935,
        "date": "2018-12-01",
        "value": 10.0
    }
]


class SpreadJsSample extends React.Component {
   render() {
    return (
      <div>
        <SpreadSheets>
          <Worksheet data={this.data}>
            {this.data.map(index => {
              <Column width={150} data={index.date} />;
            })}
          </Worksheet>
        </SpreadSheets>
      </div>
    );
  }
}

I am getting following errors

1. The above error occurred in the Worksheet component:

2. Uncaught Cannot read property 'type' of null

Any help will be appreciated. Thanks!

Answer 1

The function you're passing to .map() isn't returning anything, so your array of columns is currently [undefined, undefined, undefined].

You just need to return the <Column>:

{this.data.map(index => { return <Column width={150} data={index.date} />; })}

or

{this.data.map(index => <Column width={150} data={index.date} /> )}