React-data-grid: Uncaught Invariant Violation when i am trying to create one table by using react data grid this is showing this error:- Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Grid. i am installed react data grid. my code is like this import ReactDataGrid from 'react-data-grid/addons'; module.exports = React.createClass({ var columns={something}; render : function() { return(); } })

[buchikey]

when i am trying to create one table by using react data grid this is showing this error:- Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Grid.
i am installed react data grid.
my code is like this
import ReactDataGrid from 'react-data-grid/addons';
module.exports = React.createClass({
var columns={something};
render : function()
{
return();
}
})

[malonecj]

What version of ReactDataGrid are you using? We have introduced a breaking change in v1.0.0 separating the grid from the addons package. If you are using v1 please the updated readme instructions for how this works

[peter-holcomb-trifin]

@malonecj @buchikey How did you end up resolving this? I'm on v 2.0.24 and am also getting this error with the following:

import ReactDataGrid from 'react-data-grid';
export class DeviceTableComponent extends React.Component {

  render() {
    const columns = [{ key: 'id', name: 'ID' }, { key: 'title', name: 'Title' }];
    const rows = [{ id: 1, title: 'Title 1' }];
    const rowGetter = (rowNumber) => {
      return rows[rowNumber];
    };

    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={rowGetter}
        rowsCount={rows.length}
        minHeight={500}/>
    );
  }
}

export const DeviceTable = DeviceTableComponent;
export default DeviceTable;

[kevinhaas]

For anyone else who finds this, make sure you only set columns to draggable if wrapping the Grid with the <DraggableContainer> from the addons.

If you AREN'T using the <DraggableContainer> and have your column objects with draggable set to TRUE, it will break.

{ key: "columnName", name: "Column", draggable: true }

Only use this when using the <DraggableContainer>

[chaitanyagurrapu]

I am getting the same error ...

warning.js?6327:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Here is the code using the "basic grid" example from your documentation. Note I am using typescript as well. And React 16.

import * as React from 'react';
import {Component} from 'react';
import {ReactDataGrid} from 'react-data-grid';

export interface AppComponentProps {
  propertyDetails: any
}

export default class PortfolioGrid extends Component<AppComponentProps> {
  private _columns: any = null;
  private _rows: any = null;

  constructor(props: AppComponentProps) {
    super(props);
    this._columns = [
      { key: 'id', name: 'ID' },
      { key: 'title', name: 'Title' },
      { key: 'count', name: 'Count' } ];
    this.rowGetter = this.rowGetter.bind(this);
    this.createRows();

  }

  createRows = () => {
    let rows : any = [];
    for (let i = 1; i < 1000; i++) {
      rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 1000
      });
    }

    this._rows = rows;
  };

  rowGetter = (i) => {
    return this._rows[i];
  };

  render() {
    return (
      <div>
      <ReactDataGrid
        columns={this._columns}
        rowGetter={this.rowGetter}
        rowsCount={this._rows.length}
        minHeight={500}
      >
      </ReactDataGrid>
      </div>
    );
  }
}

I don't think it is anything do do with how my class is being exported etc. because if I replace component with <h1>Hello world</h1>, it works fine.

[chaitanyagurrapu]

Fixed my own issue had to replace the line import {ReactDataGrid} from 'react-data-grid'; above with
const ReactDataGrid = require('react-data-grid');.

Now I get a warning in the console saying getDefaultProps is only used on classic React.createClass definitions. Use a static property nameddefaultPropsinstead.. I suspect this is a React 16 issue which will be resolved when you fully support React 16.

[tinybug]

import React from 'react';
import PropTypes from 'prop-types';
import ReactDataGrid from 'react-data-grid';

function BankTable(props) {
  const columns = [
    {
      key: 'type',
      name: '类型',
      editable: true,
    },
    {
      key: 'rate',
      name: '利率',
      editable: true,
    },
    {
      key: 'amount',
      name: '金额',
      editable: true,
    },
    {
      key: 'due',
      name: '到期日',
      editable: true,
    },
  ];

  const rowGetter = (i) => props.data[i];

  return (
    <ReactDataGrid 
      columns={columns}
      rowGetter={rowGetter}
      rowCount={props.data.length}
      minHeight={100} />
  );
}

BankTable.propTypes = {
  id: PropTypes.number.isRequired,
  data: PropTypes.array.isRequired,
};

export default BankTable;

Get the same problem too. It just my first try.... (react version: 16.1.1 react-data-grid version: 2.0.76)

[0xcaff]

@chaitanyagurrapu, @peter-holcomb-trifin Which versions of react are you using?

I'm having this issue with react 16. It seems to be coming from somewhere inside the library. https://github.com/adazzle/react-data-grid/blob/master/packages/react-data-grid/src/Grid.js#L89

Here's my stack trace.

bundle.js:43341 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Grid`.
    in Grid (created by ReactDataGrid)
    in div (created by ReactDataGrid)
    in div (created by ReactDataGrid)
    in ReactDataGrid (at SongList.js:48)
    in SongList (at App.js:22)
    in div (at App.js:20)
    in Provider (at App.js:19)
    in Router (created by HashRouter)
    in HashRouter (at App.js:18)
    in App (at index.js:7)

[chaitanyagurrapu]

@0xcaff React 16

[0xcaff]

It seems that react 16 isn't supported. https://github.com/adazzle/react-data-grid/blob/166862ea9b2de16fe4f02ca9a57a85715269d924/package.json#L26

[kairyu]

@tinybug I had exactly the same problem and finally I found the root cause is an typo that rowCount should be rowsCount.

So in this case, the rowsCount is actually undefined and the conditional statement this.props.rowsCount >= 1 || (this.props.rowsCount === 0 && !this.props.emptyRowsView) will be false. Hence <Grid> will attempt to render an <EmptyRowsView /> which is actually not provided by user and throws out the error. Also the static propTypes seems not to work with ES6.

[Matar91]

@tinybug I had exactly the same problem and finally I found the root cause is an typo that rowCount should be rowsCount.

So in this case, the rowsCount is actually undefined and the conditional statement this.props.rowsCount >= 1 || (this.props.rowsCount === 0 && !this.props.emptyRowsView) will be false. Hence <Grid> will attempt to render an <EmptyRowsView /> which is actually not provided by user and throws out the error. Also the static propTypes seems not to work with ES6.

So which was your solution ?