Create a Interactive Data Table

The Cascade CMS theme is bundled with DataTables. DataTables is a plug-in for the jQuery Javascript library. Because tables are best used to display tabular data on your page, the DataTable plug-in is an easy way to add advanced interaction controls to any table.

\uD83D\uDCD8 Instructions

1. Using any template, create your table and add any custom formatting.

2. Your table must include the following HTML markup: thead and tbody. If you do not include these elements the data table will not include column sort functionality.

3. You must also include the following ID for thetable element at a minimum: id="data-table"
   
   Code Example:

   <table class="table table-hover" id="data-table">
     <thead>
       <tr>
         <th>Column Header</th>
         <th>...</th>
         <th>...</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Data Cell</td>
         <td>...</td>
         <td>...</td>
       </tr>
     </tbody>
   </table>

4. Click on the Configure tab.
   

   

5. Scroll down to the Regions section and locate the the TABLE-EXTENSION path.

6. Click on Choose Block.
   

   

7. In the Choose a block menu, click on the Browse tab.
   

   

8. Using the Search field next to your site name, type “Directory Block”

9. Select the Directory Block.
   

   

10. Click Choose.

11. Click Preview Draft (blue button at the top of the screen). After previewing the draft, click Submit to save these changes to the CMS.

12. The page has been successfully saved to the CMS. You must now Publish your page.

\uD83D\uDCCB Related articles

• Page:
  Create a Interactive Data Table (Cascade CMS KB)
• Page:
  Insert a Table Using the WYSIWYG Editor (Cascade CMS - Basic Training)