Simple Data TablesNov 15, 2019

Sort and Resize Table Columns

Introduction

The simpledatatable.js turns HTML tables into tables that are useful for displaying a wide array of data. It let's you sort the table by each column and it let's you resize each column according to the size of the data and your screen. It also freezes the table header at the top of the screen as it scrolls off.

These tables can be used on touch devices and small screens.

Instructions

There are three main functions:

1. sorting the table on a column
2. freezing the table header at the top of the screen when it scrolls out of view
3. resizing table columns

These tools are for simple data tables on the main scrollable page with a structure like the following:

<div class="table-wrapper">
<table class="table-sortable table-fixed-header table-col-resizable">
 <thead>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
   ...
  </tr>
 </thead>
 <tbody>
 ...
 </tbody>
</table
</div>

Tables will be coerced into this pattern at run time if needed.

The width of the table is controlled by it's containing element which for touch devices needs to have the class name "table-wrapper" assigned to it if you want fixed headers. It is automatically added if needed. Tables can dynamically expand and contract according to the browser window width.

If the user expands a column width, the width of the table is also expanded. User settings are remembered between screen refreshes. The table width will snap back to it's bounding container when the browser window is resized. Double-clicking a column guideline will remove the user setting and reset the column width back to its original width. Double-clicking the last column guideline will remove all user settings and reset all the columns back to their original widths. Putting a parameter "reset" in the url will remove the saved user's settings for the tables on the page. Rendering the page in a new browser tab does the same.

The script packages below are grouped in order and have been modified so that they work together and so they all can be automatically setup on tables by using class names and data attributes.

The <table> class names used are:
	table-sortable		-- Make each table column sortable by clicking on the column header.
	table-fixed-header	-- Turn table <thead> section into a header that sticks to the top of page.
	table-col-resizable	-- Make columns resizable.

The optional <table> data attributes modifying behavior are:
	data-topoffset		-- Pixels from top of screen where headers will "freeze".
	data-topheader		-- Selector of an element that when visible, it's height
				   is used for data-topoffset.

It is possible to use the global variable window.TopOffset to set the top of screen where headers will "freeze". It's easier to use when there are multiple tables on a page. Alternately you can assign the class name "top-header" to an element whose bottom offset will be used for the window top offset.

The optional <th> data attributes modifying script behavior are:
	data-sortable		-- If false, do not sort column (sortable.js)
	data-sortable-type	-- Column type "numeric", "date", or "alpha" (sortable.js).
				   Custom types also available.
	data-resizable		-- If false, do not allow user to resize the column. (colResizable.js)

The optional <td> data attribute is:
	data-value		-- value of column to use for sorting (sortable.js)

To setup newly created tables trigger the custom event tableSetup. To refresh the table settings with run-time changes, trigger the custom event tableRefresh. Both the table size and settings will be refreshed upon the window resize event.

To remove DOM elements added to the tables, trigger the custom event tableUnsetup. That can be useful before editing a table after which the tableSetup event can be triggered to re-setup the table(s).

Credits

Table sorting is from sortable.js by Adam Schwartz <adam.flynn.schwartz@gmail.com> at https://github.com/HubSpot/sortable. The table-fixed-header.js script came from: http://github.com/oma/table-fixed-header. Column resizing is from colResizable.js by Alvaro Prieto Lauroba. The double-tap event handler for column resizing is by Sergey Margaritov (sergey@margaritov.net).