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 @@
+
+
+
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 @@
+
+
+
+
+
+
+
+ {{ header }}
+ |
+
+
+
+
+
+ {{ cell }}
+ |
+
+
+
+
+
+
+
+
\ 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