Intro

The p13n dialog control allows users to personalize one or more of the following table attributes:

  • Columns: Visibility and order of columns
  • Sort: Sort criteria for table items
  • Filter: Filter criteria for table items
  • Group: Grouping table items by specific attributes

These tabs can be shown in any combination, as required by the use case.

The P13n dialog is intended for complex tables that have a large number of columns and require complex queries for sorting, grouping, and filtering.
For simple tables, see the view settings dialog and table personalization dialog.

The P13n dialog is opened using the corresponding buttons on the right-hand side of the table toolbar.

Dialog buttons within the table toolbar
Dialog buttons within the table toolbar

Usage

Use the P13n dialog if:

  • Users can personalize more than ~20 columns.
  • You need multiple personalization functions (columns, sorting, filtering, grouping, …)
  • You are using the analytical table.
  • Complex queries have to be built for the table.

Do not use the P13n dialog if:

  • Users can personalize fewer than ~20 columns.
  • You only need a simple feature to show/hide columns.

Responsiveness

The P13n dialog is available for all display sizes. For sizes L/XL (desktop) and M (tablet), it shows as a centered dialog. For size S (smartphones), it displays as a full screen dialog.

Size S – Columns
Size S – Columns
Size M
Size M
Size L
Size L

Components

The P13n dialog consists of four different tabs that can be used separately or combined, as required by the use case:

  • Sort
  • Filter
  • Group
  • Columns

App developers can add more tabs manually.

Behavior and Interaction

Columns

The Columns tab allows users to change the visible table columns and the order in which they are displayed.

The available columns are shown as list items with checkboxes. The checkboxes for the columns that are currently being displayed are selected.

The Show Selected / Show All button toggles the display between all columns and only those that are currently selected.

Show/Hide

To show or hide a column, users select or deselect the column checkbox.

Reorder

To change the order of the columns, users focus on a list item and use the buttons on the right-hand side of the table toolbar to move it up or down. The order of the columns from top to bottom corresponds to the order on the table from left to right.

Search

The search field in the table toolbar enables users to find a specific column more quickly. Matching columns are displayed as soon as the user starts to type.

Column settings in the P13n dialog
Column settings in the P13n dialog

Sort

On the Sort tab, the user can specify the sort criteria and sort order (ascending or descending).

Each entry has two input fields: one for choosing the sort column, and one for choosing the sort order.

Users can enter multiple sort criteria. Once a sort criterion is entered, a new line appears for entering another one.

The order of the sort criteria reflects the order in which they are applied to the table.

Sort settings in the P13n dialog
Sort settings in the P13n dialog
Information
Using the sort feature for column headers replaces ALL sort options in the dialog!

Filter

The Filter tab allows users to filter the table information according to specific criteria.

Users can add filters with the Add button or remove them by clicking the  (Remove Filter) icon at the end of each filter item.

Column

In the first input field, the user selects the column to be filtered. Any column can be selected, including columns that are not currently visible.

Operator

The second field contains the operator that is applied to the filter value (such as greater than or not before).

To include or exclude filter criteria, the user selects the relevant operator from the Include or Exclude section of the dropdown list. For example, equal to to include a value, and not equal to to exclude it.

If individual filter criteria have Boolean values, the operator is always “equal to” and the operator dropdown is disabled.

Available operators:

String (Text)

  • between
  • contains
  • equal to
  • begins with
  • ends with
  • greater than
  • greater than or equal to
  • less than
  • less than or equal to

Number

  • between
  • equal to
  • greater than
  • greater than or equal to
  • less than
  • less than or equal to

Date

  • between
  • equal to
  • after
  • on or after
  • before
  • before or on

Boolean (true/false)

  • equal to

Value

The last field contains the value by which the selected column is filtered. The kind of input field that is provided depends on the data type of the selected column and the selected operator. For example, the value field for fixed or Boolean values could be a dropdown list, an input field with suggestions, or a date picker. You can also offer two or even more fields if the use case requires it.

Information
If there is a filter bar, use the filter bar functionality and deactivate the filter feature of the P13n dialog.

Group

The Group tab can be used to group the table data.

In the selection field, the user can select a grouping criterion from a list of all available columns.

For analytical tables, users can define more complex grouping scenarios. Once a grouping criterion is entered, a new line appears for entering another one. In addition, the Show Field As Column checkbox allows users to decide whether or not to display the corresponding column.

The grouped table shows the individual values for the selected field as the group headers. Expanding the group shows all the corresponding table items.

If you have defined multiple groups, the grouped table shows the individual values for the first selected field. Expanding the groups shows the subgroups and items in an expandable hierarchy.

Warning
To group by a specific column, that particular column must be marked as visible on the Columns tab!
Group tab in the P13n dialog
Group tab in the P13n dialog

Guidelines

On the table toolbar, offer separate buttons for each personalization function (sort, filter, group, column settings).

With each button, open the P13n dialog with just the corresponding tab. Do not display the other tabs.

Resources

Elements and Controls

Implementation