Spaltenkonfiguration des DataGrid; keine eigenständige Oberfläche.
| Prop | Typ | Standard | Bedeutung |
|---|---|---|---|
dataField | string | erforderlich | Feldname; muss im Grid eindeutig sein. |
caption | string | undefined | undefined | Sichtbare Feld-/Spaltenüberschrift. |
width | string | number | undefined | undefined | Breite; Vue-Zahlen in Pixeln, Flutter in logischen Pixeln. |
allowSorting | boolean | undefined | true | Erlaubt Sortierung dieser Spalte. |
allowFiltering | boolean | undefined | true | Erlaubt Filtern dieser Spalte. |
cellTemplate | string | undefined | undefined | Name des Vue-Slots für eigene Zellen. |
visible | boolean | undefined | true | Steuert die Sichtbarkeit. |
alignment | "center" | "left" | "right" | undefined | undefined | Ausrichtung des Inhalts. |
<script setup lang="ts">
import { TxColumn, TxDataGrid } 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" cell-template="nameCell" />
<template #nameCell="{ value }"><strong>{{ value }}</strong></template>
</TxDataGrid>
</template>