Framework

All Frameworks
bootstrap tailwind chakra

Theme

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

Discover 2 Chakra Tables available in Loopple

Table

Component from Chakra UI Dashboard Builder 
<TableContainer data-type='TableContainer'>
  <Table data-type='Table' variant='simple'>
    <Thead data-type='Thead'>
      <Tr data-type='Tr'>
        <Th data-type='Th'>To convert</Th>
        <Th data-type='Th'>into</Th>
        <Th data-type='Th'>multiply by</Th>
      </Tr>
    </Thead>
    <Tbody data-type='Tbody'>
      <Tr data-type='Tr'>
        <Td data-type='Td'>inches</Td>
        <Td data-type='Td'>millimetres (mm)</Td>
        <Td data-type='Td' isNumeric>25.4</Td>
      </Tr>
      <Tr data-type='Tr'>
        <Td data-type='Td'>feet</Td>
        <Td data-type='Td'>centimetres (cm)</Td>
        <Td data-type='Td' isNumeric>30.48</Td>
      </Tr>
      <Tr data-type='Tr'>
        <Td data-type='Td'>yards</Td>
        <Td data-type='Td'>metres (m)</Td>
        <Td data-type='Td' isNumeric>0.91444</Td>
      </Tr>
    </Tbody>
    <Tfoot data-type='Tfoot'>
      <Tr data-type='Tr'>
        <Th data-type='Th'>To convert</Th>
        <Th data-type='Th'>into</Th>
        <Th data-type='Th' isNumeric>multiply by</Th>
      </Tr>
    </Tfoot>
  </Table>
</TableContainer>

Table Striped

Component from Chakra UI Dashboard Builder 
<TableContainer data-type='TableContainer'>
  <Table data-type='Table' variant='striped' colorScheme='teal'>
    <Thead data-type='Thead'>
      <Tr data-type='Tr'>
        <Th data-type='Th'>To convert</Th>
        <Th data-type='Th'>into</Th>
        <Th data-type='Th' isNumeric>multiply by</Th>
      </Tr>
    </Thead>
    <Tbody data-type='Tbody'>
      <Tr data-type='Tr'>
        <Td data-type='Td'>inches</Td>
        <Td data-type='Td'>millimetres (mm)</Td>
        <Td data-type='Td' isNumeric>25.4</Td>
      </Tr>
      <Tr data-type='Tr'>
        <Td data-type='Td'>feet</Td>
        <Td data-type='Td'>centimetres (cm)</Td>
        <Td data-type='Td' isNumeric>30.48</Td>
      </Tr>
      <Tr data-type='Tr'>
        <Td data-type='Td'>yards</Td>
        <Td data-type='Td'>metres (m)</Td>
        <Td data-type='Td' isNumeric>0.91444</Td>
      </Tr>
    </Tbody>
    <Tfoot data-type='Tfoot'>
      <Tr data-type='Tr'>
        <Th data-type='Th'>To convert</Th>
        <Th data-type='Th'>into</Th>
        <Th data-type='Th' isNumeric>multiply by</Th>
      </Tr>
    </Tfoot>
  </Table>
</TableContainer>