Skip to main content

​
Components

​
AxTable

A feature-rich data table built on Ant Design Table with row state management, responsive column hiding, and automatic mobile card layouts. 
import AxTable from "axmed-design-system"
import type { AxTableProps } from "axmed-design-system"

​
Props

Extends all Ant Design Table props.
​
rowStates
Record<string | number, AxTableRowState>
Visual state per row key. Maps each row’s unique identifier to its display state.
  • "selected" — blue-25 background + blue-600 left border accent
  • "disabled" — reduced opacity + no pointer events
Example:
rowStates={{ "1": "selected", "2": "selected", "3": "disabled" }}
​
headerBg
string
default:"#FAFAFA"
Override the header background color. Pass any CSS color value or design token.
​
mobileLayout
'scroll' | 'cards'
default:"'cards'"
Layout behavior on mobile (< 576px):
  • "cards" — each row renders as a stacked card with expand/collapse
  • "scroll" — horizontal scroll table
​
autoResponsive
boolean
default:true
Automatically hide middle columns as the viewport shrinks. First and last columns always stay visible. Middle columns are progressively hidden right-to-left across xl → lg → md breakpoints.Columns with explicit responsive or fixed props are left untouched.
​
mobilePageSize
number
default:5
Page size used when the mobile card view is active. Overrides the regular pagination pageSize on small screens to keep the card list manageable.

​
Type Definitions

/**
 * Visual state applied to a row.
 * - `selected`  → blue-25 background + blue-600 left border accent
 * - `disabled`  → reduced opacity + no pointer events
 */
export type AxTableRowState = "selected" | "disabled"

export type AxTableProps<RecordType extends AnyObject = AnyObject> = {
  rowStates?: Record<string | number, AxTableRowState>
  headerBg?: string
  mobileLayout?: "scroll" | "cards"
  autoResponsive?: boolean
  mobilePageSize?: number
} & AntTableProps<RecordType>

​
Usage

import AxTable from "axmed-design-system"
import type { ColumnsType } from "antd/es/table"

interface Medication {
  key: string
  name: string
  status: "In Stock" | "Low Stock" | "Out of Stock"
  unitPrice: number
}

const columns: ColumnsType<Medication> = [
  { title: "Medication", dataIndex: "name", key: "name" },
  { title: "Status", dataIndex: "status", key: "status" },
  { title: "Price", dataIndex: "unitPrice", key: "unitPrice", align: "right" },
]

const data: Medication[] = [
  { key: "1", name: "Amoxicillin", status: "In Stock", unitPrice: 0.45 },
  { key: "2", name: "Ibuprofen", status: "Low Stock", unitPrice: 0.18 },
]

function InventoryTable() {
  return (
    <AxTable<Medication>
      columns={columns}
      dataSource={data}
      rowStates={{ "1": "selected" }}
      pagination={{ pageSize: 10 }}
    />
  )
}

​
Interactive Selection

const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])

const rowStates = selectedKeys.reduce((acc, key) => {
  acc[key] = "selected"
  return acc
}, {} as Record<string | number, AxTableRowState>)

<AxTable
  columns={columns}
  dataSource={data}
  rowStates={rowStates}
  rowSelection={{
    selectedRowKeys: selectedKeys,
    onChange: (keys) => setSelectedKeys(keys),
  }}
/>

​
AxTableSkeleton

Skeleton loader for tables with configurable columns and rows. 
import { AxTableSkeleton } from "axmed-design-system"
import type { AxTableSkeletonProps } from "axmed-design-system"

​
Props

​
rows
number
default:5
Number of body rows to render.
​
columns
number | SkeletonColumnConfig[]
default:5
Column structure:
  • number — N equal-width columns
  • SkeletonColumnConfig[] — per-column flex/width control
​
showHeader
boolean
default:true
Render a header skeleton row.
​
className
string
Additional class name for the root element.

​
Type Definitions

export type SkeletonColumnConfig = {
  /** Flex ratio for the column (default: 1) */
  flex?: number
  /** Fixed width — overrides flex when set */
  width?: string | number
}

export type AxTableSkeletonProps = {
  rows?: number
  columns?: number | SkeletonColumnConfig[]
  showHeader?: boolean
  className?: string
}

​
Usage

import { AxTableSkeleton } from "axmed-design-system"

// Simple: 5 equal columns, 8 rows
<AxTableSkeleton rows={8} columns={5} />

// Advanced: custom column widths
<AxTableSkeleton
  rows={10}
  columns={[
    { flex: 2 },        // 2x width
    { flex: 1 },        // 1x width
    { width: 120 },     // fixed 120px
    { flex: 1 },
  ]}
/>

​
AxDeadlineCell

Table cell that displays deadline countdown with color-coded urgency states. 
import { AxDeadlineCell } from "axmed-design-system"
import type { AxDeadlineCellProps } from "axmed-design-system"

​
Props

​
deadline
Date | string | number
required
The deadline date. Accepts a Date object, ISO string, or any value parseable by new Date().
​
urgentDays
number
default:7
Days remaining below which the cell turns red (urgent).
​
warningDays
number
default:14
Days remaining below which the cell turns orange (warning).
​
className
string
Additional class name.
​
style
React.CSSProperties
Inline styles.

​
Type Definitions

export type AxDeadlineCellProps = {
  deadline: Date | string | number
  urgentDays?: number
  warningDays?: number
  className?: string
  style?: React.CSSProperties
}

​
Usage

import { AxDeadlineCell } from "axmed-design-system"
import type { ColumnsType } from "antd/es/table"

const columns: ColumnsType<Order> = [
  {
    title: "Deadline",
    dataIndex: "deadline",
    key: "deadline",
    render: (deadline: string) => (
      <AxDeadlineCell 
        deadline={deadline}
        urgentDays={7}
        warningDays={14}
      />
    ),
  },
]

​
Visual States

  • Overdue — Red with warning icon: “5d overdue”
  • Urgent (≤7 days) — Red with clock icon: “3d left”
  • Warning (≤14 days) — Orange with clock icon: “10d left”
  • OK (>14 days) — Default color with clock icon: “25d left”
  • Due today — Special label: “Due today”

​
AxPriceCell

Table cell for displaying formatted prices with optional tier labels. 
import { AxPriceCell } from "axmed-design-system"
import type { AxPriceCellProps } from "axmed-design-system"

​
Props

​
amount
number
required
The numeric amount to format.
​
currency
string
default:"USD"
ISO 4217 currency code (e.g., “USD”, “EUR”, “KES”).
​
locale
string
default:"en-US"
BCP 47 locale used for number formatting (e.g., “en-US”, “en-GB”, “sw-KE”).
​
tier
string
Optional tier or label rendered below the price (e.g., “Tier 1”, “Best Price”). Use to surface pricing context in competitive bid tables.
​
tierHighlighted
boolean
default:false
Whether the tier label should be highlighted (e.g., lowest bid).
​
compact
boolean
default:false
Use compact notation for large numbers (e.g., 1.2Minsteadof1.2M instead of 1,200,000).
​
unit
string
Per-unit label appended after the price (e.g., ”/ unit”, ”/ pack”).
​
className
string
Additional class name.
​
style
React.CSSProperties
Inline styles.

​
Type Definitions

export type AxPriceCellProps = {
  amount: number
  currency?: string
  locale?: string
  tier?: string
  tierHighlighted?: boolean
  compact?: boolean
  unit?: string
  className?: string
  style?: React.CSSProperties
}

​
Usage

import { AxPriceCell } from "axmed-design-system"
import type { ColumnsType } from "antd/es/table"

const columns: ColumnsType<Bid> = [
  {
    title: "Price",
    dataIndex: "price",
    key: "price",
    align: "right",
    render: (price: number, record) => (
      <AxPriceCell
        amount={price}
        currency="USD"
        unit="/ unit"
        tier={record.isLowest ? "Best Price" : undefined}
        tierHighlighted={record.isLowest}
      />
    ),
  },
]

// Compact notation for large amounts
<AxPriceCell amount={1200000} compact /> // "$1.2M"

// Different currency and locale
<AxPriceCell amount={5000} currency="KES" locale="sw-KE" />

Build docs developers (and LLMs) love

Get started for freeTalk to us