Please wait...

Responsive tables in WordPress

Video versionA video overview of responsive tables in wpDataTables

Responsive Tables with wpDataTables pluginHow does our plugin provide Responsive Design functionality for tables

Responsiveness (in web design) is a feature that allows presenting the same content differently depending on the display size of device that is used to view it. In other words, same website can be presented differently on a laptop, mobile phone or a tablet.

Any wpDataTable can be responsive, it doesn’t matter which data source do you use – MySQL, Excel, or any other. In wpDataTables you can choose which columns do you want to be visible or hidden on tablets and/or mobiles. The hidden columns data will be still available for the users that would like to see it in a dropdown, it will collapse under an expandable block in the first visible column. Let’s go through creating a responsive wpDataTable:

Create a wpDataTable and enable responsivenessCreate a table manually, or from a data source, and enable the Responsive switch

First create a wpDataTable using any of the available input sources using the Table Creation Wizard. You can refer to this or this documentation see how to do this.

Responsive

After the table is created, open the configuration page, go to “Display” tab, find the “Responsiveness” switch and enable it.

Then click “Apply” button.

For each column define whether it will be hidden on mobiles and tablets.Collapsing on different device types is configured individually for each column.

HIde on mobile/tablet

In column properties for each column you will see two switches:

  • Hide on tablets”: enabling this switch will mean that the cells of this column won’t be visible on tablets; and the data from there will be available only after clicking on “+” button which will appear on the first visible column of each row.
  • Hide on mobiles”: enabling this switch will make the cells from this column invisible on mobile phone screens, but the data will be available after clicking on the “+” button which will be on the first visible column of each row.

You can also access the Hide on Mobile/Tablet options by clicking on the yellow icon in table settings.

Responsive button

The editor will appear where you can select which one will be displayed/hidden on smart phone or tablets.

HIde on Mobile Tablet

Do not forget to leave at least one column visible both for mobiles and tablets!

When you configure which columns will be visible and which will be hidden on different types of devices you can save the table, publish the shortcode in some post or page, and open the page in your site front-end. Then you can resize your browser’s window to see the responsive mode in action:

Full-size (Deskop):

Tablet size: note that some of the cells are hidden, but available in a dropdown when we click on the expand button

Mobile size: note that only some of the cells are visible for all of the rows, but all the others are available in a dropdown when we click on the expand button

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.