Sortable Tables using a WebControl

Excerpt

Add one attribute to the HTML table to add the sorting feature.

This is an example on how simple it is to use the native web component technology to make html tables sortable.

  1. Add a javascript include to the page header:

    <script src="tablesort.js"></script>

    This script file includes all the functionality in 66 lines of code. No full&perfect implementation but easy to read with comments inside.

  2. Add a annotation to the table element:

    <table is="table-sortable" ... >

    This tells the browser to extend the functionality of the HTML element. The is attribute is reserved in HTML for this purpose.

Example

id web site purpose online
1 amazon shopping yes
2 google searching yes
3 outlook E-Mail yes
4 eBay commerce yes
5 example dummy

How it works

The script file contains a javascript class definition that the browser loads to extend the existing HTML object model. Here a sub-classing of the HTMLTableElement is implemented that captures clicks on a table header element.

In the last line this class is added to the browser as a custom Element that extends the table element:

customElements.define('table-sortable', TableSortable, { extends: 'table' });

A click on a header cell starts building a temporary list of the and sorts them in ascending order. Click on different header cells to see the effect.

The source code of this page and the script can be found on Github in

See also

Tags

JavaScript