TxDataGrid · Vue · tecexpress

Datentabelle mit Einspaltensortierung, UND-Textfiltern, Pagination, Auswahl und eigenen Zellen.

Prop	Typ	Standard	Bedeutung
`dataSource`	`TxSource<DataRow> \| undefined`	`[]`	Liste, Konfiguration oder DataSource-Instanz; hat Vorrang vor items.
`keyExpr`	`string \| undefined`	`id`	Feld für den stabilen Datensatzschlüssel.
`columns`	`Column[] \| undefined`	`undefined`	Spalten- beziehungsweise Kartenfeldkonfigurationen.
`filterRow`	`boolean \| { visible: boolean; } \| undefined`	`true`	Zeigt die Textfilterzeile.
`pageSize`	`number \| undefined`	`10`	Anzahl Datensätze je Seite.
`pageIndex`	`number \| undefined`	`undefined`	Nullbasierter Seitenindex.
`selection`	`"none" \| "single" \| "multiple" \| { mode: "none" \| "single" \| "multiple"; } \| undefined`	`none`	Auswahlmodus.
`selectedRowKeys`	`RowKey[] \| undefined`	`undefined`	Kontrollierte Menge ausgewählter Zeilenschlüssel.
`loading`	`boolean \| undefined`	`false`	Zeigt den Ladezustand.
`disabled`	`boolean \| undefined`	`false`	Sperrt die Interaktion.
`noDataText`	`string \| undefined`	`Keine Daten vorhanden.`	Text bei leerem Datenbestand.
`label`	`string \| undefined`	`Datentabelle`	Beschriftung beziehungsweise zugänglicher Name.

Ereignisse

Event	Payload / Verhalten
rowClick	RowClickEvent: data, key, rowIndex, event.
selectionChanged	Neue Auswahl: { selectedRowKeys, selectedRowsData }.
update:selectedRowKeys	Neuer Wert von selectedRowKeys; über v-model:selectedRowKeys übernehmen (modelValue: v-model).
update:pageIndex	Neuer Wert von pageIndex; über v-model:pageIndex übernehmen (modelValue: v-model).
sortChanged	Aktueller SortDescriptor oder null.
filterChanged	Aktuelle Textfilter als Record<string, string>.

Slots

Slot	Argumente
default	TxColumn[]
[cellTemplate]	{ data, value, column, rowIndex }

vue

<script setup lang="ts">
import { TxDataGrid, TxColumn } from '@tekocloud.de/tecexpress'
import '@tekocloud.de/tecexpress/themes/index.css'
const rows = [{ id: 1, name: 'Alex' }]
</script>

<template>
  <TxDataGrid :data-source="rows" key-expr="id">
    <TxColumn data-field="name" caption="Name" />
  </TxDataGrid>
</template>

TxDataGrid.