From b0c15490056de6f460b0c687ed734cb514532630 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 1 Nov 2021 11:13:47 +0100
Subject: [PATCH] Added sticky header to tags table

---
 src/tags/TagsTable.scss           |  9 +++++++++
 src/tags/TagsTable.tsx            | 10 ++++++----
 src/utils/mixins/sticky-cell.scss |  8 ++++----
 3 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 src/tags/TagsTable.scss

diff --git a/src/tags/TagsTable.scss b/src/tags/TagsTable.scss
new file mode 100644
index 00000000..94728f7b
--- /dev/null
+++ b/src/tags/TagsTable.scss
@@ -0,0 +1,9 @@
+@import '../utils/base';
+@import '../utils/mixins/sticky-cell';
+
+.tags-table__header-cell.tags-table__header-cell {
+  @include sticky-cell(false);
+
+  top: $headerHeight;
+  position: sticky;
+}
diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx
index 2de68d44..7caec4af 100644
--- a/src/tags/TagsTable.tsx
+++ b/src/tags/TagsTable.tsx
@@ -8,6 +8,7 @@ import { useQueryState } from '../utils/helpers/hooks';
 import { parseQuery } from '../utils/helpers/query';
 import { TagsListChildrenProps } from './data/TagsListChildrenProps';
 import { TagsTableRowProps } from './TagsTableRow';
+import './TagsTable.scss';
 
 const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings
 
@@ -35,11 +36,12 @@ export const TagsTable = (colorGenerator: ColorGenerator, TagsTableRow: FC<TagsT
       <table className="table table-hover mb-0">
         <thead className="responsive-table__header">
           <tr>
-            <th>Tag</th>
-            <th className="text-lg-right">Short URLs</th>
-            <th className="text-lg-right">Visits</th>
-            <th />
+            <th className="tags-table__header-cell">Tag</th>
+            <th className="tags-table__header-cell text-lg-right">Short URLs</th>
+            <th className="tags-table__header-cell text-lg-right">Visits</th>
+            <th className="tags-table__header-cell" />
           </tr>
+          <tr><th colSpan={4} className="p-0 border-top-0" /></tr>
         </thead>
         <tbody>
           {currentPage.length === 0 && <tr><td colSpan={4} className="text-center">No results found</td></tr>}
diff --git a/src/utils/mixins/sticky-cell.scss b/src/utils/mixins/sticky-cell.scss
index 0e2d6125..93a7e47c 100644
--- a/src/utils/mixins/sticky-cell.scss
+++ b/src/utils/mixins/sticky-cell.scss
@@ -1,6 +1,6 @@
 @import '../base';
 
-@mixin sticky-cell() {
+@mixin sticky-cell($with-separators: true) {
   z-index: 1;
   border: none !important;
   position: relative;
@@ -11,20 +11,20 @@
     top: -1px;
     left: 0;
     bottom: -1px;
-    right: -1px;
+    right: if($with-separators, -1px, 0);
     background: var(--table-border-color);
     z-index: -2;
   }
 
   &:first-child:before {
-    left: -1px;
+    left: if($with-separators, -1px, 0);
   }
 
   &:after {
     content: '';
     position: absolute;
     top: 0;
-    left: 1px;
+    left: if($with-separators, 1px, 0);
     bottom: 0;
     right: 0;
     background: var(--primary-color);