Chakra UI Dashboard Components

Discover 1 components available in Chakra UI Dashboard

Section Tables Simple

Component from Chakra UI Dashboard Builder
<Grid data-type='Grid' templateColumns={{base:'repeat(1,1fr)',lg:'repeat(2,1fr)'}} gap={6}>
            <GridItem data-type='GridItem'>
              <TableContainer data-type='TableContainer'>
                <Table data-type='Table' size='md'>
                  <Thead data-type='Thead'>
                    <Tr data-type='Tr'>
                      <Th data-type='Th'>Page</Th>
                      <Th data-type='Th'>Bounce Rate</Th>
                      <Th data-type='Th'>Duration</Th>
                      <Th data-type='Th'>Conversion Rate</Th>
                    </Tr>
                  </Thead>
                  <Tbody data-type='Tbody'>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple</Td>
                      <Td data-type='Td'>45%</Td>
                      <Td data-type='Td'>00:00:30</Td>
                      <Td data-type='Td'>1.23%</Td>
                    </Tr>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple/react</Td>
                      <Td data-type='Td'>21%</Td>
                      <Td data-type='Td'>00:04:24</Td>
                      <Td data-type='Td'>2.14%</Td>
                    </Tr>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple/chakra-ui</Td>
                      <Td data-type='Td'>38%</Td>
                      <Td data-type='Td'>00:03:58</Td>
                      <Td data-type='Td'>1.85%</Td>
                    </Tr>
                  </Tbody>
                  <Tfoot data-type='Tfoot'>
                    <Tr data-type='Tr'>
                      <Td data-type='Td'>/loopple/bootstrap</Td>
                      <Td data-type='Td'>55%</Td>
                      <Td data-type='Td'>00:01:40</Td>
                      <Td data-type='Td'>1.08%</Td>
                    </Tr>
                  </Tfoot>
                </Table>
              </TableContainer>
            </GridItem>
            <GridItem data-type='GridItem'>
            <TableContainer data-type='TableContainer'>
              <Table data-type='Table' size='md'>
                <Thead data-type='Thead'>
                  <Tr data-type='Tr'>
                    <Th data-type='Th'>Language</Th>
                    <Th data-type='Th'>Users</Th>
                    <Th data-type='Th'>Users(%)</Th>
                  </Tr>
                </Thead>
                <Tbody data-type='Tbody'>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>en-us</Td>
                    <Td data-type='Td'>458</Td>
                    <Td data-type='Td'>52.52%</Td>
                  </Tr>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>en-gb</Td>
                    <Td data-type='Td'>112</Td>
                    <Td data-type='Td'>12.84%</Td>
                  </Tr>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>fr-fr</Td>
                    <Td data-type='Td'>33</Td>
                    <Td data-type='Td'>3.78%</Td>
                  </Tr>
                  <Tr data-type='Tr'>
                    <Td data-type='Td'>de-de</Td>
                    <Td data-type='Td'>22</Td>
                    <Td data-type='Td'>2.52%</Td>
                  </Tr>
                </Tbody>
              </Table>
              </TableContainer>
            </GridItem>
          </Grid>