DescriptionList

Widget Description List is a UI component that displays a structured list of labeled data pairs (key-value), typically used to show detailed information about an entity in a clear and organized way.

Demo

Table view

Name	Іван Петренко
Email	ivan@example.com
Role	Administrator
Last Login	1 квітня 2025 р. о 12:34
Department	IT Department
Phone	+380 44 123 4567
Location	Kyiv, Ukraine
Status	Active

Grid view

Name

Іван Петренко

Email

ivan@example.com

Role

Administrator

Last Login

1 квітня 2025 р. о 12:34

Department

IT Department

Phone

+380 44 123 4567

Location

Kyiv, Ukraine

Status

Active

Usage

<DescriptionListWidget :items="descriptionItems" view="table" />

<DescriptionListWidget view='grid'>
  <DescriptionItem label="Author" value="user_name"/>
</DescriptionListWidget>

interface IDescriptionList {
  title?: string;                // optional section title
  items: IDescriptionItem[];
  view?: 'list' | 'table' | 'grid';  // overall view mode for the list
}

interface IDescriptionItem {
  id?: string;           // optional unique ID
  label: string;         // display name
  value: string | number | boolean | Date;
  icon?: string;         // optional icon (for UI)
  tooltip?: string;      // hover info
  keywords?: string[];   // for search/filter
  type?: 'text' | 'link' | 'date' | 'status' | 'custom';
  view?: 'inline' | 'block' | 'badge';  // UI presentation style
}

Key features:

• Several types of lists / view
• Formatting elements: badge, link / view
• Formatting data: date, array, bool, number
• Shows labels alongside their corresponding values.
• Supports different view modes (e.g., inline, block, badge).
• Can include icons, tooltips, and short descriptions for extra context.
• Useful for metadata display, details panels, or summary views.
• Often supports filtering and searching by keywords.

Common use cases:

• Displaying file or product details.
• User profile information.
• Order summaries in e-commerce.
• Admin panels with configuration settings.