React Data Grid Filter on Component

Question

I'm trying to create a component called table so I can reuse it. I pass the rows and the columns throw the parent as properties. Everything is ok it display the rows and columns, it displays the filters but when I enter some value on the filters.

It gives me this error:

> react-data-grid.js?3c74:9263 Uncaught TypeError: Cannot read property '__metaData' of undefined

Maybe I'm taking a bad approuch when I define the states and properties of the component.

How can I implement a filter in a react data grid component.

My code is:

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ReactDataGrid from 'react-data-grid';
const { Toolbar, Data: { Selectors } } = require('react-data-grid-addons');
import * as dashboardActions from '../actions/dashboardActions';

export default React.createClass({

  getInitialState() {
    return {  filters: {} };
  },


  getRows() {
    var newProps = {};
    newProps.filters = this.state.filters;
    newProps.rows = this.props.rows;
    return Selectors.getRows(newProps);
  },

  rowGetter(rowIdx) {
    let rows = this.getRows();
    return rows[rowIdx];
  },

  getSize() {
    return this.getRows().length;
  },


  handleFilterChange(filter) {

    let newFilters = Object.assign({}, this.props.filters);
    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
    } else {
      delete newFilters[filter.column.key];
    }    
    this.setState({ filters: newFilters });
  },

  render() {
    const { rows, columns, filters } = this.props;



    return (
      <div>
        <ReactDataGrid
          columns={columns}
          minHeight={600}
          rows={rows}
          rowGetter={this.rowGetter}
          rowsCount={rows.length}
          rowHeight={35}
          enableDragAndDrop
          toolbar={<Toolbar enableFilter={true} />}
          onAddFilter={this.handleFilterChange}

        />
      </div>
    );
  }
});

score 3 · Answer 1 · answered Apr 13 '17 at 06:44

The problem is that rowsCount refers to the complete set of rows, meaning rowGetter will try to get rows not included in the filter. If you look at http://adazzle.github.io/react-data-grid/scripts/example09-filterable-grid.js, you'll see that you will need

getSize() {
  return this.getRows().length;
}

and

rowsCount={this.getSize()}

React Data Grid Filter on Component

1 Answers1