Feature - table-sortable header styles

[thomaswelton]

I have found this old issue #2327 which I assume is talking about removed bootstrap 2 styles and has been closed. However I am about to implement a feature in my project that I think would be useful to have in the bootstrap core. Sortable table headers.

I feel as thought the implementation of the sorting should be left to the consumer, via either backend sorting JS sorting ect. But that bootstrap should include a table-sort-up class or similar that would be applied to a table cell in the thead

I feel like sortable tables are common, and that one of bootstraps nicest features are standard class names that everyone understands. Leaving the implementation of this leads to variances from project to project.

I'd submit a PR for this. Or I'd be equally fine with this feature being rejected. Just wanted to raise the issue.

[thomaswelton]

Ok, so since this has been tagged I'll put together the PR.

[cvrebert]

(For the record, labels and milestones don't indicate approval.)

[mdo]

Is there anything we can do here to integrate with existing plugins? No one has really standardized these interactions and styles. I'd rather not create dummy code for something that's not interactive, and I don't think we'll get into the table sorting realm within the core.

[thomaswelton]

I'd say this feature would be similar to the pagination and pagers that bootstrap has available. Most people have server side stuff to do the grunt work and render the proper markup.

Without having a dummy code example there is nothing for third parties to latch onto. But with the case of pagination because there is a bootstrap standard php frameworks like laravel output compatible markup by default.

On 12 Jun 2014, at 19:41, Mark Otto notifications@github.com wrote:

Is there anything we can do here to integrate with existing plugins? No one has really standardized these interactions and styles. I'd rather not create dummy code for something that's not interactive, and I don't think we'll get into the table sorting realm within the core.

—
Reply to this email directly or view it on GitHub.

[hnrch02]

We had support for Tablesorter in v1, why was that dropped? It still seems to be maintained. [For reference: Docs and Less of v1]
Edit: Never mind, found #1331.

[thomaswelton]

For me tablesorter wouldn't really work. At a glacé of the readme it only works with the data on the page. So if I have a large paginated data set then I need Ajax and server side sorting.

I can see why the additional js dependency may have been dropped from bootstrap.
But would like to see the markup return for common implementation.

On 12 Jun 2014, at 20:01, Heinrich Fenkart notifications@github.com wrote:

We had support for Tablesorter in v1, why was that dropped? It still seems to be maintained. [For reference: Docs and Less of v1]

—
Reply to this email directly or view it on GitHub.

[mdo]

If you've got specific ideas, I'd be interested in hearing some details on what you'd want implemented. I'm open to seeing if we can standardize and offer something. To be clear though, I'm still not sold it's something we need to address in the core yet.

[thomaswelton]

I think we should have a .table-sortable class that should be applied to a <table> this class name would add the icon glyphicon-sort in the :after pusedo element on the th cells which would have a semi opaque color, going to opaque on th:hover it would also add cusor:pointer to the th

Then for the "active" column that is being sorted there should be another selector added to indicate the direction. This selector would change the glyphicon to be glyphicon-chevron-up or glyphicon-chevron-down.
The active selector could be something like .table-sort-up or maybe even better use a data attribute data-sort-dir="up" using a data attr would make is easier for a JS plugin to read the sort direction. And when they need to toggle it they could just update the attr accordinly without having to remove one class name to add another.

Implementation of the sorting can then be handled either on the backend or with a JS plugin.

[cvrebert]

Not all columns might be sortable, so I think putting the class on the <th>s themselves would be better.

[mdo]

Regarding specific implementation details:

• Let's not tie ourselves to the Glyphicons—use a CSS caret/arrow instead.
• Agreed w/ @cvrebert to make it use classes on th elements. A parent class doesn't make the most sense here. Maybe something like .th-sortable or something like that?
• Same goes with the active direction—.th-sortable-up/-down.
• Data attributes can probably be passed on if we're not writing JS to do it in the core.

It sounds like not a lot of code, but I'm really hesitant to do a half-implemented feature. Everything else we provide is mostly good to go in a lot of use cases. This is the one thing that requires a lot more.

[thomaswelton]

I totally understand where you are coming from @mdo
For me this was just one example of where I need to add some front end feature and my first instinct is to say "How does bootstrap do it" and then I'm sad to see it's not a feature, because that means I have to come up with a naming convention and write a little bit of CSS.

This wouldn't be solving a huge problem. But I can definitely see it being used by people. And for those who don't need it can exclude it via the customiser.

[mdo]

Going to close this out and punt on it. I'm open to seeing a PR if it's lightweight enough, but I'm not seeing a clear picture of how this benefits everyone without providing the JS solution to complete it.

<3

[MalikRumi]

@mdo - I don't understand your reluctance to implement some version of this feature. I for one would like very much to have it. And when you closed #2327 there were all sorts of upvotes from others who were interested. This functionality is both common and old in things like Excel. End users who deal with tabular data will love it and a lot of devs want to give it to them. If you can't do the JS part, fine, explain that in the readme or whatever, but give us the consistent styling to make it look good.

[cvrebert]

@MalikRumi We remain extremely unlikely to include JS for this, as it's complicated enough to be a project in its own right (i.e. TableSorter etc.), and vendoring it would cause bloat for the many folks who don't need that feature.
As for CSS, it's not out of the question, but such plugins usually include their own CSS (so there'd be no point), or would need to include hooks so they could use our CSS (do these plugins include such hooks? I dunno). If someone wants to drive this forward, they should investigate whether such hooks are available, what kind of CSS approach would work with the hooks, and then make a PR.