Table

Organize and display data in rows and columns in a tabular format.

A list of users in the workspace.
Name	Email	Status
John Doe	john.doe@example.com	Active
Jane Doe	jane.doe@example.com	Blocked
Jim Beam	jim.beam@example.com	Suspended
Jill Smith	jill.smith@example.com	Pending

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Table Parts

import {
  Table,
  TableContainer,
  TableHeader,
  TableHead,
  TableBody,
  TableRow,
  TableCell,
  TableFooter,
  TableCaption
} from "components/selia/table";

Structure

The expected structure and composition of the component.

Anatomy

<TableContainer>
  <Table>
    <TableCaption>A list of your recent invoices.</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead>Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead>Amount</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>INV001</TableCell>
        <TableCell>Paid</TableCell>
        <TableCell>Credit Card</TableCell>
        <TableCell>$250.00</TableCell>
      </TableRow>
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell>$250.00</TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</TableContainer>

Examples

Card

You can wrap the Table component in a Card component to create a card table.

Users

A list of users in the workspace.
Name	Email	Status
John Doe	john.doe@example.com	Active
Jane Doe	jane.doe@example.com	Blocked
Jim Beam	jim.beam@example.com	Suspended
Jill Smith	jill.smith@example.com	Pending