AdaptiveField

interface AdaptiveField<T extends Record<string, unknown>> {
  key: keyof T & string
  label: string
  type?: AdaptiveFieldType
  format?: (value: unknown, item: T) => string
  sortable?: boolean
  filterable?: boolean
  align?: 'start' | 'center' | 'end'
  width?: string | number
  hideOnDesktop?: boolean
  mobile?: AdaptiveFieldMobile
}

type AdaptiveFieldType =
  | 'text' | 'number' | 'currency' | 'date' | 'datetime'
  | 'boolean' | 'chip' | 'avatar' | 'password'

interface AdaptiveFieldMobile {
  role: AdaptiveFieldRole
  order?: number
  showLabel?: boolean
  block?: boolean
}

type AdaptiveFieldRole = 'title' | 'subtitle' | 'body' | 'hidden'

Property	Type	Default	Description
key	keyof T & string	—	The property read from each item.
label	string	—	Column header on desktop, field label on mobile.
type	AdaptiveFieldType	'text'	Picks the default formatter.
format	(value, item) => string	—	Custom formatter, wins over type.
sortable	boolean	true	Desktop only, wired to createDataTable sorting.
filterable	boolean	true	Desktop only, wired to createDataTable filtering.
align	'start' | 'center' | 'end'	'start'	Desktop cell alignment, ignored on mobile.
width	string | number	—	Desktop column width, ignored on mobile.
hideOnDesktop	boolean	false	Drops the field from the table, keeps it on mobile.
mobile.role	AdaptiveFieldRole	'body'	See below. 'hidden' drops the field from mobile, keeps it on the table.
mobile.order	number	—	Order among fields sharing the same role.
mobile.showLabel	boolean	false	Prefixes the value with the field label on mobile.
mobile.block	boolean	false	Gives the field its own line on mobile instead of wrapping with the others.

mobile.role

Decides where a field lands on the mobile layout, in both mobile modes:

• 'title' and 'subtitle' are singletons — the first field tagged with each role wins, any extra title/subtitle fields fall back to body. They form the always-visible summary.
• 'body' fields render below the summary in card mode, or behind the expand toggle in list mode.
• 'hidden' drops the field from mobile entirely, keeping it desktop-only — the inverse of hideOnDesktop.
• A field with no mobile entry defaults to 'body'.

type and formatting

type selects a built-in formatter (formatFieldValue — locale-aware number/currency/date formatting, Yes/No for booleans, a masked placeholder for password). Pass format when the default isn't enough; it always takes priority over type.