Sortable Column for Table

[kodermax]

Could you please add Sortable Column for Table.

[Kikobeats]

Like that?

[javivelasco]

What can be done for this is to provide a custom element for a Table heading and then add a callback function to sort data out of the table component. I'll try an example during the afternoon and leave this open meanwhile

[kodermax]

like this https://www.google.com/design/spec/components/data-tables.html#data-tables-interaction

[kodermax]

and pagination

[UniIsland]

Why is this issue closed?
Is sortable column still in the plan?

[kodermax]

+1

[javivelasco]

I think it can be achieved out of react toolbox. You can sort the source!

[UniIsland]

I think it can be achieved out of react toolbox. You can sort the source!

This is not interactive. One still need to implement the interface that tell the parent component (or backend, when paginated) to sort the source data.
If I want the table header to be clickable, I have to modify the code of react-toolbox's Table component directly.

[javivelasco]

So the proper solution would be to modify the API so the Table accepts onClick handlers

[vmsoftware]

Currently, I'm working on a DATATABLE based on RT table lógic and follow the MD spec.

I'm making it in a responsive wrapper with horizontal scroll for content and I'll happy to share if @javivelasco agree...

This is a preview with header selected items, filters, pagination and rows per page..
I'm working on sortable column right now.

And filter like this:

[javivelasco]

Nice! Did you change the code for the Table component we provide? Maybe we can include useful changes to make it more flexible so you can easily write this kind of wrappers and customize as you want

[vmsoftware]

@javivelasco

yes I have modified 3 files but not directly. I copied the table directory from RT, created a DataTable.js for manage the state (filters, rows per page and other), add the header and footer and modified a little the Table.js and TableRow.js files to include a callback for tableHeadercolumnClick, assing the event for select rows and some small changes in your handleSelect function because the current versión don't work with the multiselectable and unselect features.

I'll try to finish during this week and upload it at the weekend. I think that RT Table can be merge some features that I did, like "headerColumnClick callback", "width of columns" in model prop and the possibility of select a row in any place of the row(not only at checkbox.

When I finish obviously I'm going to share with you for test and add all you think is good.

[joshua1]

@vmsoftware When are you doing a PR for this , or making it a component that can be added to a project.

[devarsh]

@vmsoftware are you planning on sending a PR for this.

@javivelasco Why was this issue closed

[javivelasco]

Because that's too much for a single component and it can be easily done with composition and the latest Table version.