React FixedDataTable cell always get everything is undefined

Question

i'm trying using React FixedDataTable, and i always get everything is undefined. i still new to this library, could anyone help me figure out what's wrong.

here's my form :

import React from 'react';
const {Table, Column, Cell} = require('fixed-data-table');

class MyCell extends React.Component {
  render() {
    var {rowIndex, data, field, ...props} = this.props;
    return (
      <Cell {...props}>
        {data[rowIndex][field]}
      </Cell>
    );
  }
}

export default class PeriodTable extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    const {periodTableHeader, periodTableField, periodData} = this.props;

    console.log(periodData);
    console.log(periodTableHeader);
    console.log(periodTableField);

    return (

      <div>
          <Table
            rowsCount={100}
            rowHeight={50}
            headerHeight={50}
            width={1000}
            height={500}>
            {periodTableHeader.map((data, index) => {
              let header = periodTableHeader[index]
              let field = periodTableField[index];
              return(
                <Column
                  header={<Cell>{header}</Cell>}
                  cell={<MyCell data={periodData} field={field} />}
                  width={200}
                />
              )
            })}
          </Table>
        </div>
    )
}
}

console.log(periodData):

console.log(periodTableHeader):

console.log(periodTableField):

is my syntax is wrong maybe?

Answer 1

First your periodData should be an array of objects. From your console.log(periodData) i see that its just an object. Make sure you send an array of objects.

Second rowsCount that you pass to Table should be periodData.length

That should do load the data in your table.

 <Table
        rowsCount={periodData.length}
        rowHeight={50}
        headerHeight={50}
        width={1000}
        height={500}>

// ...