WiscWeb - Using the wpDataTables Plugin

This document includes information about the wpDataTables plug-in, including links to the vendor's site on how to use the plugin.

In this document:

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.

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.

wpDataTable icon

wpDataTable import dialog box

These views add additional code into the shortcode value, which may cause unintended results regarding the ability to search within your published table.

wpDataTables short code in text block

It is our recommendation to remove the additional "table_view= " code, so that the call is only for the table itself.

wpDataTable shortcode in proper format

Google Sheets tables

Steps for linking a Google Sheet to wpDataTables

There are specific steps that must be followed in order to be able to share a Google Sheet to wpDataTables. If these steps are not followed, your table will not render correctly.

Step 1: Publishing the Google Sheet to the web

  1. In your Google Sheet, choose File > Share > Publish to the Web

    Publish to Web Link

  2. Choose the desired settings (Entire Document or just specific tabs)

    Publish to Web Window

  3. Click Publish

Step 2: Copy the Sheet URL and paste into wpDataTables

You must copy the URL in the browser, not the URL listed in the "Publish to the Web" section.

  1. In your browser address bar, copy the URL of the Google Sheet

    Copy link from address bar

  2. Make sure that you have a new wpDataTable set up and have chosen to "Create table from existing data source" and click Next

    Create table from existing data source button

  3. The Data Source type should be "Google Spreadsheet."

    Google Spreadsheet link in dropdown

  4. Paste the URL into the "Input file path or URL" field and click Apply

    Input file path or URL field

Google Sheets troubleshooting/tips

  • It is important to note that Google Sheets that are located in a Team Folder cannot be shared to wpDataTables. Move your document elsewhere in order to link it. 

  • A common issue is that users are trying to copy/paste the shareable URL rather than the URL that appears in the address bar. This will not connect the table and you won't be able to pull in the content. 

  • Several users have reported issues whereby tables with a lot of customizations or functions in Google Sheets can be glitchy or not display at all. It is recommended that you simplify your tables as much as possible so that wpDataTables can render them. Or, try inline styling a table, instead. wpDataTables typically cannot process Google Sheets that contain the following:

    • merged cells
    • queries/formulas
    • frozen rows
    • colors (background colors in cells and text colors)
    • filterable columns

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: 

  1. Does not announce that entering text into this field will filter the results of the table.
  2. Does not provide the user with any details once the table is actually filtered. 
  3. 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:

  1. Navigate to the Sorting and Filtering tab for the table.
  2. 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: 

  1. Navigate to the Display tab for the table.
  2. Select the option to Limit the table width to page width.
  3. Select the option to Wrap words to new lines.
  4. 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.

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 don’t 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: 

  1. Navigate to the Display tab for the table.
  2. Uncheck the option to Show pagination block below table.


Keywordsdata, table, excel, google, sheet, google sheet, spreadsheet, datatables, wpdatatables, issues, render, not working, link, connection, broken table, tables, no rows, no data available   Doc ID70109
OwnerMatt G.GroupWiscWeb
Created2017-01-20 15:11:47Updated2023-09-15 10:51:11
SitesDoIT Help Desk, WiscWeb
Feedback  1   1