From 649e0ebf3d5909eea4ca5caee3748aa159f1c812 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Sun, 15 Sep 2024 11:00:26 +0530
Subject: [PATCH 1/2] updated documentation

---
 docs/pages/ktable.vue | 163 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 140 insertions(+), 23 deletions(-)

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
index b2e28580f..38878bea8 100644
--- a/docs/pages/ktable.vue
+++ b/docs/pages/ktable.vue
@@ -17,7 +17,7 @@
       <!--Non-Sortable Table-->
       <h3>Table without sorting functionality</h3>
       <p>
-        This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table. Use of slots is optional.
+        This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table. 
       </p>
       <!-- eslint-disable -->
       <DocsShowCode language="html">
@@ -25,16 +25,7 @@
           :headers="headers"
           :rows="rows"
           caption="Non Sortable Table"
-        >
-
-          <template #header="{ header, colIndex }">
-            <span>{ header.label } (Backend)</span>
-          </template>
-          <template #cell="{ content, rowIndex, colIndex }">
-            <span v-if="colIndex === 2">{ content } (City)</span>
-            <span v-else>{ content }</span>
-          </template>
-        </KTable>
+        />
 
       </DocsShowCode>
 
@@ -47,7 +38,7 @@
           { label: 'City', dataType: 'string' },
         ],
         rows: [
-        ['John Doe', 28, 'New York'],
+          ['John Doe', 28, 'New York'],
           ['Jane Smith', 34, 'Los Angeles'],
           ['Samuel Green', 22, 'Chicago'],
           ['Alice Johnson', 30, 'Houston'],
@@ -63,15 +54,7 @@
           :headers="headers"
           :rows="rows"
           caption="Non-sortable table"
-        >
-          <template #header="{ header, colIndex }">
-            <span>{{ header.label }} (Backend)</span>
-          </template>
-          <template #cell="{ content, rowIndex, colIndex }">
-            <span v-if="colIndex === 2">{{ content }} (City)</span>
-            <span v-else>{{ content }}</span>
-          </template>
-        </KTable>
+        />
       </DocsShow>
 
       <!-- Frontend Sorting Example-->
@@ -99,7 +82,7 @@
           { label: 'City', dataType: 'string' },
         ],
         rows: [
-        ['John Doe', 28, 'New York'],
+          ['John Doe', 28, 'New York'],
           ['Jane Smith', 34, 'Los Angeles'],
           ['Samuel Green', 22, 'Chicago'],
           ['Alice Johnson', 30, 'Houston'],
@@ -113,11 +96,119 @@
         <KTable
           :headers="headers"
           :rows="rows"
-          caption="Local Sorting Table"
+          caption="In-Built Sorting Table"
           sortable
         />
           <!-- eslint-enable -->
       </DocsShow>
+      <!--Table showing use of slots-->
+      <h3>Table showing use of slots</h3>
+      <p>
+        This is an example to show how slots can be used in <code>KTable</code>. The table currently provides slots for <code>header</code> and <code>cell</code> which can be used to customize the table header and cell content respectively.
+      </p>
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KTable
+          :headers="slotHeaders"
+          :rows="slotRows"
+          caption="Table showing use of slots"
+          sortable
+        >
+      <template #header="{ header, colindex }">
+        <span>{ header.label } (Local)</span>
+      </template>
+      <template #cell="{ content, rowIndex, colIndex }">
+        <span v-if="colIndex === 1">{ content } years old</span>
+        <span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
+        <span v-else>{ content }</span>
+      </template>
+    </KTable>
+
+      </DocsShowCode>
+
+  <DocsShowCode language="javascript">
+    data() {
+      return {
+        slotHeaders: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'number' },
+          { label: 'City', dataType: 'string' },
+          { label: 'Joined', dataType: 'date' },
+          { label: 'Misc', dataType: 'undefined' },
+        ],
+        slotRows: [
+          ['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'],
+        ],
+      };
+    },
+      </DocsShowCode>
+
+      <DocsShow block>
+        <KTable
+          :headers="slotHeaders"
+          :rows="slotRows"
+          caption="Table showing use of slots"
+          sortable
+        >
+          <template #header="{ header, colindex }">
+            <span>{{ header.label }} (Local)</span>
+          </template>
+          <template #cell="{ content, rowIndex, colIndex }">
+            <span v-if="colIndex === 1">{{ content }} years old</span>
+            <span v-else-if="colIndex === 4"><KButton>Test</KButton></span>
+            <span v-else>{{ content }}</span>
+          </template>
+        </KTable>
+      </DocsShow>
+      <!-- eslint-enable -->
+      <!--Table with custom column widths-->
+      <h3>Table with custom column widths</h3>
+      <p>
+        This is an example to show how <code>KTable</code> can be used with custom column widths. The column widths are defined in the <code>headers</code> prop. The <code>width</code> property is used to define the overall width of the column. The <code>minWidth</code> defines the minimum width of column, below which the column will not shrink.
+      </p>
+      <!-- eslint-disable -->
+      <DocsShowCode language="html">
+        <KTable
+          :headers="headersWithCustomWidths"
+          :rows="customRows"
+          caption="Table showing columns with custom widths"
+          sortable
+        />
+
+      </DocsShowCode>
+
+  <DocsShowCode language="javascript">
+    data() {
+      return {
+        headersWithCustomWidths: [
+          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
+          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
+          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
+          { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
+          { label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
+        ],
+        customRows: [
+          ['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'],
+        ],
+      };
+    },
+      </DocsShowCode>
+
+      <DocsShow block>
+        <KTable
+          :headers="headersWithCustomWidths"
+          :rows="customRows"
+          caption="Table showing columns with custom widths"
+          sortable
+        />
+      </DocsShow>
+      <!-- eslint-enable -->
 
     </DocsPageSection>
 
@@ -146,6 +237,32 @@
           ['Michael Brown', 45, 'Phoenix'],
           ['Emily Davis', 27, 'Philadelphia'],
         ],
+        slotHeaders: [
+          { label: 'Name', dataType: 'string' },
+          { label: 'Age', dataType: 'number' },
+          { label: 'City', dataType: 'string' },
+          { label: 'Joined', dataType: 'date' },
+          { label: 'Misc', dataType: 'undefined' },
+        ],
+        slotRows: [
+          ['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'],
+        ],
+        headersWithCustomWidths: [
+          { label: 'Name', dataType: 'string', minWidth: '20px', width: '2%' },
+          { label: 'Age', dataType: 'number', minWidth: '100px', width: '33%' },
+          { label: 'City', dataType: 'string', minWidth: '200px', width: '25%' },
+          { label: 'Joined', dataType: 'date', minWidth: '150px', width: '20%' },
+          { label: 'Misc', dataType: 'undefined', minWidth: '100px', width: '20%' },
+        ],
+        customRows: [
+          ['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'],
+        ],
       };
     },
   };

From b4bce4359859b60ed964c55ed6927a648230f0a1 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Fri, 20 Sep 2024 15:54:09 +0530
Subject: [PATCH 2/2] fixed z-indices

---
 lib/KTable/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
index 4d41e05db..c3d743863 100644
--- a/lib/KTable/index.vue
+++ b/lib/KTable/index.vue
@@ -547,18 +547,18 @@ td {
 .sticky-header {
   position: sticky;
   top: 0;
-  z-index: 3; 
+  z-index: 2; 
 }
 
 .sticky-column {
   position: sticky;
   left: 0;
-  z-index: 2; 
+  z-index: 1; 
 }
 
 th.sticky-header.sticky-column,
 td.sticky-header.sticky-column {
-  z-index: 4; 
+  z-index: 3; 
 }
 .sortable {
   cursor: pointer;