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 @mdk/foundation installation and add the dependency

`DeviceExplorer`

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

Import

import { DeviceExplorer } from '@mdk/foundation'

Props

Prop	Type	Default	Description
`deviceType`	`'container' \| 'miner' \| 'cabinet'`	required	Current view type
`data`	`Device[]`	required	Array of devices to display
`filterOptions`	`DeviceExplorerFilterOption[]`	required	`Cascader` filter options
`searchOptions`	`DeviceExplorerSearchOption[]`	required	Search autocomplete options
`searchTags`	`string[]`	required	Current search tags
`onSearchTagsChange`	`(tags: string[]) => void`	required	Search tags change handler
`onDeviceTypeChange`	`(type: DeviceExplorerDeviceType) => void`	required	Device type tab change handler
`onFiltersChange`	`(value: LocalFilters) => void`	required	Filter change handler
`selectedDevices`	`DataTableRowSelectionState`	`{}`	Selected row state
`onSelectedDevicesChange`	`(selections: DataTableRowSelectionState) => void`	none	Selection change handler
`renderAction`	`(device: Device) => ReactNode`	none	Custom action column renderer
`getFormattedDate`	`(date: Date) => string`	required	Date formatter function
`className`	`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 on the Controls page.

Device explorer

On this page