Error appearing is:
bundle.js:1517 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.
Check the render method of `PluginHost$$1`.
in PluginHost$$1 (created by Grid)
in Grid (created by Grid$$1)
in Grid$$1 (created by ProductsAndComponentsForLibrary)
in div (created by ProductsAndComponentsForLibrary)
in div (created by ProductsAndComponentsForLibrary)
in div (created by ProductsAndComponentsForLibrary).
This is the relevant code:
import React from 'react';
import {
PagingState,
LocalPaging,
} from '#devexpress/dx-react-grid';
import {
Grid,
Table,
TableHeaderRow,
TableColumnResizing,
PagingPanel,
} from '#devexpress/dx-react-grid-bootstrap3';
import Chip from 'material-ui/Chip';
import ProductsComponentsOfLibrary
from '../../../services/dependencyManager/database/LoadProductsAndComponentsUsingLibrary';
import LoadingScreen from '../Common/LoadingScreen';
const columns = [
{ name: 'Number', title: '' },
{ name: 'ProductName', title: 'The Product Name' },
{ name: 'ProductVersion', title: 'The Product Version' },
{ name: 'ProductLevelDependency', title: 'Product Level Dependency' },
{ name: 'ComponentName', title: 'Component Name' },
{ name: 'ComponentVersion', title: 'Component Version' },
{ name: 'ComponentType', title: 'Component Type' },
];
export default class ProductsAndComponentsForLibrary extends React.PureComponent {
/**
* #class ProductsForLibrary
* #extends {Component}
* #param {any} props props for constructor
* #description Sample React component
*/
constructor(props) {
super(props);
this.state = {
tRows: [],
showTable: false,
columnWidths: {
Number: 100,
ProductName: 350,
ProductVersion: 160,
ProductLevelDependency: 200,
ComponentName: 400,
ComponentVersion: 200,
ComponentType: 200,
},
expandedRows: [],
libraryName: '',
libraryVersion: '',
loading: '',
numberOfRecords: 0,
};
this.loadTable = this.loadTable.bind(this);
}
componentWillReceiveProps(props) {
if (props.renderCondition) {//eslint-disable-line
this.setState({
libraryName: props.nameLibrary,//eslint-disable-line
libraryVersion: props.versionLibrary,//eslint-disable-line
numberOfRecords: 0,
showTable: false,
});
this.loadTable(props.nameLibrary, props.versionLibrary);
}
}
/**
* Load Products and Components using the given library
*/
loadTable(lName, lVersion) {
ProductsComponentsOfLibrary.getProductsAndComponentsUsingLibrary(lName, lVersion).then((response) => {
let i = 0;
const array = [];
if (response.data.length > 0) {
for (i; i < response.data.length; i++) {
array[i] = {
Number: ++i,
ProductName: response.data[--i].PRODUCT_NAME,
ProductVersion: response.data[i].PRODUCT_VERSION,
ProductLevelDependency: response.data[i].PRODUCT_LEVEL_DEPENDENCY,
ComponentName: response.data[i].COMPONENT_NAME,
ComponentVersion: response.data[i].COMP_VERSION,
ComponentType: response.data[i].COMP_TYPE,
};
}
} else {
array[0] = 'No results';
}
this.setState({
tRows: array,
numberOfRecords: response.data.length,
showTable: true,
});
});
}
render() {
let returnView;
if (this.props.renderCondition) {
if (this.state.showTable) {
returnView = (
<div>
{this.state.numberOfRecords > 0 ?
<div>
<div>
<Chip>
{this.state.numberOfRecords} results are returned
</Chip>
</div>
<Grid
rows={this.state.tRows}
columns={columns}
>
<PagingState
defaultCurrentPage={0}
pageSize={12}
/>
<LocalPaging />
<Table />
<TableColumnResizing defaultColumnWidths={this.state.columnWidths} />
<TableHeaderRow allowResizing />
<PagingPanel />
</Grid>
</div>
:
<Chip>
No Libraries Found
</Chip>
}
</div>
);
} else {
returnView = (
<LoadingScreen />
);
}
}
return (
<div>
{returnView}
</div>
);
}
}
Check what version of Grid and React installed. The dx-react-grid-bootstrap3 version ^1.0.0-beta.1 is compatible with react 15 while beta.2 requires react 16.
I had the same problem and fixed it by changing my package.json from this:
"#devexpress/dx-react-core": "^1.0.0-beta.1",
"#devexpress/dx-react-grid": "^1.0.0-beta.1",
"#devexpress/dx-react-grid-bootstrap3": "^1.0.0-beta.1",
to this:
"#devexpress/dx-react-core": "1.0.0-beta.1",
"#devexpress/dx-react-grid": "1.0.0-beta.1",
"#devexpress/dx-react-grid-bootstrap3": "1.0.0-beta.1",
and then after npm install it works fine (with React v15).
Actually It worked when I used VirtualTableView instead of Table from '#devexpress/dx-react-grid-bootstrap3' together with your alteration #ischenkodv
Related
I am trying to set a state using enzyme method. After setting a state inside test case I was able to get it back again within the test case which proves that setState is working and I can see the expected output in console. However, inside component I was not able to get state which was set by enzyme because of this my is failing and I am not getting desire view back from component, here is screenshot. You can see there is not data grid table rendered despite having rows data.
table.js
import React, { Component } from 'react';
import styled from 'styled-component';
import ReactDataGrid from 'react-data-grid';
import { Filters } from 'react-data-grid-addons';
import PropTypes from 'prop-types';
export class Table extends Component {
constructor(props) {
super(props);
const {
NumericFilter,
AutoCompleteFilter,
} = Filters;
this.columns = [
{ key: "id", name: "ID", editable: true },
{ key: "title", name: "Title", editable: true },
{ key: "complete", name: "Complete", editable: true }
];
this.state = {
rows: [],
};
}
renderRow = (i) => {
const { rows } = this.state;
return rows[i];
}
render() {
const { className } = this.props;
const { rows } = this.state;
console.log('rows Length', rows.length) // always 0
return (
<div className={className}>
{rows.length
? (
<ReactDataGrid
rowHeight={50}
columns={this.columns}
rowGetter={this.renderRow}
rowsCount={rows.length}
/>
)
: <span id="no-product-message">No Items to be Shown</span>
}
</div>
);
}
}
Table.propTypes = {
className: PropTypes.string,
};
Table.defaultProps = {
className: '',
};
export default styled(Table)`
.react-grid-HeaderCell{
white-space: normal !important;
}
.react-grid-Cell__value{
display: flex;
align-items: center;
}
`;
mountWithTheme
export const mountWithTheme = (children, options) => (
mount(<ThemeProvider theme={theme}>{children}</ThemeProvider>, options)
);
test case
it('should render table if product data is available', () => {
const wrapper = mountWithTheme(<Table />).find(Table);
const instance = wrapper.instance();
jest.spyOn(instance, 'renderRow');
instance.setState({
rows: [{ id: 0, title: "Task 1", complete: 20 }],
});
console.log(instance.state.rows) // [{ id: 0, title: "Task 1", complete: 20 }]
expect(wrapper.find('ReactDataGrid').exists()).toBe(true);
expect(instance.renderRow).toHaveBeenCalledTimes(1);
});
I am working on devexpress react grid and I am new to react. I need to disable the selection of rows based on the condition. I struggle here to disable the selection of particular rows rather than all the rows. Please help me.
https://stackblitz.com/edit/react-deg9yu?file=index.js
The above link has the demo to disable the selection if the 3 rows are selected. But in my scenario the selection checkbox should be enabled for only the rowid [0,1,5]. Other rows should be disabled for selection by default.
I found the answer to my question on below link.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
Getter,
Plugin
} from '#devexpress/dx-react-core';
import {
SelectionState,
IntegratedSelection
} from '#devexpress/dx-react-grid';
import {
Grid,
Table,
TableHeaderRow,
TableSelection
} from '#devexpress/dx-react-grid-bootstrap3';
const filters = [0,2,5];
const columns = [
{ name: 'id', title: 'ID' },
{ name: 'product', title: 'Product' },
{ name: 'owner', title: 'Owner' },
];
const rows = [
{ id: 0, product: 'DevExtreme', owner: 'DevExpress' },
{ id: 1, product: 'DevExtreme Reactive', owner: 'DevExpress' },
{ id: 2, product: 'DevExtreme Reactive 1', owner: 'DevExpress' },
{ id: 3, product: 'DevExtreme Reactive 2', owner: 'DevExpress' },
{ id: 4, product: 'DevExtreme', owner: 'DevExpress' },
{ id: 5, product: 'DevExtreme Reactive', owner: 'DevExpress' },
{ id: 6, product: 'DevExtreme Reactive 1', owner: 'DevExpress' },
{ id: 7, product: 'DevExtreme Reactive 2', owner: 'DevExpress' },
];
const rowSelectionEnabled = row => row.product === 'DevExtreme' ;
class PatchedIntegratedSelection extends React.PureComponent {
render() {
const { rowSelectionEnabled, ...restProps } = this.props;
return (
<Plugin>
<Getter
name="rows"
computed={({ rows }) => {
this.rows = rows;
return rows.filter(rowSelectionEnabled);
}}
/>
<IntegratedSelection {...restProps} />
<Getter
name="rows"
computed={() => this.rows}
/>
</Plugin>
)
}
};
class PatchedTableSelection extends React.PureComponent {
render() {
const { rowSelectionEnabled, ...restProps } = this.props;
return (
<TableSelection
cellComponent={(props) => this.props.rowSelectionEnabled(props.tableRow.row) ? (
<TableSelection.Cell {...props} />
) : (
<Table.StubCell {...props} />
)}
{...restProps}
/>
);
}
}
export default class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
selection: []
};
this.changeSelection = selection => this.setState({ selection });
}
render() {
const { selection } = this.state;
return (
<div>
<span>Selection: {JSON.stringify(selection)}</span>
<Grid
rows={rows}
columns={columns}
>
<SelectionState
selection={selection}
onSelectionChange={this.changeSelection}
/>
<PatchedIntegratedSelection
rowSelectionEnabled={rowSelectionEnabled}
/>
<Table />
<TableHeaderRow />
<PatchedTableSelection
showSelectAll
rowSelectionEnabled={rowSelectionEnabled}
/>
</Grid>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
Links: https://github.com/DevExpress/devextreme-reactive/issues/1706
For anyone who is interested I achieved this by doing the following.
render() {
const {...restProps} = this.props;
return (
...
<TableSelection cellComponent={this._selectableRow}
{...restProps}
/>
...
);
}
...
_selectableRow(props)
{
const {...restProps} = props;
return props.row.type === "folder" ? <Table.StubCell/> : <TableSelection.Cell {...restProps}/>
}
import React, {Component} from 'react'
import ReactDataGrid from 'react-data-grid'
import update from 'immutability-helper'
import { Editors, Formatters } from 'react-data-grid-addons'
const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors
const { DropDownFormatter } = Formatters
const productNames = [
{
id: 0,
title: 'productName1',
},
{
id: 1,
title:'productName2'
},
]
const productNamesEditor = <AutoCompleteEditor options={productNames} />
const columns= [
{
key: 'id',
name: 'ID',
},
{
key: 'product_name',
name: 'Product Name',
editable: true,
editor: productNamesEditor,
},
{
key: 'product_qty',
name: 'Product Qty',
editable:true,
},
{
key: 'product_rate',
name: 'Product Rate',
editable:true,
},
{
key: 'product_disc',
name: 'Product Disc',
editable:true,
},
]
class LineItems extends Component {
constructor(props) {
super(props)
this._columns = columns
console.log(this._columns)
this.state = {rows: this.props.lineItems.rows}
}
rowGetter = (i) => {
return this.state.rows[i];
};
handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
console.log(fromRow)
console.log(updated)
// calling slice() without arguments makes a copy of array
let rows = this.state.rows.slice();
for (let i = fromRow; i <= toRow; i++) {
let rowToUpdate = rows[i];
let updatedRow = update(rowToUpdate, {$merge: updated});
rows[i] = updatedRow;
this.setState({ rows })
this.props.onGridRowsUpdated(rows)
}
}
render () {
return (
<ReactDataGrid
ref={node => this.grid=node}
enableCellSelect={true}
columns={this._columns}
rowGetter={this.rowGetter}
rowsCount={this.state.rows.length}
maxHeight={300}
onGridRowsUpdated={this.handleGridRowsUpdated}
/>
)
}
}
export default LineItems
Error: Element 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 EditorContainer....
The grid renders. If I try to enter/edit the cell to which I have set the AutoCompleteEditor, I get the above-mentioned error.
Minor error in my code:
const {AutoComplete, AutoCompleteEditor, DropDownEditor} = Editors
should have been
const {AutoComplete: AutoCompleteEditor, DropDownEditor} = Editors
I'm trying to follow the example here from the office-ui-fabric-react repo simply to test the new focusedIndex function to scroll a selection into view.
However, WebStorm is highlighting a TS2322 error in the render() function trying to set the componentRef property to a class variable:
(short error)
TS2322: Type '{componentRef: RefObject... is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes...
The error occurs when using the full unmodified code from the link, but here's a snippet of the relevant class code for reference and the ** affected line ** in the render() function:
import * as React from 'react';
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { IDetailsList, DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
import './DetailsList.Grouped.Example.scss';
export class DetailsListGroupedExample extends BaseComponent<
{},
{
items: {}[];
showItemIndexInView: boolean;
}
>
{
private _root = React.createRef<IDetailsList>();
constructor(props: {}) {
super(props);
this.state = {
items: _items,
showItemIndexInView: false
};
}
public render() {
const { items } = this.state;
return (
<Fabric className="DetailsList-grouped-example">
<div>
<Checkbox
label="Show index of the first item in view when unmounting"
checked={this.state.showItemIndexInView}
onChange={this._onShowItemIndexInViewChanged}
/>
</div>
<DefaultButton onClick={this._addItem} text="Add an item" />
<DetailsList
componentRef={this._root} //**TS2322 ERROR HERE**
items={items}
groups={[
{
key: 'groupred0',
name: 'By "red"',
startIndex: 0,
count: 2
},
{
key: 'groupgreen2',
name: 'By "green"',
startIndex: 2,
count: 0
},
{
key: 'groupblue2',
name: 'By "blue"',
startIndex: 2,
count: items.length - 2
}
]}
columns={_columns}
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
ariaLabelForSelectionColumn="Toggle selection"
groupProps={{
showEmptyGroups: true
}}
onRenderItemColumn={this._onRenderColumn}
/>
</Fabric>
);
}
}
What am I doing wrong or what do I need to do to resolve this compile error?
So, on the example i've get rid of
private _root = React.createRef<IDetailsList>
and all of references to this object. Then example works like a charm.
It looks like something has been changed in fabric react controls, but codesamples on their website has not been updated which is annoying.
My code:
import * as React from 'react';
import styles from './RsfDictionaries.module.scss';
import { IRsfDictionariesProps } from './IRsfDictionariesProps';
import { escape } from '#microsoft/sp-lodash-subset';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import { DetailsList, DetailsListLayoutMode, Selection, SelectionMode, IColumn, IDetailsList } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
import { IDocument, IDetailsListDocumentsExampleState } from './states';
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
const _columns = [
{
key: 'name',
name: 'Name',
fieldName: 'name',
minWidth: 100,
maxWidth: 200,
isResizable: true
},
{
key: 'color',
name: 'Color',
fieldName: 'color',
minWidth: 100,
maxWidth: 200
}
];
const _items = [
{
key: 'a',
name: 'a',
color: 'red'
},
{
key: 'b',
name: 'b',
color: 'red'
},
{
key: 'c',
name: 'c',
color: 'blue'
},
{
key: 'd',
name: 'd',
color: 'blue'
},
{
key: 'e',
name: 'e',
color: 'blue'
}
];
export default class RsfDictionaries extends React.Component<IRsfDictionariesProps, {
items: {}[];
showItemIndexInView: boolean;
}> {
constructor(props: any) {
super(props);
this.state = {
items: _items,
showItemIndexInView: false
};
}
public componentWillUnmount() {
if (this.state.showItemIndexInView) {
const itemIndexInView = 0;//this._root!.current!.getStartItemIndexInView();
alert('unmounting, getting first item index that was in view: ' + itemIndexInView);
}
}
private _root :IDetailsList; //React.createRef<IDetailsList>();
public render(): React.ReactElement<IRsfDictionariesProps> {
const { items } = this.state;
return (
<Fabric className="DetailsList-grouped-example">
<div>
<Checkbox
label="Show index of the first item in view when unmounting"
checked={this.state.showItemIndexInView}
onChange={this._onShowItemIndexInViewChanged}
/>
</div>
<DefaultButton onClick={this._addItem} text="Add an item" />
<DetailsList
//={this._root}
items={items}
groups={[
{
key: 'groupred0',
name: 'By "red"',
startIndex: 0,
count: 2
},
{
key: 'groupgreen2',
name: 'By "green"',
startIndex: 2,
count: 0
},
{
key: 'groupblue2',
name: 'By "blue"',
startIndex: 2,
count: items.length - 2
}
]}
columns={_columns}
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
ariaLabelForSelectionColumn="Toggle selection"
groupProps={{
showEmptyGroups: true
}}
onRenderItemColumn={this._onRenderColumn}
/>
</Fabric>
);
}
private _addItem = (): void => {
const items = this.state.items;
this.setState(
{
items: items.concat([
{
key: 'item-' + items.length,
name: 'New item ' + items.length,
color: 'blue'
}
])
},
() => {
//if (this._root.current) {
//this._root.current.focusIndex(items.length, true);
//}
}
);
};
private _onRenderColumn(item: any, index: number, column: IColumn) {
let value = item && column && column.fieldName ? item[column.fieldName] : '';
if (value === null || value === undefined) {
value = '';
}
return (
<div className={'grouped-example-column'} data-is-focusable={true}>
{value}
</div>
);
}
private _onShowItemIndexInViewChanged = (event: React.FormEvent<HTMLInputElement>, checked: boolean): void => {
this.setState({
showItemIndexInView: checked
});
};
}
I upgraded from react-virtualized 8.11 --> 9.1, and receiving the above error. Accounting for the docs breaking changes:
1- I'm using React version 0.15.X
2- I'm not using the CellMeasurer component.
Have any of you experienced a breaking change upgrading to react-virtualized 9 outside of the above mentioned? I have made no other changes when upgrading.
VirtualizedTable.js
import React, { Component, PropTypes } from 'react';
import { AutoSizer, Table, Column, defaultTableRowRenderer } from 'react-virtualized';
import classnames from 'classnames';
import { Input } from 'react-bootstrap';
import 'react-virtualized/styles.css';
// import '../sass/components/virtualized-table.scss';
export default class VirtualizedTable extends Component {
static propTypes = {
schema: PropTypes.shape({
instanceType: PropTypes.string,
searchable: PropTypes.bool,
skeleton: PropTypes.arrayOf(PropTypes.shape({
key: PropTypes.string,
label: PropTypes.string,
display: PropTypes.string,
sortable: PropTypes.bool
}))
}).isRequired,
data: PropTypes.arrayOf(PropTypes.object).isRequired,
onRowClick: PropTypes.func,
rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
rowRenderFn: PropTypes.func,
statusRenderFn: PropTypes.func,
actionsRenderFn: PropTypes.func,
sortBy: PropTypes.string,
sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
maxHeight: PropTypes.number
};
constructor(props) {
super(props);
this.state = {
sortBy: 'name',
sortDirection: 'ASC',
tableFilter: ''
};
this.sort = this.sort.bind(this);
this.onFilterChange = this.onFilterChange.bind(this);
}
componentDidMount() {
if (this.props.sortBy) {
this.setState({
sortBy: this.props.sortBy
});
}
if (this.props.sortDirection) {
this.setState({
sortDirection: this.props.sortDirection
});
}
}
sort({ sortBy, sortDirection }) {
if (this.state.sortBy !== sortBy) {
this.setState({ sortBy });
} else {
this.setState({ sortBy, sortDirection });
}
}
onFilterChange (e) {
this.setState({ tableFilter: e.target.value });
}
escapeRegex (str) {
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
}
render() {
const { showFilter } = this.props;
let sortedList = this.props.data;
if (this.state.tableFilter) {
let regex = new RegExp(this.escapeRegex(this.state.tableFilter), 'i');
sortedList = this.props.data.filter(
item => {
let bool = false;
for (let key in item) {
bool = (regex.test(item[key]));
if (bool) break;
}
if (bool) return item;
}
);
}
if (this.state.sortBy) {
sortedList = sortedList.sort(
(a, b) => typeof a[this.state.sortBy] === 'string' ?
a[this.state.sortBy] < b[this.state.sortBy]
:
a[this.state.sortBy] - b[this.state.sortBy]
);
if (this.state.sortDirection === 'DESC') {
sortedList.reverse();
}
}
let columns = this.props.schema.skeleton.filter(item => item.display !== 'hidden');
const rowHeight = this.props.rowHeight || 40;
const headerHeight = this.props.headerHight || 40;
return (
<div className='table-container'>
{
(showFilter) ?
<div className='ac-filter-container' style={{ width: '15%' }}>
<Input
type='text'
onChange={this.onFilterChange.bind(this)}
value={this.state.tableFilter}
placeholder={this.props.filterText || 'Filter results...'}
/>
</div>
:
null
}
<AutoSizer disableHeight>
{({ width: autoWidth }) => {
// Use Static width if provided - NOTE: For Testing Purposes
const width = this.props.width || autoWidth;
return (
<Table
className={classnames('table', {'collapsed': width < 1000})}
width={width}
height={(sortedList.length + 1) * rowHeight > this.props.maxHeight ? this.props.maxHeight : (sortedList.length + 1) * rowHeight}
headerHeight={headerHeight}
rowHeight={rowHeight}
rowClassName={this.props.rowClassName}
rowRenderer={this.props.rowRenderFn || defaultTableRowRenderer}
rowCount={sortedList.length}
rowGetter={({ index }) => sortedList[index]}
sort={this.sort}
sortBy={this.state.sortBy}
sortDirection={this.state.sortDirection}
onRowClick={({index}) => this.props.onRowClick(this.props.data[index])}
>
{
columns.map((column, i) => {
return (
<Column
key={i}
label={column.label}
dataKey={column.key}
disableSort={column.sortable}
width={width / columns.length}
/>
);
})
}
</Table>
);
}}
</AutoSizer>
</div>
);
}
}
TablContainer.js
import React, {Component} from 'react';
// Components
import VirtualizedTable from '../../components/VirtualizedTable3';
import {objects} from '../objects';
import shouldComponentUpdate from '../../utils/shouldComponentUpdate';
export default class TableContainer extends Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
}
render() {
let schema = {
instanceType: 'integer',
searchable: true,
skeleton: [{
key: 'id',
label: 'id',
display: 'true',
sotrable: true
}, {
key: 'name',
label: 'name',
display: 'true',
sotrable: true
}]
};
return (
<div className='container'>
<h1>React Virtualized Table</h1>
{
<VirtualizedTable
schema={schema}
data={objects}
onRowClick={() => console.log('U did it!')}
sortByDefault='id'
sortDirection='DESC'
/>
}
</div>
);
}
}
The 9.0.0 release notes call out 2 breaking changes: CellMeasurer and the required/supported React version:
Supported React versions have changed. Previously all React 14 and 15 releases were supported. Going forward only React 15.3 and newer will be supported. This was done to drop a peer dependency on react-addons-shallow-compare and replace it with React.PureComponent as the docs suggest.
It would appear that you're not using the required React version. (NPM/Yarn should be warning you about an invalid peer dependency when you install.)