Eigenständige Bausteine für HTML und PHP. Jedes Beispiel hat seinen vollständigen Quellcode direkt darunter. Farben, Hell/Dunkel, Dichte und Schrift folgen deiner Docs-Ansicht.
Interaktionen bleiben lokale Demos. Formulare senden keine Nachrichten; es gibt keine Zahlung oder Server-Synchronisation. Beim mehrfachen Einfügen IDs eindeutig vergeben und den jeweiligen Initialisierer einmal nach dem Markup aufrufen.
Datenverwaltung
Lokale Bestandsverwaltung
Anlegen, Bearbeiten, Details und bestätigtes Löschen mit Undo. Native Dialoge, Suche und aufsteigende Sortierung.
CSV mit ausgewählten Zeilen. Ausgeblendete ausgewählte Zeilen bleiben ausgewählt und werden ebenfalls exportiert. Der Kopf-Schalter betrifft nur sichtbare Zeilen.
Fiktiver Demo-Bestand
Artikel
Kategorie
Status
Preis
Stück
Keine Artikel passen zu diesen Filtern.
Lokale Demo. Kein Server und keine Speicherung.
Semikolon-CSV mit UTF-8-Kennung. Formelähnliche Zellanfänge werden mit einem Apostroph neutralisiert. Es werden keine Dateien hochgeladen.
HTML · inklusive Stylesheets und Modul-Einbindung
<!doctype html>
<html lang="de" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Auswahl und CSV-Export · Rittek UI</title>
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/blocks-management.css">
</head>
<body data-r-scheme="lime" data-r-size="standard" data-r-font="standard">
<section class="bmg-block" data-bmg-block="export" aria-labelledby="bmg-export-title">
<header class="bmg-header">
<div>
<p class="bmg-eyebrow">Daten / Export</p>
<h3 id="bmg-export-title">Nur deine Auswahl.</h3>
<p class="bmg-muted">CSV mit ausgewählten Zeilen. Ausgeblendete ausgewählte Zeilen bleiben ausgewählt und werden ebenfalls exportiert. Der Kopf-Schalter betrifft nur sichtbare Zeilen.</p>
</div>
</header>
<div class="bmg-controls">
<label>Artikel suchen<input class="r-input" data-bmg-search type="search" placeholder="Name eingeben">
</label>
<label>Status<select class="r-input" data-bmg-filter>
<option value="">Alle Status</option>
<option value="active">Verfügbar</option>
<option value="planned">Geplant</option>
<option value="paused">Pausiert</option>
</select>
</label>
<button type="button" class="r-button" data-bmg-clear>Suche und Status leeren</button>
</div>
<div class="bmg-table">
<table class="r-table">
<caption>Fiktiver Demo-Bestand</caption>
<thead>
<tr>
<th scope="col">
<input type="checkbox" data-bmg-select-all aria-label="Alle sichtbaren Zeilen auswählen">
</th>
<th scope="col">Artikel</th>
<th scope="col">Kategorie</th>
<th scope="col">Status</th>
<th scope="col">Preis</th>
<th scope="col">Stück</th>
</tr>
</thead>
<tbody data-bmg-rows>
</tbody>
</table>
</div>
<p class="bmg-muted" data-bmg-count aria-live="polite">
</p>
<p data-bmg-empty hidden>Keine Artikel passen zu diesen Filtern.</p>
<p class="bmg-status" data-bmg-status role="status">Lokale Demo. Kein Server und keine Speicherung.</p>
<div class="bmg-actions">
<button class="r-button r-button-primary" type="button" data-bmg-download>Auswahl als CSV herunterladen</button>
<button class="r-button" type="button" data-bmg-clear-selection>Auswahl leeren</button>
</div>
<p class="bmg-muted">Semikolon-CSV mit UTF-8-Kennung. Formelähnliche Zellanfänge werden mit einem Apostroph neutralisiert. Es werden keine Dateien hochgeladen.</p>
</section>
<script type="module">
import {initManagementBlocks} from 'https://ui.rittek.de/assets/modules/blocks-management.js';
const managementBlocks = initManagementBlocks(document);
// Beim Entfernen der Ansicht: managementBlocks.destroy();
</script>
</body>
</html>