Added scroll and custom widths

BabyElias · Jul 16, 2024 · e871bf2 · e871bf2
1 parent 091e7f2
commit e871bf2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
@@ -22,12 +22,12 @@
     </KTable>
 
     <!-- Backend Sorting Table Example -->
-    <h2>Backend Sorting Table</h2>
+    <h2>Backend Sorting Table(with Custom Widths)</h2>
     <div ref="loadingArea" role="status" aria-live="polite" class="sr-only">
       {{ loadingMessage }}
     </div>
     <KTable
-      :headers="headers"
+      :headers="headersWithCustomWidths"
       :rows="backendRows"
       caption="Backend Sorting Table"
       :useLocalSorting="false"
@@ -54,10 +54,10 @@
 <script>
 
   /*
-           Playground is a Vue component too,
-           so you can also use `data`, `methods`, etc.
-           as usual if helpful
-         */
+             Playground is a Vue component too,
+             so you can also use `data`, `methods`, etc.
+             as usual if helpful
+           */
   import { ref } from '@vue/composition-api';
   import KTable from '../../lib/KTable';
 
@@ -96,6 +96,13 @@
           { label: 'Joined', dataType: 'date' },
           { label: 'Misc', dataType: 'others' },
         ],
+        headersWithCustomWidths: [
+          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
+          { label: 'Age', dataType: 'numeric', minWidth: '100px', width: '33%' },
+          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
+          { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
+          { label: 'Misc', dataType: 'others', minWidth: '100px', width: '20%' },
+        ],
         rows: [
           ['John Doe', 28, 'New York', '2022-01-15T00:00:00Z', 'N/A'],
           ['Jane Smith', 34, 'Los Angeles', '2021-12-22T00:00:00Z', 'N/A'],
@@ -132,8 +139,8 @@
 
           setTimeout(() => {
             this.updateLoadingMessage('');
-          }, 5000);
-        }, 10000); // Simulate a 10 second delay for fetching data
+          }, 3000);
+        }, 2000); // Simulate a 2 second delay for fetching data
       },
     },
   };
@@ -177,5 +184,6 @@ h1, h2 {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
+  visibility: hidden;
 }
 </style>
diff --git a/lib/KTable/KTableGridItem.vue b/lib/KTable/KTableGridItem.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <td :style="{ textAlign: textAlign }" tabindex="0" role="gridcell" @keydown="onKeydown">
+  <td :style="{ textAlign: textAlign, minWidth: minWidth, width: width }" tabindex="0" role="gridcell" @keydown="onKeydown">
     <slot :content="content">
       {{ content }}
     </slot>
@@ -32,6 +32,14 @@
         type: Number,
         required: true,
       },
+      minWidth: {
+        type: String,
+        default: 'auto',
+      },
+      width: {
+        type: String,
+        default: 'auto',
+      },
     },
     computed: {
       textAlign() {
@@ -49,6 +57,11 @@
 
 
 <style scoped>
+td {
+  word-wrap: break-word; 
+  white-space: normal; 
+}
+
 td:focus {
   outline: 2px solid #007bff;
   outline-offset: -2px;

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
@@ -13,6 +13,7 @@
             tabindex="0"
             :aria-sort="sortable && header.dataType !== DATA_TYPE_OTHERS ? getAriaSort(index) : null"
             :class="{ sortable: sortable && header.dataType !== DATA_TYPE_OTHERS }"
+            :style="getHeaderStyle(header)"
             role="columnheader"
             aria-colindex="index + 1"
             @click="sortable && header.dataType !== DATA_TYPE_OTHERS ? handleSort(index) : null"
@@ -22,8 +23,8 @@
               {{ header.label }}
             </slot>
             <span v-if="sortable && header.dataType !== DATA_TYPE_OTHERS" class="sort-icon">
-              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC"><KIcon icon="dropup" /></span>
-              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC"><KIcon icon="dropdown" /></span>
+              <span v-if="sortKey === index && sortOrder === SORT_ORDER_ASC">⬆️</span>
+              <span v-else-if="sortKey === index && sortOrder === SORT_ORDER_DESC">⬇️</span>
               <span v-else>⬍</span>
             </span>
           </th>
@@ -36,6 +37,8 @@
             :key="colIndex"
             :content="col"
             :dataType="headers[colIndex].dataType"
+            :minWidth="headers[colIndex].minWidth"
+            :width="headers[colIndex].width"
             :rowIndex="rowIndex"
             :colIndex="colIndex"
             role="gridcell"
@@ -100,6 +103,9 @@
       );
 
       const handleSort = index => {
+        if (headers.value[index].dataType === DATA_TYPE_OTHERS) {
+          return;
+        }
         if (useLocalSorting.value) {
           localHandleSort(index);
         } else {
@@ -111,6 +117,13 @@
         }
       };
 
+      const getHeaderStyle = header => {
+        const style = {};
+        if (header.minWidth) style.minWidth = header.minWidth;
+        if (header.width) style.width = header.width;
+        return style;
+      };
+
       return {
         sortKey,
         sortOrder,
@@ -120,6 +133,7 @@
         SORT_ORDER_ASC,
         SORT_ORDER_DESC,
         DATA_TYPE_OTHERS,
+        getHeaderStyle,
       };
     },
     props: {
@@ -206,6 +220,7 @@
           default:
             return;
         }
+
         this.focusCell(nextRowIndex, nextColIndex);
         event.preventDefault();
       },
@@ -231,18 +246,21 @@
 <style scoped>
 .k-table {
   margin: 20px;
+  overflow: auto; 
+  max-height: 400px; 
+  max-width: 100%; 
 }
 
 .k-table table {
   width: 100%;
-  border: 2px solid #ccc;
+  border: none;
   border-collapse: collapse;
 }
 
 .k-table th,
 .k-table td {
   padding: 10px;
-  border: none;
+  border: none; 
 }
 
 .k-table th {