User interface

Table design

Trace-X uses the following table design to build consistent and user-friendly tables:

table design
Component Description Example

Actions

  • Black icons

  • When an action cannot be executed for any reason, the icon turns grey

  • A tooltip is shown when hovering over an executable action to describe it

  • A tooltip is shown when hovering over a disabled action to describe the reason why it can’t be executed

table actions

Action menus

  • Opens when clicking on a three-dot menu

  • Disappears, when clicking anywhere outside the menu

  • List of action icons with text labels

  • The three-dot menu is sticky when used inside the table for single-item actions

table action menus

Multi-select box

  • Clicking on it when no items are selected, selects all items on the current page

  • Clicking on it when some items are selected (but not all), selects all items on the current page

  • Clicking on it when all items are selected, deselects all items on the current page

  • Clicking on the small arrow opens a menu for clearing the page selection or the entire selection

  • The menu disappears, when clicking anywhere outside the menu

  • Part of the column header row → Sticky on top next to column headers

table multi select box

Selection box

  • Clicking on it toggles item selection

Selection count

  • Shows selection count of the current page

Column header

  • Shows the column title

  • Hovering over it shows a tooltip that describes sorting behaviour

  • Clicking on it toggles sorting

  • Sticky on top

table sorting tooltip Ascending sorting: table sorting ascending Descending sorting: table sorting descending

Filter

  • Can search for any string

  • Results are shown directly without having to press enter

  • Results are shown as a sorted list (ascending)

  • Selected results are shown on top of unselected ones

  • The checkbox inside the search field selects or deselects every result

  • The cross inside the search field resets the search and the filter

  • When the filter is active, 'All' changes to the filtered value (+ the number of other filters)

  • For date values, the search is replaced with a date picker

  • Sticky on top below column headers

table filter Date filter: table filter date

Quick filter

  • Used to quickly filter for specific values

  • Independent of regular filters

  • Work exclusively - only one filter can be selected at a time

  • Click on the currently active quick filter to deactivate it

Table column settings

  • Opens up as an overlay

  • Clicking on Save, the cross or anywhere outside the overlay will close the overlay (only saving changes when clicking Save)

  • Selecting/deselecting columns makes them visible/invisible in the table

  • The order of the columns can be changed by selecting the column title and using the arrow buttons

  • Using the circle arrow icon resets the column visibility and column order

table column settings

Full-width toggle

  • Used to switch between full-width mode or variable-width mode

Scrollbars

  • Only visible/active when data exceeds the visible space

  • Sticky elements stay visible regardless of scroll position

Page size selector

  • Shows the currently selected page size

  • When clicking on it, a dropdown opens that shows available page size options

  • Clicking any option will select that option and close the dropdown

  • Clicking anywhere outside the dropdown closes the dropdown without applying any changes

  • Three options are always available

table page size selector

Page information

  • Shows information about the amount of items on the current page and the total amount of items

Page controls

  • Used to switch between pages

  • Controls are: First page, previous page, next page, last page

  • Hovering over the controls shows a tooltip that labels each control

table page controls

In addition, following tables are used within Trace-X:

When the data is not as complex and/or extensive and single-item actions are not needed:

table small

When data must only be shown and no actions are needed:

table data only