WordPress now has a dedicated block to create tables, but the features included in this visual editor element are not enough for medium to complex uses. A dedicated table plugin is still the go-to choice when features like automatic sorting, cell customizations, and responsive capabilities are required.
In this article, I’m focusing my attention on the sorting capabilities of League Table. A versatile table plugin that uses the JavaScript library TableSorter to perform single-column and multi-column sorting based on the user’s selection.
The importance of a sortable table
When the user sorts a table, he rearranges the data in a custom logical order. So, for example, he can quickly identify the less expensive items by sorting a table by the price. Or find the events that are happening in a specific interval of dates by sorting the table by date.
Giving this possibility to the users means increasing their chance to find what they are looking for. Consequently, having this feature can increase important website metrics like the conversion rate.
How to sort a table in WordPress
The initial order of a table created with League Table can be assigned in the back-end by a privileged user (a user with the necessary capabilities to edit the tables).
The sorting options are available in the Sorting section of the edited table. When I’m writing this article, with version 2.15, this section includes 26 options.
This section allows you to perform the following task:
- Establish the initial order of the table by adding single-column or multiple-column sorting criteria.
- Enable or disable the manual sorting in the front-end.
- Enable an automatically generated column that includes the position of each row.
Create various types of sortable tables with WordPress
In this section, I included real-world cases of sortable tables. Each example covers a specific data type.
Table sorted by the price
In this example, the CPUs distributed by a retailer are ordered by the price.
To sort this table I targeted the price column and then selected the Currency data type.
Specifically, I configured the following sorting options:
- Order: Descending
- Order by: Column 5
- Order Data Type: Currency
Table sorted in alphabetic order
A good example of sorting a table in alphabetic order is a list of people.
In this case, I will use the last name as the primary sorting criteria and the first name as the secondary sorting criteria.
To apply a descending sorting on the last name column, I set the following options:
- Order (Priority 1): Ascending
- Order By (Priority 1): Column 2
- Order Data Type (Priority 1): Text
To sort the first name alphabetically, I used the following parameters:
- Order (Priority 2): Ascending
- Order By (Priority 2): Column 1
- Order Data Type (Priority 2): Text
Table sorted by date
To create an example of a table ordered by date, I used the concerts of an old Taylor Swift tour named “Fearless Tour”.
The primary sorting criteria of this table is the date of the event. In addition, considering that a band can be present in two events on the same day, I set the time as the secondary sorting criteria.
To set the primary sorting criteria as the date of the event, I used the following options:
- Order (Priority 1): Ascending
- Order By (Priority 1): Column 1
- Order Data Type (Priority 1): US Long Date
To set as the secondary sorting criteria the time of the event, I used the following options:
- Order (Priority 2): Descending
- Order By (Priority 2): Column 2
- Order Data Type (Priority 2): Time
Note that you should set the date format based on the specific date format used in the table. The plugin includes the following selections in the Order Data Type option:
- Time
- ISO Date
- US Long Date
- Short Date
More information on the type of dates supported by each format are available in the plugin manual.
Table sorted by a number
Standings tables are an excellent example to demonstrate multi-column sorting based on numeric values. For instance, the English Premier League determines the ranking of the teams based on the value of the following columns:
- Points awarded (PTS)
- Goal difference (GD)
- Number of goals scored (GF)
To set the primary sorting criteria as the points awarded by the team, I used the following options:
- Order (Priority 1): Descending
- Order By (Priority 1): Column 9
- Order Data Type (Priority 1): Digit
To set the secondary sorting criteria as the points awarded by the team, I used the following options:
- Order (Priority 1): Descending
- Order By (Priority 1): Column 8
- Order Data Type (Priority 1): Digit
To set the tertiary sorting criteria as the points awarded by the team, I used the following options:
- Order (Priority 1): Descending
- Order By (Priority 1): Column 6
- Order Data Type (Priority 1): Digit