Table - Dreamy UI

Table

Tables are used to display data in a structured way.

#

Import

Dream exports a set of Table components:

TableContainer - The main container for the Table.
Table - The main table component.
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 {
    TableContainer,
    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

<TableContainer w="full">
  <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>
</TableContainer>

#

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>
    <TableContainer w="full" variant={variant}>
      <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>
    </TableContainer>
  </>
))}

#

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>
      <TableContainer w="full" variant={variant} withBackground>
        <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>
      </TableContainer>
    </>
  ))}

#

Interactive

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

<TableContainer w="full" interactive>
  <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>
</TableContainer>

#

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

<TableContainer w="full" striped>
  <Table>
    <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>
</TableContainer>

#

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>
    <TableContainer w="full" size={size}>
      <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>
    </TableContainer>
  </>
))}

Switch

Tabs