Zywave, Inc.Zywave, Inc.Zywave, Inc.Zywave, Inc.
Add To Action ItemsA clipboard with a plus in the corner to indicate adding to action itemsAddAn addition symbolBuildingAn illustrative icon of a buildingCalendarA gridded day calendarCaret DownTriangle pointing downwardCaret LeftTriangle pointing leftCaret RightTriangle pointing rightCaret UpTriangle pointing upCheckCheckmark iconChevron DownA chevron pointing downChevron LeftA chevron pointing leftChevron RightA chevron pointing rightChevron UpA chevron pointing upCopyTwo overlapping rectangles to indicate a copyDeleteTrashcan iconDetailsA circle with a lowercase "I" in the middle to indicate infoDocDocument icon with lines on itDouble Chevron LeftTwo chevron arrows pointing leftDouble Chevron RightTwo chevron arrows pointing rightDownChevron arrow pointing downDownloadAn arrow pointing downEditA pencil illustrationErrorAn octagon with an ! within it to indicate a errorExcelA document shaped paper with an X on it to indiciate it's an Microsoft Excel fileExternalTwo squares, one overlapping the bottom one. Top square has an arrow pointing away, as if leading you awayFile DropA folded page with a line through it inside of a folder to indicate a file being dragged and dropped to a destinationFilterA funnel style filterFolderA folder iconGridFour squares with space between them to indicate a gridGripA grid of six squares to illustrate something that has texture or grippableAdd to GroupA stack of pages with the corner folded and a plus sign in the corner to indicate adding to a groupHelpA question mark within a speech bubbleImpersonationA figure wearing a mask to disguise their faceAdd IndicatorA circle with a plus in the middle, to symbolize an additive action.Backslash IndicatorA circle with a slash in the middle, to symbolize something isn't allowed.Failure IndicatorA circle with the letter X in the middle, to symbolize failure.Remove IndicatorA circle with a minus in the middle, to symbolize removal.Success IndicatorA circle with a checkmark in the middle, to symbolize success.Warning IndicatorA triangle with an ! within it to indicate a warningInfoA filled circle with the letter I cut out from the center, to symbolize informationLeftAn arrow pointing leftLinkA chain linkListA list of itemsLockA paddle lockMailA mailing envelopeMoreThree dots, like an ellipsisMove ToAn envelope with an arrow pointing to the rightMP3A document shaped paper with MP3 on it to indicate the file is a .MP3MP4A document shaped paper with MP4 on it to indicate the file is a .MP4Multiple FilesA document icon with lines and another document behind it to signify multiple documentsNew FileA folded page with a plus in the corner to indicate a new fileNew FolderAn envelope with a plus sign in the corner to indicate a new folderPDFA document shaped paper with the letters PDF on it to indicate the file is a .PDFPhoneA telephone handset that is ringingPowerpointA document shaped paper with the letter P on it to indicate the file is Microsoft PowerpointPrintOffice printerRefreshAn arrow in the shape of a circle to indicate refresh or reloadRemoveAn X iconRenameA rectangle with a capitalized "I" through it to indicate renamingReportingAn outline of a graph with barsRightAn arrow pointing rightRocketA cartoon rocket shipSearchA mangifying glass icon, to indicate searching for somethingShareA document with an arrow emerging from the content on the page. Indicates sharing contentsShared With YouA circle above a curved line, like a person holding something. Above the line is a curved arrow pointing to the right.SortUp and down arrows pointing away from one another to indicate sorting or re-sortingSuccessA circle with a checkmark within to indicate a successSwitch profileArrows pointing different directions, indicative of switchingTableFour horizontal lines with space between them to indicate a tableUnlockAn unlocked paddle lockUpAn arrow pointing upUploadAn arrow facing upUserAn outlined silhouette of a personVideoA document shaped icon with a triangle on it, indicating a video fileWarningA triangle with an ! within it to indicate a warningWordA document shaped paper with the letter W on it to indicate the file is a Microsoft Word docWrenchA toolbox wrench
Stable

Tables

Sets of data displayed in a grid-like format of rows and columns

Usage

A table is designed to visually organize data, allowing users to quickly scan and derive insights. In cases where applicable, it also enables users to take informed actions based on the presented information.

Base image of a table

Anatomy

Tables always use cards as their container(s).

Anatomy of a table

  1. Table header (optional): The container that can include search, filters, actions, number of results
  2. Column headers (required): The title for data within each row
  3. Content rows (required): The containers for cell data
  4. Summary row (optional): The container that displays a grand total of values
  5. Table footer (optional): The container that can include pagination

Vertical column dividers

Add vertical columns if extra clarity is needed to differentiate between columns. Vertical columns are also helpful when the table has many columns.

Example of a table with vertical column dividers.

Cell data alignment

Text should always be aligned left and dollar amounts right, this allows values to be compared and calculated.

Data alignment best practices

  • Text should not be justified
  • Year, date, and time should be right aligned
  • Align headings with their data
  • Be consistent with the decimal point, if you choose to show two decimal values, always display them
  • Align the $ symbol next to the value, unless the table uses vertical column dividers, then align the $ symbol to the left of the cell and the value to the right

Example of typical cell data alignment, text left aligned / numbers right aligned.

Example of typical cell data alignment, text left aligned / numbers right aligned.

Example of monetary values in cells with vertical column dividers, aligning the $ symbol to the left of the cell.

Example of monetary values in cells with vertical column dividers, aligning the $ symbol to the left of the cell.

Types

Basic table

A basic table should be used to show the user data that is not actionable, searchable, or sortable. A basic table must contain the following:

  • Column headers: The title for data within each row
  • Content rows: The containers for cell data

Example of a table with a results counter.

Banded table

Add row banding if the rows become hard to follow, when the data is complex, when there is considerable space between columns, or the table requires horizontal scrolling.

Row banding can distort the meaning of the data by highlighting every other row to the detriment of neighboring rows and can cause user distraction.

If the table uses row banding, it does not need row dividers.

Example of a table with row banding.

Topbar table

Add a topbar to a table when the user will need to either search or view the number of results.

  • The search input should always be left-aligned.
  • The results counter should always be right-aligned, when in the topbar.
  • When there are actions present, the results counter will remain to the left of the action buttons.

Example of a table with a results counter.

Actions table

Add actions to the table when the user can take an action on either all data or individual data.

  • For actions affecting all data, place the action button in the topbar.
  • For actions affecting individual data in rows, place the action button in the last column of the row.

Example of a table with actions

Summary table

Add a summary row to the table when a user needs to know the total amount from a column of data.

  • The summary row should be placed at the bottom of the table and right-aligned with the amount column.

Example of a table with a results counter.

Results counter table

Display the current number of results shown in the table to the left of the action in the table header.

  • If you need to add more actions to the table, push the results counter to the left in the table header.
  • If the table header is not present, show the results counter below the table, aligned with the first column header.

This feature is not available yet in Toolkit.

Example of a table with a results counter.

Sortable table

Allow users to organize rows by a specific category and follow these best practices:

  • Any column can be ordered alphabetically, by date, or numerically by clicking the sort icon next to the column label.
  • Whenever a column is selected for sort, sort by that column only
  • To indicate columns than have been sorted, the ZUI-chevron-up or ZUI-chevron-down icon will be highlighted in blue
  • Sorting by the column in ascending order is indicated with a ZUI-chevron up
  • Sorting by the column in descending order is indicated with a ZUI-chevron down
  • When helpful, a column can be displayed sorting by default
  • The entire column header is clickable to trigger sorting

Example of a table with sorting.

Behavior

When the user needs to find a record in the table, add a search input field.  The search bar is placed on the left side of the table header.

  • Depending on the size and type of data, the search may happen as the user types or after the hit enter.
  • A spinner is recommended for displaying the loaded content.

Example of a table with search.

Results

After performing a search, the content rows should reflect the search parameters and the number of results updated.

Example of a table with search results.

No results

If there are no results returned from a search, inform the user with a message, view Empty states.

Example of a table with no search results.

Actions

Table level actions

Actions that directly impact the table, such as "Add", can be located in the table header.

  • Actions in the header should be located on the right side of the header area following the 20px padding of the table
  • When there are 1-2 actions they can remain as separate buttons
  • When there are 3+ actions consider using a button dropdown or a button group when appropriate
  • Buttons in the header should follow our normal button style hierarchy

Example of a table with table level actions.

Row level actions

  • When actions are contained within cells, they should follow our Link Button style.
  • The actions column should be pinned to the right of the table.

Example of a table with row level actions.

  • When there are 2 actions, they should remain as separate buttons separated by 10px of padding
  • When there are 3+ actions, consider using a 'more' button dropdown.

Example of a table with multiple row level actions.

Bulk selection

The bulk selection workflow becomes available when the user needs to select more than one option in a table and complete an action on them.

  • Checkboxes will appear in the left-most column, one for each row
  • When an item is selected, a blue action bar will take the place of the column headers
  • When actions are selected, but not all, the checkbox in the action bar will be in a indeterminate state
  • When all actions are selected, the checkbox in the action bar will be in a checked state
  • The user will be able to check or uncheck the checkbox in the action bar, which will select or deselect all options in the table
  • Actions, such as delete or add, will be on the right side of the actions bar

Example of a table with bulk selection.

Pagination & Infinite scrolling

Infinite scrolling is the preferred method of handling tables that contain enough data to require loading a smaller portion of data at one time.

  • It is preferred that the scrolling happen on the browser viewport, not the table itself. (However, if the page has more than 1 table in the UI, then the scrolling should happen independently in each table.)

Infinite scrolling

  • The consumer should determine the number of table rows available to the user initially (Zywave standard starts at 10 rows, but it can be larger)
  • As the user scrolls down through the table, an additional set of rows should begin loading when they reach the bottom of the table
  • If the user scrolls back up, the loaded rows should remain and not need to be loaded again
  • Depending on the time necessary to load additional rows, a loading experience may be necessary
  • A spinner is the preferred method for a loading experience

Example of a table with infinite scrolling.

Standard pagination

When infinite scrolling is not an option, a pager may be used to allow the user to navigate through the table.

  • The pager should indicate the page the user is currently viewing and provide them with 5 other pages to click on including the last page. This will also give the user an indication of how many pages there are total
  • The user should be able to click on a page number to view that page or use the arrows to navigate to a page
  • The input field to the right of the pages allows the user to type in the page number they want to view
  • If possible, provide the user a way to change the number of rows that are visible in the table at a time (defaulted at 10)
    • This should be a dropdown aligned with the right edge of the table
    • Typical values are 10, 25, 50, 100
  • When there are 5 or fewer pages, the pager may be simplified to only show the 5 pages and not require the input field to navigate to a specific page

Minimal pagination

Use the minimal pager when a more simplistic pager is required, such as on mobile devices.

  • The minimal pager should show the page number that the user is currently viewing as well as the last page to indicate to the user how many total pages there are
  • Arrows to the left and right allow the user to easily navigate through the pages one at a time
  • The input to the right of the pages allows the user to easily enter the page number they wish to navigate too
  • When the user is trying to find something specific, such as an account, a pager is ideal
  • When the user is browsing, such as a content search, infinite scroll may be ideal
  • For mobile, infinite scrolling is ideal
  • If the user navigates to a page from within the table, then uses breadcrumbs to navigate back, we should try to remember the location

Example of a table with standard and minimal pagination.

Wrapping and truncation

Based on the space available and the amount of data contained within the table, wrapping or truncation may be necessary to display all of the available columns. The data contained within the table should drive the decision on whether to truncate or wrap.

Wrapping data

The benefits of wrapping data is that all of the information is visible to the user and it works well with very detailed information such as plan names.

The negative of wrapping data is that wrapping on more than two lines can add a lot of height to the rows within a table, which can actually harm readability of some data like numbers.

Example of a table with wrapping.

Truncating data

The benefit of truncation is that the table height remains compact and all row heights will remain equal.

The negative of wrapping data is that important information may be hidden.

Example of a table with truncation.

Things to consider

  • When truncating data a tooltip may be used on hover to show the full length
  • Wrapping to a certain number of lines before truncating may be appropriate
  • Move to a full-width table when many columns start wrapping, but consider how this will behave at different browser sizes

Filtering

Based on the data in the table, the user may be able to add filters to narrow down the data available.

  • Unlike other table-level actions, the filter button should be placed directly next to the Search input, 10px apart

  • When the filter button is clicked, a dropdown or modal should open with filter options

    • Use a filter dropdown when there are just a few filter options
    • Use a filter modal when there are multiple filter options or filter categories

  • Once filters are selected, they will remain visible in the table header using Tags

  • The filters can be removed directly on the tags, which will reload the results in the table automatically

  • Filters can also be applied through headers or a filter panel, when these methods are used, the Filter button next to Search should be removed

Example of a table with filters.

Responsiveness

When on a mobile device (breakpoint ≤480px), the table reduces to cards.

  • Each row, and all column data associated with that row, will appear on a single card.
  • Row-level actions will be place below a separator line on the bottom-right of each card
  • Each card should be full width to the edge of the screen and have 10px above and below

Example of a responsive table.

Best practices

Do Table row level actions

Use link or icon buttons in table row level actions

Do not Table row level actions

Use primary or secondary buttons in table row level actions

Do Table row level actions alignment

Align text in table row level actions to the action column header text

Do not Table row level actions alignment

Align touch target in table row level actions to the action column header text

Do Table row level actions

Use table columns sized according to the data they contain

Do not Table row level actions

Use columns that are too small for data if there is room for more space

Alternative considerations

  • Consider using Cards when there is less than two columns of information and the user will not be sorting, filtering, or taking row actions.