SegmentSelector

The SegmentSelector component

Experimental

The SegmentSelector is still experimental. Be aware that the API is subject to change.

OverviewPropertiesUsage

Import

import { SegmentSelector } from '@dynatrace/strato-components-preview/filters';

Use cases

Narrow down a filter result with segments

Place one or multiple segmentSelectors on a page to narrow down data with segments. When multiple SegmentSelectors are used they share and adapt the same state by default. The selected values can be accessed with the useSegments hook.

CodeSandbox

Scope the SegmentSelector

Use the SegmentsProvider to restrict the scope of one or multiple SegmentSelectors. This will apply the Segments only within this scope and ignore all globally set segments.

The SegmentsProvider accepts default segments as well. It already filters out all default segments that might be faulty. In case the default selection should happen for all SegmentsSelectors the SegmentsProvider must be placed on a high level, e.g. right after the AppRoot.

CodeSandbox

Override the state of the SegmentSelector

Alternatively, to manipulate the defaultSegments, the hook provides you with the following CRUD functions:

Function	Description
addSegment	Adds one segment to the selection. If this segment is unavailable, it doesn't add it to the selection.
removeSegment	Removes one segment from the selection.
removeAllSegments	Removes all segments from the selection.
setSegments	Overrides all currently applied segments. Similiarly to the addSegment, it checks the availability of each segment.

CodeSandbox

Outdated and private segments

You can share a private segment with someone else. Those segments are then applied but can't be changed. However, they're still removable and will then no longer be available. Unlisted segments are marked as such.

Similarly, there are segment variables that might no longer be available. Those are marked as unavailable and still included in the segments array.

CodeSandbox

Use a customized trigger

By default, the SegmentSelector comes with a trigger that ensures a consistent user experience. In exceptional cases, you may override the default trigger with a custom one.

We automatically apply props to the provided custom trigger to ensure correct semantics. The SegmentSelector.CustomTrigger accepts a render function with two objects as arguments. The first object gives you access to the displayValue that the SegmentSelector would have shown by default and the isLoading state, in case you need to show a custom loading state. The second object consists of all trigger props needed for the functionality of the trigger button. Make sure to spread the props to the trigger element to tie interactions back into the SegmentSelector. This enables you to customize the trigger component, while leveraging the SegmentSelector's internal logic.

CodeSandbox