Components — Table Lists

Table Lists

Usage

Table lists are used to display large amounts of data that contain multiple fields. For these lists it is critical to be able to sort and filter the content.

Data tables may include:

  • Three or more columns of data
  • A corresponding visualization
  • The ability for users to query and manipulate data

Use Case: Content Library, Collection Library

Structure

A table list contains a header row at the top that lists column names, followed by rows for data. Checkboxes should accompany each row if the user needs to select or manipulate multiple list items.

Tables contain all critical details to find the created piece of content the user is searching for:

  • Thumbnail Image
  • Title
  • Type
  • Status (published or unpublished)
  • Season #
  • Episode #
  • Date Updated
  • Date Created
  • Associated Categories
  • Associated Tags

Asset Library Overlay on Episodes page

Sorting & Filtering

Sorting

Users have the ability to sort by the above details. The default sort brings the items updated most recently to the top of the list. Clicking on the column label changes the sorting for the list, indicated by the arrows next to the label.

Column Headers for Sorting on Content Library page

Filtering

In addition to sorting, users can filter the list by the details above as well as toggle to only show the items created by the user. Once filter choices are chosen, users must then click apply to apply the filter.

Filter section on Content Library page

In-line Edit Icon

Icon-based edit affordance. Include pencil icon at the edge of the cell on the opposite side of the content as an indicator that the user can click the icon and edit that piece of content

Content List Item from Content Library page