We're testing new snippets to make creating sortable, dynamic tables easier for all of our web publishers! This guide explains how to use the new Table - Sortable snippets.
To make any table on your page sortable, you need to complete two main steps:
Add the Snippet (Once Only): Under Snippets, choose one of the two new options:
Table - Sortable, White Header
Table - Sortable, Blue Header
Important Note: Do not add both snippets or multiple versions of the same snippet to a single page. Adding the snippet once applies the necessary DataTables logic to the entire page.
Apply the Class 'table-sortable' to your tables:
For any table you want to make interactive, you must apply the class table-sortable to the <table> element. This has already been done for the sample table provided with the snippet.
For a table to be sortable, it must have a header row applied to the first row of the table. This is already done in the snippet that we have provided with the table transform. However, you can add a header row to any table by right clicking on it in the editor, going to 'Row' and then 'Row Properties' and setting the row type to 'Header'. This is especially useful if you are pasting your tables directly from Word or Excel.
The snippet uses a transformation to apply the necessary JavaScript configuration
to all tables with the table-sortable class. The configuration is controlled by the single snippet you add and it sets
the following global defaults for all sortable tables on that page.
| Configuration Setting | Default Value | Notes |
| Rows per Page | 10 | This is the maximum number of rows initially displayed before pagination begins. |
| Initial Sort Column | First Column | This is the column the table is sorted by when the page first loads. |
The tranformation snippet you insert is where you can customize these defaults for the entire page. If you need 20 rows per page or want to sort by the third column initially, you must make those changes within the configuration table of the snippet itself.
We are actively testing this! If you encounter any issues or have suggestions for features that would make this tool more helpful for you, please let us know!
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
| Row 1a | Row 1b | Row 1c | Row 1d | Row 1e |
| Row 2a | Row 2b | Row 2c | Row 2d | Row 2e |
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
| Row 1a | Row 1b | Row 1c | Row 1d | Row 1e |
| Row 2a | Row 2b | Row 2c | Row 2d | Row 2e |