In this tutorial we will see vue 3 table with tailwind css, tailwind vue 3 datatable ui with search, tailwind vue 3 table with filter search examples with Tailwind CSS & Vue 3.
Tool Use
Vue 3
Tailwind CSS 3.x
Heroicons icon
Example 1
Tailwind Vue 3 simple table ui.
<template>
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="p-1.5 w-full inline-block align-middle">
<div class="overflow-hidden border rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
ID
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
Name
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
Email
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Edit
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Delete
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
<tr>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
2
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
<tr>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
3
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
tailwind vue table
Example 2
vue 3 tailwind table with multiple checkboxes and search form.
<template>
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="py-3 pl-2">
<div class="relative max-w-xs">
<label for="hs-table-search" class="sr-only">
Search
</label>
<input
type="text"
name="search"
class="block w-full p-3 pl-10 text-sm border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
placeholder="Search..."
/>
<div
class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
</div>
</div>
<div class="p-1.5 w-full inline-block align-middle">
<div class="overflow-hidden border rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3 pl-4">
<div class="flex items-center h-5">
<input
id="checkbox-all"
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label
for="checkbox"
class="sr-only"
>
Checkbox
</label>
</div>
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
ID
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
Name
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
Email
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Edit
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Delete
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-3 pl-4">
<div class="flex items-center h-5">
<input
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label
for="checkbox"
class="sr-only"
>
Checkbox
</label>
</div>
</td>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
<tr>
<td class="py-3 pl-4">
<div class="flex items-center h-5">
<input
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label
for="checkbox"
class="sr-only"
>
Checkbox
</label>
</div>
</td>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
vue 3 tailwind css table with search and multiple checkbox
Example 3
vue tailwind datatable ui with search.
<template>
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="py-3 pl-2">
<div class="relative max-w-xs">
<label for="search" class="sr-only"> Search </label>
<input
type="text"
name="search"
class="block w-full p-3 pl-10 text-sm border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
placeholder="Search..."
/>
<div
class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
</div>
</div>
<div class="p-1.5 w-full inline-block align-middle">
<div class="overflow-hidden border rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3 pl-4">
<div class="flex items-center h-5">
<input
id="checkbox-all"
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label for="checkbox" class="sr-only">
Checkbox
</label>
</div>
</th>
<th
scope="col"
class="flex items-center px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
ID
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
<span class="inline-flex items-center">
Name
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</span>
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
<span class="inline-flex items-center">
Email
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 13l-5 5m0 0l-5-5m5 5V6"
/>
</svg>
</span>
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Edit
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Delete
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-3 pl-4">
<div class="flex items-center h-5">
<input
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label for="checkbox" class="sr-only">
Checkbox
</label>
</div>
</td>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
<tr>
<td class="py-3 pl-4">
<div class="flex items-center h-5">
<input
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label for="checkbox" class="sr-only">
Checkbox
</label>
</div>
</td>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
vue tailwind datatable ui
Example 4
vue 3 tailwind css table with search and filter.
<template>
<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="flex justify-between py-3 pl-2">
<div class="relative max-w-xs">
<label for="search" class="sr-only"> Search </label>
<input
type="text"
name="search"
class="block w-full p-3 pl-10 text-sm border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
placeholder="Search..."
/>
<div
class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5 text-gray-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>
</div>
<div class="flex items-center space-x-2">
<div class="relative">
<button
class="relative z-0 inline-flex text-sm rounded-md shadow-sm focus:ring-accent-500 focus:border-accent-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
>
<span
class="relative inline-flex items-center px-3 py-3 space-x-2 text-sm font-medium text-gray-600 bg-white border border-gray-300 rounded-md sm:py-2"
>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
/>
</svg>
</div>
<div class="hidden sm:block">Filters</div>
</span>
</button>
</div>
</div>
</div>
<div class="p-1.5 w-full inline-block align-middle">
<div class="overflow-hidden border rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="py-3 pl-4">
<div class="flex items-center h-5">
<input
id="checkbox-all"
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label for="checkbox" class="sr-only">
Checkbox
</label>
</div>
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
ID
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
Name
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-left text-gray-500 uppercase"
>
Email
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Edit
</th>
<th
scope="col"
class="px-6 py-3 text-xs font-bold text-right text-gray-500 uppercase"
>
Delete
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="py-3 pl-4">
<div class="flex items-center h-5">
<input
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label for="checkbox" class="sr-only">
Checkbox
</label>
</div>
</td>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
<tr>
<td class="py-3 pl-4">
<div class="flex items-center h-5">
<input
type="checkbox"
class="text-blue-600 border-gray-200 rounded focus:ring-blue-500"
/>
<label for="checkbox" class="sr-only">
Checkbox
</label>
</div>
</td>
<td
class="px-6 py-4 text-sm font-medium text-gray-800 whitespace-nowrap"
>
1
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
Jone Doe
</td>
<td
class="px-6 py-4 text-sm text-gray-800 whitespace-nowrap"
>
[email protected]
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-green-500 hover:text-green-700"
href="#"
>
Edit
</a>
</td>
<td
class="px-6 py-4 text-sm font-medium text-right whitespace-nowrap"
>
<a
class="text-red-500 hover:text-red-700"
href="#"
>
Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
vue 3 tailwind css table with search and filter.
Read Also
Vue 3 Dark Mode with Tailwind CSS Example
Install Vite + Vue 3 + Typescript + Tailwind CSS 3
How to Install Tailwind CSS in Vue 3
How to install Bootstrap 5 in Vue 3
Vue 3 Responsive Navbar Menu With Tailwind CSS Example
Vue 3 Dropdown With Tailwind CSS Examples
