Data display components

Components for displaying data in tables, badges, tags, and other visual formats.

Data table

The DataTable component is a full-featured data table built on TanStack Table with sorting, pagination, and row selection.

Import

import { DataTable } from '@mdk/core'

// Types for column definitions
import type {
  DataTableColumnDef,
  DataTableSortingState,
  DataTablePaginationState,
  DataTableRowSelectionState,
} from '@mdk/core'

Basic usage

import { DataTable } from '@mdk/core'
import type { DataTableColumnDef } from '@mdk/core'

type Miner = {
  id: string
  name: string
  hashrate: number
  status: string
}

const columns: DataTableColumnDef<Miner>[] = [
  {
    accessorKey: 'name',
    header: 'Name',
  },
  {
    accessorKey: 'hashrate',
    header: 'Hashrate',
    cell: ({ row }) => `${row.original.hashrate} TH/s`,
  },
  {
    accessorKey: 'status',
    header: 'Status',
  },
]

function MinersTable() {
  return <DataTable columns={columns} data={miners} />
}

With sorting and pagination

const [sorting, setSorting] = useState<DataTableSortingState>([])
const [pagination, setPagination] = useState<DataTablePaginationState>({
  pageIndex: 0,
  pageSize: 10,
})

<DataTable
  columns={columns}
  data={miners}
  sorting={sorting}
  onSortingChange={setSorting}
  pagination={pagination}
  onPaginationChange={setPagination}
/>

With row selection

const [rowSelection, setRowSelection] = useState<DataTableRowSelectionState>({})

<DataTable
  columns={columns}
  data={miners}
  rowSelection={rowSelection}
  onRowSelectionChange={setRowSelection}
  enableRowSelection
/>

Styling

.mdk-data-table: Root container
.mdk-data-table__header: Header row
.mdk-data-table__body: Table body
.mdk-data-table__row: Data row
.mdk-data-table__cell: Table cell

Badge

Numeric or status badge that can wrap content or stand alone.

Import

import { Badge } from '@mdk/core'

Props

Prop	Type	Default	Description
`count`	`number`	`0`	Number to display
`overflowCount`	`number`	`99`	Max count before showing "99+"
`showZero`	`boolean`	`false`	Show badge when count is 0
`dot`	`boolean`	`false`	Show as dot instead of number
`text`	`string`	none	Custom text content
`color`	`ColorVariant`	`'primary'`	Badge color
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Badge size
`status`	`'success' \| 'processing' \| 'error' \| 'warning' \| 'default'`	none	Status variant
`square`	`boolean`	`false`	Square badge (no border-radius)
`offset`	`[number, number]`	`[0, 0]`	Position offset [x, y]

Basic usage

// Number badge on content
<Badge count={5}>
  <Button>Messages</Button>
</Badge>

// Overflow
<Badge count={100} overflowCount={99}>
  <BellIcon />
</Badge>
// Shows "99+"

Dot badge

<Badge dot>
  <NotificationIcon />
</Badge>

Status badge

<Badge status="success" text="Online" />
<Badge status="error" text="Offline" />
<Badge status="processing" text="Syncing" />
<Badge status="warning" text="Warning" />

Standalone badge

<Badge count={25} />
<Badge text="NEW" color="primary" square />

Styling

.mdk-badge: Badge element
.mdk-badge--{color}: Color variant
.mdk-badge--{size}: Size variant
.mdk-badge--dot: Dot variant
.mdk-badge--status: Status variant
.mdk-badge-wrapper: Wrapper when wrapping content

Pagination

Page navigation with size selector.

Import

import { Pagination } from '@mdk/core'

Props

Prop	Type	Default	Description
`current`	`number`	`1`	Current page number
`total`	`number`	`0`	Total number of items
`pageSize`	`number`	`20`	Items per page
`pageSizeOptions`	`number[]`	`[10, 20, 50, 100]`	Page size options
`showSizeChanger`	`boolean`	`true`	Show page size dropdown
`showTotal`	`boolean`	`false`	Show total count text
`disabled`	`boolean`	`false`	Disable pagination
`size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Size variant
`onChange`	`function`	none	Page/size change callback

Basic usage

const [page, setPage] = useState(1)
const [pageSize, setPageSize] = useState(20)

<Pagination
  current={page}
  total={500}
  pageSize={pageSize}
  onChange={(newPage, newSize) => {
    setPage(newPage)
    setPageSize(newSize)
  }}
/>

With total display

<Pagination
  current={1}
  total={100}
  pageSize={20}
  showTotal
/>
// Shows "1-20 of 100"

Styling

.mdk-pagination: Root container
.mdk-pagination__pages: Page buttons container
.mdk-pagination__button: Navigation button
.mdk-pagination__button--active: Active page
.mdk-pagination__total: Total count text
.mdk-pagination__size-changer: Page size select

Tag

Removable tag/chip component.

Import

import { Tag } from '@mdk/core'

Basic usage

<Tag>Default Tag</Tag>
<Tag color="primary">Primary</Tag>
<Tag color="success">Success</Tag>
<Tag onClose={() => handleRemove()}>Removable</Tag>

Avatar

User avatar display component.

Import

import { Avatar } from '@mdk/core'

Basic usage

<Avatar src="/user.jpg" alt="User" />
<Avatar>JD</Avatar>
<Avatar src="/user.jpg" size="lg" />

Skeleton

Loading placeholder animation.

Import

import { Skeleton } from '@mdk/core'

Basic usage

// Text skeleton
<Skeleton className="h-4 w-48" />

// Circle skeleton
<Skeleton className="h-12 w-12 rounded-full" />

// Card skeleton
<Card>
  <Card.Body>
    <Skeleton className="h-4 w-full mb-2" />
    <Skeleton className="h-4 w-3/4" />
  </Card.Body>
</Card>

Hover tooltip for additional information.

Import

import { Tooltip } from '@mdk/core'

Basic usage

<Tooltip content="This is helpful information">
  <Button>Hover me</Button>
</Tooltip>

Additional data display components

Component	Description
`Breadcrumbs`	Navigation breadcrumb trail
`Typography`	Text styling component
`Indicator`	Status dot indicator
`Spinner`	Loading spinner animation
`Loader`	Loading indicator
`Progress`	Progress bar (Radix-based)

Data display components

On this page