From 2f527c35e24bbc4281e9b29437379f918bb56a95 Mon Sep 17 00:00:00 2001
From: callmeroot <anoushka.jha.che21@itbhu.ac.in>
Date: Thu, 30 May 2024 21:18:04 +0530
Subject: [PATCH] Initialisating KTable Component

---
 docs/pages/ktable.vue        |  3 ++
 docs/tableOfContents.js      |  5 ++++
 lib/KTable.vue               | 56 ++++++++++++++++++++++++++++++++++++
 lib/KThemePlugin.js          |  2 ++
 lib/__tests__/KTable.spec.js | 37 ++++++++++++++++++++++++
 5 files changed, 103 insertions(+)
 create mode 100644 docs/pages/ktable.vue
 create mode 100644 lib/KTable.vue
 create mode 100644 lib/__tests__/KTable.spec.js

diff --git a/docs/pages/ktable.vue b/docs/pages/ktable.vue
new file mode 100644
index 000000000..180c372c0
--- /dev/null
+++ b/docs/pages/ktable.vue
@@ -0,0 +1,3 @@
+<template>
+  <DocsPageTemplate apiDocs />
+</template>
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
index c6aa32e34..ba939da0d 100644
--- a/docs/tableOfContents.js
+++ b/docs/tableOfContents.js
@@ -321,6 +321,11 @@ export default [
         isCode: true,
         keywords: ['button'],
       }),
+      new Page({
+        path: '/ktable',
+        title: 'KTable',
+        isCode: true,
+      }),
       new Page({
         path: '/kgrid',
         title: 'KGrid',
diff --git a/lib/KTable.vue b/lib/KTable.vue
new file mode 100644
index 000000000..5f979a743
--- /dev/null
+++ b/lib/KTable.vue
@@ -0,0 +1,56 @@
+<template>
+
+  <div class="k-table">
+    <table>
+      <thead>
+        <tr>
+          <th v-for="(header,index) in headers" :key="index">
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row,index) in rows" :key="index">
+          <td v-for="(cell,cellIndex) in row" :key="cellIndex">
+            {{ cell }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</template>
+<script>
+
+  export default {
+    name: 'KTable',
+    props: {
+      headers: {
+        type: Array,
+        required: true,
+      },
+      rows: {
+        type: Array,
+        required: true,
+      },
+    },
+  };
+
+</script>
+<style scoped>
+.k-table{
+    margin:20px;
+    border-collapse:collapse;
+}
+.k-table table{
+    width:100%;
+    border:2px solid #ccc;
+    border-collapse:separate;
+    border-spacing:0;
+}
+.k-table th, .k-table td{
+    padding: 10px;
+    text-align:left;
+    
+}
+</style>
\ No newline at end of file
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
index 9e189f875..bc8af3ed9 100644
--- a/lib/KThemePlugin.js
+++ b/lib/KThemePlugin.js
@@ -26,6 +26,7 @@ import KRadioButton from './KRadioButton';
 import KRouterLink from './buttons-and-links/KRouterLink';
 import KSelect from './KSelect';
 import KSwitch from './KSwitch';
+import KTable from './KTable'
 import KTabs from './tabs/KTabs';
 import KTabsList from './tabs/KTabsList';
 import KTabsPanel from './tabs/KTabsPanel';
@@ -120,6 +121,7 @@ export default function KThemePlugin(Vue) {
   Vue.component('KRouterLink', KRouterLink);
   Vue.component('KSelect', KSelect);
   Vue.component('KSwitch', KSwitch);
+  Vue.component('KTable', KTable);
   Vue.component('KTabs', KTabs);
   Vue.component('KTabsList', KTabsList);
   Vue.component('KTabsPanel', KTabsPanel);
diff --git a/lib/__tests__/KTable.spec.js b/lib/__tests__/KTable.spec.js
new file mode 100644
index 000000000..211de44dc
--- /dev/null
+++ b/lib/__tests__/KTable.spec.js
@@ -0,0 +1,37 @@
+import {shallowMount} from '@vue/test-utils'
+import KTable from '../../lib/KTable.vue';
+
+describe('KTable.vue',()=>{
+    it('should mount the component',()=>{
+        const headers=['Name','Age','City']
+        const rows=[
+            ['Alice',25,'New York'],
+            ['Bob',30,'Los Angeles'],
+            ['Charlie',35,'San Francisco']
+        ]
+        const wrapper=shallowMount(KTable,{
+            propsData:{
+                headers,
+                rows
+            }
+        })
+        const thElements=wrapper.findAll('th')
+        expect(thElements.length).toBe(headers.length)
+    })
+    it('should render correct number of rows',()=>{
+        const headers=['Name','Age','City']
+        const rows=[
+            ['Alice',25,'New York'],
+            ['Bob',30,'Los Angeles'],
+            ['Charlie',35,'San Francisco']
+        ]
+        const wrapper=shallowMount(KTable,{
+            propsData:{
+                headers,
+                rows
+            }
+        })
+        const trElements=wrapper.findAll('tbody tr')
+        expect(trElements.length).toBe(rows.length+1)
+    })
+})
\ No newline at end of file