Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard AdminKit Chakra UI Dashboard Motion Landing Library Asteria Dashboard Soft UI Dashboard Riva Dashboard Tailwind Motion Landing Library React Soft UI Design System Argon Dashboard Soft UI Dashboard Tailwind
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>