Ordering Columns dynamically #393
Comments
|
what do you mean? multi-sort? or just changing which column is ordered by default? |
|
Mostly the second one. So an user can reorder the columns before exporting a csv, for instance, dragging and dropping them where they wish. |
|
ohhh... changing the column order. That's cool. Are you going to use |
|
I have not yet started with the dragging so if that's a good option I'll take it :) |
|
I haven't done extensive research into dragging libraries. I just know
that's one that was used in documentation for a custom component on the
Material-UI website
…On Tue, Feb 5, 2019, 04:39 Adrián ***@***.***> wrote:
I have not yet started with the dragging so if that's a good option I'll
take it :)
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#393 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AHiq6drRx9p_uHkNZTE3JX9_HewfxctEks5vKZe5gaJpZM4aVls_>
.
|
|
I started implementing it with a handler in the columns popover. Hope this approach makes sense. My idea is to reorder the data when the dragging stops: the user releases the mouse, we read the order in that instant and if it's different to the previous one, apply the column reordering. |
|
nice! that makes sense to me. it looks better than how I visioned it
…On Wed, Feb 6, 2019, 01:19 Adrián ***@***.***> wrote:
I started implementing it with a handler in the columns popover.
[image: screen shot 2019-02-06 at 12 15 19]
<https://user-images.githubusercontent.com/704210/52337783-e9ac5100-2a08-11e9-8017-688305021453.png>
Hope this approach makes sense. My idea is to reorder the data when the
dragging stops: the user releases the mouse, we read the order in that
instant and if it's different to the previous one, apply the column
reordering.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#393 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AHiq6QoXYp7swN4OENKqNd-IAN1Y1nfXks5vKrpVgaJpZM4aVls_>
.
|
|
I might switch for this other library: https://github.com/atlassian/react-beautiful-dnd |
|
With |
|
I have this working |
|
I'm having some trouble updating the filters (since the index of the columns is different), any tip @jaksco ? |
|
hmmm...
I wonder if you can merge the jsonMode PR and refactor it somehow. maybe
then the index won't matter?
That's my only idea. I don't really have in depth knowledge about this
project to be honest 😅 but I'm glad you have it working
…On Thu, Feb 7, 2019, 05:08 Adrián ***@***.***> wrote:
I'm having some trouble updating the filters (since the index of the
columns is different), any tip @jaksco <https://github.com/jaksco> ?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#393 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AHiq6Vpugg-YyToKW2jiJEYKQU--3cw0ks5vLEFXgaJpZM4aVls_>
.
|
|
Ah, I'll check that PR and add @gregnb in the loop just in case, thanks :) |
|
@apercas This is pretty awesome. I would love to come up with a great name for the options to describe this feature. My first thought was 'draggableColumns' but that made me think for a second. What I think would truly be the killer feature that would make sense to most users is if we could also make the column headers draggable. If they happen to select a table column and drag it we can put a highlight around the whole column at move it to a new place. What are your thoughts? Is this feasible? |
|
Hi, sorry I've been out for some days. The first approach I took was actually dragging the headers but that interfered with the sorting sometimes, it was a little bit annoying trying to sort a column and move it (to eventually leave it in its current position) and I guess sorting a column is something a user does more often than changing the position of the column (since the main case for us is just the CSV export), thus adding it to the column list popover. I can always take a re-spin to that if still interested of course. |
|
I agree that discovery of the column moving feature may not be immediate to an end user, but I like the way that @apercas implemented this feature. Additionally, I've never seen a table or spreadsheet software that uses the same area clicky-action to both sort and move columns. just my 2 cents |
|
@apercas @jaksco Sorry for the late reply. I'm glad you both shared your thoughts on the header. @apercas I would love for you to send in a PR. We also need the ability to turn this feature on/off so let's come up with a name that would be used in |
|
This is not a good week but I'll keep on working on this over the weekend. |
|
I agree that the killer feature would be to drag the column header. Though much better than not having the option at all, the problem with hiding the sort under the show columns button is that the feature is not discoverable. A user looking to sort columns might never think to look there, whereas dragging a column header is an immediately obvious and intuitive solution. |
|
hey @apercas any update on this work? maybe someone else can take up your effort? would you mind sharing it somewhere if that is ok? |
|
Hello, sorry for the late response, it shouldn't be hard to finish it, please if anyone can take over it'd be great. Thank you. This is the branch: https://github.com/apercas/mui-datatables/tree/393_arrange_columns |
|
Hi guys can someone tells me just how to add that feature in my project, I will appreciate that |
|
It's a pretty cool idea, though it doesn't look like it was finished: https://codesandbox.io/s/github/apercas/mui-datatables/tree/393_arrange_columns The 2 issues I see are:
|
|
@patorjk Thanks man I am working with default package of Mui datatable which installed in my react porject via npm how can implement that ? and thanks |
|
You'd have to add that repo as a remote, fetch and checkout the 393_arrange_columns branch, and then rebase it. This post has the exact commands you'd want to use: https://stackoverflow.com/a/7244456/256460 (except you'd be rebasing a branch instead of master) The problem is that it's unfinished, so you wouldn't be able to use this with filtering. I'm debating taking a stab at continuing this idea, though I like the way React Grid does it's column dragging: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/column-reordering/ I'll have to think about it though. |
|
@patorjk thanks buddy I appreciate that man big thanks |
|
Hi, we ended up with our own table component with some extra features (as this one). It's not based on this repo but we're using it only in two only cases, 90% of the app still uses this. When that one is properly tested I'll share it here. |
|
@apercas Ok boss we are waiting for that version , thanks a lot for that great work |
|
If anyone wants to take it on, I'd be happy to add a feature for direct column dragging to re-order columns. If you want to take it, it would be best to open a new issue with the approach outlined, and then I can assign you. |
|
@gabrielliwerant I may be interested, but don't assign anything to me just yet as I want to prototype some ideas I have (plus I'm not sure how much time I'll have in the near future). I think the best way to do this is to use react-dnd [1] for the column label dragging, and then CSS transform/transition styling to move the actual row cells to give the effect that DevExpress has when their columns are dragged (if you look at the dev console, you see that's how they're moving their columns). However, if someone else sees this and wants at it, feel free to grab it up. [1] react-beautiful-dnd is really cool and would be better for list movement like the View Columns dialog, but I think it's use cases are too specific for this and it wouldn't give a good dragging effect for the header columns - though if the ViewColumns dialog route is taken, react-beautiful-dnd is probably the way to go. |
|
Sounds good @patorjk! My preference would be to keep this as lightweight as possible, with the ability for devs to override stylistic concerns on their own rather than make too many appearance-based assumptions at the outset. I haven't used It would also be great if there were a way to keep any logic related to this self-contained, but I understand that may be a lot to ask given the current structure of the code. |
|
Hey there, is anyone still working on the dynamic sorting? will it be added anytime soon cause i could really use it. Even dragging via columns dropdown would do. |
|
@HumayounBaig I finished a draft version of this feature and I was going to include it in my second round of PRs, but none of the 8 that I submitted ~6 weeks ago have been accepted yet so I don't really see myself going back and revisiting this. However, I do have some suggestions based on my experience of working through this. The first step should be to create a new option called columnOrder which would be an array of integers representing the column indexes. If the table had n columns the array would default to [0, 1, ..., n - 1]. As you can see, this array represents the column indexes and the order that the columns should be presented in the table. Changing this array would allow users to change the column order without messing with other aspects of the code. This is really important because if draggable columns actually change the columns array, they're not backward compatiable and they will break a lot of existing code. Additionally, once the columnOrder functionality is in place (which is really simple - it mostly involves changing this file: https://github.com/gregnb/mui-datatables/blob/master/src/components/TableBody.js#L252), the drag and drop functionality can focus on getting drag and drop right and just modify the columnOrder property when it's done. I used a library called React DnD and wrote all of my code using Hooks (which would not be compatible with the current library until #1077 is accepted). It's an awesome library, but my biggest gripe about it was that I was unable to change the cursor while dragging (react-dnd/react-dnd#325), which appears to be due to how HTML5 drag and drop works. I'm not sure how dev-express does their drag and drop, but from a visual standpoint I think changing the cursor is a better experience. Additionally, I began to wonder if something like this might better be implement as a plug-in (#1089). However, there were some gotchas to this approach that would still mean React-DnD would have to be included in the main library (I can't remember at this point as it's been months since I worked on this). But even still, using the plug-in approach would allow the library to test run some ideas before fully committing to a particular approach. |
|
Hi any plans of including this feature anytime soon |
|
Draggable columns are now in the current version of the table: 3.1.5 |
|
thanks,
but i am having trouble using draggable Columns with custom headers. Can
you please confirm.
…On Thu, Jul 9, 2020 at 9:52 PM patorjk ***@***.***> wrote:
Draggable columns are now in the current version of the table: 3.1.5
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#393 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AH3CWU7W3DNK6R3WTBLVKELR2XYVVANCNFSM4GSWLM7Q>
.
|
|
@HumayounBaig Draggable columns requires code that's written in the TableHeadCell.js, when you do a customHeadReader, you are overriding the functionality of the TableHeadCell. So if you want the draggable functionality while using customHeadReader, you have to add that to your custom component / render function. However, in the current release (3.1.5), I silently put in a feature called customHeadLabelRender (it will be documented in the upcoming 3.2.0 release), which allows you to render inside of the TableHeadCell without overriding the whole cell. Using this method along with setCellHeaderProps, probably allows most people to do 99% of the header customizations they need. I would take a look at customHeadLabelRender and see if it fits your needs. If so, you can use that and draggable columns will work fine. |
|
@patorjk thanks i'll try this let you know if it works for me |
Expected Behavior
I'll be pushing a PR for this. Is there any specific consideration I should take into account beforehand?
The text was updated successfully, but these errors were encountered: