WiscWeb - Using the wpDataTables Plugin
In this document:
- Activate
- Usage
- Vendor documentation
- Important considerations
- Google Sheets tables
- Accessibility barriers
Activation
This plugin is not activated in WiscWeb projects by default. However, Administrators can activate it in the project by following the instructions in WiscWeb - Self service plugin activation / deactivation.
Usage
wpDataTables allows you to create tables and charts that you can edit within WordPress or import from Google Sheets (or several other spreadsheet mediums). See the links below for how to perform basic functions, as well as a link to the full documentation.
Vendor documentation
Full vendor Documentation for wpDataTables can be found on their website.
- Creating a table within wpDataTables
- Creating a table from an existing data source (.csv, .xls, Google Sheet)
Important considerations
Please note that when you insert a wpDataTable into a Text Block using the icon within formatting toolbar, you will be presented with a View option for that table.
These views add additional code into the shortcode value, which may cause unintended results regarding the ability to search within your published table.
It is our recommendation to remove the additional "table_view= " code, so that the call is only for the table itself.
Google Sheets tables
In March 2025, Google updated their security policy related to new Google Sheets. They now require integrations with the tooling to be setup with a Google Sheets API key. The WiscWeb team tested this process and found it to be extremely fragile. An April update to the wpDataTables plugin provided an alternative method for using Google Sheets using the the URL from the “Publish to the Web” modal window, instead. You can find the full instructions for this process located at the vendor's website.
Considerations
There are many changes to consider when building a table from Google Sheets:
- Google Sheets tables are now extremely fragile. Minor changes to the structure in Google Sheets can break your wpDataTables table. According to the vendor, the following are not recommended after connecting the Google Sheet to the wpDataTables table:
- Changing the column’s name,
- Changing the column’s order,
- Deleting the column, and
- Adding a new column.
- wpDataTables does not support Google Sheets tables with merged cells.
- It is recommended that you make formatting adjustments in wpDataTables rather than Google Sheets. This helps prevent the tables from breaking.
- Google does some caching, which means changes to the Google Sheet might not immediately show up on your wpDataTable display. According to the vendor: “It may take up to 15 minutes for new or edited data to appear in the table linked to the Google Spreadsheet file.”
If you have any questions about these changes, please reach out to the WiscWeb team via the Customer Support Form.
Accessibility barriers
In May of 2023, the Center for User Experience completed an accessibility evaluation of the wpDataTables plugin. Several accessibility barriers were identified. The issues were immediately reported to the vendor for remediation. However, at this time, the vendor has not committed to changes.
The following are the known barriers. Where possible, we've provided workarounds or alternative solutions that are more accessible.
In-table search function
wpDataTables has an option for including an in-page keyword search. For someone navigating the site using a screen reader, this function:
- Does not announce that entering text into this field will filter the results of the table.
- Does not provide the user with any details once the table is actually filtered.
- Provides no status update that the search has been performed or results have been found.
The recommendation is to avoid use of this field where possible:
- Navigate to the Sorting and Filtering tab for the table.
- Uncheck the box for Enable search block.
No visual indication of keyboard focus in tables
There is no visual indication of keyboard focus as a user navigates through the tables, including the export buttons, sortable heading cells, and search fields. The only indication that happens is a blinking cursor that appears when the user is in a search field.
Horizontal scrolling
For several of the table types, horizontal scrolling is introduced starting at 100% magnification. UW-Madison's accessibility guidance encourages support up to 400% magnification without introducing horizontal scrolling or other magnification barriers.
The recommendation is to select the option to limit the width of the table and uncheck the option for horizontal scrolling:
- Navigate to the Display tab for the table.
- Select the option to Limit the table width to page width.
- Select the option to Wrap words to new lines.
- Make sure the option to Show a horizontal scrollbar is unchecked.
Placeholder text is low contrast
The placeholder text in the cells used to filter table content is too low contrast to meet WCAG standards.
Unfortunately, there is no alternative recommendation here.
URL links
The default color for hyperlinks in wpDataTables does not pass contrast.
The recommendation is to enable the WCAG compatible skin design:
- Navigate to the Customize tab for the table.
- Make sure the Main tab is selected.
- Check the box that says Make table skin WCAG compatible.
Pagination links
Navigation buttons appear below a table when the table content is split up into several pages. For users navigating the site with a screen reader, these links dont have very much context They are announced as Previous link, 1 link, 2 link, 3 link, Next link." There is help text between the table and the links that describes the displayed content (Showing 1 to 50 of 137 entries, for example), and there is a status update when a user selects another page of content (Showing 51 to 100 of 137 entries), so eventually the purpose becomes clear, but out of context the user might not realize the purpose of these navigation links.
The recommendation is to consider removing the pagination of the table:
- Navigate to the Display tab for the table.
- Uncheck the option to Show pagination block below table.