Skip to main content

Data Tables Web Part

Jess
Updated

The Data Table webpart displays data in a structured, table-based format. It can pull datasets from SharePoint lists and tables on data.oregon.gov. The component provides multiple options for filtering, sorting, and customizing the display of data. Data filtering and display can be controlled through views, which allow users to tailor the data that is displayed.

 

Webpart Configuration

Data Source

  • Data Source Type: Choose the source of the data, which can either be a SharePoint list or a dataset from data.oregon.gov.
  • List URL: Select a SharePoint list or use the ID of the dataset from data.oregon.gov.

datasource.png

  • View: Select a view to control which subset of data from the chosen source is displayed. Views allow you to filter and organize data according to specific criteria.

Data Table Options

  • Pagination Enabled: This option allows large datasets to be split into pages. The number of items displayed per page is controlled by the view settings.

paging.png

  • Sorting Enabled: This option enables users to sort the data in ascending or descending order by any column.

sort.png

  • Search Enabled: Users can search across all columns within the table. Note that the search matches whole words only.

search.png

  • Advanced Filtering Enabled: This allows users to apply advanced filters to the data, with options such as: > - Contains: Filters data based on whether the text is present. > - Does Not Contain: Filters data where the text is absent. > - Is Exact Match: Filters data to match the exact string

adv filter 2.png

  • Button Options: Provides buttons to export data in various formats, including Excel, PDF, or to copy or print the data.

export.png

Display Options:

  • Add Borders to Table: Adds vertical borders between table columns for better data visibility.

borders.png

  • Stripe Every Other Row: Applies alternating row colors to make the table easier to read.

striped.png

  • Condensed Spacing: Reduces the amount of padding around table cells, allowing for a more compact view of the data.

Responsive Options:

  • Scroll: The table retains its width, and a horizontal scroll bar is added when content exceeds the available space.

scroll.png

  • Collapse: Rows can be collapsed by default, hiding the content until the user expands the row to view the data.

collapse.png

  • Reflow: The table reformats itself for better display on smaller screens, adjusting the layout to optimize readability.

reflow.png

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.

 

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

  • 1All 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://servicedesk.oregon.gov and open a new ticket.

Still have questions?  

You can:

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

Related articles

Comments

0 comments

Article is closed for comments.