Easiest way to create static HTML file with sortable and filterable table?

Question

I want to create a static HTML file I can email to someone with a lot of data, and have that data sortable and filterable. What is the easiest to use library or package I can use to get this off the ground?

Answer 1

You can't. You need one of three things to change HTML structure semantically

• JavaScript, event handlers and dom manipulation
• Forms, servers and postbacks to change the page and send a new one
• CSS hackery, things like remodelling the CSS based on the :active state or manipulate checkboxes :checked state.

In theory it's possible to implement this with HTML and CSS alone but that's going to a be a nightmare.

Why don't you just add a link to a google document with a sortable table in it, in your email.

Of course using JavaScript to implement a sortable table isn't hard.

table.addEventListener("click", function (ev) {
  if (ev.target.tagName === "th") {
    sortTable(ev.target);
  }
});

form.addEventListener("change", function (ev) {
  applyFilters(ev);
});

Just implement sortTable and applyFilters

Answer 2

Check this one at Matt Kruse's Javascript Toolbox.

Also you can find DHX DHTMLX very useful.

Answer 3

Use XML not HTML, XML is meant to hold data, HTML is meant to create a webpage. Using XML also allows you to use XSLT to manipulate the stored data. Though depending on your definition of large amount of data it may be best to allow access to a database with the information, or import the information to database on their end.

Answer 4

You Can achieve this easily by using the following,
   HTML & CSS - Presentation,
   Java Script / jQuery - Logic,
   XML - You Raw Data,
Since you have asked for the open sources, so i would suggest you this one Click Here Which has documentation and source for both filter and sort functionality.

Happy coding,
Cheers,
Arun