KB User's Guide - Advanced HTML - Creating a Sortable Table

Example

Below is an example of a sortable table. You may click on the arrows next to any of the column headers to re-sort the rows based on the values within that column.

Example Sortable Table

First Name	Last Name	Favorite Food
John	Smith	Apples
Buckingham	Badger	Brats
George	Carver	Peanut Butter
Garfield	Arbuckle	Lasagna

Adding A Sortable Table to Your KB Document

Note: The instructions provided here apply to the new KB editor only.

1. In the editor toolbar, select the Insert Table button, then choose the desired number of rows and columns (excluding the header row; this will be added next).

   

2. Click inside any cell to open the table pop-up menu. Select the first button to add a Table Header.

   

3. Add the desired values in the header and data cells. The way you add them here will be the initial table sort order when the page loads.

4. Paste the following into the JavaScript/CSS field (located under "Additional Fields"):

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script type="text/javascript" src="/images/group41/shared/DownloadableCSSandJSFiles/tablesorter/jquery.tablesorter.min.js"></script>
   
   <script type="text/javascript">
   jQuery(document).ready(function($) 
       { 
           $(".fr-view table").tablesorter(); 
       } 
   );
   </script>
   
   <link rel="stylesheet" href="/images/group41/shared/DownloadableCSSandJSFiles/tablesorter/jquery.tablesorter.css">

5. You may now save or publish your document. Please note that none of the styling will be visible while editing, and the sorting function will not work while editing or previewing your document.