Table

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. 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 often includes: 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, as a Segmented Button, or as 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. Selection is accomplished by clicking in a row. Multiple selection can be enabled by adding a selection column of Checkboxes. Action Buttons may appear in an inline detail area or in a footer.

Table with inline action.
Table with inline action.
Table with multiple selection and actions in footer.
Table with multiple selection and actions in footer.

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: