Column visibility: show and hide table columns

Video versionA video overview of column visibility in wpDataTables

wpDataTables plugin allows an easy way of showing and hiding the columns in any WordPress table. Here is how columns in WordPress tables can be hidden or shown.

Column visibility in wpDataTablesHow to toggle column visibility

If some of the columns you have in the input data source shouldn’t be visible to the front-end users, you can easily hide them. There are two ways to do this:

Column options button

The First way is to click on the “Column settings” buttons which you can find in the header of every column in the “Table preview and columns setup” section.

Visible settings

The column settings modal will open and, under the “Display” tab, you will find a “Visible on front-end” option. And just hide the table column.

Column list button

The Second way of doing this is to click on the “Column list” button to open a modal where you can quickly access some column settings.

Short access for column visibility

In the modal, you can click on show/hide icon to toggle visibility for each column.

Columns hidden by unticking of the “Visible on front-end” checkbox, or clicking on “Show/hide the column“, will not be displayed to the front-end users.

Please note these two things about column visibility:

  • Invisible columns are still passed to the front-end. This means that if there are many invisible columns, they can needlessly load the page. If there’s absolutely no need for the invisible columns data in the front-end, it’s better to delete them in the data source when possible.
  • Invisible columns can be used for filtering. If the advanced filter is enabled, and is rendered in the form, or in a widget, the filter can also use the data from invisible columns. Please see this documentation section for details.