Framework
Theme
All
683
Forms
16
Charts
21
Navbars
45
Sidebars
27
Typography
42
Components
62
Tables
34
Cards
70
Contact Us
9
Testimonials
19
Features
25
Cards Section
38
Teams Section
11
Faq
9
Headers
47
Blogs
15
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
18
Logo Areas
12
Projects Section
14
Stats
13
Authentication
15
Call To Actions
21
Http Codes
6
Teams
16
Pricing
13
Tables - All Examples
Discover 34 Tables examples 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 Authors
Component from
Soft UI Dashboard Tailwind
Builder
<div class="relative flex flex-col w-full min-w-0 mb-0 break-words bg-white border-0 border-transparent border-solid shadow-soft-xl rounded-2xl bg-clip-border mb-4 draggable">
<div class="p-6 pb-0 mb-0 bg-white rounded-t-2xl">
<h6 class="font-display">Authors table</h6>
</div>
<div class="flex-auto px-0 pt-0 pb-2">
<div class="p-0 overflow-x-auto">
<table class="items-center w-full mb-0 align-top border-gray-200 text-slate-500">
<thead class="align-bottom">
<tr>
<th class="px-6 py-3 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Author</th>
<th class="px-6 py-3 pl-2 font-bold text-left uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Function</th>
<th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Status</th>
<th class="px-6 py-3 font-bold text-center uppercase align-middle bg-transparent border-b border-gray-200 shadow-none text-xxs border-b-solid tracking-none whitespace-nowrap text-slate-400 opacity-70">Employed</th>
<th class="px-6 py-3 font-semibold capitalize align-middle bg-transparent border-b border-gray-200 border-solid shadow-none tracking-none whitespace-nowrap text-slate-400 opacity-70"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-2.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user1" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">John Michael</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Manager</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Organization</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">23/04/18</span>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
<tr>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-3.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user2" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">Alexa Liras</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Programator</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Developer</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-slate-600 to-slate-300 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Offline</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">11/01/19</span>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
<tr>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-4.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user3" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">Laurent Perrier</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Executive</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Projects</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">19/09/17</span>
</td>
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
<tr>
<td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<div class="flex px-2 py-1">
<div>
<img src="https://demos.creative-tim.com/soft-ui-dashboard-tailwind/assets/img/team-1.jpg" class="inline-flex items-center justify-center mr-4 text-white transition-all duration-200 ease-soft-in-out text-sm h-9 w-9 rounded-xl" alt="user6" />
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-0 leading-normal text-sm font-display">Miriam Eric</h6>
<p class="mb-0 leading-tight text-xs text-slate-400">[email protected]</p>
</div>
</div>
</td>
<td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<p class="mb-0 font-semibold leading-tight text-xs">Programtor</p>
<p class="mb-0 leading-tight text-xs text-slate-400">Developer</p>
</td>
<td class="p-2 leading-normal text-center align-middle bg-transparent border-b-0 text-sm whitespace-nowrap shadow-transparent">
<span class="bg-gradient-to-tl from-green-600 to-lime-400 px-2 text-xxs rounded py-1 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white">Online</span>
</td>
<td class="p-2 text-center align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<span class="font-semibold leading-tight text-xs text-slate-400">14/09/20</span>
</td>
<td class="p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent">
<a href="javascript:;" class="font-semibold leading-tight text-xs text-slate-400"> Edit </a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
