gregnb / gregnb/mui-datatables

Column filter logic called an unexpected amount of times with confirmFilters

Open
#1,733 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.7k
Forks
906
PR merge metrics
No merged PRs in 30d

Description

## Expected Behavior

Clicking "Apply Filters" should result in 1 filter call per row for the entire data set, which is how closing a filter chip appears to work.

## Current Behavior

Clicking "Apply Filters" results in 1 filter call per column per row for the entire data set.

## Steps to Reproduce (for bugs)

https://codesandbox.io/s/optimistic-flower-efenw?file=/src/App.tsx

This sandbox is a mashup of examples/serverside-filters and examples/customize-filter, so it should look familiar.

1. Show the console, verify "filterOptions - age logic" console print shows a count of 30
2. Click the toolbar filter button, enter "30" for min, "30" for max, click "Separate Values" checkbox, click "Apply Filters", wait for "loading" to complete
3. Verify "filterOptions - age logic" console print shows a count of 150 (30 rows * 5 columns), then "filter dialog closed", then "data size = 2" then "filterOptions - age logic" with a count of 4 (2 rows, twice)
4. Click the toolbar filter button, enter "30" for max and click "Separate Values" checkbox, click "Apply Filters", wait for "loading" to complete
5. Verify "filterOptions - age logic" console print shows a count of 10 (2 rows * 5 columns), then "filter dialog closed", then "data size = 2" then "filterOptions - age logic" with a count of 4 (2 rows, twice)
6. Click the toolbar filter button, enter "30" for min, click "Apply Filters", wait for "loading" to complete
7. Click the 'x' in the "Min Age: 30" filter chip, wait for "loading" to complete
8. Verify "filterOptions - age logic" console print shows a count of 2 (2 rows)

## Your Environment

In our non-sandbox case, we use filtering to make an asynchronous data fetch to do server-side data reduction, then do all sorting client side on the reduced data set. Our data sets are large (tens of thousands of rows) and I've tested up to 100k rows. I have an additional issue where clicking "Apply Filters" takes multiple seconds and locks up the entire table until after all of the "filter logic" has processed, but I was unable to fully reproduce that behavior in the sandbox. This sandbox is the closest approximation to what we actually do.

| Tech | Version |
|--------------|---------|
| @material-ui/core | 4.11.4 |
| @material-ui/icons | 4.11.2 |
| @types/mui-datatables | 3.7.3 |
| mui-datatables | 3.7.7 |
| react | 17.0.2 |
| browser (Edge) | 91.0.864.37 (Official build) (64-bit) |
| browser (Firefox) | 88.0.1 (64-bit) |
| browser (Chrome) | 90.0.4430.212 (Official Build) (64-bit) |

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.