Creating a sortable table in WordPress

Tables rendered by the wpDataTables plugin are sortable by default. It means that the content of the table can be ordered by the values of one of its columns. The ordering rules depend on the column type: for example, string columns will be ordered by alphabetical rules, integer or float by arithmetic rules, and so on. See “Column Types and Features” chapter of this document for detailed info on different column types, and sorting rules. To enable sorting (or to disable sorting, since it is enabled for all columns by default) you need to use the “Allow sorting for the table” switch in the “Sorting and filtering” tab in the table configuration page.

When the sorting is enabled, each column header will become “interactive”: it will work as a button, and when you click on the header, you will sort the table by this column in ascending (increasing) order, which will be indicated by the highlighting of the column (indicating that it is used for sorting), and by the triangle showing to the right of the header turning black. When triangle is showing “up” it indicates the table is sorted in ascending order – from “smaller” to “larger” values:

When you click on the same header again, the triangle will turn “down”, indicating the sorting is done in descending order from “larger” to “smaller” values:

If you sort by one of the columns, then press “Shift” button on the keyboard, and, while holding it, click on another header, that header’s column will be used as a second sorting column (initially, the ordering will be done based on the first column, and after that, based on the second column). The secondary sorting allows you to use another column’s values to get the order that you are seeking when the values of the first column are the same for several rows.

In this example we used “Exam name” for the first sorting column, and “Student name” for the second sorting column.

If sorting is enabled, one of the columns will be used for ordering when you open the page (a “default sorting column”). If you don’t indicate sorting manually, the first column will be used for ordering. If you want to use a different column, you can define it in the column settings. Each column has a “Default sorting column” switch. If you enable this switch for one of the columns, a selectbox will appear with  options – “Ascending” and “Descending”, where you can choose the sorting direction. A column with the “Default sorting column” option enabled, will be used for ordering when front-end users first open the page.

From version 2.0 it is possible to toggle sorting per individual column. If you want to disable sorting per column you should disable the “Allow sorting for this column” option on the column settings panel.

If you want to disable sorting for all columns, but you also want to retain the “Default sorting column” feature, the “Allow sorting for the table” option must be enabled on the table settings, and you have to disable “Allow sorting for this column” for each column separately.