Chakra Tables Section
Discover 1 Chakra Tables Section available in Loopple
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>