Components for presenting and organizing data including tables, lists, cards, images, and visualization elements. These components help display information in structured, accessible, and visually appealing ways.
Advanced data table with sorting, filtering, pagination, and selection capabilities.
/**
* Data table component with advanced features
*/
export function Table(props: TableProps): JSX.Element;
/**
* Table column definition component
*/
export function TableColumn(props: TableColumnProps): JSX.Element;
/**
* Table header component
*/
export function Thead(props: TheadProps): JSX.Element;
/**
* Table body component
*/
export function Tbody(props: TbodyProps): JSX.Element;
/**
* Table row component
*/
export function Tr(props: TrProps): JSX.Element;
/**
* Table header cell component
*/
export function Th(props: ThProps): JSX.Element;
/**
* Table data cell component
*/
export function Td(props: TdProps): JSX.Element;
// Table Types
interface TableProps {
columns?: TableColumnData[];
data?: TableData[];
bordered?: boolean | TableBorder;
hoverable?: boolean;
stripe?: boolean;
size?: Size;
tableLayoutFixed?: boolean;
loading?: boolean;
hideHeader?: boolean;
showHeader?: boolean;
pagination?: boolean | PaginationProps;
pagePosition?: 'tl' | 'top' | 'tr' | 'bl' | 'bottom' | 'br';
indent?: number;
rowSelection?: TableRowSelection;
expandable?: TableExpandable;
scroll?: { x?: number | string; y?: number | string };
sortable?: TableSortable;
filterable?: TableFilterable;
rowKey?: string | ((record: TableData) => string);
showSorterTooltip?: boolean;
virtualListProps?: Record<string, any>;
spanMethod?: (data: { record: TableData; column: TableColumnData; rowIndex: number; columnIndex: number }) => { rowspan?: number; colspan?: number } | void;
onChange?: (data: TableData[], extra: TableChangeExtra, currentData: TableData[]) => void;
onPageChange?: (page: number) => void;
onPageSizeChange?: (pageSize: number) => void;
onSorterChange?: (dataIndex: string, direction: string) => void;
onFilterChange?: (dataIndex: string, filteredValues: string[]) => void;
onRowClick?: (record: TableData, event: Event) => void;
onRowDblclick?: (record: TableData, event: Event) => void;
onRowContextmenu?: (record: TableData, event: Event) => void;
onSelect?: (rowKeys: (string | number)[], rowKey: string | number, record: TableData) => void;
onSelectAll?: (selected: boolean, selectedRows: TableData[], changeRows: TableData[]) => void;
onSelectionChange?: (rowKeys: (string | number)[]) => void;
}
interface TableColumnData {
dataIndex?: string;
title?: string;
width?: number | string;
align?: 'left' | 'center' | 'right';
fixed?: 'left' | 'right';
ellipsis?: boolean;
tooltip?: boolean | Record<string, any>;
sortable?: TableSortable;
filterable?: TableFilterable;
children?: TableColumnData[];
cellClass?: string | ((record: TableData, column: TableColumnData) => string);
headerCellClass?: string;
bodyCellClass?: string | ((record: TableData, column: TableColumnData) => string);
render?: (data: { record: TableData; column: TableColumnData; rowIndex: number }) => any;
slotName?: string;
titleSlotName?: string;
}
interface TableData {
[key: string]: any;
children?: TableData[];
}
interface TableRowSelection {
type?: 'checkbox' | 'radio';
selectedRowKeys?: (string | number)[];
defaultSelectedRowKeys?: (string | number)[];
showCheckedAll?: boolean;
title?: string;
width?: number | string;
onlyCurrent?: boolean;
checkStrictly?: boolean;
}
interface TableExpandable {
icon?: (expanded: boolean, record: TableData) => any;
title?: string;
width?: number | string;
expandedRowKeys?: (string | number)[];
defaultExpandedRowKeys?: (string | number)[];
defaultExpandAllRows?: boolean;
expandRowByClick?: boolean;
onExpand?: (rowKey: string | number, record: TableData) => void;
onExpandedRowsChange?: (rowKeys: (string | number)[]) => void;
}Flexible list display with customizable content and actions.
/**
* List container component
*/
export function List(props: ListProps): JSX.Element;
/**
* List item component
*/
export function ListItem(props: ListItemProps): JSX.Element;
/**
* List item metadata component
*/
export function ListItemMeta(props: ListItemMetaProps): JSX.Element;
// List Types
interface ListProps {
size?: Size;
bordered?: boolean;
split?: boolean;
loading?: boolean;
hoverable?: boolean;
pagination?: boolean | PaginationProps;
dataSource?: any[];
render?: (item: any, index: number) => any;
onReachBottom?: () => void;
onPageChange?: (page: number, pageSize: number) => void;
onPageSizeChange?: (pageSize: number) => void;
}
interface ListItemProps {
key?: string | number;
extra?: string;
actions?: any[];
}
interface ListItemMetaProps {
title?: string;
description?: string;
avatar?: string;
}Card containers for grouped content with headers, actions, and flexible layouts.
/**
* Card container component
*/
export function Card(props: CardProps): JSX.Element;
/**
* Card metadata component
*/
export function CardMeta(props: CardMetaProps): JSX.Element;
/**
* Card grid layout component
*/
export function CardGrid(props: CardGridProps): JSX.Element;
// Card Types
interface CardProps {
bordered?: boolean;
loading?: boolean;
hoverable?: boolean;
size?: Size;
title?: string;
extra?: string;
headerStyle?: Record<string, any>;
bodyStyle?: Record<string, any>;
actions?: any[];
}
interface CardMetaProps {
title?: string;
description?: string;
avatar?: string;
}
interface CardGridProps {
loading?: boolean;
hoverable?: boolean;
}Image display with preview, lazy loading, and error handling capabilities.
/**
* Image display component with preview capabilities
*/
export function Image(props: ImageProps): JSX.Element;
/**
* Image preview component
*/
export function ImagePreview(props: ImagePreviewProps): JSX.Element;
/**
* Image preview action component
*/
export function ImagePreviewAction(props: ImagePreviewActionProps): JSX.Element;
/**
* Image preview group component
*/
export function ImagePreviewGroup(props: ImagePreviewGroupProps): JSX.Element;
// Image Types
interface ImageProps {
src: string;
width?: string | number;
height?: string | number;
title?: string;
description?: string;
actions?: any[];
footerPosition?: 'inner' | 'outer';
simple?: boolean;
loader?: boolean;
preview?: boolean;
previewProps?: Record<string, any>;
placeholder?: string;
error?: string;
onLoad?: (event: Event) => void;
onError?: (event: Event) => void;
}
interface ImagePreviewProps {
src?: string;
visible?: boolean;
defaultVisible?: boolean;
maskClosable?: boolean;
closable?: boolean;
actionLayout?: string[];
actionsLayout?: string[];
onVisibleChange?: (visible: boolean, preVisible: boolean) => void;
}User avatar display with various shapes, sizes, and fallback options.
/**
* User avatar component
*/
export function Avatar(props: AvatarProps): JSX.Element;
/**
* Avatar group component
*/
export function AvatarGroup(props: AvatarGroupProps): JSX.Element;
// Avatar Types
interface AvatarProps {
shape?: 'circle' | 'square';
size?: Size | number;
autoFixFontSize?: boolean;
src?: string;
alt?: string;
onClick?: (event: Event) => void;
}
interface AvatarGroupProps {
size?: Size | number;
autoFixFontSize?: boolean;
maxCount?: number;
maxStyle?: Record<string, any>;
maxPopoverTriggerProps?: Record<string, any>;
}Components for showing status, progress, and statistical information.
/**
* Badge component for status indicators
*/
export function Badge(props: BadgeProps): JSX.Element;
/**
* Tag component for labels and categories
*/
export function Tag(props: TagProps): JSX.Element;
/**
* Progress indicator component
*/
export function Progress(props: ProgressProps): JSX.Element;
/**
* Statistical display component
*/
export function Statistic(props: StatisticProps): JSX.Element;
/**
* Countdown timer component
*/
export function Countdown(props: CountdownProps): JSX.Element;
// Status Types
interface BadgeProps {
count?: number;
maxCount?: number;
text?: string;
dot?: boolean;
dotClass?: string;
dotStyle?: Record<string, any>;
status?: Status;
color?: string;
offset?: [number, number];
}
interface TagProps {
color?: TagColor;
size?: Size;
visible?: boolean;
defaultVisible?: boolean;
loading?: boolean;
closable?: boolean;
checkable?: boolean;
defaultChecked?: boolean;
checked?: boolean;
bordered?: boolean;
onClose?: (event: Event) => void;
onCheck?: (checked: boolean, event: Event) => void;
}
type TagColor = 'red' | 'orangered' | 'orange' | 'gold' | 'lime' | 'green' |
'cyan' | 'blue' | 'arcoblue' | 'purple' | 'pinkpurple' |
'magenta' | 'gray';
interface ProgressProps {
type?: 'line' | 'circle' | 'mini-circle';
size?: Size | { width?: number; height?: number };
percent?: number;
color?: string | Record<string, string>;
trackColor?: string;
showText?: boolean;
formatText?: (percent: number) => string;
animation?: boolean;
buffer?: boolean;
bufferColor?: string;
width?: string | number;
strokeWidth?: number;
status?: 'success' | 'error' | 'warning' | 'normal';
}
interface StatisticProps {
title?: string;
value?: string | number;
format?: string;
extra?: string;
start?: boolean;
precision?: number;
separator?: string;
showGroupSeparator?: boolean;
animation?: boolean;
animationDuration?: number;
valueFrom?: number;
valueStyle?: Record<string, any>;
prefix?: string;
suffix?: string;
}Components for organizing and structuring content display.
/**
* Description list component
*/
export function Descriptions(props: DescriptionsProps): JSX.Element;
/**
* Description item component
*/
export function DescriptionsItem(props: DescriptionsItemProps): JSX.Element;
/**
* Empty state component
*/
export function Empty(props: EmptyProps): JSX.Element;
/**
* Timeline display component
*/
export function Timeline(props: TimelineProps): JSX.Element;
/**
* Timeline item component
*/
export function TimelineItem(props: TimelineItemProps): JSX.Element;
/**
* Typography container component
*/
export function Typography(props: TypographyProps): JSX.Element;
/**
* Typography title component
*/
export function TypographyTitle(props: TypographyTitleProps): JSX.Element;
/**
* Typography paragraph component
*/
export function TypographyParagraph(props: TypographyParagraphProps): JSX.Element;
/**
* Typography text component
*/
export function TypographyText(props: TypographyTextProps): JSX.Element;
// Content Organization Types
interface DescriptionsProps {
data?: DescData[];
column?: number | ResponsiveValue;
title?: string;
layout?: 'horizontal' | 'vertical' | 'inline-horizontal' | 'inline-vertical';
align?: Record<'label' | 'value', 'left' | 'center' | 'right'>;
size?: Size;
bordered?: boolean;
labelClass?: string;
labelStyle?: Record<string, any>;
valueClass?: string;
valueStyle?: Record<string, any>;
}
interface DescData {
label?: string;
value?: any;
span?: number;
}
interface EmptyProps {
description?: string;
image?: string;
imageStyle?: Record<string, any>;
}
interface TimelineProps {
reverse?: boolean;
direction?: 'horizontal' | 'vertical';
mode?: 'left' | 'right' | 'top' | 'bottom' | 'alternate';
pending?: boolean | string;
labelStyle?: Record<string, any>;
}
interface TimelineItemProps {
dotColor?: string;
dotType?: 'hollow' | 'solid';
lineType?: 'solid' | 'dashed' | 'dotted';
lineColor?: string;
label?: string;
labelStyle?: Record<string, any>;
position?: 'left' | 'right';
}
interface TypographyProps {
style?: Record<string, any>;
}
interface TypographyTitleProps {
heading?: 1 | 2 | 3 | 4 | 5 | 6;
bold?: boolean;
mark?: boolean | { color?: string };
underline?: boolean;
delete?: boolean;
code?: boolean;
disabled?: boolean;
type?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
ellipsis?: boolean | EllipsisConfig;
copyable?: boolean | Record<string, any>;
editable?: boolean | Record<string, any>;
}
interface EllipsisConfig {
rows?: number;
expandable?: boolean;
suffix?: string;
showTooltip?: boolean | Record<string, any>;
}Components with interactive features for enhanced user experience.
/**
* Carousel component for image/content rotation
*/
export function Carousel(props: CarouselProps): JSX.Element;
/**
* Carousel item component
*/
export function CarouselItem(props: CarouselItemProps): JSX.Element;
/**
* Collapsible panel component
*/
export function Collapse(props: CollapseProps): JSX.Element;
/**
* Collapse item component
*/
export function CollapseItem(props: CollapseItemProps): JSX.Element;
/**
* Tab container component
*/
export function Tabs(props: TabsProps): JSX.Element;
/**
* Tab pane component
*/
export function TabPane(props: TabPaneProps): JSX.Element;
// Interactive Display Types
interface CarouselProps {
autoPlay?: boolean;
moveSpeed?: number;
animationName?: 'slide' | 'fade';
trigger?: 'click' | 'hover';
direction?: 'horizontal' | 'vertical';
showArrow?: 'always' | 'hover' | 'never';
arrowClass?: string;
arrowStyle?: Record<string, any>;
indicatorType?: 'line' | 'dot' | 'slider' | 'never';
indicatorPosition?: 'bottom' | 'top' | 'left' | 'right' | 'outer';
indicatorClass?: string;
indicatorStyle?: Record<string, any>;
onChange?: (index: number, prevIndex: number, isManual: boolean) => void;
}
interface TabsProps {
activeKey?: string;
defaultActiveKey?: string;
position?: 'left' | 'right' | 'top' | 'bottom';
size?: Size;
type?: 'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule';
direction?: 'horizontal' | 'vertical';
editable?: boolean;
showAddButton?: boolean;
destroyOnHide?: boolean;
lazyLoad?: boolean;
justify?: boolean;
headerPadding?: boolean;
animation?: boolean;
onChange?: (key: string) => void;
onTabClick?: (key: string, event: Event) => void;
onAdd?: (event: Event) => void;
onDelete?: (key: string, event: Event) => void;
}
interface TabPaneProps {
key: string;
title: string;
disabled?: boolean;
closable?: boolean;
destroyOnHide?: boolean;
}Usage Examples:
<template>
<!-- Data table with selection and pagination -->
<a-table
:columns="columns"
:data="tableData"
:pagination="pagination"
:row-selection="rowSelection"
@change="handleTableChange"
/>
<!-- Card grid layout -->
<a-row :gutter="16">
<a-col v-for="item in cardData" :key="item.id" :span="8">
<a-card :title="item.title" hoverable>
<a-card-meta
:title="item.title"
:description="item.description"
/>
<template #actions>
<icon-heart />
<icon-edit />
<icon-delete />
</template>
</a-card>
</a-col>
</a-row>
<!-- Image gallery with preview -->
<a-image-preview-group>
<a-image
v-for="image in images"
:key="image.id"
:src="image.url"
:width="200"
:height="200"
fit="cover"
preview
/>
</a-image-preview-group>
<!-- Timeline display -->
<a-timeline>
<a-timeline-item
v-for="event in timelineEvents"
:key="event.id"
:dot-color="event.status === 'completed' ? 'green' : 'blue'"
>
<template #label>{{ event.date }}</template>
<div>{{ event.description }}</div>
</a-timeline-item>
</a-timeline>
</template>Calendar component for date display and selection with various modes and customization options.
/**
* Calendar component for date display and selection
*/
export function Calendar(props: CalendarProps): JSX.Element;
interface CalendarProps {
mode?: 'month' | 'year';
value?: string | Date;
defaultValue?: string | Date;
locale?: Record<string, any>;
dayStartOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
isDateDisabled?: (date: Date) => boolean;
headerRender?: (data: { value: Date; onChange: (date: Date) => void }) => any;
dateRender?: (data: { value: Date }) => any;
dateInnerContent?: (date: Date) => any;
monthRender?: (data: { value: Date }) => any;
panel?: boolean;
panelWidth?: string | number;
panelTodayBtn?: boolean;
onChange?: (date: Date) => void;
onPanelChange?: (date: Date) => void;
}Tree component for hierarchical data display with selection, checking, and drag-and-drop capabilities.
/**
* Tree component for hierarchical data display
*/
export function Tree(props: TreeProps): JSX.Element;
interface TreeProps {
size?: Size;
blockNode?: boolean;
multiple?: boolean;
checkable?: boolean;
selectable?: boolean;
checkStrictly?: boolean;
checkedStrategy?: 'all' | 'parent' | 'child';
defaultExpandAll?: boolean;
defaultExpandParent?: boolean;
defaultExpandedKeys?: (string | number)[];
expandedKeys?: (string | number)[];
defaultSelectedKeys?: (string | number)[];
selectedKeys?: (string | number)[];
defaultCheckedKeys?: (string | number)[];
checkedKeys?: (string | number)[];
data?: TreeNodeData[];
fieldNames?: TreeFieldNames;
showLine?: boolean;
loadMore?: (node: TreeNodeData) => Promise<void>;
draggable?: boolean;
allowDrop?: (options: { dropNode: TreeNodeData; dropPosition: number }) => boolean;
virtualListProps?: Record<string, any>;
onSelect?: (selectedKeys: (string | number)[], data: { selected?: boolean; selectedNodes: TreeNodeData[]; node?: TreeNodeData; event?: Event }) => void;
onCheck?: (checkedKeys: (string | number)[], data: { checked?: boolean; checkedNodes: TreeNodeData[]; node?: TreeNodeData; event?: Event, halfCheckedKeys: (string | number)[], halfCheckedNodes: TreeNodeData[] }) => void;
onExpand?: (expandedKeys: (string | number)[], data: { expanded?: boolean; expandedNodes: TreeNodeData[]; node?: TreeNodeData; event?: Event }) => void;
onDragStart?: (event: DragEvent, node: TreeNodeData) => void;
onDragEnd?: (event: DragEvent, node: TreeNodeData) => void;
onDragOver?: (event: DragEvent, node: TreeNodeData) => void;
onDragLeave?: (event: DragEvent, node: TreeNodeData) => void;
onDrop?: (data: { e: DragEvent, dragNode: TreeNodeData, dropNode: TreeNodeData, dropPosition: number }) => void;
}
interface TreeNodeData {
key?: string | number;
title?: string;
selectable?: boolean;
disabled?: boolean;
disableCheckbox?: boolean;
checkable?: boolean;
draggable?: boolean;
isLeaf?: boolean;
icon?: any;
switcherIcon?: any;
children?: TreeNodeData[];
}
interface TreeFieldNames {
key?: string;
title?: string;
disabled?: string;
children?: string;
isLeaf?: string;
disableCheckbox?: string;
checkable?: string;
}Comment display component for showing user comments and feedback.
/**
* Comment display component
*/
export function Comment(props: CommentProps): JSX.Element;
interface CommentProps {
author?: string;
avatar?: string;
content?: string;
datetime?: string;
actions?: any[];
align?: 'left' | 'right';
}// Instance types for template refs
export type TableInstance = InstanceType<typeof Table>;
export type ListInstance = InstanceType<typeof List>;
export type CardInstance = InstanceType<typeof Card>;
export type ImageInstance = InstanceType<typeof Image>;
export type AvatarInstance = InstanceType<typeof Avatar>;
export type BadgeInstance = InstanceType<typeof Badge>;
export type TagInstance = InstanceType<typeof Tag>;
export type ProgressInstance = InstanceType<typeof Progress>;
export type StatisticInstance = InstanceType<typeof Statistic>;
export type DescriptionsInstance = InstanceType<typeof Descriptions>;
export type EmptyInstance = InstanceType<typeof Empty>;
export type TimelineInstance = InstanceType<typeof Timeline>;
export type TypographyInstance = InstanceType<typeof Typography>;
export type CarouselInstance = InstanceType<typeof Carousel>;
export type CollapseInstance = InstanceType<typeof Collapse>;
export type TabsInstance = InstanceType<typeof Tabs>;
export type CalendarInstance = InstanceType<typeof Calendar>;
export type TreeInstance = InstanceType<typeof Tree>;
export type CommentInstance = InstanceType<typeof Comment>;