GigaGrid icon indicating copy to clipboard operation
GigaGrid copied to clipboard

onRowExpand

Open aferrandi opened this issue 7 years ago • 3 comments

I'm using GigaGrid inside a tab component and also I update it with live data. Therefore when the user expands a rows group clicking on the (+) icon, I need to know it, so that when the user goes to a different tab and then comes back to the original one he finds the grid with the same groups expanded as before.

GigaGrid has the property initiallyExpandedSubtotalRows, with it I can tell the grid that a list of row groups must be expanded to show the rows contained in them. But I would neeed a property "onRowExpand", similar to onRowClick, so that when the user expands a rows group I can keep track of it and later call initiallyExpandedSubtotalRows on that row group.

Is it possible to have it?

aferrandi avatar Oct 28 '16 14:10 aferrandi

Are you using redux and is attaching your store to GigaGrid via connect()? that is a typical use case, and indeed if used in a tab (and which tab is activate is a state in the redux store) Grid state will be erased each time you click on a different tab

However, if you don't wire which tab is active as a prop into GigaGrid - then the table will not be re-rendered and previous states (including which rows were expanded) will be perserved

I've encountered the same challenges in the Apps I build

erfangc avatar Oct 28 '16 18:10 erfangc

I don't use redux.

I checked it with a version of the application that does not use tabs. The grid is a react element in a tree of react elements, all described in a declarative way.

Updating the content of the table with a new value in a cell, the row groups close themselves and the rows under them disappear. Only clicking on the (+) again they appear again, like if the grid forgets completely that the groups was open in the first place. To update the grid I call the render method in the following way:

React.createElement(reacttable.GigaGrid, {
                    disablePagination: true,
                    rowKey: 'id',
                    data: dataOutFiltered,
                    bodyHeight: $(document).height() * .7,
                    columnDefs: columnDefsWithGroups,
                    initialSortBys: [{ colTag: "sortId", direction: reacttable.SortDirection.ASC }],
                    key: self.props.viewKey,
                    initialSubtotalBys:subtotalBys,
                    onRowClick: self.onRowClick,
                    initiallyExpandedSubtotalRows: toKeepExpanded
                })

The variable dataOutFiltered contains all the data to show in the grid, and if only one value in a cell changes, that's the only update in dataOutFiltered.

I checked the last version of the grid (0.5.1) and still have the same problem.

aferrandi avatar Nov 21 '16 16:11 aferrandi

Yeah I believe this is about general support for cell updates. There are several approaches I can think of

  • Use an overlay data strucutre as state: meaning, the component exposes an API that allow an external caller to mutate a state called "cellUpdates". When render() is called, cells with an entry in cellUpdates renders the updated value instead of their original value

... does that approach make sense?

Current behavior (if you just straight-up replace the data in props) is:

The entire component (GigaGrid) is re-rendered, and states could be lost

erfangc avatar Nov 21 '16 17:11 erfangc