React filtering with multiple columns is not giving the expected output about react-table-library HOT 7 CLOSED

Can you create a reproducible example on https://codesandbox.io/ ?

from react-table-library.

please go through: https://codesandbox.io/s/bold-sunset-emyb4o?file=/src/DataTable.js

I replicated the exact issue i am facing.

Please change index.js file to the following:

Hope you can help!

from react-table-library.

Does this Codesandbox start for you? For me it shows "Installing Dependencies 1/20 (web-vitals)"

from react-table-library.

Hi, could you try this?
https://codesandbox.io/s/jolly-goldwasser-h6y4ue?file=/src/App.js

It requires you to install 2 dependencies.
this is my dependencies page:

PLEASE do install 2 dependencies and help me out!

from react-table-library.

Thanks. It works. Can you give me a scenario of two filters unselected (since all filters are initially selected) where you don't get the expected output?

from react-table-library.

Thanks for the code Robin! I've tried the same today morning but,
The issue i am facing is.. if i select JUST active & mitigated checkboxes, it should return me all the records with this status. But since we are using && between different columns, it requires me to definitely choose one of the options in other columns(Severity, CreationDate and IncidentType)

Could you suggest if there's a way I can get the data displayed with whatever options i choose without having to definitely choose one of the options in each category. (For example, if you uncheck them all and check just active, it should return me all the data with status as active)

from react-table-library.

Sorry for being late here.

The issue is not with the library, but with your booleans. I made the example smaller by removing some of your filters. In the following we have only Incident Types and Status:

The selection shows no results even though you want to show everything, because all Status are selected. The issue is in this code block:

const data = {
    nodes: list.filter(
      (item) =>
        ((filters.includes("ACTIVE") && item.Status === "ACTIVE") ||
          (filters.includes("MITIGATED") && item.Status === "MITIGATED") ||
          (filters.includes("RESOLVED") && item.Status === "RESOLVED")) &&
          ((filters.includes("CRI") && item.IncidentType === "CustomerReported") ||
          (filters.includes("OTHERS") && item.IncidentType === "LiveSite"))
    )
  };

Which should be:

  const data = {
    nodes: list.filter(
      (item) =>
        (filters.includes("ACTIVE") && item.Status === "ACTIVE") ||
        (filters.includes("MITIGATED") && item.Status === "MITIGATED") ||
        (filters.includes("RESOLVED") && item.Status === "RESOLVED") ||
        (filters.includes("CRI") && item.IncidentType === "CustomerReported") ||
        (filters.includes("OTHERS") && item.IncidentType === "LiveSite")
    )
  };

Try it yourself: https://codesandbox.io/s/billowing-wildflower-2gjj35?file=/src/App.js:981-1416

from react-table-library.