TxDataGrid · Vue · tecexpress

Data table with single-column sorting, AND text filters, paging, selection and custom cells.

Prop	Type	Default	Meaning
`dataSource`	`TxSource<DataRow> \| undefined`	`[]`	List, configuration or DataSource instance; takes precedence over items.
`keyExpr`	`string \| undefined`	`id`	Field containing the stable record key.
`columns`	`Column[] \| undefined`	`undefined`	Column or card field configurations.
`filterRow`	`boolean \| { visible: boolean; } \| undefined`	`true`	Shows the text filter row.
`pageSize`	`number \| undefined`	`10`	Records per page.
`pageIndex`	`number \| undefined`	`undefined`	Zero-based page index.
`selection`	`"none" \| "single" \| "multiple" \| { mode: "none" \| "single" \| "multiple"; } \| undefined`	`none`	Selection mode.
`selectedRowKeys`	`RowKey[] \| undefined`	`undefined`	Controlled set of selected row keys.
`loading`	`boolean \| undefined`	`false`	Shows the loading state.
`disabled`	`boolean \| undefined`	`false`	Disables interaction.
`noDataText`	`string \| undefined`	`Keine Daten vorhanden.`	Text for an empty collection.
`label`	`string \| undefined`	`Datentabelle`	Label or accessible name.

Events

Event	Payload / behavior
rowClick	RowClickEvent: data, key, rowIndex, event.
selectionChanged	New selection: { selectedRowKeys, selectedRowsData }.
update:selectedRowKeys	New selectedRowKeys value; accept using v-model:selectedRowKeys (modelValue: v-model).
update:pageIndex	New pageIndex value; accept using v-model:pageIndex (modelValue: v-model).
sortChanged	Current SortDescriptor or null.
filterChanged	Current text filters as Record<string, string>.

Slots

Slot	Arguments
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.