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.

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).

    Insert table button and column/row select dropdown in the editor toolbar
  2. Click inside any cell to open the table pop-up menu. Select the first button to add a Table Header.

    Table pop up menu highlighting the table header option
  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.




Keywords:tablesorter alphabetical rows click columns data text headers sorting order javascript jquery   Doc ID:105964
Owner:Leah S.Group:KB User's Guide
Created:2020-09-18 11:47 CDTUpdated:2022-08-18 12:35 CDT
Sites:KB User's Guide
Feedback:  0   0