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.

 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 the Configure tab.
   
   

   Open

   

    

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

6. Click Choose Block.
   
   

   Open

   

    

7. In the Choose a block menu, click 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.

 Related articles