I'm trying to create a ReactDataGrid and I'm getting this error when I use rowGetter. The grid works fine when I use rows={myData} though, and I really don't understand what is happening.
Here's my code :
import React, {Component, useState } from 'react';
import DataGrid from 'react-data-grid';
import 'react-data-grid/dist/react-data-grid.css';
import { Toolbar, Data, Filters } from "react-data-grid-addons";
const {
NumericFilter
} = Filters;
const selectors = Data.Selectors;
class YvideoList extends Component {
constructor(props, context){
super (props, context);
const selectors = Data.Selectors;
const defaultColumnProperties = {
filterable: true,
// width: 160
};
this.colums = [
{ key: 'title', name: 'Title' },
{ key: 'views', name: 'Views', filterRenderer: NumericFilter },
{ key: 'date', name: 'Date' }]
.map(c => ({ ...c, ...defaultColumnProperties }));
}
rowGetter = (index) => {
console.log("INDEX: ", index);
return selectors.getRows(this.props.videos[0].results)[index];
};
rowsCount = () => {
return selectors.getRows(this.props.videos[0].results).length;
};
render() {
return (
<DataGrid
columns={this.colums}
rowGetter={this.rowGetter} // -> GRID CRASHES
rowsCount={2}
//rows={this.props.videos[0].results} // -> THIS WORKS
/>
)
}
}
export default YvideoList;
The error I'm getting is the following :
TypeError: undefined is not an object (evaluating 'rows.length')
DataGrid
src/DataGrid.tsx:268
265 | lastFrozenColumnIndex={columnMetrics.lastFrozenColumnIndex}
266 | draggableHeaderCell={props.draggableHeaderCell}
267 | onHeaderDrop={props.onHeaderDrop}
> 268 | allRowsSelected={selectedRows?.size === rows.length}
| ^ 269 | onSelectedRowsChange={onSelectedRowsChange}
270 | sortColumn={props.sortColumn}
271 | sortDirection={props.sortDirection}
Any help appreciated ! Just note that the console.log from the function rowGetter is never shown in the console, so the grid dies before that.
EDIT1: I think the problem lies in the version I'm using of the data grid. In version 5.0.4 the code I added looks like working, but not on version 7. Unfortunately I can't find examples of filtering/sorting for version 7-canary