ReactDataGrid : why am I getting this error TypeError: undefined is not an object (evaluating 'rows.length')

Viewed 2298

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

1 Answers

So I found out the reason and it was caused by version change from the react-data-grid, they dropped the rowgetters so I was using it wrong, the documentation is not up to date on their website which is a pity because the grid looks really good.

For actually demos you can check here : https://github.com/adazzle/react-data-grid/tree/canary/stories/demos

Related