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. E.g. the same web site can be presented differently on a laptop, mobile phone or tablet. Most of WordPress themes support responsiveness, so we also added this feature to wpDataTables. Any wpDataTable can be responsive, it doesn’t matter which data source do you use – MySQL or Excel, or whatever else. The responsiveness is a front-end feature, so it’s applied when the table is already rendered. In wpDataTables you can define yourself 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. Instruction for creating a responsive wpDataTable:
1. Create a wpDataTable.
Create a table using any of the available input sources or using the Table Constructor. You can refer to this or this documentation see how to do this.
2. Set the responsive checkbox in table properties.
On the table edit page, in “Additional properties” of the table find the “Responsive” checkbox and check it:
Then click “Save table”.
3. For each column define whether it will be hidden on mobiles and tablets.
In column properties for each column you will get two checkboxes:
- “Hide on tablets”: checking this checkbox 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 left of each row.
- “Hide on mobiles”: checking this checkbox 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 left of each row.
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:
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
That’s all you need to know to make your wpDataTables responsive 🙂