Default Table
A simple example of a Tailwind CSS Table component, featuring a table head and body rows,
demonstrating how to structure and style a table.
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer 4 | $32.99 | 20 Feb, 2024 | Cancelled |
<table class="table align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Cancelled
</td>
</tr>
</tbody>
</table>
Card
A Tailwind CSS Table example integrated into a
Tailwind CSS Card
component.
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer 4 | $32.99 | 20 Feb, 2024 | Cancelled |
<div class="card min-w-full">
<div class="card-table">
<table class="table align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Cancelled
</td>
</tr>
</tbody>
</table>
</div>
</div>
Heading
A Tailwind CSS Table example integrated into a
Tailwind CSS Card
component with a heading title.
Latest Orders
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer 4 | $32.99 | 20 Feb, 2024 | Cancelled |
<div class="card min-w-full">
<div class="card-header">
<h3 class="card-title">
Latest Orders
</h3>
</div>
<div class="card-table">
<table class="table align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Cancelled
</td>
</tr>
</tbody>
</table>
</div>
</div>
Border Style
Apply
.table-border
custom class to enable border style for a Tailwind CSS Table.
Latest Orders
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer 4 | $32.99 | 20 Feb, 2024 | Cancelled |
<div class="card min-w-full">
<div class="card-header">
<h3 class="card-title">
Latest Orders
</h3>
</div>
<div class="card-table">
<table class="table table-border align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Cancelled
</td>
</tr>
</tbody>
</table>
</div>
</div>
Horizontal Scroll
Wrap the table with the
.scrollable-y-auto
class from the
Tailwind CSS Scrollable
component to enable a responsive horizontal scrollbar.
| Customer | Order Amount | Order Date | Notes | Status |
|---|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Awaiting confirmation for this order. | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Package shipped via carrier ABC. | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered successfully. Please leave a review! | Delivered |
| Customer 4 | $32.99 | 20 Feb, 2024 | Order cancelled due to out-of-stock product. | Cancelled |
<div class="grid">
<div class="card min-w-full">
<div class="card-table scrollable-x-auto">
<table class="table align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th class="min-w-[125px]">
Customer
</th>
<th class="min-w-[125px]">
Order Amount
</th>
<th class="min-w-[125px]">
Order Date
</th>
<th class="min-w-[250px]">
Notes
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Awaiting confirmation for this order.
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Package shipped via carrier ABC.
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered successfully. Please leave a review!
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Order cancelled due to out-of-stock product.
</td>
<td>
Cancelled
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Sortable Columns
Indicate sorting columns in a Tailwind CSS table using direction icons for a clear visual representation of the sort order.
This feature enhances usability by showing whether the data is sorted in ascending or descending order.
Latest Orders
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer 4 | $32.99 | 20 Feb, 2024 | Cancelled |
<div class="card min-w-full">
<div class="card-header">
<h3 class="card-title">
Latest Orders
</h3>
</div>
<div class="card-table">
<table class="table table-border align-middle text-gray-700 font-medium text-sm">
<thead>
<tr>
<th>
<span class="sort">
<span class="sort-label">
Customer
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th>
<span class="sort">
<span class="sort-label">
Order Amount
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th>
<span class="sort desc">
<span class="sort-label">
Order Date
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th>
<span class="sort asc">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Cancelled
</td>
</tr>
</tbody>
</table>
</div>
</div>
Group Check
Utilize the
Tailwind CSS DataTable
component to enable group check functionality,
allowing users to select multiple rows with a single checkbox.
Latest Orders
| Customer | Order Amount | Order Date | Status | |
|---|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending | |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped | |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered | |
| Customer 4 | $32.99 | 20 Feb, 2024 | Cancelled | |
| Customer 5 | $150.00 | 10 Jan, 2024 | Pending | |
| Customer 6 | $89.90 | 1 Feb, 2024 | Shipped | |
| Customer 7 | $120.40 | 15 Mar, 2024 | Delivered | |
| Customer 8 | $300.00 | 25 Jan, 2024 | Cancelled | |
| Customer 9 | $45.50 | 3 Feb, 2024 | Pending | |
| Customer 10 | $78.99 | 8 Mar, 2024 | Shipped | |
| Customer 11 | $260.75 | 17 Feb, 2024 | Delivered | |
| Customer 12 | $90.30 | 23 Mar, 2024 | Cancelled | |
| Customer 13 | $140.00 | 12 Jan, 2024 | Pending | |
| Customer 14 | $200.20 | 7 Feb, 2024 | Shipped | |
| Customer 15 | $67.80 | 28 Mar, 2024 | Delivered |
<div class="card min-w-full">
<div class="card-header">
<h3 class="card-title">
Latest Orders
</h3>
</div>
<div class="card-table">
<div data-datatable="true" data-datatable-page-size="5">
<div class="scrollable-x-auto">
<table class="table table-border text-sm" data-datatable-table="true">
<thead>
<tr>
<th class="w-[60px]">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="2"/>
</td>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="3"/>
</td>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="4"/>
</td>
<td>
Customer 4
</td>
<td>
$32.99
</td>
<td>
20 Feb, 2024
</td>
<td>
Cancelled
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="5"/>
</td>
<td>
Customer 5
</td>
<td>
$150.00
</td>
<td>
10 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="6"/>
</td>
<td>
Customer 6
</td>
<td>
$89.90
</td>
<td>
1 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="7"/>
</td>
<td>
Customer 7
</td>
<td>
$120.40
</td>
<td>
15 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="8"/>
</td>
<td>
Customer 8
</td>
<td>
$300.00
</td>
<td>
25 Jan, 2024
</td>
<td>
Cancelled
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="9"/>
</td>
<td>
Customer 9
</td>
<td>
$45.50
</td>
<td>
3 Feb, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="10"/>
</td>
<td>
Customer 10
</td>
<td>
$78.99
</td>
<td>
8 Mar, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="11"/>
</td>
<td>
Customer 11
</td>
<td>
$260.75
</td>
<td>
17 Feb, 2024
</td>
<td>
Delivered
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="12"/>
</td>
<td>
Customer 12
</td>
<td>
$90.30
</td>
<td>
23 Mar, 2024
</td>
<td>
Cancelled
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="13"/>
</td>
<td>
Customer 13
</td>
<td>
$140.00
</td>
<td>
12 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="14"/>
</td>
<td>
Customer 14
</td>
<td>
$200.20
</td>
<td>
7 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="15"/>
</td>
<td>
Customer 15
</td>
<td>
$67.80
</td>
<td>
28 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
</tbody>
</table>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Advanced Cells
Mix and match table cells with the
Tailwind CSS Avatar
and
Tailwind CSS KeenIcons
components for advanced cell formatting, enhancing the visual appeal and functionality of your tables.
User Sessions
| Person | Browser |
|---|---|
|
Chrome on Mac OS X
|
|
|
Chrome on Windows 7
|
|
|
Chrome on Mac OS X
|
|
|
Chrome on Windows 10
|
|
|
Chrome on Mac OS X
|
<div class="card min-w-full">
<div class="card-header">
<h3 class="card-title">
User Sessions
</h3>
</div>
<div class="card-table">
<table class="table table-border align-middle text-gray-700 font-medium text-sm" id="my_table_2">
<thead>
<tr>
<th class="min-w-[250px]">
<span class="sort asc">
<span class="sort-label">
Person
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[165px]">
<span class="sort">
<span class="sort-label">
Browser
</span>
<span class="sort-icon">
</span>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-1.png"/>
<a class="leading-none font-semibold text-gray-900 hover:text-primary" href="#">
Esther Howard
</a>
</div>
</td>
<td>
<div class="flex items-center gap-2">
<i class="ki-outline ki-chrome text-gray-500 text-lg">
</i>
<span class="text-gray-700">
Chrome on Mac OS X
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-2.png"/>
<a class="leading-none font-semibold text-gray-900 hover:text-primary" href="#">
Tyler Hero
</a>
</div>
</td>
<td>
<div class="flex items-center gap-2">
<i class="ki-outline ki-chrome text-gray-500 text-lg">
</i>
<span class="text-gray-700">
Chrome on Windows 7
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-5.png"/>
<a class="leading-none font-semibold text-gray-900 hover:text-primary" href="#">
Leslie Alexander
</a>
</div>
</td>
<td>
<div class="flex items-center gap-2">
<i class="ki-outline ki-chrome text-gray-500 text-lg">
</i>
<span class="text-gray-700">
Chrome on Mac OS X
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-6.png"/>
<a class="leading-none font-semibold text-gray-900 hover:text-primary" href="#">
Brooklyn Simmons
</a>
</div>
</td>
<td>
<div class="flex items-center gap-2">
<i class="ki-outline ki-chrome text-gray-500 text-lg">
</i>
<span class="text-gray-700">
Chrome on Windows 10
</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-7.png"/>
<a class="leading-none font-semibold text-gray-900 hover:text-primary" href="#">
Darlene Robertson
</a>
</div>
</td>
<td>
<div class="flex items-center gap-2">
<i class="ki-outline ki-chrome text-gray-500 text-lg">
</i>
<span class="text-gray-700">
Chrome on Mac OS X
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Sizes
Use the
.table-xs
,
.table-sm
,
and
.table-lg
classes to adjust the table cell spacing for different sizes.
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
| Customer | Order Amount | Order Date | Status |
|---|---|---|---|
| Customer 1 | $100.00 | 5 Jan, 2024 | Pending |
| Customer 2 | $250.50 | 29 Feb, 2024 | Shipped |
| Customer 3 | $75.75 | 2 Mar, 2024 | Delivered |
<table class="table table-xs table-border">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-border">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
</tbody>
</table>
<table class="table table-border">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
</tbody>
</table>
<table class="table table-lg table-border">
<thead>
<tr>
<th>
Customer
</th>
<th>
Order Amount
</th>
<th>
Order Date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Customer 1
</td>
<td>
$100.00
</td>
<td>
5 Jan, 2024
</td>
<td>
Pending
</td>
</tr>
<tr>
<td>
Customer 2
</td>
<td>
$250.50
</td>
<td>
29 Feb, 2024
</td>
<td>
Shipped
</td>
</tr>
<tr>
<td>
Customer 3
</td>
<td>
$75.75
</td>
<td>
2 Mar, 2024
</td>
<td>
Delivered
</td>
</tr>
</tbody>
</table>
Grid
Use the Tailwind CSS Table component to create an efficient CRUD (Create, Read, Update, Delete) solution.
This setup provides a structured and visually appealing way to manage and interact with data,
leveraging Tailwind CSS's utility classes for styling and responsiveness.
Team Members
| Member | Location | Status | ||
|---|---|---|---|---|
Tyler Hero
26 tasks
|
Estonia
|
Active | Edit | |
Esther Howard
639 tasks
|
Malaysia
|
Pending | Edit | |
Jacob Jones
125 tasks
|
Ukraine
|
Active | Edit | |
|
Cody Fisher
81 tasks
|
Canada
|
Deleted | Edit | |
Leslie Alexander
203 tasks
|
India
|
Active | Edit | |
Martha Craig
344 tasks
|
Brazil
|
Pending | Edit | |
Ronald Richards
187 tasks
|
Japan
|
Active | Edit | |
Jane Cooper
45 tasks
|
South Africa
|
Inactive | Edit | |
Robert Fox
512 tasks
|
Germany
|
Active | Edit |
<div class="grid">
<div class="card card-grid min-w-full">
<div class="card-header py-5 flex-wrap">
<h3 class="card-title">
Team Members
</h3>
<div class="flex gap-6">
<div class="relative">
<i class="ki-outline ki-magnifier leading-none text-md text-gray-500 absolute top-1/2 left-0 -translate-y-1/2 ml-3">
</i>
<input class="input input-sm pl-8" placeholder="Search Members" type="text"/>
</div>
</div>
</div>
<div class="card-body">
<div data-datatable="true" data-datatable-page-size="5">
<div class="scrollable-x-auto">
<table class="table table-auto table-border" data-datatable-table="true" id="grid_table">
<thead>
<tr>
<th class="w-[60px]">
<input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox"/>
</th>
<th class="min-w-[175px]">
<span class="sort asc">
<span class="sort-label">
Member
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[150px]">
<span class="sort">
<span class="sort-label">
Location
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="min-w-[125px]">
<span class="sort">
<span class="sort-label">
Status
</span>
<span class="sort-icon">
</span>
</span>
</th>
<th class="w-[80px]">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="1"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-3.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Tyler Hero
</a>
<span class="text-2sm text-gray-600">
26 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/estonia.svg"/>
<span class="leading-none text-gray-700">
Estonia
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-success">
Active
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="2"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-2.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Esther Howard
</a>
<span class="text-2sm text-gray-600">
639 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/malaysia.svg"/>
<span class="leading-none text-gray-700">
Malaysia
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-warning">
Pending
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="3"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-11.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Jacob Jones
</a>
<span class="text-2sm text-gray-600">
125 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/ukraine.svg"/>
<span class="leading-none text-gray-700">
Ukraine
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-primary">
Active
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="4"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-2.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Cody Fisher
</a>
<span class="text-2sm text-gray-600">
81 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/canada.svg"/>
<span class="leading-none text-gray-700">
Canada
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-danger">
Deleted
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="5"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-5.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Leslie Alexander
</a>
<span class="text-2sm text-gray-600">
203 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/india.svg"/>
<span class="leading-none text-gray-700">
India
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-success">
Active
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="6"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-6.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Martha Craig
</a>
<span class="text-2sm text-gray-600">
344 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/brazil.svg"/>
<span class="leading-none text-gray-700">
Brazil
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-warning">
Pending
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="7"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-7.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Ronald Richards
</a>
<span class="text-2sm text-gray-600">
187 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/japan.svg"/>
<span class="leading-none text-gray-700">
Japan
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-success">
Active
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="8"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-8.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Jane Cooper
</a>
<span class="text-2sm text-gray-600">
45 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/south_africa.svg"/>
<span class="leading-none text-gray-700">
South Africa
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-secondary">
Inactive
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
<tr>
<td>
<input class="checkbox checkbox-sm" data-datatable-row-check="true" type="checkbox" value="9"/>
</td>
<td>
<div class="flex items-center gap-2.5">
<img alt="" class="h-9 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/avatars/300-9.png"/>
<div class="flex flex-col gap-0.5">
<a class="leading-none font-semibold text-sm text-gray-900 hover:text-primary" href="#">
Robert Fox
</a>
<span class="text-2sm text-gray-600">
512 tasks
</span>
</div>
</div>
</td>
<td>
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/metronic/tailwind/docs/dist/assets/media/flags/germany.svg"/>
<span class="leading-none text-gray-700">
Germany
</span>
</div>
</td>
<td>
<span class="badge badge-sm badge-outline badge-success">
Active
</span>
</td>
<td>
<a class="btn btn-sm btn-light" href="#">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
<div class="flex items-center gap-2">
Show
<select class="select select-sm w-16" data-datatable-size="true" name="perpage">
</select>
per page
</div>
<div class="flex items-center gap-4">
<span data-datatable-info="true">
</span>
<div class="pagination" data-datatable-pagination="true">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Table component.
Upon building the assets using
Webpack Build Tools
,
the below file is compiled and added into the
dist/assets/css/styles.css
bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/table.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Table component. |
