Table Components

Components for displaying and interacting with tabular data.

Prerequisites

Complete the installation

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

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.

Props (subset)

Prop	Type	Required	Default	Description
`data`	`I[]`	yes	—	Rows.
`columns`	`DataTableColumnDef<I>[]`	yes	—	TanStack column defs.
`fullWidth`	`boolean`	no	`true`	Stretch to container width.
`enableRowSelection`	`boolean \| ((row) => boolean)`	no	`false`	Checkbox column.
`enableMultiRowSelection`	`boolean`	no	`true`	Allow multi-select.
`selections`	`DataTableRowSelectionState`	no	—	Controlled row-selection state.
`onSelectionsChange`	`(s: DataTableRowSelectionState) => void`	no	—	Setter.
`enablePagination`	`boolean`	no	`true`	Show pagination footer.
`pagination`	`DataTablePaginationState`	no	—	Controlled pagination.
`sorting`	`DataTableSortingState`	no	—	Controlled sorting.
`bordered`	`boolean`	no	`false`	Add cell borders.
`loading`	`boolean`	no	`false`	Show loading overlay.
`enableRowExpansion`	`boolean`	no	`false`	Show row expansion column.
`renderExpandedContent`	`(row) => ReactNode`	no	—	Required when row expansion is enabled.
`getRowId`	`(row, index, parent?) => string`	no	index	Stable row ID source.

See data-table.tsx for the full list (16 props).

Column `meta`

Field	Applied by `DataTable`	Description
`align`	yes	`left` \| `center` \| `right` on cells

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

`AlertConfirmationModal`

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

agent-ready

Prop	Type	Default	Description
`devices`	`Device[][] \| undefined`	-	Devices payload powering the "Current `Alerts`" table. Mirrors the API response shape of `useGetListThingsQuery({ ... alerts query })`.
`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 source app.
`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`	-	-

Prop	Type	Required	Default	Description
`title`	`React.ReactNode`	✓	-	-
`subtitle`	`React.ReactNode`		-	-
`className`	`string \| undefined`		-	-

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`		-	-

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 boolean specifying if the row is selected. The default row ID is the index. This can be changed using `getRowId` prop
`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 pagination is managed internally.
`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 boolean specifying if the row is selected. The default row ID is the index. This can be changed using `getRowId` prop
`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-activatable with Enter/Space). Clicks originating from an interactive control in the row (button, link, input, checkbox, or anything marked `data-no-row-click`) are ignored, so the selection checkbox and expand toggle keep working independently.

Table Components

Show installation steps

On this page