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>Plain Table (Table without Border)
Use this example of a tailwind plain table for a clean and minimalist look. This design focuses on the content without any distractions, making it ideal for simple data presentation.
Project Name | Start Date | End Date | Owner | Budget | |
|---|---|---|---|---|---|
Project Alpha | 01/01/2024 | 30/06/2024 | John Michael | $50,000 | Edit |
Beta Campaign | 15/02/2024 | 15/08/2024 | Alexa Liras | $75,000 | Edit |
Campaign Delta | 01/03/2024 | 01/09/2024 | Laurent Perrier | $60,000 | Edit |
Gamma Outreach | 10/04/2024 | 10/10/2024 | Michael Levi | $80,000 | Edit |
Omega Strategy | 01/05/2024 | 01/11/2024 | Richard Gran | $100,000 | Edit |
<div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max text-slate-800">
<thead>
<tr class="text-slate-500 border-b border-slate-300 bg-slate-50">
<th class="p-4">
<p class="text-sm leading-none font-normal">
Project Name
</p>
</th>
<th class="p-4">
<p class="text-sm leading-none font-normal">
Start Date
</p>
</th>
<th class="p-4">
<p class="text-sm leading-none font-normal">
End Date
</p>
</th>
<th class="p-4">
<p class="text-sm leading-none font-normal">
Owner
</p>
</th>
<th class="p-4">
<p class="text-sm leading-none font-normal">
Budget
</p>
</th>
<th class="p-4">
<p></p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50">
<td class="p-4">
<p class="text-sm font-bold">
Project Alpha
</p>
</td>
<td class="p-4">
<p class="text-sm">
01/01/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
30/06/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
John Michael
</p>
</td>
<td class="p-4">
<p class="text-sm">
$50,000
</p>
</td>
<td class="p-4">
<a href="#" class="text-sm font-semibold ">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4">
<p class="text-sm font-bold">
Beta Campaign
</p>
</td>
<td class="p-4">
<p class="text-sm">
15/02/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
15/08/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
Alexa Liras
</p>
</td>
<td class="p-4">
<p class="text-sm">
$75,000
</p>
</td>
<td class="p-4">
<a href="#" class="text-sm font-semibold ">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4">
<p class="text-sm font-bold">
Campaign Delta
</p>
</td>
<td class="p-4">
<p class="text-sm">
01/03/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
01/09/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
Laurent Perrier
</p>
</td>
<td class="p-4">
<p class="text-sm">
$60,000
</p>
</td>
<td class="p-4">
<a href="#" class="text-sm font-semibold ">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4">
<p class="text-sm font-bold">
Gamma Outreach
</p>
</td>
<td class="p-4">
<p class="text-sm">
10/04/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
10/10/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
Michael Levi
</p>
</td>
<td class="p-4">
<p class="text-sm">
$80,000
</p>
</td>
<td class="p-4">
<a href="#" class="text-sm font-semibold ">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4">
<p class="text-sm font-bold">
Omega Strategy
</p>
</td>
<td class="p-4">
<p class="text-sm">
01/05/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
01/11/2024
</p>
</td>
<td class="p-4">
<p class="text-sm">
Richard Gran
</p>
</td>
<td class="p-4">
<p class="text-sm">
$100,000
</p>
</td>
<td class="p-4">
<a href="#" class="text-sm font-semibold ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>Table With Hover State
Try this table example to highlight rows when users hover over them. The hover state improves interactivity and readability, allowing users to easily follow and identify specific rows.
<div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Name
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Job
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Employed
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500"></p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
John Michael
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Manager
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
23/04/18
</p>
</td>
<td class="p-4 border-b border-slate-200">
<a href="#" class="block text-sm font-semibold text-slate-800">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Alexa Liras
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
23/04/18
</p>
</td>
<td class="p-4 border-b border-slate-200">
<a href="#" class="block text-sm font-semibold text-slate-800">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Laurent Perrier
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Executive
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
19/09/17
</p>
</td>
<td class="p-4 border-b border-slate-200">
<a href="#" class="block text-sm font-semibold text-slate-800">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Michael Levi
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
24/12/08
</p>
</td>
<td class="p-4 border-b border-slate-200">
<a href="#" class="block text-sm font-semibold text-slate-800">
Edit
</a>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4">
<p class="block text-sm text-slate-800">
Richard Gran
</p>
</td>
<td class="p-4">
<p class="block text-sm text-slate-800">
Manager
</p>
</td>
<td class="p-4">
<p class="block text-sm text-slate-800">
04/10/21
</p>
</td>
<td class="p-4">
<a href="#" class="block text-sm font-semibold text-slate-800">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
Table with Title and Description
This caption table example includes a title and a description above the table, providing context and additional information about the data presented. Ideal for detailed reports or sections where a brief explanation is beneficial.
Team Members and Roles
Overview of the key persons involved in the next project and their geographical distribution.
Name | Role | Location | |
|---|---|---|---|
John Michael | Manager | john.michael@example.com | New York, USA |
Alexa Liras | Developer | alexa.liras@example.com | San Francisco, USA |
Laurent Perrier | Executive | laurent.perrier@example.com | Paris, France |
Michael Levi | Developer | michael.levi@example.com | London, UK |
<div class="w-full">
<h3 class="text-lg font-semibold ml-3 text-slate-800">Team Members and Roles</h3>
<p class="text-slate-500 mb-5 ml-3">Overview of the key persons involved in the next project and their geographical distribution.</p>
</div>
<div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Name
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Role
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Email
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Location
</p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
John Michael
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Manager
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
john.michael@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
New York, USA
</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Alexa Liras
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
alexa.liras@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
San Francisco, USA
</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Laurent Perrier
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Executive
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
laurent.perrier@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Paris, France
</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Michael Levi
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
michael.levi@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
London, UK
</p>
</td>
</tr>
</tbody>
</table>
</div>
Table with Footer and Total
This table example includes a footer section for summarizing information such as totals or additional notes. The footer improves data comprehension by providing a summary or additional context at the end of the table.
Table with Search
Use this example of a table with a search functionality to allow users to quickly find specific information within the table. The search bar at the top enables users to type in keywords or phrases, filtering the table content in real-time to match the search query.
Generated Invoice for this Month
Overview of the invoices.
Invoice Number | Customer | Amount | Issued | Due Date |
|---|---|---|---|---|
INV-1001 | John Doe | $1,200.00 | 2024-08-01 | 2024-08-15 |
INV-1002 | Jane Smith | $850.00 | 2024-08-05 | 2024-08-20 |
INV-1003 | Acme Corp | $2,500.00 | 2024-08-07 | 2024-08-21 |
INV-1004 | Global Inc | $4,750.00 | 2024-08-10 | 2024-08-25 |
<div class="w-full flex justify-between items-center mb-3 mt-1 pl-3">
<div>
<h3 class="text-lg font-semibold text-slate-800">Generated Invoice for this Month</h3>
<p class="text-slate-500">Overview of the invoices.</p>
</div>
<div class="ml-3">
<div class="w-full max-w-sm min-w-[200px] relative">
<div class="relative">
<input
class="bg-white w-full pr-11 h-10 pl-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Search for invoice..."
/>
<button
class="absolute h-8 w-8 right-1 top-1 my-auto px-2 flex items-center bg-white rounded "
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-8 h-8 text-slate-600">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Invoice Number
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Customer
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Amount
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Issued
</p>
</th>
<th class="p-4 border-b border-slate-300 bg-slate-50">
<p class="block text-sm font-normal leading-none text-slate-500">
Due Date
</p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200 py-5">
<p class="block font-semibold text-sm text-slate-800">INV-1001</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">John Doe</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$1,200.00</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2024-08-01</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2024-08-15</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200 py-5">
<p class="block font-semibold text-sm text-slate-800">INV-1002</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">Jane Smith</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$850.00</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2024-08-05</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2024-08-20</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200 py-5">
<p class="block font-semibold text-sm text-slate-800">INV-1003</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">Acme Corp</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$2,500.00</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2024-08-07</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2024-08-21</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 py-5">
<p class="block font-semibold text-sm text-slate-800">INV-1004</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">Global Inc</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">$4,750.00</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-10</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-25</p>
</td>
</tr>
</tbody>
</table>
</div>Table with Pagination
Use this example of a table with pagination to manage and display large datasets efficiently. The pagination controls at the bottom of the table allow users to navigate through different pages of data.
Projects with Invoices
Overview of the current activities.
Invoice Number | Customer | Amount | Issued | Due Date |
|---|---|---|---|---|
PROJ1001 | John Doe | $1,200.00 | 2024-08-01 | 2024-08-15 |
PROJ1002 | Jane Smith | $850.00 | 2024-08-05 | 2024-08-20 |
PROJ1003 | Acme Corp | $2,500.00 | 2024-08-07 | 2024-08-21 |
PROJ1004 | Global Inc | $4,750.00 | 2024-08-10 | 2024-08-25 |
Showing 1-5 of 45
<div class="w-full flex justify-between items-center mb-3 mt-1 pl-3">
<div>
<h3 class="text-lg font-semibold text-slate-800">Projects with Invoices</h3>
<p class="text-slate-500">Overview of the current activities.</p>
</div>
<div class="ml-3">
<div class="w-full max-w-sm min-w-[200px] relative">
<div class="relative">
<input
class="bg-white w-full pr-11 h-10 pl-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-200 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Search for invoice..."
/>
<button
class="absolute h-8 w-8 right-1 top-1 my-auto px-2 flex items-center bg-white rounded "
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-8 h-8 text-slate-600">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-200 bg-slate-50">
<p class="text-sm font-normal leading-none text-slate-500">
Invoice Number
</p>
</th>
<th class="p-4 border-b border-slate-200 bg-slate-50">
<p class="text-sm font-normal leading-none text-slate-500">
Customer
</p>
</th>
<th class="p-4 border-b border-slate-200 bg-slate-50">
<p class="text-sm font-normal leading-none text-slate-500">
Amount
</p>
</th>
<th class="p-4 border-b border-slate-200 bg-slate-50">
<p class="text-sm font-normal leading-none text-slate-500">
Issued
</p>
</th>
<th class="p-4 border-b border-slate-200 bg-slate-50">
<p class="text-sm font-normal leading-none text-slate-500">
Due Date
</p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50 border-b border-slate-200">
<td class="p-4 py-5">
<p class="block font-semibold text-sm text-slate-800">PROJ1001</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">John Doe</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">$1,200.00</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-01</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-15</p>
</td>
</tr>
<tr class="hover:bg-slate-50 border-b border-slate-200">
<td class="p-4 py-5">
<p class="block font-semibold text-sm text-slate-800">PROJ1002</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">Jane Smith</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">$850.00</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-05</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-20</p>
</td>
</tr>
<tr class="hover:bg-slate-50 border-b border-slate-200">
<td class="p-4 py-5">
<p class="block font-semibold text-sm text-slate-800">PROJ1003</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">Acme Corp</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">$2,500.00</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-07</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-21</p>
</td>
</tr>
<tr class="hover:bg-slate-50 border-b border-slate-200">
<td class="p-4 py-5">
<p class="block font-semibold text-sm text-slate-800">PROJ1004</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">Global Inc</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">$4,750.00</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-10</p>
</td>
<td class="p-4 py-5">
<p class="text-sm text-slate-500">2024-08-25</p>
</td>
</tr>
</tbody>
</table>
<div class="flex justify-between items-center px-4 py-3">
<div class="text-sm text-slate-500">
Showing <b>1-5</b> of 45
</div>
<div class="flex space-x-1">
<button class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-slate-500 bg-white border border-slate-200 rounded hover:bg-slate-50 hover:border-slate-400 transition duration-200 ease">
Prev
</button>
<button class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-white bg-slate-800 border border-slate-800 rounded hover:bg-slate-600 hover:border-slate-600 transition duration-200 ease">
1
</button>
<button class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-slate-500 bg-white border border-slate-200 rounded hover:bg-slate-50 hover:border-slate-400 transition duration-200 ease">
2
</button>
<button class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-slate-500 bg-white border border-slate-200 rounded hover:bg-slate-50 hover:border-slate-400 transition duration-200 ease">
3
</button>
<button class="px-3 py-1 min-w-9 min-h-9 text-sm font-normal text-slate-500 bg-white border border-slate-200 rounded hover:bg-slate-50 hover:border-slate-400 transition duration-200 ease">
Next
</button>
</div>
</div>
</div>
Table with Action Buttons
Use this example of a table with a search functionality and different buttons actions for each row.
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>Ecommerce Products Table
Use this example to display products in an ecommerce setting. The table includes columns for product images, names, quantities, prices, and actions like removing items from the cart. This design improves user interaction and management of shopping cart items.
Shopping Cart
Review your selected items.
| Product | Name | Quantity | Price per Item | Total Price | |
|---|---|---|---|---|---|
 | Beautiful Chair | 2 | $500 | $1,000 | |
 | Little Sofa | 1 | $750 | $750 | |
 | Brown Coach | 3 | $3,000 | $9,000 |
<div class="w-full flex justify-between items-center mb-3 mt-1 pl-3">
<div>
<h3 class="text-lg font-semibold text-slate-800">Shopping Cart</h3>
<p class="text-slate-500">Review your selected items.</p>
</div>
<div class="mx-3">
<div class="w-full max-w-sm min-w-[200px] relative">
<div class="relative">
<input
class="bg-white w-full pr-11 h-10 pl-3 py-2 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Search for product..."
/>
<button
class="absolute h-8 w-8 right-1 top-1 my-auto px-2 flex items-center bg-white rounded "
type="button"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-8 h-8 text-slate-600">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="relative flex flex-col w-full h-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr class="border-b border-slate-300 bg-slate-50">
<th class="p-4 text-sm font-normal leading-none text-slate-500">Product</th>
<th class="p-4 text-sm font-normal leading-none text-slate-500">Name</th>
<th class="p-4 text-sm font-normal leading-none text-slate-500">Quantity</th>
<th class="p-4 text-sm font-normal leading-none text-slate-500">Price per Item</th>
<th class="p-4 text-sm font-normal leading-none text-slate-500">Total Price</th>
<th class="p-4 text-sm font-normal leading-none text-slate-500"></th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200 py-5">
<img src="https://demos.creative-tim.com/corporate-ui-dashboard-pro/assets/img/kam-idris-_HqHX3LBN18-unsplash.jpg" alt="Product 1" class="w-16 h-16 object-cover rounded" />
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="block font-semibold text-sm text-slate-800">Beautiful Chair</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">2</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$500</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$1,000</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<button type="button" class="text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200 py-5">
<img src="https://demos.creative-tim.com/corporate-ui-dashboard-pro/assets/img/spacejoy-NpF_OYE301E-unsplash.jpg" alt="Product 2" class="w-16 h-16 object-cover rounded" />
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="block font-semibold text-sm text-slate-800">Little Sofa</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">1</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$750</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$750</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<button type="button" class="text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200 py-5">
<img src="https://demos.creative-tim.com/corporate-ui-dashboard-pro/assets/img/michael-oxendine-GHCVUtBECuY-unsplash.jpg" alt="Product 3" class="w-16 h-16 object-cover rounded" />
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="block font-semibold text-sm text-slate-800">Brown Coach</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">3</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$3,000</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<p class="text-sm text-slate-500">$9,000</p>
</td>
<td class="p-4 border-b border-slate-200 py-5">
<button type="button" class="text-slate-500 hover:text-slate-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</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>Explore More Tailwind CSS Examples
Check out more table examples from Material Tailwind Blocks:
• Table Blocks
• Table Headers
• Table Footers
Simple Sortable Table
Use this example of a sortable table to enable users to organize data by different columns. Each column header can be clicked to sort the data, improving data analysis and navigation.
Name | Role | Location | |
|---|---|---|---|
John Michael | Manager | john.michael@example.com | New York, USA |
Alexa Liras | Developer | alexa.liras@example.com | San Francisco, USA |
Laurent Perrier | Executive | laurent.perrier@example.com | Paris, France |
Michael Levi | Developer | michael.levi@example.com | London, UK |
<div class="relative flex flex-col w-full h-full overflow-scroll bg-white shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th
class="p-4 transition-colors cursor-pointer border-b border-slate-300 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 text-sm font-normal leading-none text-slate-800">
Name
<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-b border-slate-300 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 text-sm font-normal leading-none text-slate-800">
Role
<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-b border-slate-300 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 text-sm font-normal leading-none text-slate-800">
Email
<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-b border-slate-300 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 text-sm font-normal leading-none text-slate-800">
Location
<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>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
John Michael
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Manager
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
john.michael@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
New York, USA
</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Alexa Liras
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
alexa.liras@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
San Francisco, USA
</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Laurent Perrier
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Executive
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
laurent.perrier@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Paris, France
</p>
</td>
</tr>
<tr class="hover:bg-slate-50">
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Michael Levi
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
michael.levi@example.com
</p>
</td>
<td class="p-4 border-b border-slate-200">
<p class="block text-sm text-slate-800">
London, UK
</p>
</td>
</tr>
</tbody>
</table>
</div>
Table with Edit Modal
This table example integrates an edit modal, letting users to update details directly from the table. Selecting the "Edit" button opens a modal with editable fields for quick and convenient data modifications. Perfect for management interfaces where data needs to be frequently updated.
Employees List
Review each person before edit
Member | Function | Status | Employed | |
|---|---|---|---|---|
John Michael john@creative-tim.com | Manager Organization | online | 23/04/18 | |
Alexa Liras alexa@creative-tim.com | Designer Marketing | offline | 23/04/18 | |
Laurent Perrier laurent@creative-tim.com | Executive Projects | offline | 19/09/17 | |
Michael Levi michael@creative-tim.com | Designer Developer | online | 24/12/08 |
Page 1 of 10
Edit Member Details
Enter or reset each information for the member access.
Looking for more details? ContactAdmin.
<div class="relative flex flex-col w-full h-full text-slate-700 bg-white shadow-md rounded-xl bg-clip-border">
<div class="relative mx-4 mt-4 overflow-hidden text-slate-700 bg-white rounded-none bg-clip-border">
<div class="flex items-center justify-between ">
<div>
<h3 class="text-lg font-semibold text-slate-800">Employees List</h3>
<p class="text-slate-500">Review each person before edit</p>
</div>
<div class="flex flex-col gap-2 shrink-0 sm:flex-row">
<button
class="rounded border border-slate-300 py-2.5 px-3 text-center text-xs font-semibold text-slate-600 transition-all hover:opacity-75 focus:ring focus:ring-slate-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-2 rounded bg-slate-800 py-2.5 px-4 text-xs font-semibold text-white shadow-md shadow-slate-900/10 transition-all hover:shadow-lg hover:shadow-slate-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>
<div class="p-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-slate-200 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 font-sans text-sm font-normal leading-none text-slate-500">
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-slate-200 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 font-sans text-sm font-normal leading-none text-slate-500">
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-slate-200 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 font-sans text-sm font-normal leading-none text-slate-500">
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-slate-200 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 font-sans text-sm font-normal leading-none text-slate-500">
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-slate-200 bg-slate-50 hover:bg-slate-100">
<p
class="flex items-center justify-between gap-2 font-sans text-sm font-normal leading-none text-slate-500">
</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-4 border-b border-slate-200">
<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="text-sm font-semibold text-slate-700">
John Michael
</p>
<p
class="text-sm text-slate-500">
john@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<div class="flex flex-col">
<p class="text-sm font-semibold text-slate-700">
Manager
</p>
<p
class="text-sm text-slate-500">
Organization
</p>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-200">
<p class="text-sm text-slate-500">
23/04/18
</p>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-900 transition-all hover:bg-slate-900/10 active:bg-slate-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-slate-200">
<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="text-sm font-semibold text-slate-700">
Alexa Liras
</p>
<p
class="text-sm text-slate-500">
alexa@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<div class="flex flex-col">
<p class="text-sm font-semibold text-slate-700">
Designer
</p>
<p
class="text-sm text-slate-500">
Marketing
</p>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-100 text-slate-500">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<p class="text-sm text-slate-500">
23/04/18
</p>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-900 transition-all hover:bg-slate-900/10 active:bg-slate-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-slate-200">
<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="text-sm font-semibold text-slate-700">
Laurent Perrier
</p>
<p
class="text-sm text-slate-500">
laurent@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<div class="flex flex-col">
<p class="text-sm font-semibold text-slate-700">
Executive
</p>
<p
class="text-sm text-slate-500">
Projects
</p>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-100 text-slate-500">
<span class="">offline</span>
</div>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<p class="text-sm text-slate-500">
19/09/17
</p>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-900 transition-all hover:bg-slate-900/10 active:bg-slate-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-slate-200">
<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="text-sm font-semibold text-slate-700">
Michael Levi
</p>
<p
class="text-sm text-slate-500">
michael@creative-tim.com
</p>
</div>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<div class="flex flex-col">
<p class="text-sm font-semibold text-slate-700">
Designer
</p>
<p
class="text-sm text-slate-500">
Developer
</p>
</div>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-200">
<p class="text-sm text-slate-500">
24/12/08
</p>
</td>
<td class="p-4 border-b border-slate-200">
<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-slate-900 transition-all hover:bg-slate-900/10 active:bg-slate-900/20 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-dialog-target="dialog"
>
<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-3">
<p class="block text-sm text-slate-500">
Page 1 of 10
</p>
<div class="flex gap-1">
<button
class="rounded border border-slate-300 py-2.5 px-3 text-center text-xs font-semibold text-slate-600 transition-all hover:opacity-75 focus:ring focus:ring-slate-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Previous
</button>
<button
class="rounded border border-slate-300 py-2.5 px-3 text-center text-xs font-semibold text-slate-600 transition-all hover:opacity-75 focus:ring focus:ring-slate-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button">
Next
</button>
</div>
</div>
</div>
<div data-dialog-backdrop="dialog" data-dialog-backdrop-close="true" class="absolute left-0 top-0 inset-0 z-[999] grid h-screen w-screen place-items-center bg-black bg-opacity-60 backdrop-blur-sm transition-opacity duration-300">
<div data-dialog="dialog"
class="relative mx-auto flex w-full max-w-[24rem] flex-col rounded-xl bg-white bg-clip-border text-slate-700 shadow-md">
<div class="flex flex-col p-6">
<h4
class="text-2xl mb-1 font-semibold text-slate-700">
Edit Member Details
</h4>
<p class="mb-3 mt-1 text-slate-400">
Enter or reset each information for the member access.
</p>
<div class="w-full max-w-sm min-w-[200px] mt-4">
<label class="block mb-1 text-sm text-slate-700">
Member Name
</label>
<input
type="text"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Enter your text" />
</div>
<div class="w-full max-w-sm min-w-[200px] mt-4">
<label class="block mb-1 text-sm text-slate-700">
Member Email
</label>
<input
type="text"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Enter the email" />
</div>
<div class="w-full max-w-sm min-w-[200px] mt-4">
<label class="block mb-1 text-sm text-slate-700">
Job
</label>
<input
type="text"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Enter the job" />
</div>
<div class="w-full max-w-sm min-w-[200px] mt-4">
<label class="block mb-1 text-sm text-slate-700">
Active Status
</label>
<input
type="text"
class="w-full h-10 bg-transparent placeholder:text-slate-400 text-slate-700 text-sm border border-slate-200 rounded px-3 py-2 transition duration-300 ease focus:outline-none focus:border-slate-400 hover:border-slate-400 shadow-sm focus:shadow-md"
placeholder="Offline/Online" />
</div>
</div>
<div class="p-6 pt-0">
<div class="flex space-x-2">
<button
class="w-full mx-auto select-none rounded border border-red-600 py-2 px-4 text-center text-sm font-semibold text-red-600 transition-all hover:bg-red-600 hover:text-white hover:shadow-md hover:shadow-red-600/20 active:bg-red-700 active:text-white active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-dialog-close="true">
Cancel
</button>
<button
class="w-full mx-auto select-none rounded bg-slate-800 py-2 px-4 text-center text-sm font-semibold text-white shadow-md shadow-slate-900/10 transition-all hover:shadow-lg hover:shadow-slate-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
type="button"
data-dialog-close="true">
Save
</button>
</div>
<p class="flex justify-center mt-4 font-sans text-sm text-slate-500">
Looking for more details? Contact
<a href="#admin"
class="ml-1 text-sm font-bold leading-normal text-slate-500">
Admin.
</a>
</p>
</div>
</div>
</div>
Comparison Table
Use this tailwind example of a comparison table to compare different products or plans. The table includes columns for various features and checkmarks indicating the presence of each feature in different plans. This design helps users make informed decisions by clearly presenting comparative data.
| The Plans | Team$39 | Growth$79 | Enterprise$99 |
|---|---|---|---|
50+ Section Examples | |||
Multiple use | upon request | upon request | |
<div class="flex w-full flex-col overflow-scroll rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
<div class="py-4">
<table class="w-full min-w-[768px] table-auto">
<thead>
<tr class="border-b border-slate-200">
<th class="px-6 py-3 text-left">
<span class="font-semibold text-slate-700">The Plans</span>
</th>
<th class="px-6 py-3 text-center">
<span class="block mb-1 text-base font-normal text-slate-400">Team</span>
<h5 class="block text-xl font-bold text-slate-800"> $39 </h5>
</th>
<th class="px-6 py-3 text-center">
<span class="block mb-1 text-base font-normal text-slate-400">Growth</span>
<h5 class="block text-xl font-bold text-slate-800"> $79 </h5>
</th>
<th class="px-6 py-3 text-center">
<span class="block mb-1 text-base font-normal text-slate-400">Enterprise</span>
<h5 class="block text-xl font-bold text-slate-800"> $99 </h5>
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-200">
<td class="px-6 py-5 text-left">
<p class="font-sans text-sm font-medium text-slate-500"> 50+ Section Examples </p>
</td>
<td class="px-6 py-5 text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="mx-auto h-5 w-5 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
</svg>
</td>
<td class="px-6 py-5 text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="mx-auto h-5 w-5 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
</svg>
</td>
<td class="px-6 py-5 text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="mx-auto h-5 w-5 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
</svg>
</td>
</tr>
<tr class="border-b border-slate-200">
<td class="px-6 py-5 text-left">
<p class="font-sans text-sm font-medium text-slate-500"> Multiple use </p>
</td>
<td class="px-6 py-5 text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="mx-auto h-5 w-5 text-green-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
</svg>
</td>
<td class="px-6 py-5 text-center">
<p class="block font-sans text-sm font-normal leading-normal text-inherit !text-gray-500"> upon request </p>
</td>
<td class="px-6 py-5 text-center">
<p class="block font-sans text-sm font-normal leading-normal text-inherit !text-gray-500"> upon request </p>
</td>
</tr>
<tr>
<td class="px-6 py-5 text-left"></td>
<td class="px-6 py-5 text-center">
<button class="select-none rounded bg-slate-800 py-2.5 px-4 text-center text-sm font-semibold text-white shadow-md shadow-slate-900/10 transition-all hover:shadow-lg hover:shadow-slate-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button" data-ripple-light="true"> Buy Now </button>
</td>
<td class="px-6 py-5 text-center">
<button class="select-none rounded bg-slate-800 py-2.5 px-4 text-center text-sm font-semibold text-white shadow-md shadow-slate-900/10 transition-all hover:shadow-lg hover:shadow-slate-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button" data-ripple-light="true"> Buy Now </button>
</td>
<td class="px-6 py-5 text-center">
<button class="select-none rounded bg-slate-800 py-2.5 px-4 text-center text-sm font-semibold text-white shadow-md shadow-slate-900/10 transition-all hover:shadow-lg hover:shadow-slate-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button" data-ripple-light="true"> Buy Now </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Dark Table
Use this example of a table with a dark theme to improve readability and provide a modern look. The table uses a consistent color scheme across all cells, making it easy to scan.
Name | Role | Location | |
|---|---|---|---|
John Michael | Manager | john.michael@example.com | New York, USA |
Alexa Liras | Developer | alexa.liras@example.com | San Francisco, USA |
Laurent Perrier | Executive | laurent.perrier@example.com | Paris, France |
Michael Levi | Developer | michael.levi@example.com | London, UK |
<div class="relative flex flex-col w-full h-full overflow-scroll text-slate-300 bg-slate-800 shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Name
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Role
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Email
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Location
</p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-700">
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-100 font-semibold">
John Michael
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
Manager
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
john.michael@example.com
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
New York, USA
</p>
</td>
</tr>
<tr class="hover:bg-slate-700">
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-100 font-semibold">
Alexa Liras
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
Developer
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
alexa.liras@example.com
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
San Francisco, USA
</p>
</td>
</tr>
<tr class="hover:bg-slate-700">
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-100 font-semibold">
Laurent Perrier
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
Executive
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
laurent.perrier@example.com
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
Paris, France
</p>
</td>
</tr>
<tr class="hover:bg-slate-700">
<td class="p-4">
<p class="text-sm text-slate-100 font-semibold">
Michael Levi
</p>
</td>
<td class="p-4">
<p class="text-sm text-slate-300">
Developer
</p>
</td>
<td class="p-4">
<p class="text-sm text-slate-300">
michael.levi@example.com
</p>
</td>
<td class="p-4">
<p class="text-sm text-slate-300">
London, UK
</p>
</td>
</tr>
</tbody>
</table>
</div>
Dark Table with Striped Rows
This table example features alternating row colors to improve readability. The striped rows help users distinguish between different rows, making it easier to follow data across the table.
Car Name | Year of Production | Price | Location |
|---|---|---|---|
Ford Mustang | 2020 | $35,000 | New York, USA |
Tesla Model S | 2022 | $80,000 | San Francisco, USA |
BMW 3 Series | 2019 | $25,000 | Paris, France |
Audi A4 | 2021 | $40,000 | London, UK |
<div class="relative flex flex-col w-full h-full overflow-scroll text-slate-300 bg-slate-800 shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Car Name
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Year of Production
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Price
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Location
</p>
</th>
</tr>
</thead>
<tbody>
<tr class="even:bg-slate-900 hover:bg-slate-700">
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-100 font-semibold">
Ford Mustang
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
2020
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
$35,000
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
New York, USA
</p>
</td>
</tr>
<tr class="even:bg-slate-900 hover:bg-slate-700">
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-100 font-semibold">
Tesla Model S
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
2022
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
$80,000
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
San Francisco, USA
</p>
</td>
</tr>
<tr class="even:bg-slate-900 hover:bg-slate-700">
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-100 font-semibold">
BMW 3 Series
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
2019
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
$25,000
</p>
</td>
<td class="p-4 border-b border-slate-700">
<p class="text-sm text-slate-300">
Paris, France
</p>
</td>
</tr>
<tr class="even:bg-slate-900 hover:bg-slate-700">
<td class="p-4">
<p class="text-sm text-slate-100 font-semibold">
Audi A4
</p>
</td>
<td class="p-4">
<p class="text-sm text-slate-300">
2021
</p>
</td>
<td class="p-4">
<p class="text-sm text-slate-300">
$40,000
</p>
</td>
<td class="p-4">
<p class="text-sm text-slate-300">
London, UK
</p>
</td>
</tr>
</tbody>
</table>
</div>
Dark Table with Striped Columns
Use this example of a table with striped columns to highlight different sections of data vertically. This design improves the visual structure of the table, allowing users to easily compare information across columns.
Book Title | Author | Year of Publication | Genre |
|---|---|---|---|
To Kill a Mockingbird | Harper Lee | 1960 | Fiction |
1984 | George Orwell | 1949 | Dystopian |
The Great Gatsby | F. Scott Fitzgerald | 1925 | Classic |
The Catcher in the Rye | J.D. Salinger | 1951 | Fiction |
<div class="relative flex flex-col w-full h-full overflow-scroll text-slate-300 bg-slate-800 shadow-md rounded-lg bg-clip-border">
<table class="w-full text-left table-auto min-w-max">
<thead>
<tr>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Book Title
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Author
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Year of Publication
</p>
</th>
<th class="p-4 border-b border-slate-600 bg-slate-700">
<p class="text-sm font-normal leading-none text-slate-300">
Genre
</p>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-slate-700">
<td class="p-4 border-b border-slate-700 bg-slate-900">
<p class="text-sm text-slate-100 font-semibold">
To Kill a Mockingbird
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-800">
<p class="text-sm text-slate-300">
Harper Lee
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-900">
<p class="text-sm text-slate-300">
1960
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-800">
<p class="text-sm text-slate-300">
Fiction
</p>
</td>
</tr>
<tr class="hover:bg-slate-700">
<td class="p-4 border-b border-slate-700 bg-slate-900">
<p class="text-sm text-slate-100 font-semibold">
1984
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-800">
<p class="text-sm text-slate-300">
George Orwell
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-900">
<p class="text-sm text-slate-300">
1949
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-800">
<p class="text-sm text-slate-300">
Dystopian
</p>
</td>
</tr>
<tr class="hover:bg-slate-700">
<td class="p-4 border-b border-slate-700 bg-slate-900">
<p class="text-sm text-slate-100 font-semibold">
The Great Gatsby
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-800">
<p class="text-sm text-slate-300">
F. Scott Fitzgerald
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-900">
<p class="text-sm text-slate-300">
1925
</p>
</td>
<td class="p-4 border-b border-slate-700 bg-slate-800">
<p class="text-sm text-slate-300">
Classic
</p>
</td>
</tr>
<tr class="hover:bg-slate-700">
<td class="p-4 bg-slate-900">
<p class="text-sm text-slate-100 font-semibold">
The Catcher in the Rye
</p>
</td>
<td class="p-4 bg-slate-800">
<p class="text-sm text-slate-300">
J.D. Salinger
</p>
</td>
<td class="p-4 bg-slate-900">
<p class="text-sm text-slate-300">
1951
</p>
</td>
<td class="p-4 bg-slate-800">
<p class="text-sm text-slate-300">
Fiction
</p>
</td>
</tr>
</tbody>
</table>
</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.