Example UBCO Responsive Table – View live example on our Demo Site
Requirements
A table must be inserted in a column using the visual editor. Once the table is inserted, the responsive feature may be applied.
Recommended Usage
Note: Tables should be used sparingly in the CMS with the following guidance:
- Maximum number of columns recommended: 4 to 5.
- Maximum number of rows recommended: 7 to 10.
- Tables should only include text; no images.
- Tables should be used to present similar datasets
- Tables should not be used to create full page layouts. Be sure to leverage columns and lists before considering a table.
The UBCO Responsive Table builds upon WordPress’s fundamental table function, enhancing its usability for displaying content with numerous columns on mobile devices. Specifically designed for smaller screens, it offers improved functionality, including sorting and searching options, making it an ideal choice for managing complex table data effectively.
Component Fields:
UBCO Responsive Table has the following fields:
- Enable Responsive Table – Optimize table display for seamless viewing on mobile devices.
- Enable Column Sorting – Enable data sorting by column headers.
- Enable FullText Search Box – Enable text search functionality.
Mobile/Tablet:
On mobile devices, table columns will be hidden and can be revealed using an arrow icon.
How to use UBCO Responsive Table:
- Choose the table row you wish to designate as the table header.
- Click Table icon and select Row > Table row properties.
- Click General button > select Header under the “Row Type” option.
- Click OK button to confirm and save the settings.
- Click any table cell, and then click UBCO Responsive Table icon.
- Check on the Enable Responsive Table option.
- Time to play around with other options.
- Click Preview to often see how your page looks before going live. Make edits as necessary.
- Publish/Update when ready to go live.
Do’s and Don’ts
- Click on a table cell when the UBCO Responsive Table icon is grayed out.