ChatGPT UI Table - Horizon AI Template

Tables are used to organize and display data efficiently. It renders a <table> element by default.

Import#

import {
  Table,
  Thead,
  Tbody,
  Tfoot,
  Tr,
  Th,
  Td,
  TableCaption,
} from "@chakra-ui/react"

Table Variants#

The table component comes in 3 variants: simple, striped, and unstyled. The default variant is simple

Change the variant values to see the other variants.

Simple Table#

<Table variant="simple">
  <TableCaption>Imperial to metric conversion factors</TableCaption>
  <Thead>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>inches</Td>
      <Td>millimetres (mm)</Td>
      <Td isNumeric>25.4</Td>
    </Tr>
    <Tr>
      <Td>feet</Td>
      <Td>centimetres (cm)</Td>
      <Td isNumeric>30.48</Td>
    </Tr>
    <Tr>
      <Td>yards</Td>
      <Td>metres (m)</Td>
      <Td isNumeric>0.91444</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Tfoot>
</Table>
<Table variant="simple">
  <TableCaption>Imperial to metric conversion factors</TableCaption>
  <Thead>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>inches</Td>
      <Td>millimetres (mm)</Td>
      <Td isNumeric>25.4</Td>
    </Tr>
    <Tr>
      <Td>feet</Td>
      <Td>centimetres (cm)</Td>
      <Td isNumeric>30.48</Td>
    </Tr>
    <Tr>
      <Td>yards</Td>
      <Td>metres (m)</Td>
      <Td isNumeric>0.91444</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Tfoot>
</Table>

Striped Table#

<Table variant="striped" colorScheme="brand">
  <TableCaption>Imperial to metric conversion factors</TableCaption>
  <Thead>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>inches</Td>
      <Td>millimetres (mm)</Td>
      <Td isNumeric>25.4</Td>
    </Tr>
    <Tr>
      <Td>feet</Td>
      <Td>centimetres (cm)</Td>
      <Td isNumeric>30.48</Td>
    </Tr>
    <Tr>
      <Td>yards</Td>
      <Td>metres (m)</Td>
      <Td isNumeric>0.91444</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Tfoot>
</Table>
<Table variant="striped" colorScheme="brand">
  <TableCaption>Imperial to metric conversion factors</TableCaption>
  <Thead>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>inches</Td>
      <Td>millimetres (mm)</Td>
      <Td isNumeric>25.4</Td>
    </Tr>
    <Tr>
      <Td>feet</Td>
      <Td>centimetres (cm)</Td>
      <Td isNumeric>30.48</Td>
    </Tr>
    <Tr>
      <Td>yards</Td>
      <Td>metres (m)</Td>
      <Td isNumeric>0.91444</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Tfoot>
</Table>

Table Sizing#

The table component is available in 3 sizes: sm, md, lg. The default size is md.

<Table size="sm">
  <Thead>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>inches</Td>
      <Td>millimetres (mm)</Td>
      <Td isNumeric>25.4</Td>
    </Tr>
    <Tr>
      <Td>feet</Td>
      <Td>centimetres (cm)</Td>
      <Td isNumeric>30.48</Td>
    </Tr>
    <Tr>
      <Td>yards</Td>
      <Td>metres (m)</Td>
      <Td isNumeric>0.91444</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Tfoot>
</Table>
<Table size="sm">
  <Thead>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>inches</Td>
      <Td>millimetres (mm)</Td>
      <Td isNumeric>25.4</Td>
    </Tr>
    <Tr>
      <Td>feet</Td>
      <Td>centimetres (cm)</Td>
      <Td isNumeric>30.48</Td>
    </Tr>
    <Tr>
      <Td>yards</Td>
      <Td>metres (m)</Td>
      <Td isNumeric>0.91444</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>To convert</Th>
      <Th>into</Th>
      <Th isNumeric>multiply by</Th>
    </Tr>
  </Tfoot>
</Table>
function Example() {
  const exampleBg = useColorModeValue("gray.200", "gray.800")
  const bg = useColorModeValue("gray.50", "gray.700")
  const textColor = useColorModeValue("gray.700", "white")
  const bgColor = useColorModeValue("#F8F9FA", "gray.800")
  const nameColor = useColorModeValue("gray.500", "white")
  return (
    <Flex flexDirection="column">
      <Box
        display="flex"
        flexDirection="column"
        width="100%"
        position="relative"
        minWidth="0px"
        wordWrap="break-word"
        backgroundClip="border-box"
        bg={bg}
        width="100%"
        boxShadow="0px 3.5px 5.5px rgba(0, 0, 0, 0.02)"
        borderRadius="15px"
        p="1.5rem"
        bg={bgColor}
        my="1rem"
      >
        <Box display="flex" width="100%" pt="28px" px="21px" p="0px">
          <Flex justifyContent="space-between" w="100%">
            <Flex direction="column" maxWidth="70%">
              <Text color={nameColor} fontSize="md" fontWeight="bold" mb="10px">
                Oliver Liam
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                Company Name:{" "}
                <Text as="span" color="gray.500">
                  Viking Burrito
                </Text>
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                Email Address:{" "}
                <Text as="span" color="gray.500">
                  oliver@burrito.com
                </Text>
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                VAT Number:{" "}
                <Text as="span" color="gray.500">
                  FRB1235476
                </Text>
              </Text>
            </Flex>
            <Flex
              direction={{ sm: "column", md: "row" }}
              alignItems="flex-start"
              p={{ md: "1.5rem" }}
            >
              <Button
                p="0px"
                bg="transparent"
                mb={{ sm: "10px", md: "0px" }}
                mr={{ md: "12px" }}
              >
                <Flex
                  color="red.500"
                  cursor="pointer"
                  alignItems="center"
                  p="12px"
                >
                  <Icon as={FaTrashAlt} mr="4px" />
                  <Text fontSize="sm" fontWeight="semibold">
                    DELETE
                  </Text>
                </Flex>
              </Button>
              <Button p="0px" bg="transparent">
                <Flex
                  color={textColor}
                  cursor="pointer"
                  alignItems="center"
                  p="12px"
                >
                  <Icon as={FaPencilAlt} mr="4px" />
                  <Text fontSize="sm" fontWeight="semibold">
                    EDIT
                  </Text>
                </Flex>
              </Button>
            </Flex>
          </Flex>
        </Box>
      </Box>
      <Box
        display="flex"
        flexDirection="column"
        width="100%"
        position="relative"
        minWidth="0px"
        wordWrap="break-word"
        backgroundClip="border-box"
        bg={bg}
        width="100%"
        boxShadow="0px 3.5px 5.5px rgba(0, 0, 0, 0.02)"
        borderRadius="15px"
        p="1.5rem"
        bg={bgColor}
        my="1rem"
      >
        <Box display="flex" width="100%" pt="28px" px="21px" p="0px">
          <Flex justifyContent="space-between" w="100%">
            <Flex direction="column" maxWidth="70%">
              <Text color={nameColor} fontSize="md" fontWeight="bold" mb="10px">
                Lucas Harper
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                Company Name:{" "}
                <Text as="span" color="gray.500">
                  Stone Tech Zone
                </Text>
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                Email Address:{" "}
                <Text as="span" color="gray.500">
                  lucas@stone-tech.com
                </Text>
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                VAT Number:{" "}
                <Text as="span" color="gray.500">
                  FRB1235476
                </Text>
              </Text>
            </Flex>
            <Flex
              direction={{ sm: "column", md: "row" }}
              alignItems="flex-start"
              p={{ md: "1.5rem" }}
            >
              <Button
                p="0px"
                bg="transparent"
                mb={{ sm: "10px", md: "0px" }}
                mr={{ md: "12px" }}
              >
                <Flex
                  color="red.500"
                  cursor="pointer"
                  alignItems="center"
                  p="12px"
                >
                  <Icon as={FaTrashAlt} mr="4px" />
                  <Text fontSize="sm" fontWeight="semibold">
                    DELETE
                  </Text>
                </Flex>
              </Button>
              <Button p="0px" bg="transparent">
                <Flex
                  color={textColor}
                  cursor="pointer"
                  alignItems="center"
                  p="12px"
                >
                  <Icon as={FaPencilAlt} mr="4px" />
                  <Text fontSize="sm" fontWeight="semibold">
                    EDIT
                  </Text>
                </Flex>
              </Button>
            </Flex>
          </Flex>
        </Box>
      </Box>
      <Box
        display="flex"
        flexDirection="column"
        width="100%"
        position="relative"
        minWidth="0px"
        wordWrap="break-word"
        backgroundClip="border-box"
        bg={bg}
        width="100%"
        boxShadow="0px 3.5px 5.5px rgba(0, 0, 0, 0.02)"
        borderRadius="15px"
        p="1.5rem"
        bg={bgColor}
        my="1rem"
      >
        <Box display="flex" width="100%" pt="28px" px="21px" p="0px">
          <Flex justifyContent="space-between" w="100%">
            <Flex direction="column" maxWidth="70%">
              <Text color={nameColor} fontSize="md" fontWeight="bold" mb="10px">
                Ethan James
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                Company Name:{" "}
                <Text as="span" color="gray.500">
                  Fiber Notion
                </Text>
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                Email Address:{" "}
                <Text as="span" color="gray.500">
                  ethan@fiber.com
                </Text>
              </Text>
              <Text color="gray.400" fontSize="sm" fontWeight="semibold">
                VAT Number:{" "}
                <Text as="span" color="gray.500">
                  FRB1235476
                </Text>
              </Text>
            </Flex>
            <Flex
              direction={{ sm: "column", md: "row" }}
              alignItems="flex-start"
              p={{ md: "1.5rem" }}
            >
              <Button
                p="0px"
                bg="transparent"
                mb={{ sm: "10px", md: "0px" }}
                mr={{ md: "12px" }}
              >
                <Flex
                  color="red.500"
                  cursor="pointer"
                  alignItems="center"
                  p="12px"
                >
                  <Icon as={FaTrashAlt} mr="4px" />
                  <Text fontSize="sm" fontWeight="semibold">
                    DELETE
                  </Text>
                </Flex>
              </Button>
              <Button p="0px" bg="transparent">
                <Flex
                  color={textColor}
                  cursor="pointer"
                  alignItems="center"
                  p="12px"
                >
                  <Icon as={FaPencilAlt} mr="4px" />
                  <Text fontSize="sm" fontWeight="semibold">
                    EDIT
                  </Text>
                </Flex>
              </Button>
            </Flex>
          </Flex>
        </Box>
      </Box>
    </Flex>
  )
}

Import#

import BillingRow from "components/Tables/BillingRow"
// You should also import some data for the table
import { billingData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")
// This is how the "billingData" imported above should look like
const billingData = [
  {
    name: "Oliver Liam",
    company: "Viking Burrito",
    email: "oliver@burrito.com",
    number: "FRB1235476",
  },
  {
    name: "Lucas Harper",
    company: "Stone Tech Zone",
    email: "lucas@stone-tech.com",
    number: "FRB1235476",
  },
  {
    name: "Ethan James",
    company: "Fiber Notion",
    email: "ethan@fiber.com",
    number: "FRB1235476",
  },
]
;<Flex direction="column">
  {billingData.map((row) => {
    return (
      <BillingRow
        name={row.name}
        company={row.company}
        email={row.email}
        number={row.number}
      />
    )
  })}
</Flex>
function Example() {
  const exampleBg = useColorModeValue("gray.200", "gray.800")
  const bg = useColorModeValue("gray.50", "gray.700")
  const textColor = useColorModeValue("gray.700", "white")
  const bgColor = useColorModeValue("#F8F9FA", "gray.800")
  const nameColor = useColorModeValue("gray.500", "white")
  return (
    <Table variant="simple" color={textColor}>
      <Thead>
        <Tr my=".8rem" ps="0px">
          <Th ps="0px" color="gray.400">
            Companies
          </Th>
          <Th color="gray.400">Members</Th>
          <Th color="gray.400">Budget</Th>
          <Th color="gray.400">Completion</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
              <CheckIcon h={"24px"} w={"24px"} pr="5px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Horizon AI Template Version
              </Text>
            </Flex>
          </Td>
          <Td>
            <AvatarGroup size="sm">
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
            </AvatarGroup>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $14,000
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text fontSize="md" color="cyan.300" fontWeight="bold" pb=".2rem">
                60%
              </Text>
              <Progress
                colorScheme={"cyan"}
                size="xs"
                value={60}
                borderRadius="15px"
              />
            </Flex>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
              <TimeIcon h={"24px"} w={"24px"} pr="5px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Add Progress Track
              </Text>
            </Flex>
          </Td>
          <Td>
            <AvatarGroup size="sm">
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
            </AvatarGroup>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $3,000
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text fontSize="md" color="cyan.300" fontWeight="bold" pb=".2rem">
                10%
              </Text>
              <Progress
                colorScheme={"cyan"}
                size="xs"
                value={10}
                borderRadius="15px"
              />
            </Flex>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
              <SunIcon h={"24px"} w={"24px"} pr="5px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Fix Platform Errors
              </Text>
            </Flex>
          </Td>
          <Td>
            <AvatarGroup size="sm">
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
            </AvatarGroup>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Not set
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                100%
              </Text>
              <Progress
                colorScheme={"brand"}
                size="xs"
                value={100}
                borderRadius="15px"
              />
            </Flex>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
              <InfoIcon h={"24px"} w={"24px"} pr="5px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Launch our Mobile App
              </Text>
            </Flex>
          </Td>
          <Td>
            <AvatarGroup size="sm">
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
            </AvatarGroup>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $32,000
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                100%
              </Text>
              <Progress
                colorScheme={"brand"}
                size="xs"
                value={100}
                borderRadius="15px"
              />
            </Flex>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
              <CalendarIcon h={"24px"} w={"24px"} pr="5px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Add the New Pricing Page
              </Text>
            </Flex>
          </Td>
          <Td>
            <AvatarGroup size="sm">
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
            </AvatarGroup>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $400
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text fontSize="md" color="cyan.300" fontWeight="bold" pb=".2rem">
                25%
              </Text>
              <Progress
                colorScheme={"cyan"}
                size="xs"
                value={25}
                borderRadius="15px"
              />
            </Flex>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex align="center" py=".8rem" minWidth="100%" flexWrap="nowrap">
              <CheckIcon h={"24px"} w={"24px"} pr="5px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Redesign New Online Shop
              </Text>
            </Flex>
          </Td>
          <Td>
            <AvatarGroup size="sm">
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
              <Avatar
                name="avatar"
                src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"
                _hover={{ zIndex: "3", cursor: "pointer" }}
              />
            </AvatarGroup>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $7,600
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text fontSize="md" color="cyan.300" fontWeight="bold" pb=".2rem">
                40%
              </Text>
              <Progress
                colorScheme={"cyan"}
                size="xs"
                value={40}
                borderRadius="15px"
              />
            </Flex>
          </Td>
        </Tr>
      </Tbody>
    </Table>
  )
}

Import#

import DashboardTableRow from "components/Tables/DashboardTableRow"
// You should also import some data for the table
import { dashboardData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")
// This is how the "dashboardData" imported above should look like
const dashboardTableData = [
  {
    logo: AdobexdLogo,
    name: "Horizon AI Template Version",
    members: [avatar1, avatar2, avatar3, avatar4, avatar5],
    budget: "$14,000",
    progression: 60,
  },
  {
    logo: AtlassianLogo,
    name: "Add Progress Track",
    members: [avatar3, avatar2],
    budget: "$3,000",
    progression: 10,
  },
  {
    logo: SlackLogo,
    name: "Fix Platform Errors",
    members: [avatar10, avatar4],
    budget: "Not set",
    progression: 100,
  },
  {
    logo: SpotifyLogo,
    name: "Launch our Mobile App",
    members: [avatar2, avatar3, avatar7, avatar8],
    budget: "$32,000",
    progression: 100,
  },
  {
    logo: JiraLogo,
    name: "Add the New Pricing Page",
    members: [avatar10, avatar3, avatar7, avatar2, avatar8],
    budget: "$400",
    progression: 25,
  },
  {
    logo: InvisionLogo,
    name: "Redesign New Online Shop",
    members: [avatar9, avatar3, avatar2],
    budget: "$7,600",
    progression: 40,
  },
]
;<Table variant="simple" color={textColor}>
  <Thead>
    <Tr my=".8rem" ps="0px">
      <Th ps="0px" color="gray.400">
        Companies
      </Th>
      <Th color="gray.400">Members</Th>
      <Th color="gray.400">Budget</Th>
      <Th color="gray.400">Completion</Th>
    </Tr>
  </Thead>
  <Tbody>
    {dashboardTableData.map((row) => {
      return (
        <DashboardTableRow
          name={row.name}
          logo={row.logo}
          members={row.members}
          budget={row.budget}
          progression={row.progression}
        />
      )
    })}
  </Tbody>
</Table>
function Example() {
  const textColor = useColorModeValue("gray.700", "white")
  return (
    <Flex flexDirection="column">
      <Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
        <Flex direction="column">
          <Text fontSize="md" color={textColor} fontWeight="bold">
            March, 01, 2020
          </Text>
          <Text fontSize="sm" color="gray.400" fontWeight="semibold" mr="16px">
            #MS-415646
          </Text>
        </Flex>
        <Spacer />
        <Box mr="12px">
          <Text fontSize="md" color="gray.400" fontWeight="semibold">
            $180
          </Text>
        </Box>
        <Button p="0px" bg="transparent" variant="no-hover">
          <Flex alignItems="center" p="12px">
            <Icon as={FaFilePdf} w="20px" h="auto" mr="5px" />
            <Text fontSize="md" color={textColor} fontWeight="bold">
              PDF
            </Text>
          </Flex>
        </Button>
      </Flex>
      <Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
        <Flex direction="column">
          <Text fontSize="md" color={textColor} fontWeight="bold">
            February, 10, 2020
          </Text>
          <Text fontSize="sm" color="gray.400" fontWeight="semibold" mr="16px">
            #RV-126749
          </Text>
        </Flex>
        <Spacer />
        <Box mr="12px">
          <Text fontSize="md" color="gray.400" fontWeight="semibold">
            $250
          </Text>
        </Box>
        <Button p="0px" bg="transparent" variant="no-hover">
          <Flex alignItems="center" p="12px">
            <Icon as={FaFilePdf} w="20px" h="auto" mr="5px" />
            <Text fontSize="md" color={textColor} fontWeight="bold">
              PDF
            </Text>
          </Flex>
        </Button>
      </Flex>
      <Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
        <Flex direction="column">
          <Text fontSize="md" color={textColor} fontWeight="bold">
            April, 05, 2020
          </Text>
          <Text fontSize="sm" color="gray.400" fontWeight="semibold" mr="16px">
            #FB-212562
          </Text>
        </Flex>
        <Spacer />
        <Box mr="12px">
          <Text fontSize="md" color="gray.400" fontWeight="semibold">
            $560
          </Text>
        </Box>
        <Button p="0px" bg="transparent" variant="no-hover">
          <Flex alignItems="center" p="12px">
            <Icon as={FaFilePdf} w="20px" h="auto" mr="5px" />
            <Text fontSize="md" color={textColor} fontWeight="bold">
              PDF
            </Text>
          </Flex>
        </Button>
      </Flex>
      <Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
        <Flex direction="column">
          <Text fontSize="md" color={textColor} fontWeight="bold">
            June, 25, 2019
          </Text>
          <Text fontSize="sm" color="gray.400" fontWeight="semibold" mr="16px">
            #QW-103578
          </Text>
        </Flex>
        <Spacer />
        <Box mr="12px">
          <Text fontSize="md" color="gray.400" fontWeight="semibold">
            $120
          </Text>
        </Box>
        <Button p="0px" bg="transparent" variant="no-hover">
          <Flex alignItems="center" p="12px">
            <Icon as={FaFilePdf} w="20px" h="auto" mr="5px" />
            <Text fontSize="md" color={textColor} fontWeight="bold">
              PDF
            </Text>
          </Flex>
        </Button>
      </Flex>
      <Flex my={{ sm: "1rem", xl: "10px" }} alignItems="center">
        <Flex direction="column">
          <Text fontSize="md" color={textColor} fontWeight="bold">
            March, 01, 2019
          </Text>
          <Text fontSize="sm" color="gray.400" fontWeight="semibold" mr="16px">
            #AR-803481
          </Text>
        </Flex>
        <Spacer />
        <Box mr="12px">
          <Text fontSize="md" color="gray.400" fontWeight="semibold">
            $300
          </Text>
        </Box>
        <Button p="0px" bg="transparent" variant="no-hover">
          <Flex alignItems="center" p="12px">
            <Icon as={FaFilePdf} w="20px" h="auto" mr="5px" />
            <Text fontSize="md" color={textColor} fontWeight="bold">
              PDF
            </Text>
          </Flex>
        </Button>
      </Flex>
    </Flex>
  )
}

Import#

import InvoicesRow from "components/Tables/InvoicesRow"
// You should also import some data for the table
import { invoicesData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")
// This is how the "dashboardData" imported above should look like
const invoicesData = [
  {
    date: "March, 01, 2020",
    code: "#MS-415646",
    price: "$180",
    logo: FaFilePdf,
    format: "PDF",
  },
  {
    date: "February, 10, 2020",
    code: "#RV-126749",
    price: "$250",
    logo: FaFilePdf,
    format: "PDF",
  },
  {
    date: "April, 05, 2020",
    code: "#FB-212562",
    price: "$560",
    logo: FaFilePdf,
    format: "PDF",
  },
  {
    date: "June, 25, 2019",
    code: "#QW-103578",
    price: "$120",
    logo: FaFilePdf,
    format: "PDF",
  },
  {
    date: "March, 01, 2019",
    code: "#AR-803481",
    price: "$300",
    logo: FaFilePdf,
    format: "PDF",
  },
]
;<Flex direction="column">
  {invoicesData.map((row) => {
    return (
      <InvoicesRow
        date={row.date}
        code={row.code}
        price={row.price}
        logo={row.logo}
        format={row.format}
      />
    )
  })}
</Flex>
function Example() {
  const exampleBg = useColorModeValue("gray.200", "gray.800")
  const bg = useColorModeValue("gray.50", "gray.700")
  const textColor = useColorModeValue("gray.700", "white")
  const bgColor = useColorModeValue("#F8F9FA", "gray.800")
  const nameColor = useColorModeValue("gray.500", "white")
  return (
    <Table variant="simple" color={textColor}>
      <Thead>
        <Tr my=".8rem" pl="0px">
          <Th pl="0px" color="gray.400">
            Companies
          </Th>
          <Th color="gray.400">Budget</Th>
          <Th color="gray.400">Status</Th>
          <Th color="gray.400">Completion</Th>
          <Th></Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex
              alignItems="center"
              py=".8rem"
              minWidth="100%"
              flexWrap="nowrap"
            >
              <Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Horizon AI Template Version
              </Text>
            </Flex>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $14,000
            </Text>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Working
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                60%
              </Text>
              <Progress
                colorScheme={60 === 100 ? "brand" : "cyan"}
                size="xs"
                value={60}
                borderRadius="15px"
              />
            </Flex>
          </Td>
          <Td>
            <Button p="0px" bg="transparent">
              <Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
            </Button>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex
              alignItems="center"
              py=".8rem"
              minWidth="100%"
              flexWrap="nowrap"
            >
              <Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Add Progress Track
              </Text>
            </Flex>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $3,000
            </Text>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Canceled
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                60%
              </Text>
              <Progress
                colorScheme={10 === 100 ? "brand" : "cyan"}
                size="xs"
                value={10}
                borderRadius="15px"
              />
            </Flex>
          </Td>
          <Td>
            <Button p="0px" bg="transparent">
              <Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
            </Button>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex
              alignItems="center"
              py=".8rem"
              minWidth="100%"
              flexWrap="nowrap"
            >
              <Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Fix Platform Errors
              </Text>
            </Flex>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Not set
            </Text>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Done
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                100%
              </Text>
              <Progress
                colorScheme={100 === 100 ? "brand" : "cyan"}
                size="xs"
                value={100}
                borderRadius="15px"
              />
            </Flex>
          </Td>
          <Td>
            <Button p="0px" bg="transparent">
              <Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
            </Button>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex
              alignItems="center"
              py=".8rem"
              minWidth="100%"
              flexWrap="nowrap"
            >
              <Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Launch our Mobile App
              </Text>
            </Flex>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $32,000
            </Text>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Done
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                100%
              </Text>
              <Progress
                colorScheme={100 === 100 ? "brand" : "cyan"}
                size="xs"
                value={100}
                borderRadius="15px"
              />
            </Flex>
          </Td>
          <Td>
            <Button p="0px" bg="transparent">
              <Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
            </Button>
          </Td>
        </Tr>
        <Tr>
          <Td minWidth={{ sm: "250px" }} pl="0px">
            <Flex
              alignItems="center"
              py=".8rem"
              minWidth="100%"
              flexWrap="nowrap"
            >
              <Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" />
              <Text
                fontSize="md"
                color={textColor}
                fontWeight="bold"
                minWidth="100%"
              >
                Add the New Pricing Page
              </Text>
            </Flex>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              $400
            </Text>
          </Td>
          <Td>
            <Text fontSize="md" color={textColor} fontWeight="bold" pb=".5rem">
              Done
            </Text>
          </Td>
          <Td>
            <Flex direction="column">
              <Text
                fontSize="md"
                color="brand.300"
                fontWeight="bold"
                pb=".2rem"
              >
                40%
              </Text>
              <Progress
                colorScheme={40 === 100 ? "brand" : "cyan"}
                size="xs"
                value={40}
                borderRadius="15px"
              />
            </Flex>
          </Td>
          <Td>
            <Button p="0px" bg="transparent">
              <Icon as={FaEllipsisV} color="gray.400" cursor="pointer" />
            </Button>
          </Td>
        </Tr>
      </Tbody>
    </Table>
  )
}

Import#

import TablesProjectRow from "components/Tables/TablesProjectRow"
// You should also import some data for the table
import { tablesProjectData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")
// This is how the "tablesProjectData" imported above should look like
const tablesProjectData = [
  {
    logo: AdobexdLogo,
    name: "Horizon AI Template Version",
    budget: "$14,000",
    status: "Working",
    progression: 60,
  },
  {
    logo: AtlassianLogo,
    name: