Filter

Components for filtering and searching data.

Prerequisites

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

Toolbar of dropdown/checkbox filters that drive a list view; emits the active filter set to the parent

agent-ready

Source

Prop	Status	Type / Options	Default	Description
`onChange`	Required	`(selections: CascaderValue[]) => void`	-	Callback when filters change
`options`	Required	`CascaderOption[]`	-	`Cascader` options for filtering
`className`	Optional	`string`	-	Custom className for the filter button
`filterKey`	Optional	`string`	`"default"`	Optional key to force re-mounting the `Cascader` when filters change Useful if you want to reset the internal state of the `Cascader` when filters change
`localFilters`	Optional	`LocalFilters`	-	Current filter values as key-value pairs Example: { type: 'Antminer S19XP H', status: ['active', 'pending'] }

Reporting-period selector with preset windows (1d / 7d / 30d / custom range)

agent-ready

Source

Prop	Status	Type / Options	Default	Description
`dateRange`	Required	`[Date, Date]`	-	Custom date range as a `[start, end]` tuple
`presetTimeFrame`	Required	`number \| null`	-	Selected preset in days (`1`, `7`, `30`); `null` means the custom range is active
`setDateRange`	Required	`(value: [Date, Date]) => void`	-	Update the custom date range
`setPresetTimeFrame`	Required	`(value: number \| null) => void`	-	Update the preset selection

Date-range picker for financial reporting pages — supports year, month, and week granularity via connected selects

agent-ready

Source

Prop	Status	Type / Options	Default	Description
`dateRange`	Optional	`TimeframeControlsDateRange`	-	Current date range
`hint`	Optional	`string`	-	Helper text below the controls
`isMonthSelectVisible`	Optional	`boolean`	`true`	Show month selector
`isWeekSelectVisible`	Optional	`boolean`	`true`	Show week selector
`layout`	Optional	`"horizontal" \| "stacked"`	`"horizontal"`	Layout direction
`onRangeChange`	Optional	`TimeframeControlsOnRangeChange`	-	Called when the range changes
`onReset`	Optional	`VoidFunction`	-	Called when the Reset button is clicked
`onTimeframeTypeChange`	Optional	`(type: TimeframeTypeValue) => void`	-	Called when timeframe type changes
`showResetButton`	Optional	`boolean`	`false`	Shows the Reset button
`timeframeType`	Optional	`null \| "month" \| "week" \| "year"`	-	Active timeframe type

Flat list of selectable week items for the TimeframeControls week selector

agent-ready

Source

Prop	Status	Type / Options	Default	Description
`visibleWeeks`	Required	`Week[]`	-	-

Hierarchical year → month → week tree for the TimeframeControls week selector

agent-ready

Source

Prop	Status	Type / Options	Default	Description
`selectedMonth`	Required	`number`	-	-
`selectedYear`	Required	`number`	-	-
`timezone`	Required	`string`	-	-