Table - Dreamy UI

Table

Tables are used to display data in a structured way.

#

Import

Dream exports a set of Table components:

Table - The main container for the Table.
TableHeader - The header for the Table.
TableBody - The body for the Table.
TableCaption - The caption for the Table.
TableCell - The cell for the Table.
TableColumnHeader - The column header for the Table.
TableRow - The row for the Table.

import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableColumnHeader,
    TableHeader,
    TableRow
} from "@dreamy-ui/react";

#

Usage

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

<Table>
  <TableHeader>
    <TableRow>
      <TableColumnHeader>Name</TableColumnHeader>
      <TableColumnHeader>Age</TableColumnHeader>
      <TableColumnHeader>Gender</TableColumnHeader>
    </TableRow>
  </TableHeader>
  <TableBody>
    {[20, 22, 25].map((item, index) => (
      <TableRow key={index}>
        <TableCell>Name {index + 1}</TableCell>
        <TableCell>{item}</TableCell>
        <TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

#

Variants

simple

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

line

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

{["simple", "line"].map((variant) => (
  <>
    <Text size={"lg"}>{variant}</Text>
    <Table variant={variant}>
      <TableHeader>
        <TableRow>
          <TableColumnHeader>Name</TableColumnHeader>
          <TableColumnHeader>Age</TableColumnHeader>
          <TableColumnHeader>Gender</TableColumnHeader>
        </TableRow>
      </TableHeader>
      <TableBody>
        {[20, 22, 25].map((item, index) => (
          <TableRow key={index}>
            <TableCell>Name {index + 1}</TableCell>
            <TableCell>{item}</TableCell>
            <TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
          </TableRow>
        ))}
        </TableBody>
    </Table>
  </>
))}

#

With background

simple

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

line

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

{["simple", "line"].map((variant) => (
    <>
      <Text size={"lg"}>{variant}</Text>
      <Table variant={variant} withBackground>
        <TableHeader>
          <TableRow>
            <TableColumnHeader>Name</TableColumnHeader>
            <TableColumnHeader>Age</TableColumnHeader>
            <TableColumnHeader>Gender</TableColumnHeader>
          </TableRow>
        </TableHeader>
        <TableBody>
          {[20, 22, 25].map((item, index) => (
            <TableRow key={index}>
              <TableCell>Name {index + 1}</TableCell>
              <TableCell>{item}</TableCell>
              <TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
            </TableRow>
          ))}
          </TableBody>
      </Table>
    </>
  ))}

#

Interactive

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

<Table interactive>
  <TableHeader>
    <TableRow>
      <TableColumnHeader>Name</TableColumnHeader>
      <TableColumnHeader>Age</TableColumnHeader>
      <TableColumnHeader>Gender</TableColumnHeader>
    </TableRow>
  </TableHeader>
  <TableBody>
    {[20, 22, 25].map((item, index) => (
      <TableRow key={index}>
        <TableCell>Name {index + 1}</TableCell>
        <TableCell>{item}</TableCell>
        <TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

#

Striped

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male
Name 4	28	Female
Name 5	31	Female
Name 6	35	Male

<Table striped>
  <TableHeader>
    <TableRow>
      <TableColumnHeader>Name</TableColumnHeader>
      <TableColumnHeader>Age</TableColumnHeader>
      <TableColumnHeader>Gender</TableColumnHeader>
    </TableRow>
  </TableHeader>
  <TableBody>
    {[20, 22, 25, 28, 31, 35].map((item, index) => (
      <TableRow key={index}>
        <TableCell>Name {index + 1}</TableCell>
        <TableCell>{item}</TableCell>
        <TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

#

Size

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

Name	Age	Gender
Name 1	20	Male
Name 2	22	Female
Name 3	25	Male

{["sm", "md", "lg"].map((size) => (
  <>
    <Text size={"lg"}>{size}</Text>
    <Table size={size}>
      <TableHeader>
        <TableRow>
          <TableColumnHeader>Name</TableColumnHeader>
          <TableColumnHeader>Age</TableColumnHeader>
          <TableColumnHeader>Gender</TableColumnHeader>
        </TableRow>
      </TableHeader>
      <TableBody>
        {[20, 22, 25].map((item, index) => (
          <TableRow key={index}>
            <TableCell>Name {index + 1}</TableCell>
            <TableCell>{item}</TableCell>
            <TableCell>{item % 5 === 0 ? "Male" : "Female"}</TableCell>
          </TableRow>
        ))}
        </TableBody>
    </Table>
  </>
))}