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"><Boxdisplay="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><Flexdirection={{ sm: "column", md: "row" }}alignItems="flex-start"p={{ md: "1.5rem" }}><Buttonp="0px"bg="transparent"mb={{ sm: "10px", md: "0px" }}mr={{ md: "12px" }}><Flexcolor="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"><Flexcolor={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><Boxdisplay="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><Flexdirection={{ sm: "column", md: "row" }}alignItems="flex-start"p={{ md: "1.5rem" }}><Buttonp="0px"bg="transparent"mb={{ sm: "10px", md: "0px" }}mr={{ md: "12px" }}><Flexcolor="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"><Flexcolor={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><Boxdisplay="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><Flexdirection={{ sm: "column", md: "row" }}alignItems="flex-start"p={{ md: "1.5rem" }}><Buttonp="0px"bg="transparent"mb={{ sm: "10px", md: "0px" }}mr={{ md: "12px" }}><Flexcolor="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"><Flexcolor={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 tableimport { billingData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")// This is how the "billingData" imported above should look likeconst 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 (<BillingRowname={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" /><TextfontSize="md"color={textColor}fontWeight="bold"minWidth="100%">Horizon AI Template Version</Text></Flex></Td><Td><AvatarGroup size="sm"><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="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><ProgresscolorScheme={"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" /><TextfontSize="md"color={textColor}fontWeight="bold"minWidth="100%">Add Progress Track</Text></Flex></Td><Td><AvatarGroup size="sm"><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="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><ProgresscolorScheme={"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" /><TextfontSize="md"color={textColor}fontWeight="bold"minWidth="100%">Fix Platform Errors</Text></Flex></Td><Td><AvatarGroup size="sm"><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">100%</Text><ProgresscolorScheme={"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" /><TextfontSize="md"color={textColor}fontWeight="bold"minWidth="100%">Launch our Mobile App</Text></Flex></Td><Td><AvatarGroup size="sm"><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">100%</Text><ProgresscolorScheme={"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" /><TextfontSize="md"color={textColor}fontWeight="bold"minWidth="100%">Add the New Pricing Page</Text></Flex></Td><Td><AvatarGroup size="sm"><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="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><ProgresscolorScheme={"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" /><TextfontSize="md"color={textColor}fontWeight="bold"minWidth="100%">Redesign New Online Shop</Text></Flex></Td><Td><AvatarGroup size="sm"><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="avatar"src="https://demos.creative-tim.com/horizon-ui-chakra/static/media/signInImage.eeb0c777.png"_hover={{ zIndex: "3", cursor: "pointer" }}/><Avatarname="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><ProgresscolorScheme={"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 tableimport { dashboardData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")// This is how the "dashboardData" imported above should look likeconst 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 (<DashboardTableRowname={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"></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"></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"></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"></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"></Text></Flex></Button></Flex></Flex>)}
Import#
import InvoicesRow from "components/Tables/InvoicesRow"// You should also import some data for the tableimport { invoicesData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")// This is how the "dashboardData" imported above should look likeconst 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 (<InvoicesRowdate={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"><FlexalignItems="center"py=".8rem"minWidth="100%"flexWrap="nowrap"><Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" /><TextfontSize="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">60%</Text><ProgresscolorScheme={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"><FlexalignItems="center"py=".8rem"minWidth="100%"flexWrap="nowrap"><Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" /><TextfontSize="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">60%</Text><ProgresscolorScheme={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"><FlexalignItems="center"py=".8rem"minWidth="100%"flexWrap="nowrap"><Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" /><TextfontSize="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">100%</Text><ProgresscolorScheme={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"><FlexalignItems="center"py=".8rem"minWidth="100%"flexWrap="nowrap"><Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" /><TextfontSize="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">100%</Text><ProgresscolorScheme={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"><FlexalignItems="center"py=".8rem"minWidth="100%"flexWrap="nowrap"><Icon as={CheckIcon} h={"24px"} w={"24px"} mr="18px" /><TextfontSize="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"><TextfontSize="md"color="brand.300"fontWeight="bold"pb=".2rem">40%</Text><ProgresscolorScheme={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 tableimport { tablesProjectData } from "variables/general"
const textColor = useColorModeValue("gray.700", "white")// This is how the "tablesProjectData" imported above should look likeconst tablesProjectData = [{logo: AdobexdLogo,name: "Horizon AI Template Version",budget: "$14,000",status: "Working",progression: 60,},{logo: AtlassianLogo,name: