Sort bar¶

Used for sorting tables, lists, etc. This component serves as visual component, and always maintains the state of current active sorts.

It also has a callback, which can be seen in the example as call to getData(), which triggers every time user changes sort. It returns a list of current sorts.

Code¶

Usage¶

import { SiSortBarComponent } from '@siemens/element-ng/sort-bar';

@Component({
  imports: [SiSortBarComponent, ...]
})

SiSortBarComponent API Documentation¶

selector

si-sort-bar

Input Properties¶

Name	Type	Default	Description
defaultSortCriteria ¶	(`string` \| `number`)		`key` which sortCriteria is active by default.
sortCriteria ¶	`SortCriteria`[]		List of sort criteria.
sortTitle ¶	`TranslatableString`	$localize`:@@SI_SORT_BAR.TITLE:Sort by`	Custom sort title.

Output Properties¶

Name	Type	Description
sortChange ¶	`HttpParams`	Output callback event will provide you with a HttpParams object if active sortCriteria change.

Types Documentation¶

SortCriteria

¶

Interface

Properties
key: (`string` \| `number`)¶
name: `string`¶

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

Translatable ¶ import imported from @siemens/element-translate-ng

Except where otherwise noted, content on this site is licensed under MIT License.