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
- Tables shall always fit within the confines of the user’s display.
- Overflow of row or column data shall be accomplished via scrolling, Pagination , or tabbing.
- Clearly indicate to the user if a Table is scrollable.
- By default, arrange columns in order of importance from left to right.
- Keep column headers short, ideally one or two words. If column headers must be longer, the text can either be truncated or wrapped. For truncation, truncate the text with an ellipsis and provide a tooltip on hover that displays the full text. If the data is critical and cannot be hidden with a tooltip, wrap the text. Be consistent within a Table and across an application about whether to truncate or wrap text.
- Ensure the data within the table is user-facing and human-readable. Translate backend or other system-facing data into information that can be more easily read by users. Consider how much precision is needed for numerical data for the audience.
- Body text size should generally be used for data within a table. Some Tables may use a larger text size for column headers. If space is limited or the table is dense, a smaller text size may be used. Text should be no smaller than 14 px/0.875 rem, or the Body 2 text size.
- Generally, data should be left-aligned. However, if the data is a date, time, currency, or numerical data related to size (i.e., values that a user might want to quickly scan and compare), it should be right-aligned. Column headers match the alignment of the data in the column.
- In a table with a column of checkboxes, if one or more rows are selected (but not all rows) then the parent checkbox in the column header row should be in the indeterminate state. This behavior is in keeping with checkbox guidance.
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.
AG Grid Theme
The Astro AG-Grid theme follows the Astro theming guidelines and the AG-Grid theme development guidelines.
There are three parts to the Astro AG-Grid theme:
-
Astro UXDS Design tokens
which are already imported and consumed in
@astrouxds/ag-grid-theme. -
The AG Grid community alpine-dark theme that the Astro AG-Grid theme builds off of, which is imported from the
ag-grid-communityrepository. -
The Astro AG-Grid theme itself, which is defined in
@astrouxds/ag-grid-theme/dist/main.cssand consumes the imported design tokens above.
The @astrouxds/ag-grid-theme/dist/main.css file merges the ag-grid.css, ag-theme-alpine.css and the astro ag-grid theme sources so you will only need to import one file.
Installation
The default installation method of AG Grid can add a considerable amount to your bundle size. Instead, consider using AG Grid Modules to cherry pick the features you need.
Import the Astro AG Grid theme via NPM:
npm install @astrouxds/ag-grid-themeUsage
In your main css entrypoint:
@import "~@astrouxds/ag-grid-theme/dist/main.css"If you are already importing
ag-grid-community/dist/styles/ag-grid.cssorag-grid-community/dist/styles/ag-theme-alpine.cssyou can remove them as they are already bundled in our ag-grid-theme css.
Apply the class “ag-theme-astro” to your ag-grid element:
<ag-grid class="ag-theme-astro" ...></ag-grid>Themes
The Astro Dark variant is the default theme. The Light variant can be assigned by wrapping the grid in an element with the “light-theme” class.
<section class="light-theme">
<ag-grid- class="ag-theme-astro" ...></ag-grid->
</section>Example Project
Support
Please report any issues on our AG Grid Theme repository on Github.
Asset Status
| Asset | Version | Status |
|---|---|---|
| Documentation | N/A | Available |
| UI Kit - Dark | v7 | Available |
| UI Kit - Light | v7 | Available |
| UI Kit - Wireframe | v7 | Available |
| Web Component | v7 | Available |
| Component Tokens | N/A | Planned |