This tutorial will walk you through displaying your entries in a sortable table. If your view is paginated, see how to sort a view across pages.
Setup and installation
Create a sortable table in a View
- Go to 'Formidable' → 'Views'. Click the Add New button at the top of the page.
- Enter a title for your View.
- In the Use Entries from Form dropdown, select the form that contains the data you would like to display.
- Select 'All Entries' for the View Format.
For more information on these formats, please see the View Settings page.
- Select Disable visual editor for this view.
- In the Before Content box, add the following HTML:
<table class="tablesorter"> <!-- This allows the Table Sorter plugin to sort the table. --> <thead> <tr> <th>Name</th> <th>Birthday</th> <th>Age</th> <th>Home</th> </tr> </thead> <tbody>
Replace 'Name', 'Birthday', 'Age' and 'Home' with the names of your table headers.
- In the Content box, add the following HTML:
<tr> <td></td> <td></td> <td></td> <td></td> </tr>
Replace '872', '873', '875' and '876' with the field IDs or keys from your form.
- In the After Content box, add the following HTML:
- In the Advanced Settings area, set the Page Size to 50 or less.
- Click Publish or Update to save your View.
- Publish your View on a page. When the page is visited, it should look something like this:
You can add HTML and CSS to completely customize your View. Add the CSS to your 'Formidable' → 'Styles' → 'Custom CSS'.
The Table Sorter plugin allows for additional features in sorting your table, such as excluding certain columns from being sorted, or applying initial sorting on the table for your user. Click here to be directed to Table Sorter's documentation.