KB User's Guide - Advanced HTML - Creating a Sortable Table
This document explains how to add a table to a KB document that allows the reader to sort the table rows based on the values in any particular column.
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.
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.
-
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).
-
Click inside any cell to open the table pop-up menu. Select the first button to add a Table Header.
-
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.
-
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">
-
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.