Tables

Our simple table components are specifically designed for static content which is best displayed in a table.

Key Points

  • These tables are not data grids, they only present static content
  • The table headers have an optional icon button
  • Cell content is left aligned for text and right aligned for numbers

Usage

Tables are used to present tabular data in rows and columns. Each column has a header and the cells below display related content.

These tables are design for simple static content, not as a data grids. This means that the content is not sortable or filterable.

Stacked Table

Our current implimentation of tables is based on our responsive guidelines. On smaller viewports each column is stacked as a collection of cards.

 

Small Table

Small Table

Example of the table stacked on smaller viewports

On wider breakpoints each column is shown in a more familiar horizontal orientation.

Large Table

Large Table

Example of the table at the largest breakpoint

Elements

Headers

Headers as you see from the layouts above can be used as the title of a column or cell. These cells are shaded to show the difference and also include an optional icon.

Additionally, there is an optional icon button to the right. By default this defaults to an information icon but can be changed.

Do not use this button for sorting, as this is not a data grid component.

Cell Headers

Cell Headers

Examples of the optional headers

Cells

Table cells have two variants; text and numerical. The text cells include an optional icon and the numerical cells are right aligned like a traditional spreadsheet.

Table Cells

Table Cells

L to R: Text with an icon, text and numerical

Native Specific

There are currently no table components for the Ionic Framework but they can be created using various other elements.