Creating a Datatable

When creating content for the web there will be times when creating a table is the best tool to display information. Depending on the type of information being presented you may decide that being able to interact with the table would be beneficial to the viewer and assist them in finding specific information.

Below is an enhanced version of a table also known as a "datatable". The datatable provides built-in capabilities such as sorting, searching for items in the table, viewing a specific number of entries on a page with a pagination feature to navigate to other listed entries, and offers an option to copy or print the information, as well as download the table into a .csv, .xlsx. or .pdf file.

1. To create a datatable, add a new page or edit an existing page. 
2. In the Main content, click "Table" and hover over the "Table" option. Select the number of rows and columns you would like your table to have (you can always add more rows/columns later).
   
3. After selecting the number of columns/rows, a table will automatically appear. Fill in your content and add additional rows and columns using the "Table" menu and selecting "Row" or "Column" or use the toolbar that appears with the table to add and delete rows and columns. 
   
4. Once your table is complete, save your changes (and view the page if you like).
5. Now to add the datatables functionality. In order for datatables to work, we have to set the first row as the header and set the first row cells as header cells. This will most likely be your table's column names. To set the header, select the first row in your table (the first row will become highlighted blue). Next, click "Table" > "Row" > "Row Properties" and a pop-up box will appear. Right now the row type for the first row is set to "Body". Change this setting from "Body" to "Header" and click "OK" to save. Nothing will appear different in your view but the change has taken affect in the back-end. Then, with the row still selected, choose "Table" > "Cell" > "Cell Properties" and a pop-up box will appear. Change "Cell Type" to "Header" and click "OK" to save.
   
6. There is one last step needed to add the datatable functionality. This will require editing the source code (html) so if at anytime you feel uncomfortable or need assistance, please write us or give us a call. 
7. Copy the below text.
   class="dataTables-standard"

8. Click "Tools" > "Source code" and a pop-up box with html will appear. In the html, paste the copied text in between <table and style=. Click 'OK'.
   Save changes and view the page. Your table should now have the same features as the datatable shown on this page. If not, please contact us for assistance.