Table Tabelle - Docs - Artefact

Table Tabelle

Data Display

Intelligente Auto-Erkennung

Einführung

Eine flexible Komponente zur Anzeige von Tabellendaten.

Verwendung

Product Inventory
Name	Category	Price
Laptop	Electronics	$999.00
Coffee Mug	Home & Kitchen	$15.00

import { Table } from "../components/ui";

export default function MyPage() {
  const columns = [
    { header: "Name", key: "name" },
    { header: "Category", key: "category" },
    { header: "Price", key: "price", align: "end" },
  ];

  const rows = [
    { name: "Laptop", category: "Electronics", price: "$999.00" },
    { name: "Coffee Mug", category: "Home & Kitchen", price: "$15.00" },
  ];

  return (
    <Table
      variant="plain"
      caption="Product Inventory"
      columns={columns}
      rows={rows}
      footer={
        <tr>
          <td colSpan={2}>Total</td>
          <td style={{ textAlign: "end" }}>$1,014.00</td>
        </tr>
      }
    />
  );
}

CMS-Seitenbauer

Diese Komponente ist als table-Block im Seitenbauer (content/pages/*.json) verfügbar. Da Zeilendaten keine feste CMS-Struktur haben können, ist rows ein als JSON kodiertes Zeichenfolgenfeld, das zur Render-Zeit geparst wird:

{
  "type": "table",
  "columns": [
    { "header": "Room", "key": "room" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"room\": \"Cabin Loft\", \"price\": \"$180/night\"}, {\"room\": \"Cabin Suite\", \"price\": \"$240/night\"}]",
  "variant": "plain",
  "striped": true
}

Eigenschaften

Eigenschaft	Typ	Beschreibung
`columns`	`TableColumn[]`	Konfiguration für Tabellenspalten.
`rows`	`any[]`	In der Tabelle anzuzeigende Daten.

| footer | JSX.Element | Optionaler Inhalt für die Fußzeile. |

TableColumn

Eigenschaft	Typ	Beschreibung