Nav open / close arrow

Styles

Using this Component

Platform tables are used to display organized lists of object references and metadata, often with interactive UI elements within rows.


Contents

Platform tables can contain a wide variety of metadata and interface components. The table’s actions & columns are determined by Alation.


Alternatives

When displaying hierarchical or taxonomic data, consider using a Tree Table instead. Do not use platform tables for displaying raw data or query results. For more information on when to use platform table vs. other table styles, see the Types of Data learning module.

Structure

1. Action Bar

This bar contains the primary actions that can be performed on the table.

2. Column Headers

These headers label the column values beneath them, and display sort and filter indicators.

3. Rows

Information/metadata entries in the table.

4. Number of Visible Rows

This area indicates the current and total visible rows, as well as contains a toggle for changing the quantity of visible rows.

5. Pagination Controls

This area indicates the current page of the content, and contains controls to paginate forward and back when all rows are not currently displayed.

6. Select All Rows Checkbox (optional)

This action selects all rows on the current page. When selected, this checkbox deselects the entire current selection.

7. Column Organization Menu (optional)

This opens the menu that controls the visibility and order of columns in the table.

8. Sort Menu (optional)

This opens the menu that allows for sorting one or multiple rows by the values in their columns.

9. Filter Menu (optional)

This opens the menu that allows for filtering one or multiple rows by selecting discrete values in their columns.

10. Text Search/Filter

This allows for filtering rows by matching a user-input text or numerical string.

11. Column Header Sort Toggle

Clicking this toggle changes the sort or sort direction on this column. If already sorted, clicking here replaces the prior sort.

12. Column Header Filter Button (optional)

Clicking this button opens the filter menu in order to filter rows based upon discrete values in this specific column.

13. Table Header

This is the UIHeader that labels each table. It may contain table-level actions such as "Export."

14. Bulk Action Bar (optional)

This bar appears when any or all rows are selected. Actions performed in the bulk action bar will impact all of the currently selected rows.

15. Column Sort Indicator(s)

These icons indicate the current sort parameters applied to a table. The icon displayed varies depending on the number and order of rows that are sorted.

16. Row Selection Checkbox (optional)

These checkboxes, which are visible on hover, control the selection and deselection of individual rows.

17. Current Selection Indicator (optional)

This text in the bulk action bar indicates the number of currently selected rows. When all rows on the current page are selected, it also includes a text button to select all rows within the entire table.

18. Bulk Action(s) Area (optional)

This area contains all developer-determined actions that can be performed on bulk selections in this table.

19. Row Action(s) (optional)

These are the developer-determined actions that may be performed on individual rows.

Behavior

Platform tables may have various actions both at the table-level, and the row-level, depending on the implementation.


Built-in Functionality

Text Search/Filter

Table rows may be filtered by typing text in the search/filter field in the action bar of the platform table. Only rows that match the typed text, as it is being typed, will appear in the table. All non-matching rows are immediately hidden. All links and plain text values in the table are searchable. The text search functionality is present on all platform tables.

Value Filtering (optional)

Rows my also be filtered by selecting specific values in a column to show or hide. This is controlled through the filter menu or by clicking on the column header filter icons. This is not default functionality on all tables, and it requires some additional effort to configure to fit each table's unique data structure.

Sorting

Rows may be sorted by clicking on column headers, or through the sort menu. The sort menu allows for nested sort logic based upon values in multiple column. e.g. sort first by 'age' and then alphabetically by 'name'. All tables should have an active default sort, but the ability for the end user to edit the sort of a table or to access the filter menu may be disabled.

Row Selection & Bulk Actions (optional)

Multiple rows may be selected, and actions may be performed on all of the selected rows. When there are actions that can be performed on individual rows, it is suggested that row selection also be turned on. This allows users to select individual checkboxes to select rows, as well as enabling a "select all rows" checkbox in the action bar of the table. Once row(s) are selected, a selection indicator as well as action button(s) appear in the action bar, replacing the ordinary functionality until all rows are deselected.

Column Organization (optional)

Columns may be hidden or reordered by users of the platform table. This optional functionality, accessible through the action bar, allows for developer-determined columns to be toggled between hidden and visible, as well as allowing for reordering of the visible columns. Specific columns may be set such that their visibility or position are predetermined and not editable.

Pagination & Number of Rows

At the bottom of all tables are the controls for content pagination as well as selection of the number of visible rows. Developers must set the default number of visible rows from one of the preset view options: 5, 10, 25, 50, 100 rows. Users may then change this selection to fit their preference. The number of pages is automatically determined based upon the user's number of visible rows and the total number of rows in the table.

Row Hover Highlight

Hovering anywhere over a row causes the entire row to be highlighted. This aids the scanning of wide rows and hints at deeper interactivity of other table features.


Truncation

By default, text values are truncated with ellipses (...) at a single row. Developers may change this to fit the display of other components or multi-line content. Long, multi-line content is discouraged within platform tables. Rather than displaying full values, content should be truncated with an explicit action to view or navigate to the full contents.

Bulk Action Interactivity

For tables that allow for bulk actions, when any or all rows are selected, the table action bar is replaced with the bulk action bar. This contains the "select all rows" checkbox, a selection indicator, and all developer-determined bulk actions. By replacing the action bar, the bulk action bar prevents users from re-filtering the table to prevent any selected rows from being hidden. This bulk action bar remains visible until all rows are deselected either by individually deselecting each row, by using the "select all rows" checkbox, or by performing a bulk action on the selected rows.

Related Components

Last Updated

October 9, 2019

Coming soon...

Component code details are not currently available on this site, but we're working on it!

Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.