> For the complete documentation index, see [llms.txt](https://docs.ninox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/table-component.md).

# Tabellen-Komponente

Füge eine Tabellen-Komponente zu einer Seite hinzu, um Datensätze in Zeilen und Spalten anzuzeigen.

Füge eine **Tabellenkomponente** zu einer Seite hinzu, um Datensätze in Zeilen und Spalten anzuzeigen. Nutze sie, wenn Nutzer mehrere Datensätze gleichzeitig prüfen sollen.

Bevor du die Komponente hinzufügst, stelle sicher, dass die Tabelle Folgendes enthält:

* eindeutige Feldbezeichnungen für gut lesbare Spalten
* die Felder, die Nutzer für schnelle Entscheidungen benötigen
* Felder zum Filtern relevanter Datensätze

## Tabellenkomponente hinzufügen

{% stepper %}
{% step %}
**Tab Hinzufügen öffnen**

Öffne im **Einstellungsbereich** den Tab **Hinzufügen**.
{% endstep %}

{% step %}
**Tabelle hinzufügen**

Ziehe die Komponente **Tabelle** aus **Ansichten** auf die Seite.
{% endstep %}

{% step %}
**Komponente benennen**

Die **Bezeichnung** und der **Interne Name** werden automatisch erstellt. Du kannst sie unter **Einstellungen** bei Bedarf ändern.
{% endstep %}

{% step %}
**Tabelle manuell konfigurieren**

Unter **Verhalten**:

* Lasse **Konstant** als Datenpunktoption ausgewählt.
* Wähle die **Tabelle**.
* Wähle über <i class="fa-eye">:eye:</i> x **ausgeblendete Spalten** die anzuzeigenden Felder.
* Nutze **Filtern** oder **Gruppieren**, um nur ausgewählte Zeilen anzuzeigen.
  {% endstep %}

{% step %}
**Ergebnis prüfen**

Prüfe die angezeigten Datensätze und Spalten. Ziehe die Komponente, um sie zu verschieben. Nutze die Anfasser, um ihre Größe anzupassen.
{% endstep %}
{% endstepper %}

## Einstellungen der Tabellenkomponente

In **Einstellungen** legst du die grundlegenden Details fest:

* **Bezeichnung** zeigt den Titel der Komponente.
* **Interner Name** wird automatisch ausgefüllt. Ändere ihn nur bei Bedarf und mit Bedacht. Skripte verwenden den Internen Namen, nicht die Bezeichnung.

Unter **Verhalten** konfigurierst du die Tabelle:

* **Datenpunkt** richtet den Datenabruf ein. Nutze **Konstant** für die Konfiguration über Steuerelemente. Nutze **Logik** für ein Ninox Skript.\
  \
  Wenn **Datenpunkt** auf **Konstant** gesetzt ist:
* **Tabelle** wählt die Quelltabelle.
* **Filtern** begrenzt Datensätze mit einer oder mehreren Bedingungen.
* **x ausgeblendete Spalten** legt sichtbare Felder fest. Suche nach Feldern oder nutze **Alle ausblenden** und **Alle anzeigen**.
* **Gruppieren** gruppiert nach einem angezeigten Text-, Datums-, Status-, verknüpften Datensatz- oder Standortfeld.
* **Titel anzeigen** zeigt oder verbirgt die Bezeichnung.
* **Suchfeld anzeigen** zeigt ein Suchfeld über der Tabelle.
* **Button zum Hinzufügen von Datensätzen anzeigen** zeigt eine Schaltfläche zum Erstellen von Datensätzen.
* **Zeile zum Hinzufügen von Datensätzen anzeigen** zeigt eine leere Zeile am Ende der Tabelle für die schnelle Eingabe.
* **Mehrfachauswahl und Massenaktionen** ermöglicht die Auswahl mehrerer Datensätze und Aktionen für alle ausgewählten Datensätze gleichzeitig.
* **Inline-Bearbeitung** erlaubt das direkte Bearbeiten von Datensätzen in der Tabelle.\
  \
  Wenn **Datenpunkt** auf **Logik** gesetzt ist:
* Füge in **Logik** das Ninox Skript für den Datenabruf hinzu.\
  In diesem Fall erwartet Ninox die Werte und optionalen Layout-Einstellungen als Schlüssel-Wert-Paare im JSON-Stil in geschweiften Klammern `{...}`.\
  Erforderliche Bezeichner in `data` sind:

  * `id` des anzuzeigenden Datensatzes
  * `tableId`, erstellt mit `tableId(...)`
  * `cells` mit Schlüssel-Wert-Paaren wie `{label, value}`, zum Beispiel `{name: "Kim"}`

  Erforderlicher `settings`-Bezeichner ist:

  * `columns` für eine explizite Spaltenreihenfolge als einfache Zeichenfolgen.

  Ohne `settings.columns` richtet sich die Reihenfolge nach den zuerst gefundenen `cells`-Schlüsseln aller Zeilen.\
  \
  Ein Beispiel dafür findest du im nächsten Absatz.

Unter **Sichtbarkeit** wählst du, wie die Komponente auf der Seite angezeigt wird:

* **Sichtbar** zeigt die Komponente auf der Seite.
* **Versteckt** blendet die Komponente auf der Seite aus.
* **Bedingt** definiert eine **Sichtbarkeitsbedingung**, die steuert, wann die Komponente angezeigt oder ausgeblendet wird.\
  Nutze **Bedingt**, wenn die Tabelle nur in bestimmten Fällen erscheinen soll.\
  Erstelle die Bedingung anhand von **Feldern** und **Tabellen**.\
  Dies wirkt sich nur auf die Anzeige auf der Seite aus. Datensätze und Berechtigungen bleiben unverändert.

{% hint style="info" %}
Um eine Komponente zu entfernen, wähle sie aus und klicke im blauen Menü darüber auf <i class="fa-trash-can">:trash-can:</i> **Komponente löschen**.
{% endhint %}

#### **Schauen wir uns ein Beispiel an:**

Wenn du den Datenabruf über **Logik** ausführst, strukturiere das Skript so:

{% code lineNumbers="true" %}

```
{
	data: for r in select Mitarbeiter do
		{
			id: r,
			tableId: tableId(r),
			cells: {
				Name: r.name,
				Projekt: if r.projekt != void then
					r.projekt.projekt_name
				else
					"—"
				end,
				Initialien: upper(concat(for w in split(r.name, " ") do
						substr(w, 0, 1)
					end)),
				'Hat Foto': count(files(r)) > 0
			}
		}
	end,
	settings: {
		columns: ["Name", "Projekt", "Initialien", "Hat Foto"]
	}
}
```

{% endcode %}

Nutze Ninox AI mit folgendem Prompt, um das Skript zu erstellen:\
"Erstelle ein Skript für die Tabellen-Komponente, das Datensätze aus der Tabelle „Mitarbeiter“ mit einem zugewiesenen Projekt anzeigt. Zeige diese Spalten: Name, Projekt, Initialien und Hat Foto."


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.ninox.com/builder-hub/de/visualize-and-organize-your-data/create-and-customize-pages/table-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.