Sortable, filterable, responsive tables in online documentation

Displaying a table on the screen in the same way as on paper does not take advantage of the medium's capabilities. In online documentation, it can be more user-friendly to enable readers to automatically sort or even filter a table as needed, for example.

If there is not enough space for a wide table on a small display, the table can be made responsive to intelligently adapt to the situation. For example, the content of certain columns can then appear below each other instead of next to each other.

With the help of a suitable JavaScript library, you can implement this.

Example 1: Basic sortable table

The following example shows a basic sorting function for tables, which can be implemented rather quickly with most authoring tools and can even be applied to already existing tables.

Click on the respective column header in the header line to sort the table:

Implementation for example 1

This solution uses the open-source JavaScript library tablesort.

Note: For sortable tables, you should generally not use a table design that has alternating row colors. Otherwise, the colors will no longer be correct after sorting.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

th[role=columnheader]:not(.no-sort) {
  cursor: pointer;
}
th[role=columnheader]:not(.no-sort):after {
  content: '';
  float: right;
  margin-top: -22px;
  border-width: 0 6px 6px;
  border-style: solid;
  border-color: #404040 transparent;
  visibility: hidden;
  opacity: 0;
  user-select: none;
}
th[aria-sort=ascending]:not(.no-sort):after {
  border-bottom: none;
  border-width: 6px 6px 0;
}
th[aria-sort]:not(.no-sort):after {
  visibility: visible;
  opacity: 0.4;
}
th[role=columnheader]:not(.no-sort):hover:after {
  visibility: visible;
  opacity: 1;
}

Step 2: In the head section of your page template, link to the needed JavaScript files of the library (adjust the paths as necessary).

<script src="YOUR-PATH/tablesort.min.js"></script>
<!-- Include needed sort types -->
<script src="YOUR-PATH/tablesort.number.min.js"></script>
<script src="YOUR-PATH/tablesort.date.min.js"></script>

Step 3: Create the table as usual, using the onboard functions of your authoring tool. If your authoring tool does not already assign an ID to each table in the generated HTML code, you must do so yourself. Where and how this can be done depends on your authoring tool. For example, if you assign an ID called mytable-01, this must ultimately look in the generated HTML code as follows:

...
<table id="mytable-01" … >
...

If you have several sortable tables in the same topic, each of them needs a different ID.

Step 4: Finally, at the end of the topic, insert a small JavaScript that initializes each of the sortable tables.

<script>
  new Tablesort(document.getElementById('mytable-01'));
  ...
</script>

Example 2: Sortable, filterable, responsive tables

The following example shows a much more feature-rich solution, but it is also more complex to implement.

Here again, you can sort the table. Also, try what happens when you make the browser window so small that there is not enough room for all columns.
 

In the following variant, you can even filter the content.

Implementation for example 2

This solution uses the open-source JavaScript library FooTable Version 2.

The solution also requires that the external libraries jQuery and Font Awesome are included in your online documentation. If this is not already done by your authoring tool, set this up manually beforehand.

Step 1: In the head section of your page template, link to the CSS file and to the JavaScript file of the library (adjust the paths as necessary).

<link rel="stylesheet" href="YOUR-PATH/footable.standalone.min.css">
<script src="YOUR-PATH/footable.min.js"></script>

Step 2: Add the tables to your topic. The HTML code required for a table is somewhat more complex when using this library. Whether it is better to create this code with a text editor and then paste it as an HTML snippet, or to create it with the on-board tools of your authoring tool, depends on your authoring tool.

> In our example, the HTML code needed for the first table looks like this:

<table class="table" data-sorting="true">
 <thead>
  <tr>
   <th data-breakpoints="xs" data-type="number">ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th data-breakpoints="xs">Job Title</th>
   <th data-breakpoints="xs sm" data-type="date" data-format-string="MMMM Do YYYY">Started On</th>
   <th data-breakpoints="xs sm md" data-type="date" data-format-string="MMMM Do YYYY">Date of Birth</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Bill</td>
   <td>Yard</td>
   <td>Gambler</td>
   <td>November 8th 2011</td>
   <td>July 25th 1960</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Mary</td>
   <td>Huana</td>
   <td>Social Worker</td>
   <td>October 15th 2010</td>
   <td>March 30th 1982</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Jo</td>
   <td>Ker</td>
   <td>Clown</td>
   <td>November 28th 2013</td>
   <td>February 26th 1966</td>
  </tr>
  <tr>
   <td>4</td>
   <td>Anna</td>
   <td>Bolika</td>
   <td>Personal Trainer</td>
   <td>October 31st 2010</td>
   <td>March 29th 1966</td>
  </tr>
  <tr>
   <td>5</td>
   <td>Matt</td>
   <td>Erial</td>
   <td>Engineer</td>
   <td>December 29th 2011</td>
   <td>September 22nd 1964</td>
  </tr>
  <tr>
   <td>6</td>
   <td>Nick</td>
   <td>Otin</td>
   <td>Doctor</td>
   <td>November 12th 2012</td>
   <td>August 4th 1991</td>
  </tr>
  <tr>
   <td>7</td>
   <td>Jack</td>
   <td>Ett</td>
   <td>Stock Broker</td>
   <td>August 14th 2012</td>
   <td>November 20th 1979</td>
  </tr>
  <tr>
   <td>8</td>
   <td>Dick</td>
   <td>Tator</td>
   <td>Politician</td>
   <td>September 21st 2010</td>
   <td>April 7th 1969</td>
  </tr>
 </tbody>
</table>

> The HTML code for the second table of the example is:

<table class="table" data-filtering="true">
 <thead>
  <tr>
   <th data-breakpoints="xs">ID</th>
   <th>First Name</th>
   <th>Last Name</th>
   <th data-breakpoints="xs">Job Title</th>
   <th data-breakpoints="xs sm">Started On</th>
   <th data-breakpoints="xs sm md">Date of Birth</th>
   <th data-type="html" data-breakpoints="xs sm md">Info</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>Bill</td>
   <td>Yard</td>
   <td>Gambler</td>
   <td>November 8th 2011</td>
   <td>July 25th 1960</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>2</td>
   <td>Mary</td>
   <td>Huana</td>
   <td>Social Worker</td>
   <td>October 15th 2010</td>
   <td>March 30th 1982</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>3</td>
   <td>Jo</td>
   <td>Ker</td>
   <td>Clown</td>
   <td>November 28th 2013</td>
   <td>February 26th 1966</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>4</td>
   <td>Anna</td>
   <td>Bolika</td>
   <td>Personal Trainer</td>
   <td>October 31st 2010</td>
   <td>March 29th 1966</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>5</td>
   <td>Matt</td>
   <td>Erial</td>
   <td>Engineer</td>
   <td>December 29th 2011</td>
   <td>September 22nd 1964</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>6</td>
   <td>Nick</td>
   <td>Otin</td>
   <td>Doctor</td>
   <td>November 12th 2012</td>
   <td>August 4th 1991</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>7</td>
   <td>Jack</td>
   <td>Ett</td>
   <td>Stock Broker</td>
   <td>August 14th 2012</td>
   <td>November 20th 1979</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
  <tr>
   <td>8</td>
   <td>Dick</td>
   <td>Tator</td>
   <td>Politician</td>
   <td>September 21st 2010</td>
   <td>April 7th 1969</td>
   <td><a href="#placeholder">Info link</a></td>
  </tr>
 </tbody>
</table>

Step 3: At the end of the body section of your page template, insert an HTML snippet with the following script to initialize the tables:

<script>
 jQuery(function($){
 $('.table').footable();
 });;
</script>

___
 
Did you benefit from this information?

In return, please link to this page, mention the page on social media, or buy one of my books.

Thank you!

Want more? See also more code snippets for enhancing online documentation, as well as my other technical documentation work aids.