Tailwind CSS Table
The Tailwind CSS Tables are used to organize structured data in a grid-like format, presenting the information in a visually organized manner. The tables help users understand and interact with data by making it easy for them to scan and compare data points. Table components are used to present various types of data (product listings, financial reports, user profiles, etc).
See below Material Tailwind's examples of table components that help developers display information in a clear, organized manner, making it easier for users to read, understand, and interact with data.
Table Examples:
Default Table
Use our simple 4 columns table styled with Tailwind CSS to organize your data in a responsive way.
<div
class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-xl bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Name
</p>
</th>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Job
</p>
</th>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Employed
</p>
</th>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70"></p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
John Michael
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
Edit
</a>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Alexa Liras
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Developer
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
Edit
</a>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Laurent Perrier
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Executive
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
19/09/17
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
Edit
</a>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Michael Levi
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Developer
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
24/12/08
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
Edit
</a>
</td>
</tr>
<tr>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Richard Gran
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
04/10/21
</p>
</td>
<td class="p-4">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>Table With Striped Rows
In this example, we added the class even:bg-blue-gray-50/50 applied to each row, which alternates the background color of even rows for better readability and visual appeal.
<div
class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md bg-clip-border rounded-xl">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Name
</p>
</th>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Job
</p>
</th>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Employed
</p>
</th>
<th class="p-4 border-b border-blue-gray-100 bg-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70"></p>
</th>
</tr>
</thead>
<tbody>
<tr class="even:bg-blue-gray-50/50">
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
John Michael
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">Edit</a>
</td>
</tr>
<tr class="even:bg-blue-gray-50/50">
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Alexa Liras
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Developer
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">Edit</a>
</td>
</tr>
<tr class="even:bg-blue-gray-50/50">
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Laurent Perrier
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Executive
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
19/09/17
</p>
</td>
<td class="p-4">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">Edit</a>
</td>
</tr>
<tr class="even:bg-blue-gray-50/50">
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Michael Levi
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Developer
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
24/12/08
</p>
</td>
<td class="p-4">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">Edit</a>
</td>
</tr>
<tr class="even:bg-blue-gray-50/50">
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Richard Gran
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
04/10/21
</p>
</td>
<td class="p-4">
<a href="#" class="block font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">Edit</a>
</td>
</tr>
</tbody>
</table>
</div>Transaction Table
This example showcases a more complex and feature-rich approach to presenting and interacting with tabular data. The inclusion of a search bar and download button directly above the table improves the interface's interactivity and functionality. The use of images, status tags, and action buttons within the table rows adds a layer of complexity and utility, making the data more accessible and actionable.
Recent Transactions
These are details about the last transactions
Transaction | Amount | Date | Status | Account | |
|---|---|---|---|---|---|
 Spotify | $2,500 | Wed 3:00pm | paid |  visa 1234 06/2026 | |
 Amazon | $5,000 | Wed 1:00pm | paid |  master card 1234 06/2026 | |
 | $3,400 | Mon 7:40pm | pending | master card 1234 06/2026 | |
 | $1,000 | Wed 5:00pm | paid | visa 1234 06/2026 | |
 netflix | $14,000 | Wed 3:30am | cancelled | visa 1234 06/2026 |
<div class="relative flex flex-col w-full h-full text-gray-700 bg-white shadow-md rounded-xl bg-clip-border">
<div class="relative mx-4 mt-4 overflow-hidden text-gray-700 bg-white rounded-none bg-clip-border">
<div class="flex flex-col justify-between gap-8 mb-4 md:flex-row md:items-center">
<div>
<h5
class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
Recent Transactions
</h5>
<p class="block mt-1 font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
These are details about the last transactions
</p>
</div>
<div class="flex w-full gap-2 shrink-0 md:w-max">
<div class="w-full md:w-72">
<div class="relative h-10 w-full min-w-[200px]">
<div
class="absolute grid w-5 h-5 top-2/4 right-3 -translate-y-2/4 place-items-center text-blue-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</div>
<input
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" " />
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Search
</label>
</div>
</div>
<button
class="flex select-none items-center gap-3 rounded-lg bg-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
aria-hidden="true" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3">
</path>
</svg>
Download
</button>
</div>
</div>
</div>
<div class="p-6 px-0 overflow-scroll">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Transaction
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Amount
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Date
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Status
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Account
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://docs.material-tailwind.com/img/logos/logo-spotify.svg" alt="Spotify"
class="relative inline-block h-12 w-12 !rounded-full border border-blue-gray-50 bg-blue-gray-50/50 object-contain object-center p-1" />
<p class="block font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
Spotify
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
$2,500
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Wed 3:00pm
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">paid</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<div class="w-12 p-1 border rounded-md h-9 border-blue-gray-50">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png"
alt="visa"
class="relative inline-block h-full w-full !rounded-none object-contain object-center p-1" />
</div>
<div class="flex flex-col">
<p
class="block font-sans text-sm antialiased font-normal leading-normal capitalize text-blue-gray-900">
visa 1234
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
06/2026
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://docs.material-tailwind.com/img/logos/logo-amazon.svg" alt="Amazon"
class="relative inline-block h-12 w-12 !rounded-full border border-blue-gray-50 bg-blue-gray-50/50 object-contain object-center p-1" />
<p class="block font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
Amazon
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
$5,000
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Wed 1:00pm
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">paid</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<div class="w-12 p-1 border rounded-md h-9 border-blue-gray-50">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png"
alt="master-card"
class="relative inline-block h-full w-full !rounded-none object-contain object-center p-1" />
</div>
<div class="flex flex-col">
<p
class="block font-sans text-sm antialiased font-normal leading-normal capitalize text-blue-gray-900">
master card 1234
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
06/2026
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://docs.material-tailwind.com/img/logos/logo-pinterest.svg" alt="Pinterest"
class="relative inline-block h-12 w-12 !rounded-full border border-blue-gray-50 bg-blue-gray-50/50 object-contain object-center p-1" />
<p class="block font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
Pinterest
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
$3,400
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Mon 7:40pm
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-amber-500/20 text-amber-900">
<span class="">pending</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<div class="w-12 p-1 border rounded-md h-9 border-blue-gray-50">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/mastercard.png"
alt="master-card"
class="relative inline-block h-full w-full !rounded-none object-contain object-center p-1" />
</div>
<div class="flex flex-col">
<p
class="block font-sans text-sm antialiased font-normal leading-normal capitalize text-blue-gray-900">
master card 1234
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
06/2026
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://docs.material-tailwind.com/img/logos/logo-google.svg" alt="Google"
class="relative inline-block h-12 w-12 !rounded-full border border-blue-gray-50 bg-blue-gray-50/50 object-contain object-center p-1" />
<p class="block font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
Google
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
$1,000
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Wed 5:00pm
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">paid</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<div class="w-12 p-1 border rounded-md h-9 border-blue-gray-50">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png"
alt="visa"
class="relative inline-block h-full w-full !rounded-none object-contain object-center p-1" />
</div>
<div class="flex flex-col">
<p
class="block font-sans text-sm antialiased font-normal leading-normal capitalize text-blue-gray-900">
visa 1234
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
06/2026
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4">
<div class="flex items-center gap-3">
<img src="https://docs.material-tailwind.com/img/logos/logo-netflix.svg" alt="netflix"
class="relative inline-block h-12 w-12 !rounded-full border border-blue-gray-50 bg-blue-gray-50/50 object-contain object-center p-1" />
<p class="block font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
netflix
</p>
</div>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
$14,000
</p>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Wed 3:30am
</p>
</td>
<td class="p-4">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-red-900 uppercase rounded-md select-none whitespace-nowrap bg-red-500/20">
<span class="">cancelled</span>
</div>
</div>
</td>
<td class="p-4">
<div class="flex items-center gap-3">
<div class="w-12 p-1 border rounded-md h-9 border-blue-gray-50">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/logos/visa.png"
alt="visa"
class="relative inline-block h-full w-full !rounded-none object-contain object-center p-1" />
</div>
<div class="flex flex-col">
<p
class="block font-sans text-sm antialiased font-normal leading-normal capitalize text-blue-gray-900">
visa 1234
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
06/2026
</p>
</div>
</div>
</td>
<td class="p-4">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between p-4 border-t border-blue-gray-50">
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Previous
</button>
<div class="flex items-center gap-2">
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg border border-gray-900 text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
1
</span>
</button>
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
2
</span>
</button>
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
3
</span>
</button>
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
...
</span>
</button>
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
8
</span>
</button>
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
9
</span>
</button>
<button
class="relative h-8 max-h-[32px] w-8 max-w-[32px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
10
</span>
</button>
</div>
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Next
</button>
</div>
</div>Members Table
In this example, the combination of filtering tabs, detailed member information, search functionality, and pagination controls makes it a comprehensive solution for managing and displaying member data in a user-friendly manner.
Members list
See information about all members
Member | Function | Status | Employed | |
|---|---|---|---|---|
 John Michael john@creative-tim.com | Manager Organization | online | 23/04/18 | |
 Alexa Liras alexa@creative-tim.com | Programator Developer | offline | 23/04/18 | |
 Laurent Perrier laurent@creative-tim.com | Executive Projects | offline | 19/09/17 | |
 Michael Levi michael@creative-tim.com | Programator Developer | online | 24/12/08 | |
 Richard Gran richard@creative-tim.com | Manager Executive | offline | 04/10/21 |
Page 1 of 10
<div class="relative flex flex-col w-full h-full text-gray-700 bg-white shadow-md rounded-xl bg-clip-border">
<div class="relative mx-4 mt-4 overflow-hidden text-gray-700 bg-white rounded-none bg-clip-border">
<div class="flex items-center justify-between gap-8 mb-8">
<div>
<h5
class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
Members list
</h5>
<p class="block mt-1 font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
See information about all members
</p>
</div>
<div class="flex flex-col gap-2 shrink-0 sm:flex-row">
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
view all
</button>
<button
class="flex select-none items-center gap-3 rounded-lg bg-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
stroke-width="2" class="w-4 h-4">
<path
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z">
</path>
</svg>
Add member
</button>
</div>
</div>
<div class="flex flex-col items-center justify-between gap-4 md:flex-row">
<div class="block w-full overflow-hidden md:w-max">
<nav>
<ul role="tablist" class="relative flex flex-row p-1 rounded-lg bg-blue-gray-50 bg-opacity-60">
<li role="tab"
class="relative flex items-center justify-center w-full h-full px-2 py-1 font-sans text-base antialiased font-normal leading-relaxed text-center bg-transparent cursor-pointer select-none text-blue-gray-900"
data-value="all">
<div class="z-20 text-inherit">
All
</div>
<div class="absolute inset-0 z-10 h-full bg-white rounded-md shadow"></div>
</li>
<li role="tab"
class="relative flex items-center justify-center w-full h-full px-2 py-1 font-sans text-base antialiased font-normal leading-relaxed text-center bg-transparent cursor-pointer select-none text-blue-gray-900"
data-value="monitored">
<div class="z-20 text-inherit">
Monitored
</div>
</li>
<li role="tab"
class="relative flex items-center justify-center w-full h-full px-2 py-1 font-sans text-base antialiased font-normal leading-relaxed text-center bg-transparent cursor-pointer select-none text-blue-gray-900"
data-value="unmonitored">
<div class="z-20 text-inherit">
Unmonitored
</div>
</li>
</ul>
</nav>
</div>
<div class="w-full md:w-72">
<div class="relative h-10 w-full min-w-[200px]">
<div class="absolute grid w-5 h-5 top-2/4 right-3 -translate-y-2/4 place-items-center text-blue-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</div>
<input
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" " />
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Search
</label>
</div>
</div>
</div>
</div>
<div class="p-6 px-0 overflow-scroll">
<table class="w-full mt-4 text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Member
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Function
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Status
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Employed
</p>
</th>
<th class="p-4 border-y border-blue-gray-100 bg-blue-gray-50/50">
<p class="block font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg"
alt="John Michael" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
John Michael
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
john@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Organization
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">online</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg"
alt="Alexa Liras" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Alexa Liras
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
alexa@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Programator
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Developer
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-blue-gray-500/20 text-blue-gray-900">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg"
alt="Laurent Perrier"
class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Laurent Perrier
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
laurent@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Executive
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Projects
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-blue-gray-500/20 text-blue-gray-900">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
19/09/17
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg"
alt="Michael Levi" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Michael Levi
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
michael@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Programator
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Developer
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">online</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
24/12/08
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg"
alt="Richard Gran" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Richard Gran
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
richard@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Executive
</p>
</div>
</td>
<td class="p-4">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-blue-gray-500/20 text-blue-gray-900">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
04/10/21
</p>
</td>
<td class="p-4">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between p-4 border-t border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Page 1 of 10
</p>
<div class="flex gap-2">
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Previous
</button>
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Next
</button>
</div>
</div>
</div>Sortable Table
In this example. the table headers are interactive and sortable, as indicated by the presence of arrow icons next to the column titles ("Member", "Function", "Status", "Employed"). This feature allows users to sort the list based on different attributes, offering a tailored view of the data.
Members list
See information about all members
Member | Function | Status | Employed | |
|---|---|---|---|---|
John Michael john@creative-tim.com | Manager Organization | online | 23/04/18 | |
Alexa Liras alexa@creative-tim.com | Programator Developer | offline | 23/04/18 | |
Laurent Perrier laurent@creative-tim.com | Executive Projects | offline | 19/09/17 | |
Michael Levi michael@creative-tim.com | Programator Developer | online | 24/12/08 | |
Richard Gran richard@creative-tim.com | Manager Executive | offline | 04/10/21 |
Page 1 of 10
<div class="relative flex flex-col w-full h-full text-gray-700 bg-white shadow-md rounded-xl bg-clip-border">
<div class="relative mx-4 mt-4 overflow-hidden text-gray-700 bg-white rounded-none bg-clip-border">
<div class="flex items-center justify-between gap-8 mb-8">
<div>
<h5
class="block font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
Members list
</h5>
<p class="block mt-1 font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
See information about all members
</p>
</div>
<div class="flex flex-col gap-2 shrink-0 sm:flex-row">
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
view all
</button>
<button
class="flex select-none items-center gap-3 rounded-lg bg-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
stroke-width="2" class="w-4 h-4">
<path
d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z">
</path>
</svg>
Add member
</button>
</div>
</div>
<div class="flex flex-col items-center justify-between gap-4 md:flex-row">
<div class="block w-full overflow-hidden md:w-max">
<nav>
<ul role="tablist" class="relative flex flex-row p-1 rounded-lg bg-blue-gray-50 bg-opacity-60">
<li role="tab"
class="relative flex items-center justify-center w-full h-full px-2 py-1 font-sans text-base antialiased font-normal leading-relaxed text-center bg-transparent cursor-pointer select-none text-blue-gray-900"
data-value="all">
<div class="z-20 text-inherit">
All
</div>
<div class="absolute inset-0 z-10 h-full bg-white rounded-md shadow"></div>
</li>
<li role="tab"
class="relative flex items-center justify-center w-full h-full px-2 py-1 font-sans text-base antialiased font-normal leading-relaxed text-center bg-transparent cursor-pointer select-none text-blue-gray-900"
data-value="monitored">
<div class="z-20 text-inherit">
Monitored
</div>
</li>
<li role="tab"
class="relative flex items-center justify-center w-full h-full px-2 py-1 font-sans text-base antialiased font-normal leading-relaxed text-center bg-transparent cursor-pointer select-none text-blue-gray-900"
data-value="unmonitored">
<div class="z-20 text-inherit">
Unmonitored
</div>
</li>
</ul>
</nav>
</div>
<div class="w-full md:w-72">
<div class="relative h-10 w-full min-w-[200px]">
<div class="absolute grid w-5 h-5 top-2/4 right-3 -translate-y-2/4 place-items-center text-blue-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</div>
<input
class="peer h-full w-full rounded-[7px] border border-blue-gray-200 border-t-transparent bg-transparent px-3 py-2.5 !pr-9 font-sans text-sm font-normal text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
placeholder=" " />
<label
class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-placeholder-shown:text-blue-gray-500 peer-placeholder-shown:before:border-transparent peer-placeholder-shown:after:border-transparent peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
Search
</label>
</div>
</div>
</div>
</div>
<div class="p-6 px-0 overflow-scroll">
<table class="w-full mt-4 text-left table-auto min-w-max">
<thead>
<tr>
<th
class="p-4 transition-colors cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 hover:bg-blue-gray-50">
<p
class="flex items-center justify-between gap-2 font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Member
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" aria-hidden="true" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path>
</svg>
</p>
</th>
<th
class="p-4 transition-colors cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 hover:bg-blue-gray-50">
<p
class="flex items-center justify-between gap-2 font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Function
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" aria-hidden="true" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path>
</svg>
</p>
</th>
<th
class="p-4 transition-colors cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 hover:bg-blue-gray-50">
<p
class="flex items-center justify-between gap-2 font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Status
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" aria-hidden="true" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path>
</svg>
</p>
</th>
<th
class="p-4 transition-colors cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 hover:bg-blue-gray-50">
<p
class="flex items-center justify-between gap-2 font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
Employed
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" aria-hidden="true" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path>
</svg>
</p>
</th>
<th
class="p-4 transition-colors cursor-pointer border-y border-blue-gray-100 bg-blue-gray-50/50 hover:bg-blue-gray-50">
<p
class="flex items-center justify-between gap-2 font-sans text-sm antialiased font-normal leading-none text-blue-gray-900 opacity-70">
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-3.jpg"
alt="John Michael" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
John Michael
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
john@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Organization
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">online</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-2.jpg"
alt="Alexa Liras" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Alexa Liras
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
alexa@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Programator
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Developer
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-blue-gray-500/20 text-blue-gray-900">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
23/04/18
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-1.jpg"
alt="Laurent Perrier"
class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Laurent Perrier
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
laurent@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Executive
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Projects
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-blue-gray-500/20 text-blue-gray-900">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
19/09/17
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-4.jpg"
alt="Michael Levi" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Michael Levi
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
michael@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Programator
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Developer
</p>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold text-green-900 uppercase rounded-md select-none whitespace-nowrap bg-green-500/20">
<span class="">online</span>
</div>
</div>
</td>
<td class="p-4 border-b border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
24/12/08
</p>
</td>
<td class="p-4 border-b border-blue-gray-50">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
<tr>
<td class="p-4">
<div class="flex items-center gap-3">
<img src="https://demos.creative-tim.com/test/corporate-ui-dashboard/assets/img/team-5.jpg"
alt="Richard Gran" class="relative inline-block h-9 w-9 !rounded-full object-cover object-center" />
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Richard Gran
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
richard@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4">
<div class="flex flex-col">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Manager
</p>
<p
class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900 opacity-70">
Executive
</p>
</div>
</td>
<td class="p-4">
<div class="w-max">
<div
class="relative grid items-center px-2 py-1 font-sans text-xs font-bold uppercase rounded-md select-none whitespace-nowrap bg-blue-gray-500/20 text-blue-gray-900">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
04/10/21
</p>
</td>
<td class="p-4">
<button
class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg text-center align-middle font-sans text-xs font-medium uppercase text-gray-900 transition-all hover:bg-gray-900/10 active:bg-gray-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
<span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
class="w-4 h-4">
<path
d="M21.731 2.269a2.625 2.625 0 00-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 000-3.712zM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 00-1.32 2.214l-.8 2.685a.75.75 0 00.933.933l2.685-.8a5.25 5.25 0 002.214-1.32L19.513 8.2z">
</path>
</svg>
</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex items-center justify-between p-4 border-t border-blue-gray-50">
<p class="block font-sans text-sm antialiased font-normal leading-normal text-blue-gray-900">
Page 1 of 10
</p>
<div class="flex gap-2">
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Previous
</button>
<button
class="select-none rounded-lg border border-gray-900 py-2 px-4 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Next
</button>
</div>
</div>
</div>Table Best Practices for Developers
• Establish a visual hierarchy to guide users through the table.
• For tables with a large number of rows, consider using pagination or infinite scroll to improve load times and usability.
• Use tooltips, expandable rows, or detail panels to provide additional information without overwhelming the initial view.
• Provide immediate feedback for interactions such as sorting, filtering, or editing.