I´m trying to build a JSON configurable data table using the Facebook´s fixed-data-table. I´ve come to my first code as:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'semantic-ui-react';
import { Table, Column, Cell } from 'fixed-data-table';
const DateCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col].toLocaleString()}
  </Cell>
);
const LinkCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    <a href="#">{data.getObjectAt(rowIndex)[col]}</a>
  </Cell>
);
const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);
const NumericCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);
const BooleanCell = ({rowIndex, data, col, ...props}) => (
  
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col] ? <Icon name='checkmark' color='green' /> : <Icon name='remove' color='red' />}
  </Cell>
);
class DataTable extends Component {
    state = {
      schema: this.props.schema,
      data: this.props.data,
    }
  getCells = (schema, data) => {
        let columns = [];
        schema.columns.map((column, index) => {
            let cell = (<TextCell></TextCell>);
            let key = column.field + index;
            if (column.type === 'string') {
              cell = (<TextCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }
            if (column.type === 'integer') {
              cell = (<NumericCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }
            if (column.type === 'boolean') {
              cell = (<BooleanCell 
                          data={this.state.data} 
                          col={column.field}
                        />);
            }
            let col = (<Column 
                          header={column.title}
                          cell={cell}
                          width={100}
                       />);
            columns.push(col);
            return;
          });
      return columns;
    }
  render() {
    let schema = {
      "columns": [
          {
            "title": "Name",
            "field": "name",
            "type": "string",
          },
          {
            "title": "EIN",
            "field": "ein",
            "type": "string",
          },
          {
            "title": "Active",
            "field": "isactive",
            "type": "boolean",
          }
        ],
        "edit": true,
        "delete": true,
        "sort": true
    };
    let data = [
    {
      name: 'Test1',
      ein: '1234',
      isactive: true
    },
    {
      name: 'Test2',
      ein: '123',
      isactive: true
    },
    {
      name: 'Test3',
      ein: '12345',
      isactive: true
    },
    ];
    let columns = this.getCells(schema, data);
    return (
      <Table
        rowHeight={50}
        schemaHeight={50}
        maxHeight={100}
        width={1000}
        height={500}
        rowsCount={data.length}
        {...this.props}>
        {columns}
      </Table>
    );
  }
}
export default DataTable;
When running I´m getting the following error:
TypeError: data.getObjectAt is not a function
TextCell
D:\\WORKSPACE\test\src\components\shared\DataTable.js:42
  39 | 
  40 | const TextCell = ({rowIndex, data, col, ...props}) => (
  41 |   <Cell {...props}>
**> 42 |     {data.getObjectAt(rowIndex)[col]}**
  43 |   </Cell>
  44 | );
  45 | 
I´ve tried different JSON structures with no luck. The data and schema are loaded accordingly.
 
     
    