DATEN / PHASE 6

Neu dabei? Rittek UI in HTML oder PHP einbinden

Dieses Grundgerüst funktioniert auch als .php-Datei. Setze das Beispiel-HTML in den Body. JavaScript-Beispiele kommen darunter in einen <script type="module">-Block. Bei einem eigenen Server ersetzt du /assets/ in den Imports durch https://ui.rittek.de/assets/ oder kopierst die Assets auf deinen Server. Die Demo-Navigation gehört nicht zum Framework.

HTML · Grundgerüst

<!doctype html>
<html lang="de" data-theme="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine Rittek-Seite</title>
  <link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
  <!-- Hier das HTML des gewünschten Beispiels einsetzen. -->
  <script src="https://ui.rittek.de/assets/rittek.js"></script>
  <!-- JavaScript aus dem Beispiel in einen script type="module"-Block einsetzen. -->
</body>
</html>

Daten gezielt bearbeiten.

Filter, sichtbare Spalten und eine klare Auswahl für mehrere Zeilen. Sämtliche Projekte und Personen auf dieser Seite sind fiktiv.

Projektportfolio

Filter werden mit der Suche kombiniert. Die Kopf-Checkbox wählt nur die aktuell sichtbare Seite. Auswahlen auf anderen Seiten oder hinter Filtern bleiben erhalten. Die Mehrfachaktion arbeitet mit allen ausgewählten Zeilen, verändert aber keine Daten.

Was exportiert CSV?

CSV enthält die eingeblendeten Spalten in ihrer ursprünglichen Reihenfolge. Ohne Auswahl werden alle gefilterten Treffer exportiert. Sobald Zeilen ausgewählt sind, werden nur ausgewählte Treffer innerhalb der aktuellen Filter und Suche exportiert. Liegt die Auswahl vollständig außerhalb der Filter, enthält CSV nur die Kopfzeile.

Eine Tabelle mit Filtern und Auswahl

Die Daten sind normale JavaScript-Objekte. Zusätzliche Funktionen werden ausdrücklich eingeschaltet; die Mehrfachaktion gibt nur ein Ereignis aus.

HTML

<div id="ex-project-table"></div>
<p id="ex-table-result" class="r-help mt-4" role="status"></p>

JavaScript · type="module"

import {createTable} from 'https://ui.rittek.de/assets/modules/table.js';
const host = document.getElementById('ex-project-table');
const table = createTable(host, {
  rows: [
    {id: 1, name: 'Kundenportal', status: 'Aktiv'},
    {id: 2, name: 'Website', status: 'Planung'}
  ],
  columns: [{key: 'name', label: 'Projekt'}, {key: 'status', label: 'Status'}],
  pageSize: 5,
  columnChooser: true,
  selectPage: true,
  filters: [{key: 'status', label: 'Status', options: [
    {value: 'Aktiv', label: 'Aktiv'},
    {value: 'Planung', label: 'Planung'}
  ]}],
  bulkActions: [{id: 'review', label: 'Auswahl prüfen'}]
});
host.addEventListener('rittek:tableaction', event => {
  document.getElementById('ex-table-result').textContent =
    event.detail.selected.length + ' Projekte für die Demoaktion gewählt.';
});

Zusatzfunktionen ausdrücklich einschalten

import {createTable} from '/assets/modules/table.js';

const table = createTable(element, {
  rows,
  columns,
  pageSize: 5,
  selectPage: true,
  columnChooser: true,
  filters: [{
    key: 'status', label: 'Status',
    options: [
      {value: 'Aktiv', label: 'Aktiv'},
      {value: 'Planung', label: 'Planung'}
    ]
  }],
  bulkActions: [{id: 'review', label: 'Auswahl prüfen'}]
});

element.addEventListener('rittek:tableaction', event => {
  // event.detail.action, .selected und .rows
  // Die Anwendung entscheidet, was passieren soll.
});

table.getState(); // inkl. filters und visibleColumns
table.exportCSV(); // liefert Text, startet keinen Download
// table.destroy();

Bestehende Tabellen behalten ihre bisherige Oberfläche. Filter, Spaltenwahl, Seitenauswahl und Mehrfachaktionen sind optional. Mindestens eine Datenspalte bleibt sichtbar. Ein leerer Filterwert bedeutet „Alle“; mehrere Filter werden mit UND verknüpft.