DataList

A flexible list with selection, details, and row actions.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { DataList } from '@vrum/ui';
import { DataListItem } from '@vrum/ui';

<DataList
  density={"default"}
  dividers={true}
  bordered={true}
>
  <DataListItem title="Atlas dashboard" description="Design · 8 milestones" expandable><p>Four milestones completed. Review scheduled for Friday.</p></DataListItem><DataListItem title="Workspace redesign" description="Engineering · 12 tasks" />
</DataList>

DataList props

Prop	Type	Default	Description
`density`	`"default" \| "compact" \| "comfortable"`	`"default"`	density configuration.
`dividers`	`boolean`	`true`	dividers configuration.
`bordered`	`boolean`	`false`	bordered configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

DataListItem props

Prop	Type	Default	Description
`title*`	`React.ReactNode`	none	Content heading.
`description`	`React.ReactNode`	none	Supporting explanation.
`visual`	`React.ReactNode`	none	visual configuration.
`actions`	`React.ReactNode`	none	actions configuration.
`selected`	`boolean`	none	selected configuration.
`onSelectedChange`	`((selected: boolean) => void)`	none	on selected change configuration.
`expandable`	`boolean`	`false`	expandable configuration.
`defaultExpanded`	`boolean`	`false`	default expanded configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

DataList

A flexible list with selection, details, and row actions.

Interactive playground

LIVE PREVIEW

Atlas dashboard

Design · 8 milestones

Workspace redesign

Engineering · 12 tasks

Loading preview…

Generated code

import { DataList } from '@vrum/ui';
import { DataListItem } from '@vrum/ui';

<DataList
  density={"default"}
  dividers={true}
  bordered={true}
>
  <DataListItem title="Atlas dashboard" description="Design · 8 milestones" expandable><p>Four milestones completed. Review scheduled for Friday.</p></DataListItem><DataListItem title="Workspace redesign" description="Engineering · 12 tasks" />
</DataList>

DataList props

Prop	Type	Default	Description
`density`	`"default" \| "compact" \| "comfortable"`	`"default"`	density configuration.
`dividers`	`boolean`	`true`	dividers configuration.
`bordered`	`boolean`	`false`	bordered configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

DataListItem props

Prop	Type	Default	Description
`title*`	`React.ReactNode`	none	Content heading.
`description`	`React.ReactNode`	none	Supporting explanation.
`visual`	`React.ReactNode`	none	visual configuration.
`actions`	`React.ReactNode`	none	actions configuration.
`selected`	`boolean`	none	selected configuration.
`onSelectedChange`	`((selected: boolean) => void)`	none	on selected change configuration.
`expandable`	`boolean`	`false`	expandable configuration.
`defaultExpanded`	`boolean`	`false`	default expanded configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

DataList

Interactive playground

Props

DataList props

DataListItem props

DataList

Interactive playground

Props

DataList props

DataListItem props