Skip to main content

Tables

Appearance and Behavior

Tables are a fundamental UX design tool for organizing and displaying data. They are used throughout space applications and may take many forms. Tables are comprised of columns and rows of cells and typically have column headers oriented horizontally across the top of a table. The principal table interactions and styles are illustrated below, and demonstrated in the GRM and TT&C sample applications. Types of content used in table cells varies by use case, but can include Text, Checkboxes, Icons, Status Indicators, or Buttons.

Filtering

Filters, to narrow what is displayed in the Table, may be presented in the header as Select Menus, a Segmented Button, or an Input Field. If it is critical that the user knows that not all data is displayed, a warning may be shown when filters are applied. Though it is not a requirement to display filters in the header row of the column to which they correspond, tables created using ag-Grid default to this design pattern.

Sorting

Tables default to being sorted by the data in the first column with an arrow pointing up or down to indicate whether that column is being sorted in ascending or descending order, respectively. Manual sorting is accomplished by clicking the text in a column header. On initial sort, data may sort either ascending or descending, depending on what type of data is contained in that column, with subsequent clicks toggling between the two.

Selection and Action

Tables use a familiar Selection/Action model. In simple Tables, selection can be accomplished by clicking in a row. Checkboxes can also be used for single selection actions in Tables where content is dense and interactable to avoid triggering unintended actions during selection. Checkboxes are also recommended for multiple row selection. Action Buttons may appear in an inline detail area or in a footer.

Rules of Thumb

Complex Tables

For more complex Tables, we recommend using either the community or enterprise tier of ag-Grid. While we cannot provide support for ag-Grid or its many features, we do provide light and dark variants of Astro in a theme file consumable by ag-grid.

We maintain a separate repo for the ag-Grid Astro theme. Please visit the following links to get started: