react-data-tables Undefined Toolbar

Question

Trying to use react-data-tables here and getting errors left right and center. Going crazy.

After following the instructions as per https://github.com/adazzle/react-data-grid and using the code samples from http://adazzle.github.io/react-data-grid/examples.html#/filterable-sortable-grid I am having the following issues.

If I use this in my file

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import ReactDataGridPlugins from 'react-data-grid/addons';

var Toolbar = ReactDataGridPlugins.Toolbar;
var Selectors = ReactDataGridPlugins.Data.Selectors;

I get a "Cannot read property 'Toolbar' of undefined.

If I try

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import Toolbar from 'react-data-grid/addons';
import Selectors from 'react-data-grid/addons';

I get the following error:

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of HostProviderList.

And if I try

import React from 'react';
import ReactDOM from 'react-dom';
import ReactDataGrid from 'react-data-grid';
import {Toolbar} from 'react-data-grid/addons';
import {Selectors} from 'react-data-grid/addons';

I get this error

Warning: Unknown props onGridSort, columns, rowGetter, rowsCount, minHeight, onRowUpdated, toolbar, onAddFilter, minColumnWidth, columnEquality, enableCellSelect, rowHeight, enableRowSelect, rowKey, rowScrollTimeout, cellNavigationMode, headerRows, columnMetrics, cellMetaData, selectedRows, rowSelection, expandedRows, rowOffsetHeight, sortColumn, sortDirection, onSort, totalWidth, onViewportKeydown, onViewportKeyup, onViewportDragStart, onViewportDragEnd, onViewportDoubleClick, onColumnResize on tag. Remove these props from the element.

I am not sure what to do here. If I do just the basic data-grid as per the online example it works fine. However as soon as I try anything with the addons.jsx file it fails.

On a side note nmp install react-data-grid/addons

does not work. The git repo is not found. However I do see that after doing an npm install of react-data-grid I do have a addons.jsx file that imports dist/react-data-grid.ui-plugins.js

npm install react-data-grid/addons is not required. import { Toolbar, Selectors } is the right way. Unknown props may be because of issues with not defining propTypes. — vijayst
In the new codebase, I did not find {Selectors} in the addons - github.com/adazzle/react-data-grid/blob/master/src/addons/…. You will have to import {Toolbar, Data} from 'react-data-grid/addons'. Followed by const Selectors = Data.Selectors. — vijayst
That worked mostly. Now I get an error saying TypeError: Cannot read property '__metaData' of undefined. Any ideas @Vijay — P-Rick Stephens

vijayst vijayst · Accepted Answer · 2016-07-29T03:36:05

The right way to import is

import { Toolbar, Data } from 'react-data-grid/addons';
const Selectors = Data.Selectors;

react-data-tables Undefined Toolbar

1 Answers