gregnb / gregnb/mui-datatables

How to prevent expanded row getting collapsed on state update in mui-datatable (^2.15.0)

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

Description

I'm trying to display nested rows , which includes expandable rows. The inner level rows has a button click on a cell, which is doing a setState onClick of it.

## Expected Behavior
If User has clicked on the Expand row (outer row) which then lists out all the inner rows which has an onClick function in a cell.
So, if User has already expanded a row, And then click on Button displayed in the inner level of rows.

Then Expanded row should not collapse . (Basically TableState for expandedRows should be remembered and only if the User clicks on that Expand/Collapse icon, the row should be expanded/collapsed accordingly.)

## Current Behavior
The expanded row is getting collapsed on a State Update that happens in the inner level of nested rows, onClick of button stateUpdate is resetting the expandedRows of tableState.

## Steps to Reproduce (for bugs)
1. Click on Expand Icon - This expands all the rows
2. Click on Attach Icon - Opens the dialog does some setState
But this collapses already expanded rows

## UI
![image](https://user-images.githubusercontent.com/109205544/178678504-367149f7-39d2-42a9-8c31-b47a63854593.png)

| Tech | Version |
|--------------|---------|
| Material-UI | ^4.11.3 |
| MUI-datatables | ^2.15.0 |
| React | ^16.13.1 |

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the nested expandable-row case described in the issue: expand a row, click the Attach button, and observe the state update. Trace how the table state handles expandedRows during that update. Done means inner-row actions and other state updates preserve expanded rows until the user explicitly collapses them.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.