Tabelle (Table)

Die Table-Komponente ist ein flexibler Datencontainer, mit dem Sie tabellarische Daten mit verschiedenen Anpassungsoptionen anzeigen können. Die Tabelle besteht aus mehreren Unterkomponenten, darunter TableBody, TableHeader, TableRow und TableCell, die unterschiedliche Stylings für verschiedene Abschnitte der Tabelle bieten.

Verwendung

Um die Table-Komponente zu verwenden, verwenden Sie in der Regel eine Kombination aus den Komponenten Table, TableBody, TableHeader, TableRow und TableCell.

Einfache Tabelle

Eine grundlegende Tabelle, die die Standardstruktur demonstriert.

import React from "react";
import { Table, TableBody, TableHeader, TableRow, TableCell } from "@firecms/ui";

export default function TableBasicDemo() {
    return (
        <Table>
            <TableHeader>
                <TableCell header scope="col">Name</TableCell>
                <TableCell header scope="col">Age</TableCell>
                <TableCell header scope="col">City</TableCell>
            </TableHeader>
            <TableBody>
                <TableRow>
                    <TableCell>John Doe</TableCell>
                    <TableCell>30</TableCell>
                    <TableCell>New York</TableCell>
                </TableRow>
                <TableRow>
                    <TableCell>Jane Smith</TableCell>
                    <TableCell>25</TableCell>
                    <TableCell>San Francisco</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    );
}

Tabelle mit benutzerdefiniertem Styling

Wenden Sie beliebige Stile oder Basisattribute auf die Tabellenkomponenten an.

import React from "react";
import { Table, TableBody, TableHeader, TableRow, TableCell } from "@firecms/ui";

export default function TableCustomHeadingDemo() {
    return (
        <Table className="bg-surface-50 dark:bg-surface-900">
            <TableHeader className="bg-surface-50 dark:bg-surface-800">
                <TableCell header scope="col" className="custom-header-cell">Product</TableCell>
                <TableCell header scope="col" className="custom-header-cell">Price</TableCell>
                <TableCell header scope="col" className="custom-header-cell">Stock</TableCell>
            </TableHeader>
            <TableBody className="bg-surface-100 dark:bg-surface-900">
                <TableRow className="hover:bg-surface-200 hover:dark:bg-surface-800" onClick={() => console.log("Clicked")}>
                    <TableCell>Apple</TableCell>
                    <TableCell className="bg-surface-200 dark:bg-surface-700">$1.00</TableCell>
                    <TableCell>In Stock</TableCell>
                </TableRow>
                <TableRow className="hover:bg-surface-200 hover:dark:bg-surface-800" onClick={() => console.log("Clicked")}>
                    <TableCell>Banana</TableCell>
                    <TableCell className="bg-surface-200 dark:bg-surface-700">$0.50</TableCell>
                    <TableCell>Out of Stock</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    );
}