tuix-table

tuix-table zeichnet die Zeilen, die es bekommt. Es sortiert, filtert und schneidet sie nie von selbst.

Sortierung und Pagination sind gesteuert. Die Tabelle meldet, was der Nutzer angeklickt hat, und die Anwendung entscheidet, was danach passiert:

In der Tabelle bewegt sich nichts, bis der letzte Schritt läuft. Jedes Beispiel unten zeigt ihn in Angular, Vue und React.

Eine erste Tabelle

Zwei Properties genügen: headers beschreibt die Spalten, data hält die Zeilen.

const table = document.querySelector('tuix-table')
 
table.headers = [
    { name: 'ID', dataKey: 'id', width: 10 },
    { name: 'Rechnung', dataKey: 'name', width: 30 },
    {
        name: 'Status',
        dataKey: 'status',
        width: 20,
        cellColor: (row) => (row.status === 'Error' ? TextVariant.ERROR : TextVariant.SUCCESS),
    },
]
 
table.data = [{ id: 1, name: 'INV-2024-114', status: 'Success' }]

Spalten

Ein Objekt pro Spalte. Nötig sind nur dataKey und width.

interface IDataTableHeader<TRowData = Record<string, unknown>> {
    name?: string
    dataKey: keyof TRowData
    width: number
    isSlot?: boolean
    slotName?: string
    sortKey?: keyof TRowData
    cellColor?: (rowData: TRowData) => string | undefined
    cellBackgroundColor?: (rowData: TRowData) => string | undefined
}

Spaltenbreiten

width ist ein Gewicht, keine Pixelbreite. Die Breiten aller Spalten werden summiert und jede Spalte bekommt ihren Anteil, 10 / 30 / 20 und 1 / 3 / 2 ergeben also dasselbe Layout. Sind alle Breiten 0, teilen sich die Spalten den Platz gleichmässig.

Slot-Zellen

Mit isSlot: true druckt die Zelle <slot name="{slotName}-{row.id}"> statt eines Werts. Die id der Zeile steckt im Namen des Slots, jede Zelle hat also ihren eigenen:

Ein Slot nimmt so viele Elemente auf, wie die Zeile braucht. Das Beispiel legt ein Archivieren- und ein Benachrichtigen-Icon in jede Zelle. Die Framework-Tabs zeigen dasselbe Paar als @for-Block, als v-for und als map.

Sortieren

Die Tabelle zeichnet die Bedienelemente. Sortiert wird in der Anwendung.

Eine Spalte mit sortKey bekommt das Pfeilpaar, wird fokussierbar und reagiert auf einen Klick, auf Enter und auf die Leertaste. Unten ist jede Spalte sortierbar:

Die drei Schritte

table.headers = [{ name: 'Rechnung', dataKey: 'name', sortKey: 'name', width: 30 }]

table.addEventListener('sort', (event) => {
    const { sortKey, sortDirection } = event.detail
})

table.data = sortRows(rows, sortKey, sortDirection)
table.sortBy = sortKey
table.sortDirection = sortDirection

Die Zeilen sortieren

Array.prototype.sort sortiert an Ort und Stelle, also eine Kopie sortieren. Das neue Array ist auch das, was React, Vue und Angular zum Neuzeichnen brauchen:

const compare = (a: Invoice, b: Invoice, key: keyof Invoice) => {
    const left = a[key]
    const right = b[key]
    return typeof left === 'number' && typeof right === 'number'
        ? left - right
        : String(left).localeCompare(String(right))
}
 
const sortRows = (rows: Invoice[], sortKey: keyof Invoice, sortDirection: SortDirection) =>
    [...rows].sort((a, b) => (sortDirection === 'asc' ? 1 : -1) * compare(a, b, sortKey))

Ein paar Punkte dazu:

• Nach Typ vergleichen. Der Standardvergleich läuft über Text und stellt damit 10 vor 2. Zahlen subtrahieren, Text durch localeCompare schicken und Daten über ihre Zeitstempel vergleichen.
• Festlegen, wohin leere Werte fallen. Ein Feld, das null sein kann, braucht eine eigene Regel, damit diese Zeilen immer auf derselben Seite landen.
• Eine Spalte auf einmal. Das Detail trägt nie einen zweiten Key. Eine Ordnung über mehrere Spalten gehört dem eigenen Code, hinter demselben Event.
• Paginierte Tabellen sortieren den ganzen Satz, nicht die sichtbare Seite. Auf dem Server sortieren, die erste Seite der neuen Ordnung holen und currentPage zurück auf 1 setzen. Die Tabelle setzt sie nicht selbst zurück.
• sortBy erst setzen, wenn eine Spalte angeklickt wurde. Vorher ist kein Pfeil hervorgehoben und die Zeilen stehen so, wie sie übergeben wurden.

Pagination

Derselbe Vertrag wie beim Sortieren: die Fusszeile fragt, der eigene Code antwortet. Die Demo blättert durch 23 Zeilen.

table.addEventListener('next-page', (event) => {
    load(event.detail.page, event.detail.pageSize)
})

Die Pfeile stoppen bei der ersten und bei der letzten Seite, die die Tabelle aus totalItems und der Seitengrösse berechnet. Eine andere Seitengrösse verlangt immer Seite 1.

Laden

isLoadingData ersetzt die Zeilen durch einen Loader. Kopfzeile und Pagination-Fusszeile bleiben stehen, und die Auswahl der Seitengrösse ist deaktiviert:

loader bestimmt sein Aussehen, jedes Feld ist optional:

Verhalten auf kleinen Bildschirmen

disableMobileTable behält das Tabellenlayout in jeder Breite. Das Layout ist fest: eine Zelle, die überläuft, scrollt für sich statt umzubrechen, und die Tabelle scrollt seitwärts, wenn die Spalten ihr Minimum von 650px nicht mehr einhalten.

API

Properties

data, headers, pageSizeOptions und loader sind Array- und Objekt-Properties, ihre Attribute lesen also JSON (data='[{"id":1}]'). Nur die Property kann die Funktionen tragen, die eine Spalte haben kann, etwa cellColor.

Events

Alle vier steigen auf und überqueren die Shadow-Grenze, und alle vier tragen den Zustand, den die Tabelle verlangt:

TypeScript

TuixTableElement<TRowData> typisiert eine Referenz auf das Element mit all seinen Properties, genau das, was ein useRef oder ein querySelector braucht:

import type { TuixTableElement, IDataTableHeader } from 'tuix-webcomponents'
 
const table = document.querySelector('tuix-table') as TuixTableElement<Invoice>
const headers: IDataTableHeader<Invoice>[] = [{ name: 'ID', dataKey: 'id', width: 10 }]