Adaptive/Responsive ‘Effect’ (Huw)

This page was updated 27-04-2026 by Jon

The Adaptive/Responsive ‘Effect’ that has been created by Huw for Sailwave adapts the published output to different device screen sizes, making it easier to view published results on small screen sizes like smartphones.

Caveats

  • The ‘Effect’ currently only works with summary tables. Not with individual race tables, this might change in the future.
  • The ‘Effect’ has not been tested in use with all the other ‘Effects’ available for use.
  • Do not use the TableSorter ‘Effect’ with this ‘Effect’ as it includes sorting.
  • The ‘Effect’ does not work with the ‘ ScoredSeparatelyMatrix ‘Effect’
  • The summary table header does not maintain the header background colour from the chosen ‘Style’. The ‘Style header background colour can be maintained by editing the ‘Style’ and adding two bits of code. Editing information can be provided on request.

I give a big thank you to John Doyle, a Sailwave user, for refining my hand-coded work and refining it so it could be made into this Adaptive/Responsive ‘Effect’ for other users. The ‘Effect’ has been made possible by the work of the DataTables (https://datatables.net/) developers and code by Dirk Drijkoningen (https://codepen.io/RedJokingInn/pen/bGoppqP ).

When the normal table view cannot show the full width of the results table due to screen size, a small arrow icon appears in the ranking column. On clicking the icon, the columns that could not be viewed appear.

There is also an alternative view to the normal table view, the card view. The card view presentation is presented by clicking the ‘Card view’ button.

Other options (Copy, CSV, Excel, PDF, Print) are available, which can be removed with careful editing of the code, if not required.

To use the sorting functionality of this ‘Effect’ click a column header. To add additional sort or sorts, hold down the shift key and click the required column header(s). When two or more columns have been selected, little numbered icons will appear in the selected sort column headers.

The current version can be downloaded from here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.