Data List

Component to display list of data.

Basic Usage

Service Number

S-117

Rank

Master Chief Petty Officer

Class

SPARTAN-II

Operations

Name

Location

TALON

Eridanus Secundus

PHALANX

Circinius IV

SWITCHBACK

[REDACTED]

HORIZON

Cascade

WARM BLANKET

Ascon

IRON FIST

Miridem

OCEAN BREAKER

Sigma Octanus IV

FIRST STRIKE

Tau Ceti

<script setup>
import { DataList } from '@8ctavio/vergil/components'
</script>

<template>
    <DataList :data="{
		'Service Number': '((S-117))',
		'Rank': 'Master Chief Petty Officer',
		'Class': 'SPARTAN-II',
		'Operations': [
			['Name', 'Location'],
			['TALON', 'Eridanus Secundus'],
			['PHALANX', 'Circinius IV'],
			['SWITCHBACK', '[REDACTED]'],
			['HORIZON', 'Cascade'],
			['WARM BLANKET', 'Ascon'],
			['IRON FIST', 'Miridem'],
			['OCEAN BREAKER', 'Sigma Octanus IV'],
			['FIRST STRIKE', 'Tau Ceti'],
		]
	}"/>
</template>

Props

Data

data: Record<string, string | string[][]>

MiniMarkup

The data object key-value pairs are displayed as the DataList labels and values. Badges and simple tables can also be displayed.

String data values can be displayed as badges if wrapped with the following Markdown-like tags: [[<value>]] or ((<value>)). The latter form displays the badge with radius="full".

To display a table, a data property must be an array of string arrays (string[][]). Each string array represents a table row while each string array item represents a table cell.

API Reference

Props

prop	type	default
data	Record<string, string | string[][]>
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'
spacing	'' | 'compact' | 'extended'	''

Configuration options

Datalist's configuration options allow to overwrite some Datalist props' default values and may be overwritten under the datalist root-level configuration option.

datalist.<option>	type	default	global
theme	theme		✅
size	size		✅
radius	radius		✅
spacing	spacing		✅

Anatomy

<div.data-list/>

<template v-for="(value,key) in data"/>

<label.data-list-label/>

<p.data-list-value/>

<Badge.badge/>

<div.data-list-table/>

<template v-for="row of rows"/>

<div.data-list-table-row.data-list-table-head/>

<p v-for="cell of row"/>

<div.data-list-table-row/>

<p v-for="cell of row"/>