TxList · Vue · tecexpress

List with search, selection and optional deletion or reordering through events.

Prop	Type	Default	Meaning
`items`	`TxEntry[] \| undefined`	`[]`	Entries; replaced by dataSource when bound.
`dataSource`	`TxSource<TxEntry> \| undefined`	`undefined`	List, configuration or DataSource instance; takes precedence over items.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`label`	`string \| undefined`	`undefined`	Label or accessible name.
`modelValue`	`unknown[] \| undefined`	`[]`	Controlled v-model value.
`selectionMode`	`string \| undefined`	`none`	Selection mode.
`searchEnabled`	`boolean \| undefined`	`false`	Enables searching.
`grouped`	`boolean \| undefined`	`false`	Displays loaded entries by group.
`allowDeleting`	`boolean \| undefined`	`false`	Shows list entry delete actions.
`allowReordering`	`boolean \| undefined`	`false`	Shows list entry reorder actions.
`virtual`	`boolean \| undefined`	`false`	Renders only the visible list region.
`itemHeight`	`number \| undefined`	`44`	Fixed row height for virtual lists.
`height`	`number \| undefined`	`300`	Height; Vue numbers use pixels, Flutter uses logical pixels.

Events

Event	Payload / behavior
update:modelValue	New modelValue value; accept using v-model:modelValue (modelValue: v-model).
itemClick	{ itemData, itemIndex }
itemDeleted	Deleted list entry in { itemData }.
itemReordered	Reordering as { itemData, fromIndex, toIndex, items }; items contains the new list.

Slots

Slot	Arguments
item	{ item, index, selected }

vue

<script setup lang="ts">
import { TxList } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'

</script>

<template>
  <TxList :items="[{ id: 1, text: 'One' }]" search-enabled />
</template>

TxList.