Table Components
Data tables, grids, and tabular display components
Components for displaying and interacting with tabular data.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
AlertConfirmationModal
Modal that confirms acknowledging or clearing one or more alerts before applying the change.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isOpen | boolean | ✓ | - | - |
onOk | VoidFunction | ✓ | - | - |
Alerts
Full alerts page — combines the searchable current-alerts table, an optional historical-alerts log section, severity filters, and the sound confirmation modal. Wraps [**CurrentAlerts**](/reference/ui/components/tables/#currentalerts) and `HistoricalAl…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
devices | Device[][] | undefined | - | Devices payload powering the "Current Alerts" table. Mirrors the API response shape of `useGetListThingsQuery({ ... ale… | |
isCurrentAlertsLoading | boolean | undefined | - | Loading flag for the "Current Alerts" table. | |
historicalAlerts | Alert[] | undefined | - | Pre-fetched historical alerts log entries. | |
isHistoricalAlertsLoading | boolean | undefined | - | - | |
isHistoricalAlertsEnabled | boolean | undefined | false | When true, shows the "Historical Alerts Log" section. Mirrors the alertsHistoricalLogEnabled feature flag in the sour… | |
selectedAlertId | string | undefined | - | Optional alert id used to focus on a single alert (deep-link from URL). | |
initialSeverity | string | undefined | - | Initial severity selection (typically derived from ?severity= URL param). | |
onAlertClick | ((id?: string | undefined, uuid?: string | undefined) => void) | undefined | - | Callback invoked when the operator clicks an alert row. Receives the device id and alert uuid. | |
dateRange | HistoricalAlertsRange | undefined | - | Controlled date range for the historical alerts. Defaults to last 14 days. | |
onDateRangeChange | ((range: HistoricalAlertsRange) => void) | undefined | - | - | |
isSoundEnabled | boolean | undefined | false | Whether sound notifications are enabled in user preferences. | |
isDemoMode | boolean | undefined | false | When true, sound notifications are skipped (e.g. demo / preview). | |
typeFiltersForSite | CascaderOption[] | undefined | - | Optional site-specific overrides for the type filter. | |
header | React.ReactNode | - | Optional header (e.g. breadcrumbs) rendered above the alerts. | |
className | string | undefined | - | - |
AlertsTableTitle
Title strip for an alerts table with the section heading and an optional count badge.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | React.ReactNode | ✓ | - | - |
subtitle | React.ReactNode | - | - | |
className | string | undefined | - | - |
CurrentAlerts
Sortable, searchable data table of currently active alerts derived from a raw devices payload. Plays an audible beep when a critical alert is present (gated by isSoundEnabled + user confirmation mo…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
devices | Device[][] | undefined | - | Raw devices (with last.alerts) used to derive current alerts from. Shape mirrors the API response from the source app. | |
isLoading | boolean | undefined | - | - | |
localFilters | AlertLocalFilters | ✓ | - | Filters controlled outside (typically by URL severity param). |
onLocalFiltersChange | (filters: AlertLocalFilters) => void | ✓ | - | - |
filterTags | string[] | ✓ | - | Search tags (controlled). Mirrors the redux selectFilterTags slice in the source app. |
onFilterTagsChange | (tags: string[]) => void | ✓ | - | - |
selectedAlertId | string | undefined | - | Optional id used to focus on a single alert (deep-link from URL). | |
onAlertClick | ((id?: string | undefined, uuid?: string | undefined) => void) | undefined | - | Click handler when the user opens an alert (right arrow icon in the row). | |
isSoundEnabled | boolean | undefined | false | Whether sound notifications are enabled in user preferences (e.g. theme slice). | |
isDemoMode | boolean | undefined | false | Skip sound entirely (e.g. in demo/preview environments). | |
typeFiltersForSite | CascaderOption[] | undefined | - | Optional site-specific overrides for the type filter. | |
className | string | undefined | - | - |
DataTable
Generic typed data table built on TanStack React Table. Supports pagination, sorting, expansion, row selection and custom column renderers.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
data | I[] | ✓ | - | The data to be shown in the table. See https://tanstack.com/table/v8/docs/guide/data |
columns | ColumnDef<I, any>[] | ✓ | - | The column configuration table. See https://tanstack.com/table/v8/docs/guide/column-defs |
fullWidth | boolean | undefined | true | Is table full width | |
enableRowSelection | boolean | ((row: Row<I>) => boolean) | undefined | false | Show a checkbox column and enables selection | |
enableMultiRowSelection | boolean | undefined | true | Enables selection of multiple rows | |
selections | RowSelectionState | undefined | undefined | Specify the selected rows. If undefined, the selections are managed internally Object with the key of row ID and a bo… | |
onSelectionsChange | ((selections: RowSelectionState) => void) | undefined | - | Callback to be called when the row are selected / unselected | |
enablePagination | boolean | undefined | true | Show pagination | |
bordered | boolean | undefined | false | Add borders to all cells | |
pagination | PaginationState | undefined | undefined | Specify the pagination params. Object of shape { pageIndex: number, pageSize: number }. If undefined then the paginat… | |
onPaginationChange | ((pagination: PaginationState) => void) | undefined | - | Callback to be called when the pagination params change | |
sorting | SortingState | undefined | undefined | Specify the sorting params. If undefined then the sorting is managed internally. | |
defaultSorting | SortingState | undefined | [] | Default sorting applied when the table is first mounted (uncontrolled mode). Ignored when sorting is provided. | |
onSortingChange | ((sorting: SortingState) => void) | undefined | - | Callback to be called when the sorting changes | |
wrapperClassName | string | undefined | - | Classname of the wrapper element | |
contentClassName | string | undefined | - | Classname of the content element | |
tableClassName | string | undefined | - | Classname of the table element | |
loading | boolean | undefined | false | Show a loading indicator overlay | |
enableRowExpansion | boolean | undefined | false | Show a columns with a button which can expand the row | |
canRowExpand | ((row: Row<I>) => boolean) | undefined | false | Callback to check if a row can be expanded | |
expandedRows | ExpandedState | undefined | - | Specify the expanded rows If undefined, the expansions are managed internally Object with the key of row ID and a boo… | |
onExpandedRowsChange | ((expandedRows: ExpandedState) => void) | undefined | - | Callback to be called when the rows are expanded or collapsed | |
renderExpandedContent | ((row: Row<I>) => React.ReactNode) | undefined | - | Render the content of the expanded row. Required when enableRowExpansion is true | |
getRowId | ((row: I, index: number, parent?: Row<I> | undefined) => string) | undefined | - | Get the row ID for a row. If not specified index is the default row ID. | |
onRowClick | ((rowData: I) => void) | undefined | - | Called when a body row is clicked. When set, rows become interactive (pointer cursor, role="button", keyboard-activat… |
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.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
deviceType | DeviceExplorerDeviceType | ✓ | - | - |
className | string | undefined | - | - | |
selectedDevices | RowSelectionState | undefined | - | - | |
onSelectedDevicesChange | ((selections: RowSelectionState) => void) | undefined | - | - | |
onFiltersChange | (value: LocalFilters) => void | ✓ | - | - |
filterOptions | DeviceExplorerFilterOption[] | ✓ | - | - |
searchOptions | DeviceExplorerSearchOption[] | ✓ | - | - |
searchTags | string[] | ✓ | - | - |
onSearchTagsChange | (tags: string[]) => void | ✓ | - | - |
onDeviceTypeChange | (type: DeviceExplorerDeviceType) => void | ✓ | - | - |
filters | LocalFilters | undefined | ✓ | - | - |
onSortingChange | ((sorting: SortingState) => void) | undefined | ✓ | - | - |
data | Device[] | ✓ | - | - |
getFormattedDate | (date: Date) => string | ✓ | - | - |
renderAction | (device: Device) => React.ReactNode | ✓ | - | - |
onRowClick | ((device: Device) => void) | undefined | - | Called when a row is clicked (e.g. to open the device's detail page). |
EfficiencyMinerTypeView
Efficiency drilldown grouped by miner model — J/TH and uptime for each model in the fleet.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isLoading | boolean | undefined | - | - | |
onTimeFrameChange | ((start: Date, end: Date) => void) | undefined | - | - | |
chartInput | ToBarChartDataInput | undefined | - | - | |
isEmpty | boolean | undefined | - | - |
EfficiencyMinerUnitView
Efficiency drilldown by individual miner serial — outliers and worst-performers surface here.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isLoading | boolean | undefined | - | - | |
onTimeFrameChange | ((start: Date, end: Date) => void) | undefined | - | - | |
chartInput | ToBarChartDataInput | undefined | - | - | |
isEmpty | boolean | undefined | - | - |
EfficiencySiteView
Site-level efficiency view — site-aggregate J/TH, uptime, and capacity utilisation cards.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
log | MetricsEfficiencyLogEntry[] | undefined | - | - | |
avgEfficiency | number | null | undefined | - | - | |
nominalValue | number | null | undefined | - | - | |
isLoading | boolean | undefined | - | - | |
dateRange | EfficiencyDateRange | undefined | - | - | |
onDateRangeChange | ((range: EfficiencyDateRange) => void) | undefined | - | - | |
onReset | VoidFunction | undefined | - | - |
HistoricalAlerts
Sortable data table of historical alerts within a controlled date range. Renders a header with title + [**DateRangePicker**](/reference/ui/components/forms/#daterangepicker), then the table.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
alerts | Alert[] | undefined | - | Pre-fetched historical alerts log entries (each with a thing device payload). | |
isLoading | boolean | undefined | - | - | |
localFilters | AlertLocalFilters | ✓ | - | Filters and search tags coming from the parent (typically shared with [**CurrentAlerts**](/reference/ui/components/tables/#currentalerts)). |
filterTags | string[] | ✓ | - | - |
dateRange | HistoricalAlertsRange | ✓ | - | Selected date range for the historical query (controlled). |
onDateRangeChange | (range: HistoricalAlertsRange) => void | ✓ | - | - |
onAlertClick | ((id?: string | undefined, uuid?: string | undefined) => void) | undefined | - | - | |
className | string | undefined | - | - |
OperationsEfficiency
Top-level operations-efficiency section of the report — composes the site/type/unit views.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
defaultTab | EfficiencyTabValue | undefined | - | - | |
siteView | EfficiencySiteViewProps | undefined | - | - | |
minerTypeView | EfficiencyMinerTypeViewProps | undefined | - | - | |
minerUnitView | EfficiencyMinerUnitViewProps | undefined | - | - |
PoolManagerMinerExplorer
Pool-manager miner explorer page — searchable / filterable table of miners with multi-select and an "Assign Pool" bulk action. Submits the chosen pool change as a pending action via the adapter actio…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
miners | ListThingsDevice[] | ✓ | - | Miners to render in the explorer table. |
poolConfig | PoolConfigEntry[] | ✓ | - | Pool configurations powering the "Assign Pool" dropdown. |
backButtonClick | VoidFunction | ✓ | - | Called when the operator clicks the "Pool Manager" back link. |
PoolManagerPools
Pool-manager pools page — accordion list of every configured pool with header summary (name, status, priority) and an expandable body (per-pool stats, edit, delete). Optional "Add Pool" CTA is gated…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
poolConfig | PoolConfigEntry[] | ✓ | - | Array of pool configurations to render. |
backButtonClick | VoidFunction | ✓ | - | Called when the operator clicks the "Pool Manager" back link. |
RepairLogChangesSubRow
Expandable sub-row that lists the spare-part changes recorded in a repair batch action. Each non-miner repair action is resolved against its device to show the part type, serial number, MAC address,…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
batchAction | Partial<{ params: Partial<{ params: Partial<{ comment: string; id: string; rackId: string; info: { parentDeviceId: string | null; }; }>[]; }>[]; }> | ✓ | - | The repair batch action whose part changes should be displayed. |
devices | Partial<{ id: string; rack: string; info: Partial<{ serialNum: string; macAddress: string; }>; }>[] | ✓ | - | Devices referenced by the batch action, pre-fetched by the parent. |
isLoading | boolean | undefined | false | Show a spinner while the parent is still fetching devices. |
TagFilterBar
Horizontal strip of removable tag chips that narrow a list view; clicking a chip removes the filter.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
filterTags | string[] | ✓ | - | - |
localFilters | AlertLocalFilters | ✓ | - | - |
onSearchTagsChange | (tags: string[]) => void | ✓ | - | - |
onLocalFiltersChange | (filters: AlertLocalFilters) => void | ✓ | - | - |
typeFiltersForSite | CascaderOption[] | undefined | - | Site-specific overrides for the "type" filter children. If provided, the "Type" filter group will use these instead of… | |
placeholder | string | undefined | - | - | |
className | string | undefined | - | - |