DeviceExplorer
Top-level device explorer: filter toolbar + searchable, sortable table of miners or cabinets. Designed to be controlled by URL state in the host app.
Top-level device explorer: filter toolbar + searchable, sortable table of miners or cabinets. Designed to be controlled by URL state in the host app.
import { DeviceExplorer } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
deviceType | Required | DeviceExplorerDeviceType | — | — |
className | Optional | string | undefined | — | — |
selectedDevices | Optional | RowSelectionState | undefined | — | — |
onSelectedDevicesChange | Optional | ((selections: RowSelectionState) => void) | undefined | — | — |
onFiltersChange | Required | (value: LocalFilters) => void | — | — |
filterOptions | Required | DeviceExplorerFilterOption[] | — | — |
searchOptions | Required | DeviceExplorerSearchOption[] | — | — |
searchTags | Required | string[] | — | — |
onSearchTagsChange | Required | (tags: string[]) => void | — | — |
onDeviceTypeChange | Required | (type: DeviceExplorerDeviceType) => void | — | — |
filters | Required | LocalFilters | undefined | — | — |
onSortingChange | Required | ((sorting: SortingState) => void) | undefined | — | — |
data | Required | Device[] | — | — |
getFormattedDate | Required | (date: Date) => string | — | — |
renderAction | Required | (device: Device) => React.ReactNode | — | — |
Usage
Top-level device explorer: filter toolbar + searchable, sortable table of miners or cabinets. Designed to be controlled by URL state in the host app.
Data contracts
DeviceExplorerDeviceType = "miner" | "cabinet"Device—foundation/types/deviceLocalFilters,DataTableRowSelectionState— re-exported fromcore.
Notes
- The component handles the device-type/sorting interaction internally:
switching to
cabinetselects a default sort byiddesc, switching tominerclears sort. - Wrap the page in
<MdkProvider>; the toolbar callsuseDeviceResolutionand the table consumesuseTimezoneFormatter.
Example
/** * Runnable example for DeviceExplorer. */import { useState } from 'react'import { DeviceExplorer, type DeviceExplorerDeviceType } from '@tetherto/mdk-react-devkit'const mockMiners = [ { id: 'miner-01', code: 1, macAddress: 'AA:BB:CC:00:00:01', status: 'online', container: 'cont-A', ip: '10.0.0.11', hashrate: 102.4, powerW: 3200, lastActive: Date.now() - 60_000, }, { id: 'miner-02', code: 2, macAddress: 'AA:BB:CC:00:00:02', status: 'warning', container: 'cont-A', ip: '10.0.0.12', hashrate: 95.1, powerW: 3450, lastActive: Date.now() - 600_000, },]const filterOptions = { status: [ { label: 'Online', value: 'online' }, { label: 'Warning', value: 'warning' }, { label: 'Offline', value: 'offline' }, ],}const searchOptions = [{ label: 'Miner ID', value: 'id' }]export const DeviceExplorerExample = () => { const [deviceType, setDeviceType] = useState<DeviceExplorerDeviceType>('miner') const [searchTags, setSearchTags] = useState<string[]>([]) const [filters, setFilters] = useState({}) return ( <DeviceExplorer deviceType={deviceType} onDeviceTypeChange={(type) => setDeviceType(type)} data={mockMiners as never} filters={filters as never} filterOptions={filterOptions as never} onFiltersChange={setFilters as never} searchOptions={searchOptions as never} searchTags={searchTags} onSearchTagsChange={setSearchTags} getFormattedDate={(ts) => new Date(Number(ts)).toLocaleString()} renderAction={() => null} /> )}