Sort tables fast with Sortable.js | Hacker News Reader

Sort tables fast with Sortable.js

github.hubspot.com

32 pointsafschwartz22 comments

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/). 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.

I would take a look at http://listjs.com/. Datatables can be... difficult.

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.

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.

See my earlier comment (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), 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) ;)

We haven't officially announced it yet, but we've been working on a sort of replacement for datatables, that's more fun to use and easier to customize, called Dynatable. It also has searching, filtering, and paginating, and supports using templates for reading and rendering, such that it could be used to make interactive lists, grids, charts, etc.

http://os.alfajango.com/dynatable if you're interested in checking it out.

EDIT: I don't mean to hijack this thread to just plug our project, just seemed relevant to the parent content. I actually really like the idea of modular single-purpose javascripts that are really well done. The issue becomes when each library has to duplicate functions from other libraries due to them being intended for individual use. For example, I imagine a lot of functions in listjs that duplicate some of the functions in jquery (I haven't actually looked through the individual functions in listjs yet, so this is just conjecture), which is great for the times when you're not using jquery, but other times, it's just a bunch of duplicated code.

This looks very good. I'll consider this for my next project.

A few things I really like 1. Applies to tables, lists etc 2. Nice progress indicator. This is missing in datatables and is a pain point in my current deployment. 3. stylized lists and charts. Very cool

what i didnt see 1. filtering. eg: find in column x where string not equal to blah 2. Searching specific column rather than entire table.

I apologize if this exists and I missed it. Overall, look great. Best wishes on this.

Awesome thanks!

what i didnt see 1. filtering. eg: find in column x where string not equal to blah 2. Searching specific column rather than entire table.

See the "Year" and "Max Price" examples at the bottom of the "Querying" sub-section under "Operations", right before "Pagination". You would do that by adding your own query function:

    $('#my-table')
      .bind('dynatable:init', function(e, dynatable) {
        dynatable.queries.functions['myQueryName'] = function(record, queryValue) {
          return record.myAttribute != queryValue;
        };
      })
      .dynatable();

Then, you'd invoke the query like this:

    dynatable.queries.add('myQueryName', 'hello');
    dynatable.process();

And that will execute your query function which finds all records for which `myAttribute` is not equal to "hello". Of course, you'd need to bind the above query execution to some user input, like the `change` event of a text field or something like that, and instead of 'hello', you could pass in the value of the input.

This is a common scenario, so dynatable provides a shortcut to this style of invocation of your custom query functions by passing dom elements to the `inputs` config option. So, you could replace both of the above with this:

    var dynatable = $('#my-table')
      .bind('dynatable:init', function(e, dynatable) {
        dynatable.queries.functions['myQueryName'] = function(record, queryValue) {
          return record.myAttribute != queryValue;
        };
      })
      .dynatable({
        inputs: {
          queries: $('#my-input')
        }
      });

This will now cause the `myQueryName` function to be run on the dataset with the value of the `#my-input` dom element and process the results on the `blur` or `change` events of that dom element (the events that trigger the query processing can be changed via the `inputs.queryEvent` config option).

I think this answers both of your questions. If there's a different sort of syntax you had in mind for providing an easier or more straight forward way of doing this, please let me know!

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

The "sorting" aspect of it is wrong, 2.44% is greater than 1.03% but shows up last: 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).

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/e07209b89deac83950c...

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?

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.

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.

Browser support is listed in the documentation (http://github.hubspot.com/sortable): IE8+, Firefox 4+, Current WebKit (Chrome, Safari), Opera.

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 ;-).

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/37894eb51bda9f0e438...

- Using class names, rather than data attributes, for everything: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438...

- Hardcoded date formats which would make localization tough: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438...

- Sorting in JavaScript (not using Array.prototype.sort): https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438...

- Overriding event bindings in a destructive manner: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438...

Not to mention stuff I just find objectionable:

- Useless comments: https://github.com/HubSpot/sortable/blob/37894eb51bda9f0e438...

- Mistabbing: 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.

please create a "filterableandsortable.js" too ;)

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.

Tere's also "keep my table headers frozen" functionality that's often requested along sorting, filtering and pagination.

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?

This library supports that if your static row is the header (uses th tags).

Reply on news.ycombinator.com