Performance Issue with rendering custom Cells

[maier-stefan]

So i have implemented the datatable like in the example but use additional react-intl to beauty up my columns.

When i scroll down an the i always get the error in the console, but the data is displayed correct.

Error:

Warning: Failed propType: Required prop `value` was not specified in `FormattedNumber`. Check the render method of `CurrencyCell`.

What i get out of this message is that it seams that the data is not loaded fast enough. But the data is also not undefined....

Anyone experienced similar performance issues?

CodeBase:

import React from 'react';
import AuthenticatedComponent from './AuthenticatedComponent';
import DashboardStore from '../stores/DashboardStore.js';
import DashboardService from '../services/DashboardService.js';
import {Table, Column, Cell} from 'fixed-data-table';
import {FormattedNumber} from 'react-intl';
import classNames from 'classnames';

class CurrencyCell extends React.Component {
  render() {
    var {rowIndex, data, col, colorFormatted, minDigits, maxDigits, ...props} = this.props;
    if(typeof data.getObjectAt(rowIndex)[col] === "undefined"){
      return (<Cell>-</Cell>);
    }else {
      return (<Cell className= {colorFormatted && classNames({'positiv-currency-color': (data.getObjectAt(rowIndex)[col] > 0)} , {'negative-currency-color': (data.getObjectAt(rowIndex)[col] < 0)} ) } {...props}>
        <FormattedNumber value={data.getObjectAt(rowIndex)[col]} style="currency" currency="USD" minimumFractionDigits={minDigits} />
        </Cell>);
    }
  }
}

... some more custom cells ...

render(){
return (
<Table
          rowHeight={30}
          headerHeight={30}
          rowsCount={this.state.reports.getSize() || 1000}
          onColumnResizeEndCallback={this._onColumnResizeEndCallback}
          isColumnResizing={false}
          width={1140}
          height={500}
          {...this.props}>
            <Column
              columnKey="campaignName"
              header={<Cell>Camapign</Cell>}
              cell={<TextCell data={this.state.reports} col="campaignName" />}
              fixed={true}
              isResizable={true}
              width={this.state.columnWidths.campaignName}
            />
            <Column
              columnKey="visits"
              header={<Cell>Visits</Cell>}
              cell={<NumberCell data={this.state.reports} col="visits" />}
              fixed={false}
              isResizable={true}
              width={this.state.columnWidths.visits}
            />
            <Column
              columnKey="conversions"
              header={<Cell>Conversions</Cell>}
              cell={<NumberCell data={this.state.reports} col="conversions" />}
              fixed={false}
              isResizable={true}
              width={this.state.columnWidths.conversions}
            />
            <Column
              columnKey="bid"
              header={<Cell>Bid</Cell>}
              cell={<CurrencyCell data={this.state.reports} col="bid" colorFormatted={false} minDigits={6} />}
              fixed={false}
              isResizable={true}
              width={this.state.columnWidths.bid}
            />
            <Column
              columnKey="cost"
              header={<Cell>Cost</Cell>}
              cell={<CurrencyCell data={this.state.reports} col="cost" colorFormatted={false} minDigits={6} />}
              isResizable={true}
              fixed={false}
              width={this.state.columnWidths.cost}
            />
            <Column
              columnKey="revenue"
              header={<Cell>Revenue</Cell>}
              cell={<CurrencyCell data={this.state.reports} col="revenue" colorFormatted={false} minDigits={6}/>}
              isResizable={true}
              fixed={false}
              width={this.state.columnWidths.revenue}
            />
            <Column
              columnKey="profit"
              header={<Cell>Profit</Cell>}
              cell={<CurrencyCell data={this.state.reports} col="profit" colorFormatted={true} minDigits={6} />}
              isResizable={true}
              fixed={false}
              width={this.state.columnWidths.profit}
            />
            <Column
              columnKey="roi"
              header={<Cell>Roi</Cell>}
              cell={<PercentageCell data={this.state.reports} col="roi" colorFormatted={true} />}
              isResizable={true}
              fixed={false}
              width={this.state.columnWidths.roi}
            />
          </Table>
)
}

[dalinna]

i set fixed={ture}but it not working,,,do you knw why