From bb33c541ac5da03c130a397bcdedd997238747ac Mon Sep 17 00:00:00 2001
From: Dmytro Shukaliuk <mityaua@gmail.com>
Date: Mon, 20 Jan 2025 21:01:01 +0200
Subject: [PATCH] Added sticky thead

---
 src/components/Table.vue     | 7 ++++---
 src/components/TableHead.vue | 8 +++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index 873c387..e8257c8 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -40,11 +40,12 @@ const onSort = (columnName: string): void => {
 </script>
 
 <template>
-	<div class="relative shadow-md sm:rounded-lg dark:shadow-xl">
+	<div class="shadow-md sm:rounded-lg dark:shadow-xl">
 		<table class="w-full text-center text-sm text-gray-500 dark:text-gray-400">
 			<!-- Table caption -->
+
 			<caption
-				class="bg-blue-100 p-2 text-left text-lg font-semibold text-gray-900 md:rounded-t-lg dark:border dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+				class="sticky top-0 z-20 bg-blue-100 p-2 text-left text-lg font-semibold text-gray-900 md:rounded-t-lg dark:border dark:border-gray-700 dark:bg-gray-800 dark:text-white"
 			>
 				<div class="flex flex-nowrap items-center">
 					<p class="mr-2 whitespace-nowrap text-sm uppercase">List of irregular verbs</p>
@@ -57,7 +58,7 @@ const onSort = (columnName: string): void => {
 			</caption>
 
 			<!-- Table head -->
-			<thead class="text-xs uppercase text-gray-700 dark:text-gray-400">
+			<thead class="w-full text-xs uppercase text-gray-700 dark:text-gray-400">
 				<tr>
 					<TableHead
 						v-for="(value, result) in searchResults[0]"
diff --git a/src/components/TableHead.vue b/src/components/TableHead.vue
index fedeb1a..e958348 100644
--- a/src/components/TableHead.vue
+++ b/src/components/TableHead.vue
@@ -34,7 +34,7 @@ const onColumnClick = (): void => {
 </script>
 
 <template>
-	<th class="bg-gray-50 p-2 dark:bg-gray-700" width="33%" scope="col">
+	<th class="sticky z-10 bg-gray-50 p-2 dark:bg-gray-700" width="33%" scope="col">
 		<div class="flex items-center justify-center">
 			<p>{{ visibleColumnName }}</p>
 
@@ -44,3 +44,9 @@ const onColumnClick = (): void => {
 		</div>
 	</th>
 </template>
+
+<style scoped>
+th {
+	top: 86px;
+}
+</style>