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.

The "11th Gen Intel Desktop Processors" table in the WordPress back-end editor
The “11th Gen Intel Desktop Processors” table in the back-end editor.

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
The "11th Gen Intel Desktop Processors" table in the website front-end is properly sorted by the price
The “11th Gen Intel Desktop Processors” table in the front-end is properly sorted by the price.

Table sorted in alphabetic order

A good example of sorting a table in alphabetic order is a list of people.

The unsorted list of people in the WordPress back-end
The unsorted list of people in the back-end.

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
A sorted table used to store the data of a registry of people
A table used to store the data of a registry of people.

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 dates of the tour in the back-end editor
The dates of the tour in the back-end editor.

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
The sorted dates of the tour in the front-end
The dates of the tour in the front-end.

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:

  1. Points awarded (PTS)
  2. Goal difference (GD)
  3. Number of goals scored (GF)
The unsorted standings table in the WordPress back-end
The standings table in the back-end is kept in alphabetical order for convenience. In this way, the administrator can easily find the teams and updates the results when needed.

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
The standings table is sorted in the front-end
The standings table is sorted in the front-end.