gregnb / gregnb/mui-datatables

SelectAll not working when row selected, then filter applied

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

Description

## Summary
In my app, there are two main components: a leaflet map and an MUI data table. The two communicate via redux so that when a row is selected in the table, the respective circle in the map is highlighted and vice versa.

My problem is with the indeterminate toggle selectAll checkbox on the table. When the user has selected a row then applies a filter, the selectAll checkbox shows the '-' indeterminate symbol, but nothing happens when it is clicked. A simple demo for this project can be found at this [CodeSandbox](https://codesandbox.io/s/crazy-sammet-uo7pb).

## Expected Behavior
When the User has selected a row in the table then applies a filter, the selectAll checkbox should still select all visible rows on the first click and deselect all rows on the second click the same way it normally would.

Here is an example of the desired behavior:
- See this [table](https://react-table.tanstack.com/docs/examples/kitchen-sink).
- Select the first row (First Name: environment).
- In the First Name filter, enter 'yoke' as the value.
- Click the selectAll checkbox (displaying '-') to select all visible rows.
- Click the selectAll checkbox again (now displaying: ✅) to deselect all visible rows.

## Current Behavior
When the User has selected a row in the table then applies a filter, selectAll checkbox shows '-' and nothing happens when clicked. No rows are selected/deselected.

## Steps to Reproduce (for bugs)
Steps relative to this [CodeSandbox](https://codesandbox.io/s/crazy-sammet-uo7pb).
1. User selects the first row in the table, circle1, via the respective checkbox.
2. User opens filter dialog in the right-hand corner of the table.
3. From the Marker dropdown menu in the filter dialog, the User selects circle3 as the filter value.
4. User closes filter dialog.
5. User clicks on selectAll checkbox at the top of the select row column. It will be showing the '-' symbol.
6. Notice that nothing changes. No rows are selected or deselected.

## Your Environment

"dependencies": {
"@material-ui/core": "4.11.0",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "4.0.0-alpha.56",
"@material-ui/styles": "4.10.0",
"@material-ui/utils": "4.10.2",
"leaflet": "1.7.1",
"mui-datatables": "3.7.1",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-redux": "7.2.2",
"react-scripts": "^3.4.4",
"redux": "4.0.5",
"redux-logger": "3.0.6",
"redux-thunk": "2.3.0"
}

Is there a way to implement the desired behavior? Any help would be appreciated.
Thank you for such a great table!

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.