Device explorer

Hierarchical view of containers, racks, and miners with filtering, search, and selection

The device explorer is the primary navigation surface for browsing containers, racks, and miners. It combines a filter Cascader, a tag-based search, device-type tabs, and a selectable data table so operators can drill into fleet inventory.

Prerequisites

Complete the @tetherto/mdk-react-devkit installation and add the dependency

`DeviceExplorer`

Hierarchical view of containers, racks, and miners with filtering, search, and selection capabilities.

Import

import { DeviceExplorer } from '@tetherto/mdk-react-devkit/foundation'

Props

Prop	Status	Type	Default	Description
`deviceType`	Required	`'container' \| 'miner' \| 'cabinet'`	required	Current view type
`data`	Required	`Device[]`	none	Array of devices to display
`filterOptions`	Required	`DeviceExplorerFilterOption[]`	none	`Cascader` filter options
`searchOptions`	Required	`DeviceExplorerSearchOption[]`	none	Search autocomplete options
`searchTags`	Required	`string[]`	none	Current search tags
`onSearchTagsChange`	Required	`function`	none	Search tags change handler
`onDeviceTypeChange`	Required	`function`	none	Device type tab change handler
`onFiltersChange`	Required	`function`	none	Filter change handler
`selectedDevices`	Optional	`DataTableRowSelectionState`	`{}`	Selected row state
`onSelectedDevicesChange`	Optional	`function`	none	Selection change handler
`renderAction`	Optional	`function`	none	Custom action column renderer
`getFormattedDate`	Required	`function`	none	Date formatter function
`className`	Optional	`string`	none	Additional CSS class

Basic usage

<DeviceExplorer
  deviceType="container"
  data={containers}
  filterOptions={[
    { value: 'site-a', label: 'Site A' },
    { value: 'site-b', label: 'Site B' },
  ]}
  searchOptions={[
    { value: 'container-001', label: 'Container 001' },
  ]}
  searchTags={searchTags}
  onSearchTagsChange={setSearchTags}
  onDeviceTypeChange={setDeviceType}
  onFiltersChange={handleFilters}
  getFormattedDate={(date) => date.toLocaleDateString()}
/>

With selection

<DeviceExplorer
  deviceType="miner"
  data={miners}
  filterOptions={filterOptions}
  searchOptions={searchOptions}
  searchTags={[]}
  onSearchTagsChange={setSearchTags}
  onDeviceTypeChange={setDeviceType}
  onFiltersChange={handleFilters}
  selectedDevices={selected}
  onSelectedDevicesChange={setSelected}
  getFormattedDate={formatDate}
  renderAction={(device) => (
    <Button size="sm" onClick={() => viewDetails(device.id)}>
      View
    </Button>
  )}
/>

Styling

.mdk-device-explorer: Root element
.mdk-device-explorer__toolbar: Toolbar container
.mdk-device-explorer__toolbar__filter: Filter Cascader
.mdk-device-explorer__toolbar__search: Search input
.mdk-device-explorer__toolbar__tabs: Device type tabs
.mdk-device-explorer__toolbar__tabs-list: Tabs list container
.mdk-device-explorer__toolbar__tab-trigger: Individual tab trigger

Next steps

For selecting and acting on an individual device, see the details view pages.
For container-level controls alongside the explorer, see [ContainerControlsBox(../details-view/controls#containercontrolsbox) on the Controls page.

Device explorer

On this page