NUI / Components / Scroll, Lists & Data

ListView

ImplementedScroll, Lists & Data

ListView displays repeated data entries in a vertical list.

Supported as a data-driven list.

Overview

ListView displays repeated data entries in a vertical list.

When to use

Inventories.
Settings lists.
Player lists.
Quest lists.
Other repeated data.

Children

Uses data/template fields instead of normal children.

Basic syntax

nui

ListView InventoryList {
    items: "wood|Wood|1;stone|Stone|2"
}

Supported properties

Property	Type	Required	Default	Description
`items`	string	No	Empty	Inline item data.
`dataSource`	string	No	Empty	Named external data source.
`itemKey`	string	No	Empty	Field or static key binding.
`itemText`	string	No	Empty	Field or static display text binding.
`itemValue`	string	No	Empty	Field or static value binding.
`itemCommand`	string	No	Empty	Command when an item is used or selected.
`selectedKey`	string	No	Empty	Initially selected item key.
`selectionMode`	enum	No	single	Selection mode.
`entryHeight`	number	No	Default	Entry height.
`virtualized`	bool	No	true	Enables virtualization.
`recycleEntries`	bool	No	true	Reuses entry widgets.
`overscan`	number	No	Default	Extra entries around viewport.
`scrollBarVisibility`	enum	No	auto	Scrollbar visibility.
`gap`	number	No	0	Space between entries.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

ListView may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. It does not support normal authored child nodes.

Full syntax example

nui

ListView InventoryList {
    items: "wood|Wood|1;stone|Stone|2"
    itemKey: "id"
    itemText: "name"
    itemValue: "count"
    itemCommand: "SelectItem"
    selectedKey: "stone"
    selectionMode: single
    entryHeight: 36
    virtualized: true
    recycleEntries: true
    overscan: 2
    scrollBarVisibility: auto
    gap: 4
    width: 320
    height: 240
    visible: true
}

Limitations

Normal children { ... } blocks are not public syntax for this component.
Drag and drop should not be documented as currently supported.