Table

Le composant Table est un conteneur de données flexible qui vous permet d’afficher des données tabulaires avec diverses options de personnalisation. La table est composée de plusieurs sous-composants incluant TableBody, TableHeader, TableRow et TableCell qui offrent un style distinct pour différentes sections de la table.

Utilisation

Pour utiliser le composant Table, vous utiliserez généralement une combinaison des composants Table, TableBody, TableHeader, TableRow et TableCell.

Table de base

Une table de base illustrant la structure par défaut.

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>
    );
}

Table avec style personnalisé

Appliquez n’importe quel style ou attribut de base aux composants de la table.

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>
    );
}