Display UI

Display components render model lists, timestamps, loading feedback, empty states, and table/pagination surfaces. Prefer `Data` for generated model lists and standalone helpers for local UI state.

Data

Namespace for generated model list and dashboard displays. `Data.ListContainer` is the main high-level component; lower-level helpers include `TableList`, `CardList`, `Pagination`, `Dashboard`, and `Insight`.

Props / API

Name	Type	Description
Data.ListContainer	{ slice, type?, columns?, actions?, tools? }	Feature-rich generated model list container.
Data.TableList	{ slice, columns, actions?, renderView? }	Table-style list wired to generated store state.
Data.Pagination	{ slice, className? }	Pagination control bound to generated slice page state.

Usage

RecentTime

Localized relative-time label with a tooltip containing the absolute date. It switches from relative labels to formatted dates after the configured break unit.

Props / API

Name	Type	Description
date	Date \| Dayjs \| null	Date value to render. Null renders nothing.
breakUnit	Intl.RelativeTimeFormatUnit	Unit where relative display stops and date formatting begins.
format	"auto" \| "full"	Automatic compact format or full date-time format.

Usage

Loading

Namespace of loading indicators for async UI: full-area overlays, buttons, inputs, progress bars, skeletons, and spinners.

Props / API

Name	Type	Description
Loading.Area	component	Absolute overlay for blocking a local area.
Loading.Skeleton	{ active?, className?, style? }	Skeleton placeholder for pending content.
Loading.Button	component	Button-friendly loading indicator.
Loading.Spin	component	Simple spinner.

Usage

Empty

Standard no-data state with a localized default description and optional content below the empty body.

Props / API

Name	Type	Description
description	ReactNode	Custom empty-state text. Defaults to localized `base.noData`.
minHeight	number	Minimum empty body height in pixels.
children	ReactNode	Optional follow-up action or explanation rendered below the empty state.

Usage

Table

Responsive table wrapper used by data-heavy screens. It supports column renderers, row click handlers, loading state, empty state, and optional `Pagination`.

Props / API

Name	Type	Description
columns	Column[]	Header/cell definitions with optional responsive visibility.
dataSource	unknown[]	Rows rendered by the table.
pagination	PaginationProps \| false	Pagination config or false to disable.
onRow	(record, index) => handlers	Factory for row events such as click navigation.

Usage

Pagination

Standalone page-number control. Use it when pagination state is local; use `Data.Pagination` when the state is generated from a model slice.

Props / API

Name	Type	Description
currentPage	number	Current 1-based page number.
total	number	Total item count.
itemsPerPage	number	Number of items per page.
onPageSelect	(page: number) => void	Called with the selected 1-based page number.

Usage

Display UI

Display components render model lists, timestamps, loading feedback, empty states, and table/pagination surfaces. Prefer `Data` for generated model lists and standalone helpers for local UI state.

Data

Props / API

Name	Type	Description
Data.ListContainer	{ slice, type?, columns?, actions?, tools? }	Feature-rich generated model list container.
Data.TableList	{ slice, columns, actions?, renderView? }	Table-style list wired to generated store state.
Data.Pagination	{ slice, className? }	Pagination control bound to generated slice page state.

Usage

RecentTime

Localized relative-time label with a tooltip containing the absolute date. It switches from relative labels to formatted dates after the configured break unit.

Props / API

Name	Type	Description
date	Date \| Dayjs \| null	Date value to render. Null renders nothing.
breakUnit	Intl.RelativeTimeFormatUnit	Unit where relative display stops and date formatting begins.
format	"auto" \| "full"	Automatic compact format or full date-time format.

Usage

Loading

Namespace of loading indicators for async UI: full-area overlays, buttons, inputs, progress bars, skeletons, and spinners.

Props / API

Name	Type	Description
Loading.Area	component	Absolute overlay for blocking a local area.
Loading.Skeleton	{ active?, className?, style? }	Skeleton placeholder for pending content.
Loading.Button	component	Button-friendly loading indicator.
Loading.Spin	component	Simple spinner.

Usage

Empty

Standard no-data state with a localized default description and optional content below the empty body.

Props / API

Name	Type	Description
description	ReactNode	Custom empty-state text. Defaults to localized `base.noData`.
minHeight	number	Minimum empty body height in pixels.
children	ReactNode	Optional follow-up action or explanation rendered below the empty state.

Usage

Table

Responsive table wrapper used by data-heavy screens. It supports column renderers, row click handlers, loading state, empty state, and optional `Pagination`.

Props / API

Name	Type	Description
columns	Column[]	Header/cell definitions with optional responsive visibility.
dataSource	unknown[]	Rows rendered by the table.
pagination	PaginationProps \| false	Pagination config or false to disable.
onRow	(record, index) => handlers	Factory for row events such as click navigation.

Usage

Pagination

Standalone page-number control. Use it when pagination state is local; use `Data.Pagination` when the state is generated from a model slice.

Props / API

Name	Type	Description
currentPage	number	Current 1-based page number.
total	number	Total item count.
itemsPerPage	number	Number of items per page.
onPageSelect	(page: number) => void	Called with the selected 1-based page number.

Usage