Table

The Table component is a flexible data container that allows you to display tabular data with various customization options. The table is composed of several subcomponents including TableBody, TableHeader, TableRow, and TableCell which offer distinct styling for different sections of the table.

Usage

To use the Table component, you will generally use a combination of Table, TableBody, TableHeader, TableRow, and TableCell components.

Basic Table

A basic table showcasing the default structure.

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 with Custom Headings

Demonstrating custom headers and styling.

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

export default function TableCustomHeadingDemo() {
    return (
        <Table className="custom-table">
            <TableHeader className="custom-header">
                <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="custom-body">
                <TableRow className="custom-row">
                    <TableCell className="custom-cell">Apple</TableCell>
                    <TableCell className="custom-cell">$1.00</TableCell>
                    <TableCell className="custom-cell">In Stock</TableCell>
                </TableRow>
                <TableRow className="custom-row">
                    <TableCell className="custom-cell">Banana</TableCell>
                    <TableCell className="custom-cell">$0.50</TableCell>
                    <TableCell className="custom-cell">Out of Stock</TableCell>
                </TableRow>
            </TableBody>
        </Table>
    );
}