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>