Basic Filtering in react-data-grid

Question

I am recently exploring "react-data-grid" a bit more and trying to get the Basic Filtering feature working in my React app. This is their Basic Filtering example I am looking at:

http://adazzle.github.io/react-data-grid/docs/examples/column-filtering

Their example code in codesandbox: https://codesandbox.io/s/w6jvml4v45?from-embed

I copied most of the code artifacts examples into my class component and tried to find a equivalent solution for React's useState() (I am quite new to React and useState apparently not available in classes).

My code has been modified slightly for this forum and is pointing to the public JSONPlaceholder website to simulate a REST API call from a real server with test data. So hopefully you can just run it. Here is my App.js code:

import React, { Component } from "react";
import ReactDataGrid from "react-data-grid";
import { Toolbar, Data } from "react-data-grid-addons";

import "./App.css";
import "bootstrap/dist/css/bootstrap.css";

const defaultColumnProperties = {
  filterable: true,
  width: 120,
  editable: true
};

const columns = [
  { key: "id", name: "ID" },
  { key: "username", name: "Username" },
  { key: "email", name: "Email" }
].map(c => ({ ...c, ...defaultColumnProperties }));

function getRows(rows, filters) {
  const selectors = Data.Selectors;
  return selectors.getRows({ rows, filters });
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      rows: [],
      isLoaded: false,
      filters: {},
      setFilters: {}
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          rows: json
        });
      });
  }

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };

  render() {
    // const [filters, setFilters] = useState({});
    const filteredRows = getRows(this.state.rows, this.state.filters);

    // Commenting ORIGINAL handleFilterChange example code temporarily
    // const handleFilterChange = filter => filters => {
    //   const newFilters = { ...filters };
    //   if (filter.filterTerm) {
    //     newFilters[filter.column.key] = filter;
    //   } else {
    //     delete newFilters[filter.column.key];
    //   }
    //   return newFilters;
    // };


    // Temporarily rewrote handleFilterChange function for DEBUGGING purpose and not using arrow fucntions
    // Used babeljs.io to generate non arrow based handleFilterChange function.
    var handleFilterChange = function handleFilterChange(filter) {
      debugger;
      console.log("handleFilterChange(filter)" + filter);

      return function(filters) {
        debugger;
        console.log("function(filters)" + filters);

        var newFilters = { ...filters };

        if (filter.filterTerm) {
          newFilters[filter.column.key] = filter;
        } else {
          delete newFilters[filter.column.key];
        }

        return newFilters;
      };
    };

    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => filteredRows[i]}
        rowsCount={filteredRows.length}
        minHeight={500}
        toolbar={<Toolbar enableFilter={true} />}
        onAddFilter={filter =>
          this.setState({ setFilters: handleFilterChange(filter) })
        }
        onClearFilters={() => this.setState({ setFilter: {} })}
      />
    );
  }
}
export default App;

As per comments in the code example above I used babeljs.io to generate a non arrow based handleFilterChange function and added some logs and debugging statements

For some reason the nested function:

  return function(filters) {
    var newFilters = {
      ...filters
    };

    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
    } else {
      delete newFilters[filter.column.key];
    }

doesn't get called. The debugger in Chrome doesn't hit the break point or prints out any debugging logs I added.

This log gets always called:

      console.log("handleFilterChange(filter)" + filter);

This log in the inner function never gets called which I believe is the problem?

       console.log("function(filters)" + filters);

The non arrow function based handleFilterChange works when I use it in their example and replaced their handleFilterChange code so I believe the code itself is fine and all debug logs appear in the console. The inner function gets called as well. Happy to use the arrow function though if I can get a bit help to get this working.

I've also wrote a not class based Basic Filter version but run into problems when loading the quite huge JSON data from the server. Didn't investigate that further but I believe it was a timing issue.

Due to the problem, the table gets loaded in the browser and I can press on the "Filter Rows" button in the top right corner. This will fold down the search edit boxes and I can type in letters but the table doesn't get filtered on the fly while typing letters.

Answer 1

    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 });
    }