tables
() => {const data = [{name: "Segun Adebayo",email: "sage@chakra.com",},{name: "Josef Nikolas",email: "Josef@mail.com",},{name: "Lazar Nikolov",email: "Lazar@mail.com",},{name: "Abraham",email: "abraham@anu.com",},];const dataColor = useColorModeValue("white", "gray.800");const bg = useColorModeValue("white", "gray.800");const bg2 = useColorModeValue("gray.100", "gray.700");return (<Flexw="full"bg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}alignItems="center"justifyContent="center"><Stackdirection={{base: "column",}}w="full"bg={{md: bg,}}shadow="lg">{data.map((person, pid) => {return (<Flexdirection={{base: "row",md: "column",}}bg={dataColor}key={pid}><SimpleGridspacingY={3}columns={{base: 1,md: 3,}}w={{base: 120,md: "full",}}textTransform="uppercase"bg={bg2}color={"gray.500"}py={{base: 1,md: 4,}}px={{base: 2,md: 10,}}fontSize="md"fontWeight="hairline"><span>Name</span><span>Email</span><chakra.spantextAlign={{md: "right",}}>Actions</chakra.span></SimpleGrid><SimpleGridspacingY={3}columns={{base: 1,md: 3,}}w="full"py={2}px={10}fontWeight="hairline"><span>{person.name}</span><chakra.spantextOverflow="ellipsis"overflow="hidden"whiteSpace="nowrap">{person.email}</chakra.span><Flexjustify={{md: "end",}}><Button variant="solid" colorScheme="red" size="sm">Delete</Button></Flex></SimpleGrid></Flex>);})}</Stack></Flex>);};
() => {const data = [{name: "Daggy",created: "7 days ago",},{name: "Anubra",created: "23 hours ago",},{name: "Josef",created: "A few seconds ago",},{name: "Sage",created: "A few hours ago",},];const bg = useColorModeValue("white", "gray.800");const bg2 = useColorModeValue("white", "gray.800");const bg3 = useColorModeValue("gray.100", "gray.700");return (<Flexw="full"bg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}alignItems="center"justifyContent="center"><Stackdirection={{base: "column",}}w="full"bg={{md: bg,}}shadow="lg">{data.map((token, tid) => {return (<Flexdirection={{base: "row",md: "column",}}bg={bg2}key={tid}><SimpleGridspacingY={3}columns={{base: 1,md: 4,}}w={{base: 120,md: "full",}}textTransform="uppercase"bg={bg3}color={"gray.500"}py={{base: 1,md: 4,}}px={{base: 2,md: 10,}}fontSize="md"fontWeight="hairline"><span>Name</span><span>Created</span><span>Data</span><chakra.spantextAlign={{md: "right",}}>Actions</chakra.span></SimpleGrid><SimpleGridspacingY={3}columns={{base: 1,md: 4,}}w="full"py={2}px={10}fontWeight="hairline"><span>{token.name}</span><chakra.spantextOverflow="ellipsis"overflow="hidden"whiteSpace="nowrap">{token.created}</chakra.span><Flex><Buttonsize="sm"variant="solid"leftIcon={<Icon as={AiTwotoneLock} />}colorScheme="purple">View Profile</Button></Flex><Flexjustify={{md: "end",}}><ButtonGroup variant="solid" size="sm" spacing={3}><IconButtoncolorScheme="blue"icon={<BsBoxArrowUpRight />}aria-label="Up"/><IconButtoncolorScheme="green"icon={<AiFillEdit />}aria-label="Edit"/><IconButtoncolorScheme="red"variant="outline"icon={<BsFillTrashFill />}aria-label="Delete"/></ButtonGroup></Flex></SimpleGrid></Flex>);})}</Stack></Flex>);};
() => {const header = ["name", "created", "actions"];const data = [{name: "Daggy",created: "7 days ago",},{name: "Anubra",created: "23 hours ago",},{name: "Josef",created: "A few seconds ago",},{name: "Sage",created: "A few hours ago",},];const color1 = useColorModeValue("gray.400", "gray.400");const color2 = useColorModeValue("gray.400", "gray.400");return (<Flexw="full"bg="#edf3f8"_dark={{bg: "#3e3e3e",}}p={50}alignItems="center"justifyContent="center"><Tablew="full"bg="white"_dark={{bg: "gray.800",}}display={{base: "block",md: "table",}}sx={{"@media print": {display: "table",},}}><Theaddisplay={{base: "none",md: "table-header-group",}}sx={{"@media print": {display: "table-header-group",},}}><Tr>{header.map((x) => (<Th key={x}>{x}</Th>))}</Tr></Thead><Tbodydisplay={{base: "block",lg: "table-row-group",}}sx={{"@media print": {display: "table-row-group",},}}>{data.map((token, tid) => {return (<Trkey={tid}display={{base: "grid",md: "table-row",}}sx={{"@media print": {display: "table-row",},gridTemplateColumns: "minmax(0px, 35%) minmax(0px, 65%)",gridGap: "10px",}}>{Object.keys(token).map((x) => {return (<React.Fragment key={`${tid}${x}`}><Tddisplay={{base: "table-cell",md: "none",}}sx={{"@media print": {display: "none",},textTransform: "uppercase",color: color1,fontSize: "xs",fontWeight: "bold",letterSpacing: "wider",fontFamily: "heading",}}>{x}</Td><Tdcolor={"gray.500"}fontSize="md"fontWeight="hairline">{token[x]}</Td></React.Fragment>);})}<Tddisplay={{base: "table-cell",md: "none",}}sx={{"@media print": {display: "none",},textTransform: "uppercase",color: color2,fontSize: "xs",fontWeight: "bold",letterSpacing: "wider",fontFamily: "heading",}}>Actions</Td><Td><ButtonGroup variant="solid" size="sm" spacing={3}><IconButtoncolorScheme="blue"icon={<BsBoxArrowUpRight />}aria-label="Up"/><IconButtoncolorScheme="green"icon={<AiFillEdit />}aria-label="Edit"/><IconButtoncolorScheme="red"variant="outline"icon={<BsFillTrashFill />}aria-label="Delete"/></ButtonGroup></Td></Tr>);})}</Tbody></Table></Flex>);};
Proudly developed in by Anuoluwapo Abraham