Tables
Tables are used to organize and present information in a structured and readable way. In the registry, tables are used for various purposes. They share many common characteristics but can be adapted depending on where they appear and how they are to be used.
Overview
Simply put, tables can be divided into the variants "overview" and "form". What is common for "overview" tables is that they are not selectable in a registry but are included on certain pages. Tables of the "form" type only appear based on a registry's data entry needs within forms.
Overview-type tables appear on the registration overview and patient pages. Some registries also include tables where administrators manually enter data required for the registry's input (e.g., response options for a particular variable). These entries are displayed in overview tables under the registry's administration section.
| Variant | Description |
|---|---|
| Overview | Tables as components with specific content that appear on certain page types (registration overview and patient overview). The purpose is to display lists of registration information for a care unit or patient to simplify the registration process. Details in content and functionality vary slightly between components depending on the registry type and the page where they are used. For descriptions of the specific components and their configuration options, see: Registration overview for care process registry, Registration overview for follow-up registry, Previously registered for care process registry, and Previously registered for follow-up registry. |
| Form | Table components that appear in registration forms when entering information where one or more variables need to be filled in, and this can be done repeatedly. For more information about this component, see Repeatable variables. |
Anatomy
- All tables have a table header.
- Underlying rows always have the same height as the header. On registration pages, these may be expandable.
- Truncation: Handling of long names in the table header/truncation.
Sizes
Applies to all types of tables. Each table always uses the full width of the page. To manage the content, column widths are defined to maintain consistency in the registry layout. The width can also be controlled based on breakpoints, but generally, tables should span the full width.
Some columns have specific predefined widths (e.g., personal ID number, name, etc.). Custom columns can be added using the same available widths.
Each table must have at least one "flexible" column to avoid unnecessary truncation of table content.
Column width is applied to both the table headers and table rows.
Fixed widths
To help balance table content, certain predefined widths are available. These also help harmonize the appearance across pages—for example, ensuring all name or personal ID columns have the same width everywhere.
| Size (/Token name) | Width (px/rem) |
|---|---|
| Small | 144px/9rem |
| Medium | 176px/11rem |
| Large | 224px/14rem |
| X-Large | 256px/16rem |
| XX-Large | 276px/17.25rem |
| XXX-Large | 320px/20rem |
{.wide-content}
Interactions
Row hover
To help users visually read the content, even on non-interactive rows, a hover effect is present on each row.
Sorting
Sorting is configured on a case-by-case basis. When a column is sortable, the entire column is clickable. Depending on whether the sorting is ascending or descending, an upward or downward arrow is shown.
Filtering
Categorizing content using filters makes it possible to quickly narrow down a selection to find what you're looking for.
Pagination
Pagination can be used to split up a large amount of data. You can choose to display 25, 50, 100, or all items depending on how many entries are available in the table.
Views
Views are currently specific to overview tables. To make overviews more manageable, for example, patient lists can be divided into different views based on status or type of registration.
