Initialisating KTable Component

docs/pages/ktable.vue

@@ -0,0 +1,3 @@
+<template>
+  <DocsPageTemplate apiDocs />
+</template>

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',

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>

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);

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)
+    })
+})