Added sticky panes

BabyElias · Jul 18, 2024 · 96ede77 · 96ede77
1 parent 48e969c
commit 96ede77
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 25 deletions.
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -108,6 +108,18 @@
           ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
           ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
           ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
+          ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
+          ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
+          ['Samuel Green', 22, 'Chicago', '2023-03-10T00:00:00Z', 'N/A'],
+          ['Alice Johnson', 30, 'Houston', '2020-07-18T00:00:00Z', 'N/A'],
         ],
         backendRows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
@@ -172,6 +184,7 @@ h1, h2 {
   align-items: center;
   justify-content: center;
   font-size: 1.5em;
+  z-index: 5;
 }
 
 .sr-only {

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
@@ -1,7 +1,7 @@
 <template>
 
-  <div class="k-table" role="grid">
-    <table>
+  <div class="k-table-wrapper">
+    <table class="k-table" role="grid">
       <caption v-if="caption">
         {{ caption }}
       </caption>
@@ -12,7 +12,11 @@
             :key="index"
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
-            :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            :class="{
+              sortable: sortable && header.dataType !== DATA_TYPE_OTHERS,
+              'sticky-header': true,
+              'sticky-column': index === 0
+            }"
             :style="getHeaderStyle(header)"
             role="columnheader"
             aria-colindex="index + 1"
@@ -41,6 +45,10 @@
             :width="headers[colIndex].width"
             :rowIndex="rowIndex"
             :colIndex="colIndex"
+            :class="{
+              'sticky-column': colIndex === 0,
+
+            }"
             role="gridcell"
             aria-colindex="colIndex + 1"
             @keydown="handleKeydown($event, rowIndex, colIndex)"
@@ -140,6 +148,13 @@
       headers: {
         type: Array,
         required: true,
+        validator: function(value) {
+          return value.every(
+            header =>
+              ['label', 'dataType'].every(key => key in header) &&
+              ['string', 'numeric', 'date', 'others'].includes(header.dataType)
+          );
+        },
       },
       rows: {
         type: Array,
@@ -235,6 +250,7 @@
         }
         if (nextCell) {
           nextCell.focus();
+          nextCell.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
         }
       },
     },
@@ -244,38 +260,45 @@
 
 
 <style scoped>
-.k-table {
-  margin: 20px;
-  overflow: auto; 
-  max-height: 400px; 
-  max-width: 100%; 
+.k-table-wrapper {
+  overflow: auto;
+  position: relative;
+  height:300px;
 }
 
-.k-table table {
-  width: 100%;
-  border: none;
+.k-table {
   border-collapse: collapse;
+  width: 100%;
+  
 }
 
-.k-table th,
-.k-table td {
-  padding: 10px;
-  border: none; 
+th,
+td {
+  padding: 8px;
+  position: relative;
+  z-index: auto;
 }
 
-.k-table th {
-  cursor: pointer;
+.sticky-header {
+  position: sticky;
+  top: 0;
+  background-color: #f8f9fa;
+  z-index: 3; 
 }
 
-.k-table th.sortable {
-  cursor: pointer;
+.sticky-column {
+  position: sticky;
+  left: 0;
+  background-color: #f8f9fa;
+  z-index: 2; 
 }
 
-.k-table td:focus,
-.k-table th:focus {
-  outline: 2px solid #007bff;
-  outline-offset: -2px;
-  z-index: 1;
-  position: relative;
+th.sticky-header.sticky-column,
+td.sticky-header.sticky-column {
+  z-index: 4; 
 }
+.sortable {
+  cursor: pointer;
+}
+
 </style>