Data List

A component for displaying key-value pairs in a structured list format.

Anatomy

<script>
  import {
    DataList,
    DataListItem,
    DataListItemLabel,
    DataListItemValue,
  } from "@saas-ui/svelte/components/data-list";
</script>

<DataList.Root>
  <DataList.Item>
    <DataList.ItemLabel>Status</DataList.ItemLabel>
    <DataList.ItemValue>Active</DataList.ItemValue>
  </DataList.Item>
  <DataList.Item>
    <DataList.ItemLabel>Created</DataList.ItemLabel>
    <DataList.ItemValue>Jan 1, 2024</DataList.ItemValue>
  </DataList.Item>
</DataList.Root>

Examples

Basic Accessibility

Basic DataList displaying stats with label-value pairs.

<DataList.Root>
	{#each stats as item}
		<DataList.Item>
			<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
			<DataList.ItemValue>{item.value}</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

Orientation Accessibility

Use the orientation prop to control how labels and values are arranged within each item. The default horizontal orientation displays the label and value side-by-side.

<DataList.Root orientation="horizontal">
	{#each stats as item}
		<DataList.Item>
			<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
			<DataList.ItemValue>{item.value}</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

Sizes Accessibility

Use the size prop on DataList.Root to change the size. Available sizes: sm, md, lg.

<VStack align="start" gap={4}>
	{#each dataListSizes as size}
		<HStack gap={4} class="items-center">
			<Text size="xs" class="min-w-[3ch]">{size}</Text>
			<DataList.Root {size}>
				<DataList.Item>
					<DataList.ItemLabel>Name</DataList.ItemLabel>
					<DataList.ItemValue>John Doe</DataList.ItemValue>
				</DataList.Item>
			</DataList.Root>
		</HStack>
	{/each}
</VStack>

Vertical Accessibility

Set orientation to vertical to stack the label above the value within each item.

<DataList.Root orientation="vertical">
	{#each stats.slice(0, 2) as item}
		<DataList.Item>
			<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
			<DataList.ItemValue>{item.value}</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

With Divider Accessibility

Use the divider prop to add separators between items.

<DataList.Root orientation="horizontal" divider class="max-w-md">
	{#each items as item (item.label)}
		<DataList.Item>
			<DataList.ItemLabel>{item.label}</DataList.ItemLabel>
			<DataList.ItemValue>{item.value}</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

Props

Prop	Type	Default	Description
`size`	`sm \| md \| lg`	`md`	The size of the component.
`orientation`	`vertical \| horizontal`	`horizontal`	-
`divider`	`boolean`	`false`	-
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`class`	`text`	-	Additional CSS classes to apply.
`children`	`any`	-	The content to be rendered inside the component.