Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
AdminKit Horizon UI Dashboard Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Soft UI Design System Soft UI Dashboard Tailwind Argon Dashboard
All 32
Components 12
Typography 3
Cards 8
Sidebars 1
Tables 2
Navbars 1
Cards Section 2
Tables Section 1
Projects Section 1

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>