Data Tables Web Part

Overview

The DataTables web part provides a flexible, responsive, accessible data grid to display, sort, and search content stored in a SharePoint lists/library or Socrata/data.oregon.gov dataset.

Requirements

JavaScript must be enabled. Browser must meet the statewide minimum requirements.

Accessibility

If its web part properties are properly set up, this web part passes both WCAG 2.0 and Section 508 website standards. Basic table markup is used for its grid, tabbing and keyboard controls are fully supported, all inputs have labels, and ARIA/role attributes are used to both describe relationships and announce live updates (e.g. filtering/searching/paging).

Reflow and Horizontal Scroll responsive types do not alter the table markup, only its presentation styles. The Collapse type create a secondary row which is properly described (via aria attributes) as a continuation of its previous row.

Note: To pass all standards, the caption field must be filled in the web part properties.

Features and Functionality

• Choose between two Data Sources (SharePoint Lists/Libraries or Socrata/data.oregon.gov)
• Choose between three Responsive Types (Reflow, Scroll, or Collapse)
• Fully accessible for screen readers and keyboard access
• View-based column administration to control order and visibility
• Asynchronous data updates when searching/sorting/paging
• Query caching for faster load times
• Choose between three style options (Borders, Stripes, and Condensed Spacing)
• Sortable Columns¹ (optional)
• Pagination and Page Size Control (optional)
• State Saving (optional)
• Smart Search (optional)
• Export current page functionality, including clipboard, XLSX, PDF, and/or Print (optional)

Tutorials

Create a Data Source

SharePoint

1. Create your list/library, adding any columns and content necessary.
2. Create and title a new Standard View which contains, orders, and sorts all columns you wish to display in the grid. Any edits made to this view will be immediately reflected in the grid. Please note that not all options are supported at this time (e.g. Grouping).
3. Save and make note of the View’s title.

Data.oregon.gov

1. Import and publish your dataset, adding any columns and content necessary.
2. Create a new view of your data which contains, orders, and sorts all columns you wish to display in the grid. Any edits made to this view will be immediately reflected in the grid.
3. Locate the dataset or view its ID. The ID can typically be found at the end of the dataset or view URL. For example, the ID for the URL https://data.oregon.gov/Recreation/Map-of-Bonded-Boat-Registration-Agents/ffmj-ntaw is ffmj-ntaw.

Add the Web Part

1. While on a page, insert the DataTables web part using the Insert menu in the Ribbon.
2. Open the web part’s properties, and choose a data source (SharePoint or Data.Oregon.gov)
3. If SharePoint is the data source, use the Browse button and the Asset Picker menu to locate the List/Library. If Data.oregon.gov is the data source, paste in the view ID found in step 4, above.
4. If SharePoint, choose the correct View, enable whichever features you require, and choose OK. If Data.oregon.gov, enable whichever feature you require, and choose OK.

Known Limitations

• ¹All column types are supported for sorting, except the following:
  • SharePoint Columns
    • Hyperlink & Picture
    • Multi-Line and Rich Text (HTML)
    • Person/Group
    • Lookup Columns which display the abovementioned types
• No Sorting (planned for 4.5.5)
• No Grouping (planned for a future release)
• No Item Limit (planned for a future release)

Frameworks/Libraries Dependencies

jQuery

DataTables.js

Bootstrap 3.x

Feedback

If you would like to suggest features, enhancements, or report a bug, please visit https://egovservicedesk.zendesk.com and open a new ticket.

Still have questions?  

You can:

• Search the Knowledge Base for what you are looking for: 

• You can find more articles in the V4.x Article Index
• You can submit a question to the Oregon E-Government Service Desk