Comments (7)
Let's talk though some of this:
- I am pretty sure that as long as you don't pass the table any sorting information, it won't sort at all. I'm not totally sure how you would go about returning to this non-sorted state after choosing to sort by a column.
- When you say the data is changing, are you referring to the sub-data or overall data changing. It seems that if you updated the main data in any way that affected the number of results, order, or pagination, you would end up seeing a completely different row's sub-component. This would lead me to the next question...
- Would it be expected that when the data model changes in any way that every expansion level is collapsed? This would be very easy to do, and treats each dataset as it's own "session" in a way. I know that right now, everything is collapsed on page change. This way, it seems normal to do the same with data changes. Thoughts?
- It seems that even if it proved to be a large enough use case, it will be extremely difficult to get away from sorting running when new data is fed to the table. Otherwise, the you would have to fire the sorting yourself. In my opinion, I think I am leaning more towards item 2.
Let me know what you think
from table.
Wow thanks for the quick response.
- Yes, this is correct- when Sortable is false, the table doesn't auto-sort, which is great, but there's no way to set the column state back to no-auto-sort after choosing to sort by a column. Wonder if a way to turn off and resume the sorting functionality would be valuable?
- When the main data changes, the rows will re-sort. In my case, I have rows of users: first name, last name, username, and other information. If someone changes their username or a new user signs up, the table of users will either re-sort or insert the new user. When a sub-component is open, then yes I do end up seeing a completely different row's sub-component data. (ex: I have users Anna, Charlie, and Doug. I have Charlie's sub-component open. If a user Brad signs up while the sub-component is open, the sub-component will instantly switch to Brad's information without any user input)
- I think closing the sub-component is one way to do it (is there a to trigger all expansions to close?). My use-case though is that I have user information and form elements in the sub-component (this is a moderator view where mods can change and add other user info), so if a moderator is currently reading about or modifying a user's information and the data changes somewhat frequently or unexpectedly, then moderators would have a very difficult time viewing that interface, because the sub-component will keep closing while they're using it. The other use-case is that moderators can save/update a user's information- if the mod changes a user's first name and saves it, the row will also re-sort and the sub-component will immediately display another user's information. In this case, it would also be nice if sorting would be momentarily frozen, in case there was other information a moderator wanted to go over under the same user.
- Yeah I think the problem is in the reactive nature (I'm using React+Meteor) so as soon as there is new data, the table shifts around. Having a manual sort mechanism (or a way to turn sort off completely) would actually be interesting- we only fire the sort manually regardless of the data; new data will be inserted to the end of the list, and all the rows will stay where they are. As soon as sort is turned back on, we can start sorting again. Though you're right, this use case might be fairly small.
Actually, I just thought of a way around this- if I could programmatically set which column to sort by, I could set the table to sort by a hidden, empty column to prevent the table from sorting. Getting the table to sort again would be as simple as letting it sort by any other visible column
from table.
I like your approach to the sorting. Remember that you can control the sorting model directly by passing sorting={[{id: COLUMN_ID, desc: true}]}
as a prop. It's much easier There is also a corresponding onSortingChange
callback that you can use as well. It's all in the "Fully Controlled Component" section of the docs. As for what we discussed, I think the way to go is to increase the api for row expansion.
from table.
If you would like to submit a PR to close the expanded rows on data change, I would merge or for you.
from table.
ok cool, I think I got the gist of it. I got sorting={this.state.sortArray}
and I wrote a simpler sorting method in onSortingChange
to handle my sortArray
prop accordingly. That all works fairly well.
I also have expandedRows
controlled by {this.state.expandedRow}
as I'm now only allowing a single row to expand at a time, and a this.state.expanded
flag that if true, prevents the sorting function from re-sorting.
I'm running into a very strange problem though- when I set the state's sortArray to different values, the ReactTable's classes all update with the correct ascending and descending styles, but the table doesn't actually sort (I think it doesn't trigger a re-render) until I either expand a column or click on the column to re-sort again, then it'll actually trigger the sorting re-render.
I got around this in a very hacky way by setting this.state.sortArray
twice... with a delay... which I know is a pretty terrible way to write code.
if(this.state.sortingArray[0].asc) { this.setState({sortingArray: [{id:'firstName',asc:false}]}); _.delay(()=>{this.setState({sortingArray: [{id:'firstName',asc:false}]});}, 200); } else { this.setState({sortingArray: [{id:'firstName',asc:true}]}); _.delay(()=>{this.setState({sortingArray: [{id:'firstName',asc:true}]});}, 200); }
But nothing else really works... this is inelegant but it does. Do you have any ideas why this is happening?
Sure, I can add a closeRowOnDataChange={true}
prop that closes optionally
from table.
I would just default the closeRowOnDataChange
prop to true
in the default props as I think this is expected functionality for a majority of use cases.
As for the strange behavior, I think we just need to make sure that we are firing off the sorting method when and if the sorting props change.
from table.
Fixed with the options provided in 1e4f838
from table.
Related Issues (20)
- `getTopRows()` and `getBottomRows()` Not Referentially Stable Between Renders
- Calling `row.getParentRow()` with expanded, filtered row models and initial filtering value throws an error HOT 1
- Table sorting is not working when drag and drop of columns is used HOT 1
- Custom sortingFn not being run when row key is undefined
- [Angular] In the example, column sorting does not work. HOT 2
- Global filter only works with string and number types
- To use @Tanstack Table/vue-table, you must import the core package, but the documentation does not specify this HOT 2
- Sub components are overlapped with successive rows HOT 1
- Bug Report: cell.isGrouped Always Returns false Despite enableGrouping Being true (REACT) HOT 2
- The left position of pinned columns in the sticky table is calculated incorrectly HOT 2
- cell only displays one line HOT 1
- When using virtual rendering and column drag-and-drop sorting simultaneously, they don't work well together HOT 2
- onPaginationChange when set to undefined doesn't fallback to using default pagination HOT 1
- Failed to monitor data changes, resulting in page turning without re-rendering. HOT 2
- Table using insane amount of memory even with virtualisation when scrolling HOT 2
- Issue with getIsSomeRowsSelected when using grouping
- [vue table] support for reactivity in Vue-adapter in version 8.20 broke reactive for the old getter `get data()` style HOT 1
- Use of svelte/internal in Svelte 5 HOT 6
- Page sizes that are multiple of 50 don't render new data BUT pagination works
- when i useing thead Grouping. only set subHeader enableColumnFilter work, parent Column didn't work HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from table.