6 ms·

Sort tables fast with Sortable.js

32 points by afschwartz 13y ago

polskibus 13y ago
please create a "filterableandsortable.js" too ;)
- afschwartz 13y ago
  It's a fair criticism. We really wanted to nail the very common use case of: "I put a small table in a blog post and I want it to be sortable and look good." But I think you're right that it would be great to have a pairable tool which adds filtering and possibly another which adds client-side pagination.
  - polskibus 13y ago
    Tere's also "keep my table headers frozen" functionality that's often requested along sorting, filtering and pagination.
    - afontaine 13y ago
      This was a huge point for me when using the old tablesorter script. They had a plugin called StaticRow that would allow you to add the "static" class to a tr tag and it didn't change when sorting. Did you guys implement that too?
      - zackbloom 13y ago
        This library supports that if your static row is the header (uses th tags).
orware 13y ago
I've been using the original sorttable.js you reference on your GitHub page for my own product for a number of years. How does yours differ from that one in terms of features/capabilities? Is it a rewrite with more modern techniques?
- afschwartz 13y ago
  Yea, more-or-less. Here is a short summary of some of the major changes: – Tables with `data-sortable` attribute are automatically initialized. – The sort arrows are made with CSS-border triangles instead of special characters. – The sort arrows are always present but hidden for non-sorted columns so that columns don't resize when sorting. – `sorttable_`-prefixed class names are now `data-` attributes, so they are valid HTML5. – The library doesn't attempt to recognize date formats. Instead, it recommends you add `data-value="#{ timeInMillis }"` to your <td> containing a human-readable date string. I'm sure there are more that I can't think of at the moment, but that's a decent list.
  - orware 13y ago
    Thanks for the replies guys, one additional question I had which I didn't see directly answered would be the type of browsers it should be compatible with or was tested on? The main page shows some browsers listed but I think that was simply demonstration data to show off the script and wasn't actually showing the versions it was supposed to support.
    - afschwartz 13y ago
      Browser support is listed in the documentation (http://github.hubspot.com/sortable http://github.hubspot.com/sortable): IE8+, Firefox 4+, Current WebKit (Chrome, Safari), Opera.
      - orware 13y ago
        Great, thanks! The Internet Explorer one was the one I was probably most curious about. I'll have to give it a test go and see if I can go ahead and use it to supplant the older sorttable in my script ;-).
- zackbloom 13y ago
  I'm a little biased, but just from reading through, it looks like the original does some pretty out-of-date things. I'm annotating the copy in the new project's repo, just to allow me to link to line numbers, but this IS THE LEGACY PROJECT'S CODE: - Webdings: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L103 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Using class names, rather than data attributes, for everything: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L111 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Hardcoded date formats which would make localization tough: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L32 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Sorting in JavaScript (not using Array.prototype.sort): https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L305 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Overriding event bindings in a destructive manner: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L370 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... Not to mention stuff I just find objectionable: - Useless comments: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L27 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Mistabbing: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L440 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... It also looks like this one is 1/3 the length. To be fair though, the original was written seven years ago, and still works, so it's not really fair to criticize it by modern standards. Suffice it to say that it was time for something new.
periferral 13y ago
I needed something that provided sorting, filtering capability for a recent project. After searching high and low and trying a few options, I finally settled on datatables (http://datatables.net/ http://datatables.net/). It is incredibly feature rich and works very well for my use case. Sorting is great functionality but if you really want adoption, I suggest you add the richness required by a variety of use cases. . Sorting . Filtering (regex, case etc) . Searching (column or full table) . Show/Hide columns I don't mean to undermine to work put in here. It looks great and good luck.
- zackbloom 13y ago
  I would take a look at http://listjs.com/ http://listjs.com/. Datatables can be... difficult.
  - periferral 13y ago
    I did look at lists.js and actually started my project with it. It seemed the best at the time. However, I soon realized the filtering capabilities were limited (eg running multiple filters at the same time). I can't remember some other challenges I had at the time. Also, datatables has a large user base which means you can find many examples of it on stackoverflow or other such sites. Lists.js on the other hand has limited examples on their site and even fewer in the wild. I'm not an everyday programmer and needed all the help I could get. Also, considering I'm not a developer, I found datatables quite easy to use.
    - SloopJon 13y ago
      I use Tablesorter for a report. It does a pretty good job with multi-column sorting, but adding the filters that I need has been a bit of a chore. Your comment prompted me to take another look at DataTables. So far I'm impressed. I think it will simplify my code and help clean up some long standing bugs, mainly by replacing some of my CSS visibility hacks with filter callbacks.
- afschwartz 13y ago
  See my earlier comment (https://news.ycombinator.com/item?id=6841944 https://news.ycombinator.com/item?id=6841944) for more info, but yeah, we agree. With most of our open-source projects at HubSpot (http://github.hubspot.com http://github.hubspot.com), we've tried to keep things modular and small, doing one thing as well as it possibly could be done. Adding filtering and searching (fuzzy, regex, etc.) is definitely something we'd like to add. (https://github.com/HubSpot/sortable/issues/4 https://github.com/HubSpot/sortable/issues/4) ;)
zackbloom 13y ago
I turned it into a bookmarklet which will make every table on a page sortable, if anyone's interested: https://gist.github.com/zackbloom/7774909 https://gist.github.com/zackbloom/7774909
sehrope 13y ago
The "sorting" aspect of it is wrong, 2.44% is greater than 1.03% but shows up last: http://i.imgur.com/0qmIk3s.png http://i.imgur.com/0qmIk3s.png EDIT: I took a look at the source. There's an extra "data-" field to use as the value to sort with which is hard coded to "0" for the 2.44% row. This also answers my question of how it was sorting the textual date fields properly (each has the year in that data- field).
- afschwartz 13y ago
  This is intentional. Since that is an "Other" category, I elected to force it to the bottom of the sort order by setting `<td data-value="0">` for that column. See: https://github.com/HubSpot/sortable/blob/e07209b89deac83950cd1e83e4f5bc3796449dcf/docs/welcome/index.html#L266 https://github.com/HubSpot/sortable/blob/e07209b89deac83950c...
- deleted 13y ago
  [deleted]

32 points by afschwartz 13y ago

polskibus 13y ago

please create a "filterableandsortable.js" too ;)

afschwartz 13y ago
It's a fair criticism. We really wanted to nail the very common use case of: "I put a small table in a blog post and I want it to be sortable and look good." But I think you're right that it would be great to have a pairable tool which adds filtering and possibly another which adds client-side pagination.
- polskibus 13y ago
  Tere's also "keep my table headers frozen" functionality that's often requested along sorting, filtering and pagination.
  - afontaine 13y ago
    This was a huge point for me when using the old tablesorter script. They had a plugin called StaticRow that would allow you to add the "static" class to a tr tag and it didn't change when sorting. Did you guys implement that too?
    - zackbloom 13y ago
      This library supports that if your static row is the header (uses th tags).

orware 13y ago

I've been using the original sorttable.js you reference on your GitHub page for my own product for a number of years. How does yours differ from that one in terms of features/capabilities? Is it a rewrite with more modern techniques?

afschwartz 13y ago
Yea, more-or-less. Here is a short summary of some of the major changes: – Tables with `data-sortable` attribute are automatically initialized. – The sort arrows are made with CSS-border triangles instead of special characters. – The sort arrows are always present but hidden for non-sorted columns so that columns don't resize when sorting. – `sorttable_`-prefixed class names are now `data-` attributes, so they are valid HTML5. – The library doesn't attempt to recognize date formats. Instead, it recommends you add `data-value="#{ timeInMillis }"` to your <td> containing a human-readable date string. I'm sure there are more that I can't think of at the moment, but that's a decent list.
- orware 13y ago
  Thanks for the replies guys, one additional question I had which I didn't see directly answered would be the type of browsers it should be compatible with or was tested on? The main page shows some browsers listed but I think that was simply demonstration data to show off the script and wasn't actually showing the versions it was supposed to support.
  - afschwartz 13y ago
    Browser support is listed in the documentation (http://github.hubspot.com/sortable http://github.hubspot.com/sortable): IE8+, Firefox 4+, Current WebKit (Chrome, Safari), Opera.
    - orware 13y ago
      Great, thanks! The Internet Explorer one was the one I was probably most curious about. I'll have to give it a test go and see if I can go ahead and use it to supplant the older sorttable in my script ;-).
zackbloom 13y ago
I'm a little biased, but just from reading through, it looks like the original does some pretty out-of-date things. I'm annotating the copy in the new project's repo, just to allow me to link to line numbers, but this IS THE LEGACY PROJECT'S CODE: - Webdings: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L103 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Using class names, rather than data attributes, for everything: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L111 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Hardcoded date formats which would make localization tough: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L32 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Sorting in JavaScript (not using Array.prototype.sort): https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L305 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Overriding event bindings in a destructive manner: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L370 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... Not to mention stuff I just find objectionable: - Useless comments: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L27 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... - Mistabbing: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438d735967f16eef0d403ef9/sorttable.js#L440 https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438... It also looks like this one is 1/3 the length. To be fair though, the original was written seven years ago, and still works, so it's not really fair to criticize it by modern standards. Suffice it to say that it was time for something new.

periferral 13y ago

I needed something that provided sorting, filtering capability for a recent project. After searching high and low and trying a few options, I finally settled on datatables (http://datatables.net/ http://datatables.net/). It is incredibly feature rich and works very well for my use case. Sorting is great functionality but if you really want adoption, I suggest you add the richness required by a variety of use cases. . Sorting . Filtering (regex, case etc) . Searching (column or full table) . Show/Hide columns I don't mean to undermine to work put in here. It looks great and good luck.

zackbloom 13y ago
I would take a look at http://listjs.com/ http://listjs.com/. Datatables can be... difficult.
- periferral 13y ago
  I did look at lists.js and actually started my project with it. It seemed the best at the time. However, I soon realized the filtering capabilities were limited (eg running multiple filters at the same time). I can't remember some other challenges I had at the time. Also, datatables has a large user base which means you can find many examples of it on stackoverflow or other such sites. Lists.js on the other hand has limited examples on their site and even fewer in the wild. I'm not an everyday programmer and needed all the help I could get. Also, considering I'm not a developer, I found datatables quite easy to use.
  - SloopJon 13y ago
    I use Tablesorter for a report. It does a pretty good job with multi-column sorting, but adding the filters that I need has been a bit of a chore. Your comment prompted me to take another look at DataTables. So far I'm impressed. I think it will simplify my code and help clean up some long standing bugs, mainly by replacing some of my CSS visibility hacks with filter callbacks.
afschwartz 13y ago
See my earlier comment (https://news.ycombinator.com/item?id=6841944 https://news.ycombinator.com/item?id=6841944) for more info, but yeah, we agree. With most of our open-source projects at HubSpot (http://github.hubspot.com http://github.hubspot.com), we've tried to keep things modular and small, doing one thing as well as it possibly could be done. Adding filtering and searching (fuzzy, regex, etc.) is definitely something we'd like to add. (https://github.com/HubSpot/sortable/issues/4 https://github.com/HubSpot/sortable/issues/4) ;)

zackbloom 13y ago

I turned it into a bookmarklet which will make every table on a page sortable, if anyone's interested: https://gist.github.com/zackbloom/7774909 https://gist.github.com/zackbloom/7774909

sehrope 13y ago

The "sorting" aspect of it is wrong, 2.44% is greater than 1.03% but shows up last: http://i.imgur.com/0qmIk3s.png http://i.imgur.com/0qmIk3s.png EDIT: I took a look at the source. There's an extra "data-" field to use as the value to sort with which is hard coded to "0" for the 2.44% row. This also answers my question of how it was sorting the textual date fields properly (each has the year in that data- field).

afschwartz 13y ago
This is intentional. Since that is an "Other" category, I elected to force it to the bottom of the sort order by setting `<td data-value="0">` for that column. See: https://github.com/HubSpot/sortable/blob/e07209b89deac83950cd1e83e4f5bc3796449dcf/docs/welcome/index.html#L266 https://github.com/HubSpot/sortable/blob/e07209b89deac83950c...
deleted 13y ago
[deleted]