Table

Components for displaying and interacting with tabular data.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "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.

Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Components

@tetherto/mdk-react-devkit

Data table

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

Sortable, paginated, optionally selectable / expandable table built on TanStack React Table. Controlled and uncontrolled modes for each piece of state.

Data contracts

DataTableColumnDef, DataTableRow, DataTableSortingState, DataTablePaginationState, DataTableRowSelectionState, DataTableExpandedState are re-exported from @tetherto/mdk-react-devkit.

Example

/**
 * Runnable example for DataTable.
 */
import type { DataTableColumnDef } from '@tetherto/mdk-react-devkit'
import { DataTable } from '@tetherto/mdk-react-devkit'

type Miner = {
  id: string
  status: 'online' | 'warning' | 'offline'
  hashrate: number
  power_w: number
}

const data: Miner[] = [
  { id: 'miner-01', status: 'online', hashrate: 102.4, power_w: 3200 },
  { id: 'miner-02', status: 'warning', hashrate: 95.1, power_w: 3450 },
  { id: 'miner-03', status: 'offline', hashrate: 0, power_w: 0 },
]

const columns: DataTableColumnDef<Miner, unknown>[] = [
  { accessorKey: 'id', header: 'Miner' },
  { accessorKey: 'status', header: 'Status' },
  { accessorKey: 'hashrate', header: 'Hashrate (TH/s)' },
  { accessorKey: 'power_w', header: 'Power (W)' },
]

export const DataTableExample = () => {
  return <DataTable<Miner> data={data} columns={columns} getRowId={(row) => row.id} />
}

useExplorerData

@tetherto/mdk-react-devkit

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

`AlertConfirmationModal`

Modal that confirms acknowledging or clearing one or more alerts before applying the change

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/alerts/current-alerts/alert-confirmation-modal/alert-confirmation-modal.tsx

Prop	Status	Type / Options	Default	Description
`isOpen`	Required	`boolean`	-	Controls dialog visibility
`onOk`	Required	`VoidFunction`	-	Called when the user confirms the action

Prop	Status	Type / Options	Default	Description
`className`	Optional	`string`	-	Extra class on the page wrapper
`dateRange`	Optional	`HistoricalAlertsRange`	`last 14 days`	Controlled date range for the historical alerts. Defaults to last 14 days
`devices`	Optional	`Device[]`	-	Devices powering the "Current `Alerts`" table — a flat list of rows that carry `last.alerts`. Any backend that can produce that shape works; there is no response envelope to reproduce
`header`	Optional	`React.ReactNode`	-	Optional header (e.g. breadcrumbs) rendered above the alerts
`historicalAlerts`	Optional	`Alert[]`	-	Pre-fetched historical alerts log entries
`initialSeverity`	Optional	`string`	-	Initial severity selection (typically derived from `?severity=` URL param)
`isCurrentAlertsLoading`	Optional	`boolean`	`false`	Loading flag for the "Current `Alerts`" table
`isDemoMode`	Optional	`boolean`	`false`	When true, sound notifications are skipped (e.g. demo / preview)
`isHistoricalAlertsEnabled`	Optional	`boolean`	`false`	When true, shows the "Historical `Alerts` Log" section. Mirrors the `alertsHistoricalLogEnabled` feature flag in the source app
`isHistoricalAlertsLoading`	Optional	`boolean`	`false`	Loading flag for the historical log
`isSoundEnabled`	Optional	`boolean`	`false`	Whether sound notifications are enabled in user preferences
`onAlertClick`	Optional	`((id?: string \| undefined, uuid?: string \| undefined) => void)`	-	Callback invoked when the operator clicks an alert row. Receives the device id and alert uuid
`onDateRangeChange`	Optional	`((range: HistoricalAlertsRange) => void)`	-	Called when the operator picks a new historical range
`selectedAlertId`	Optional	`string`	-	Optional alert id used to focus on a single alert (deep-link from URL)
`typeFiltersForSite`	Optional	`CascaderOption[]`	-	Optional site-specific overrides for the type filter

Prop	Status	Type / Options	Default	Description
`title`	Required	`React.ReactNode`	-	Section heading
`className`	Optional	`string`	-	Additional CSS class
`subtitle`	Optional	`React.ReactNode`	-	Optional subtitle or count badge

Prop	Status	Type / Options	Default	Description
`filterTags`	Required	`string[]`	-	Search tags (controlled). Mirrors the redux `selectFilterTags` slice in the source app
`localFilters`	Required	`AlertLocalFilters`	-	Filters controlled outside (typically by URL severity param)
`onFilterTagsChange`	Required	`(tags: string[]) => void`	-	Setter for the tags above
`onLocalFiltersChange`	Required	`(filters: AlertLocalFilters) => void`	-	Setter for the filters above
`className`	Optional	`string`	-	Additional class names
`devices`	Optional	`Device[]`	-	Devices carrying alerts (`last.alerts`), as a flat list. Unwrapping any backend envelope is the data layer's job, not this component's. Shape mirrors the API response from the source app
`isDemoMode`	Optional	`boolean`	`false`	Skip sound entirely (e.g. in demo/preview environments)
`isLoading`	Optional	`boolean`	`false`	Show `DataTable` loading overlay
`isSoundEnabled`	Optional	`boolean`	`false`	Whether sound notifications are enabled in user preferences (e.g. theme slice)
`onAlertClick`	Optional	`((id?: string \| undefined, uuid?: string \| undefined) => void)`	-	Click handler when the user opens an alert (right arrow icon in the row)
`selectedAlertId`	Optional	`string`	-	Optional id used to focus on a single alert (deep-link from URL)
`typeFiltersForSite`	Optional	`CascaderOption[]`	-	Optional site-specific overrides for the type filter

Show steps

On this page