From 83f8fa2325151f4b60ea5465a6d75a2174a4502c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 17 Apr 2024 23:03:15 +0000
Subject: [PATCH 01/33] fix(deps): update dependency @kong/icons to ^1.9.0
 (#2144)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 4 ++++
 yarn.lock    | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/package.json b/package.json
index 1a4df71375..c003e7fe54 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,11 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
+<<<<<<< HEAD
     "@kong/icons": "^1.9.1",
+=======
+    "@kong/icons": "^1.9.0",
+>>>>>>> 52f3c2dfe (fix(deps): update dependency @kong/icons to ^1.9.0 (#2144))
     "@popperjs/core": "^2.11.8",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
diff --git a/yarn.lock b/yarn.lock
index 22b0c388a7..9f73390880 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1105,6 +1105,11 @@
   resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.9.1.tgz#3947e3019710d306865eef19aef3ec6c89c5a5b6"
   integrity sha512-8V21s7OEXcGAWDfPlcidjLlvAemz1KxgkpNSCWC9BCMGnmYRV/1hF7hzC0Dbjz6Q5uP3jnukI+e2bkKKrxANMQ==
 
+"@kong/icons@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@kong/icons/-/icons-1.9.0.tgz#40391a01ccd95ff2053c962fb5e88d616bb90640"
+  integrity sha512-fA3gXZrPjhI6gV2ISV10kKG0Y6gsW+ps31ionv/09a7BY+z4K9XqNbRRzUkqZgCoTTCnf3MWYum/CRpzaYcctg==
+
 "@ljharb/through@^2.3.13":
   version "2.3.13"
   resolved "https://registry.yarnpkg.com/@ljharb/through/-/through-2.3.13.tgz#b7e4766e0b65aa82e529be945ab078de79874edc"

From ff6349554c8157e3a16d99ed06c29d8a8c54d44f Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 17 Apr 2024 23:10:04 +0000
Subject: [PATCH 02/33] chore(release): 9.0.0-alpha.145 [skip ci]

* **deps:** update dependency @kong/icons to ^1.9.0 ([#2144](https://github.com/Kong/kongponents/issues/2144)) ([52f3c2d](https://github.com/Kong/kongponents/commit/52f3c2dfe72bce8c13ea84b65b8e30346a48b752))
---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index c003e7fe54..8e864e6450 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,10 @@
 {
   "name": "@kong/kongponents",
+<<<<<<< HEAD
   "version": "9.0.0-alpha.149",
+=======
+  "version": "9.0.0-alpha.145",
+>>>>>>> c01912548 (chore(release): 9.0.0-alpha.145 [skip ci])
   "description": "Kong Component library",
   "type": "module",
   "repository": {

From 9e5cd34a7dbde135987b1c0e451ffd68b2cd123a Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 18 Apr 2024 05:11:50 +0000
Subject: [PATCH 03/33] chore(deps): update dependency
 @kong-ui-public/sandbox-layout to ^2.0.50 (#2145)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/package.json b/package.json
index 8e864e6450..c0776bbd9a 100644
--- a/package.json
+++ b/package.json
@@ -85,8 +85,13 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@cypress/vite-dev-server": "^5.0.7",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
+<<<<<<< HEAD
     "@evilmartians/lefthook": "^1.6.10",
     "@kong-ui-public/sandbox-layout": "^2.0.52",
+=======
+    "@evilmartians/lefthook": "^1.6.7",
+    "@kong-ui-public/sandbox-layout": "^2.0.50",
+>>>>>>> af75cab08 (chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.50 (#2145))
     "@kong/design-tokens": "^1.12.11",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

From c8c663d20c9758ce199120f857c42cf992d187ed Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Thu, 18 Apr 2024 10:32:43 -0400
Subject: [PATCH 04/33] feat(kcodeblock, kcatalog, kcollapse, kstepper):
 components reskin (#2124)

* feat(kcodeblock): component reskin [KHCP-8975] (#2100)

* feat(kcollapse): component reskin [KHCP-8976] (#2125)

* feat(kcollapse): reskin component - wip [KHCP-8976]

* feat(kcollapse): component reskin [KHCP-8976]

* test(kcollapse): update compoent tests [KHCP-8976]

* fix(kcollapse): misc fixes [KHCP-8976]

* docs(collapse): update component docs [KHCP-8976]

* chore(sandbox): minor fix [KHCP-8976]

* docs(collapse): misc fix [KHCP-8976]

* fix(kcollapse): apply feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* fix(kcollapse): address feedback [KHCP-8976]

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* feat(kcatalog): reskin component [KHCP-8972] (#2116)

* fix(kcatalog): update props, slots, events [KHCP-8972]

* feat(kcatalog): reskin component [KHCP-8972]

* feat(kcatalogitem): reskin component [KHCP-8972]

* test(kcatalog): update component tests [KHCP-8972]

* docs(catalog): update component docs [KHCP-8972]

* docs(catalog): minor fix [KHCP-8972]

* test(kemptystate): fix flaky test [KHCP-8972]

* test(kalert): fix flaky test [KHCP-8972]

* fix(kcatalog): grid gap [KHCP-8972]

* fix(kcatalog): apply feedback

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* fix(kcatalog): address feedback [KHCP-8972]

* fix(*): remove letter spacing [KHCP-8972]

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>

* feat(kstepper): component reskin [KHCP-9001] (#2132)

* fix(kmultiselect): minor fix [KHCP-9001]

* feat(kstepper): reskin component [KHCP-9001]

* fix(kstepper): remove stepper icons [KHCP-9001]

* test(kstepper): update component tests [KHCP-9001]

* fix(kstepper): minor fix [KHCP-9001]

* docs(stepper): update component docs [KHCP-9001]

* fix(kstepper): add aria-current [KHCP-9001]

* fix(kstep): icon titles [KHCP-9001]

* docs: minor fix

* fix(kcodeblock): icon button not to inherit attrs (#2140)

* fix(kcatalogitem): fix overflow

* fix(*): add title or decorative prop to icons (#2143)

* fix(*): add title or decorative prop to icons

* fix(*): minor fix

* fix(kcopy): minor fix

* fix(kcopy): minor fix

* fix(*): address pr feedback

* fix(ktable): minor fix

---------

Co-authored-by: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com>
---
 docs/components/catalog.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/catalog.md b/docs/components/catalog.md
index 623c5d0cf5..c92434b137 100644
--- a/docs/components/catalog.md
+++ b/docs/components/catalog.md
@@ -264,7 +264,7 @@ The footer content for the card.
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
   </template>
   <template #card-footer>
-      <KBadge appearance="neutral">Card footer</KBadge>
+    <KBadge appearance="neutral">Card footer</KBadge>
   </template>
 </KCatalogItem>
 ```

From ec8f19ca3817b4dfe94980074451ed20372c4c99 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Thu, 18 Apr 2024 14:39:52 +0000
Subject: [PATCH 05/33] chore(release): 9.0.0-alpha.146 [skip ci]

* **kcodeblock, kcatalog, kcollapse, kstepper:** components reskin ([#2124](https://github.com/Kong/kongponents/issues/2124)) ([4c97890](https://github.com/Kong/kongponents/commit/4c97890a5915b35d448b9de952d5c4552302852f)), closes [#2100](https://github.com/Kong/kongponents/issues/2100) [#2125](https://github.com/Kong/kongponents/issues/2125)
---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index c0776bbd9a..23d9305662 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,14 @@
 {
   "name": "@kong/kongponents",
+<<<<<<< HEAD
 <<<<<<< HEAD
   "version": "9.0.0-alpha.149",
 =======
   "version": "9.0.0-alpha.145",
 >>>>>>> c01912548 (chore(release): 9.0.0-alpha.145 [skip ci])
+=======
+  "version": "9.0.0-alpha.146",
+>>>>>>> e1406a43d (chore(release): 9.0.0-alpha.146 [skip ci])
   "description": "Kong Component library",
   "type": "module",
   "repository": {

From 6df32890fe664770e3d1aaf3e6bc91425e2b21ed Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 18 Apr 2024 18:55:18 +0000
Subject: [PATCH 06/33] chore(deps): update dependency
 @kong-ui-public/sandbox-layout to ^2.0.51 (#2146)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 23d9305662..ac753c9116 100644
--- a/package.json
+++ b/package.json
@@ -94,8 +94,12 @@
     "@kong-ui-public/sandbox-layout": "^2.0.52",
 =======
     "@evilmartians/lefthook": "^1.6.7",
+<<<<<<< HEAD
     "@kong-ui-public/sandbox-layout": "^2.0.50",
 >>>>>>> af75cab08 (chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.50 (#2145))
+=======
+    "@kong-ui-public/sandbox-layout": "^2.0.51",
+>>>>>>> d81d57a4f (chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.51 (#2146))
     "@kong/design-tokens": "^1.12.11",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

From 45cc18f5799d27db242a37e67b286bf94a7ed55c Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 22 Apr 2024 12:41:41 -0400
Subject: [PATCH 07/33] feat(ktable): reskin props [KHCP-9002]

---
 docs/guide/migrating-to-version-9.md          |  20 +++
 sandbox/pages/SandboxTable.vue                |  99 -----------
 sandbox/pages/SandboxTable/SandboxTable.vue   | 139 ++++++++++++++++
 .../SandboxTable/SandboxTableActions.vue      |  29 ++++
 sandbox/router/sandbox-routes.ts              |   2 +-
 src/components/KSkeleton/TableSkeleton.vue    |   5 +-
 src/components/KTable/KTable.cy.ts            |  79 +++------
 src/components/KTable/KTable.vue              | 156 +++---------------
 src/types/table.ts                            |  11 +-
 9 files changed, 241 insertions(+), 299 deletions(-)
 delete mode 100644 sandbox/pages/SandboxTable.vue
 create mode 100644 sandbox/pages/SandboxTable/SandboxTable.vue
 create mode 100644 sandbox/pages/SandboxTable/SandboxTableActions.vue

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index feace3e078..6a96fbf9a3 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -781,10 +781,30 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 #### Props
 
+* `hasSideBorder` prop has been removed
+* `hasError` prop has been removed and replaced with `error` prop
+* `isLoading` prop has been removed and replaced with `loading` prop
+* `disableSorting` prop has been removed and replaced with `sortable` prop (defaults to `true`)
+* `enableClientSort` prop has been removed and replaced with `clientSort` prop
+* `sortHandlerFn` prop has been removed and replaced with `sortHandlerFunction` prop
 * `emptyStateIcon` prop has been removed. You can use the new `emptyStateIconVariant` prop instead
 * `emptyStateIconColor` prop has been removed
 * `emptyStateIconSize` prop has been removed
 * `emptyStateActionButtonIcon` prop has been removed. You can use the new `empty-state-action-icon` slot instead
+* `errorStateIcon` prop has been removed
+* `errorStateIconColor` prop has been removed
+* `errorStateIconSize` prop has been removed
+* `options` prop (deprecated) has been removed
+* `sortOrder` prop (deprecated) has been removed
+* `testMode` prop has been removed
+
+#### Constants, Types & Interfaces
+
+* `useSortHandlerFn` parameter in `TableHeader` interface has been renamed to `useSortHandlerFunction`
+* `TableSortOrderArray` const has been removed
+* `TableSortOrder` type has been removed
+* `TableTestModeArray` const has been removed
+* `TableTestMode` type has been removed
 
 ### KTabs
 
diff --git a/sandbox/pages/SandboxTable.vue b/sandbox/pages/SandboxTable.vue
deleted file mode 100644
index 0c48b377cb..0000000000
--- a/sandbox/pages/SandboxTable.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <SandboxLayout
-    :links="inject('app-links', [])"
-    title="KTable"
-  >
-    <SandboxSectionComponent>
-      <div class="horizontal-container">
-        <KInputSwitch
-          v-model="tableEmptyState"
-          label="Show empty state"
-        />
-        <KInputSwitch
-          v-model="tableErrorState"
-          label="Show error state"
-        />
-      </div>
-
-      <KTable
-        :key="tableKey"
-        empty-state-action-message="Add new item"
-        :fetcher="fetcher"
-        :has-error="tableErrorState"
-        :headers="[
-          { key: 'name', label: 'Full Name' },
-          { key: 'username', label: 'Username' },
-          { key: 'email', label: 'Email', hidable: true },
-          { key: 'actions', hideLabel: true }
-        ]"
-        :initial-fetcher-params="{
-          pageSize: 30
-        }"
-        resize-columns
-      >
-        <template #actions>
-          <KDropdown>
-            <template #default>
-              <KButton
-                appearance="tertiary"
-                size="small"
-              >
-                <MoreIcon />
-              </KButton>
-            </template>
-            <template #items>
-              <KDropdownItem>
-                Edit
-              </KDropdownItem>
-              <KDropdownItem
-                danger
-                has-divider
-              >
-                Delete
-              </KDropdownItem>
-            </template>
-          </KDropdown>
-        </template>
-        <template #empty-state-action-icon>
-          <AddIcon />
-        </template>
-      </KTable>
-    </SandboxSectionComponent>
-  </SandboxLayout>
-</template>
-
-<script setup lang="ts">
-import { inject, ref, watch } from 'vue'
-import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
-import { MoreIcon, AddIcon } from '@kong/icons'
-
-const tableKey = ref<number>(0)
-
-const tableEmptyState = ref<boolean>(false)
-const tableErrorState = ref<boolean>(false)
-
-const fetcher = async (): Promise<any> => {
-  // Fake delay
-  await new Promise((resolve) => setTimeout(resolve, 2000))
-
-  const response = await fetch('https://jsonplaceholder.typicode.com/users')
-  const responseData = await response.json()
-
-  return {
-    data: tableEmptyState.value ? [] : responseData,
-    total: responseData.length,
-  }
-}
-
-watch([tableEmptyState, tableErrorState], () => {
-  tableKey.value++
-})
-</script>
-
-<style lang="scss" scoped>
-.horizontal-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: $kui-space-50;
-}
-</style>
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
new file mode 100644
index 0000000000..09da9a5ac9
--- /dev/null
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -0,0 +1,139 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KTable"
+  >
+    <div class="ktable-sandbox">
+      <SandboxSectionComponent>
+        <iframe
+          allowfullscreen
+          height="450"
+          src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FYze0SWXl5nKjR0rFdilljK%2FComponents%3Ftype%3Ddesign%26node-id%3D418%253A12464%26mode%3Ddesign%26t%3DLUYNbmqFH50qSmKC-1"
+          style="border: 1px solid rgba(0, 0, 0, 0.1);"
+          width="800"
+        />
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="hasHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ tableKey: 0, tableHasHover: false, tableEmptyState: false }"
+        >
+          <div class="horizontal-container">
+            <KInputSwitch
+              v-model="data.tableHasHover"
+              label="Has hover"
+            />
+            <KInputSwitch
+              v-model="data.tableEmptyState"
+              label="Empty state"
+              @change="data.tableKey++"
+            />
+          </div>
+
+          <KTable
+            :key="data.tableKey"
+            empty-state-action-message="Emty state message"
+            empty-state-action-route="/"
+            empty-state-icon-variant="kong"
+            empty-state-message="Empty state message"
+            empty-state-title="Empty state title"
+            :fetcher="data.tableEmptyState ? emptyFetcher : fetcher"
+            :has-hover="data.tableHasHover"
+            :headers="headers()"
+          >
+            <template #actions>
+              <SandboxTableActions />
+            </template>
+          </KTable>
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="loading & resizeColumns & error & errorStateTitle & errorStateMessage & errorStateActionMessage & errorStateActionRoute">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ tableLoadingState: false, tableErrorState: false }"
+        >
+          <div class="horizontal-container">
+            <KInputSwitch
+              v-model="data.tableLoadingState"
+              label="Loading state"
+            />
+            <KInputSwitch
+              v-model="data.tableErrorState"
+              label="Error state"
+            />
+          </div>
+
+          <KTable
+            empty-state-action-message="Add new item"
+            error-state-action-message="Error state action"
+            error-state-action-route="/"
+            error-state-message="Error state message"
+            error-state-title="Error state title"
+            :fetcher="fetcher"
+            :has-error="data.tableErrorState"
+            :headers="headers(true)"
+            :is-loading="data.tableLoadingState"
+            resize-columns
+          >
+            <template #actions>
+              <SandboxTableActions />
+            </template>
+          </KTable>
+        </KComponent>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+import SandboxTitleComponent from '../../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../../components/SandboxSectionComponent.vue'
+import SandboxTableActions from './SandboxTableActions.vue'
+
+const headers = (hidable: boolean = false) => {
+  return [
+    { key: 'name', label: 'Full Name' },
+    { key: 'username', label: 'Username' },
+    { key: 'email', label: 'Email', hidable },
+    { key: 'actions', hideLabel: true },
+  ]
+}
+
+const fetcher = async (): Promise<any> => {
+  // Fake delay
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  const response = await fetch('https://jsonplaceholder.typicode.com/users')
+  const responseData = await response.json()
+
+  return {
+    data: responseData,
+    total: responseData.length,
+  }
+}
+
+const emptyFetcher = async (): Promise<any> => {
+  // Fake delay
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  return {
+    data: [],
+    total: 0,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.horizontal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $kui-space-50;
+}
+</style>
diff --git a/sandbox/pages/SandboxTable/SandboxTableActions.vue b/sandbox/pages/SandboxTable/SandboxTableActions.vue
new file mode 100644
index 0000000000..6420ab7d36
--- /dev/null
+++ b/sandbox/pages/SandboxTable/SandboxTableActions.vue
@@ -0,0 +1,29 @@
+<template>
+  <KDropdown>
+    <template #default>
+      <KButton
+        appearance="tertiary"
+        size="small"
+      >
+        <template #icon>
+          <MoreIcon />
+        </template>
+      </KButton>
+    </template>
+    <template #items>
+      <KDropdownItem>
+        Edit
+      </KDropdownItem>
+      <KDropdownItem
+        danger
+        has-divider
+      >
+        Delete
+      </KDropdownItem>
+    </template>
+  </KDropdown>
+</template>
+
+<script setup lang="ts">
+import { MoreIcon } from '@kong/icons'
+</script>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 668d80e287..e12359935a 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -168,7 +168,7 @@ const componentRoutes: RouteRecordRaw[] = [
     path: '/table',
     name: 'table',
     meta: { title: 'Table Sandbox' },
-    component: () => import('../pages/SandboxTable.vue'),
+    component: () => import('../pages/SandboxTable/SandboxTable.vue'),
   },
   {
     path: '/tabs',
diff --git a/src/components/KSkeleton/TableSkeleton.vue b/src/components/KSkeleton/TableSkeleton.vue
index 5cb84bb5ee..cfa4463ee6 100644
--- a/src/components/KSkeleton/TableSkeleton.vue
+++ b/src/components/KSkeleton/TableSkeleton.vue
@@ -51,12 +51,15 @@ const calcWidth = (cell: number, row: number): SkeletonBoxWidth => {
   width: 100%;
 
   .skeleton-table-row {
-    border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
     display: flex;
     gap: var(--kui-space-20, $kui-space-20);
     padding: var(--kui-space-80, $kui-space-80) var(--kui-space-40, $kui-space-40);
     width: 100%;
 
+    &:not(:last-child) {
+      border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+    }
+
     .skeleton-cell-container {
       width: calc(100% / v-bind('columns'));
 
diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 1ba1f32a42..510e10cb28 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -92,21 +92,11 @@ const options = {
   ],
 }
 
-/**
- * ALL TESTS MUST USE testMode
- * We generate unique IDs for reference by aria properties. Test mode strips these out
- * allowing for successful snapshot verification.
- * props: {
- *   testMode: 'true' || 'loading'
- * }
- */
-
 describe('KTable', () => {
   describe('states', () => {
     it('displays an empty state when no data is available', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           fetcher: () => ({ data: [] }),
           headers: options.headers,
           pageSize: 4,
@@ -117,11 +107,10 @@ describe('KTable', () => {
     })
 
     it('displays an empty state when no data is available (slot)', () => {
-      const emptySlotContent = 'Look mah! I am empty! (except testMode)'
+      const emptySlotContent = 'Look mah! I am empty!'
       const fetcher = () => new Promise(resolve => resolve({ data: [] }))
       mount(KTable, {
         props: {
-          testMode: 'true',
           fetcher,
           headers: options.headers,
           pageSize: 4,
@@ -134,22 +123,20 @@ describe('KTable', () => {
       cy.getTestId('k-table-empty-state').should('contain.text', emptySlotContent)
     })
 
-    it('displays a loading skeletion when the "isLoading" prop is set to true"', () => {
+    it('displays a loading skeletion when the "loading" prop is set to true"', () => {
       mount(KTable, {
         props: {
-          testMode: 'loading',
-          isLoading: true,
+          loading: true,
         },
       })
 
       cy.get('.skeleton-table-wrapper').should('be.visible')
     })
 
-    it('displays an error state when the "hasError" prop is set to true"', () => {
+    it('displays an error state when the "error" prop is set to true"', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
-          hasError: true,
+          error: true,
         },
       })
 
@@ -157,11 +144,10 @@ describe('KTable', () => {
     })
 
     it('displays an error state (slot)', () => {
-      const errorSlotContent = 'Look mah! I am erroneous! (except testMode)'
+      const errorSlotContent = 'Look mah! I am erroneous!'
       mount(KTable, {
         props: {
-          testMode: 'true',
-          hasError: true,
+          error: true,
         },
         slots: {
           'error-state': () => h('span', {}, errorSlotContent),
@@ -178,7 +164,6 @@ describe('KTable', () => {
 
       mount(KTable, {
         props: {
-          testMode: 'loading',
           fetcher: slowFetcher,
           headers: options.headers,
           cacheIdentifier: 'loading-test',
@@ -195,7 +180,6 @@ describe('KTable', () => {
     it('renders link in action slot', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
           disablePagination: true,
@@ -211,7 +195,6 @@ describe('KTable', () => {
     it('renders content in the toolbar slot', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
           disablePagination: true,
@@ -228,7 +211,6 @@ describe('KTable', () => {
     it('has hover class when passed', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
           hasHover: true,
@@ -241,7 +223,6 @@ describe('KTable', () => {
     it('renders column resize toggles when resizeColumns is set', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
           resizeColumns: true,
@@ -259,7 +240,6 @@ describe('KTable', () => {
 
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
         },
@@ -288,7 +268,6 @@ describe('KTable', () => {
     it('when clicking a specific page number for non-offset pagination', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           initialFetcherParams: {
             page: 1,
             pageSize: 1,
@@ -299,7 +278,7 @@ describe('KTable', () => {
               total: options.data.length,
             }
           },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [1, 2],
           hidePaginationWhenOptional: false,
@@ -317,9 +296,8 @@ describe('KTable', () => {
     it('when clicking arrows for offset based pagination', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: offsetPaginationFetcher,
-          isLoading: false,
+          loading: false,
           headers: offsetPaginationHeaders,
         },
       })
@@ -334,13 +312,12 @@ describe('KTable', () => {
     it('when page size is changed', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: () => {
             return {
               data: largeDataSet,
             }
           },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [1, 2, 3, 4],
           hidePaginationWhenOptional: false,
@@ -360,7 +337,7 @@ describe('KTable', () => {
         { label: 'Host', key: 'hostname', sortable: true },
         { label: 'Version', key: 'version', sortable: true },
         { label: 'Connected', key: 'connected', sortable: true },
-        { label: 'Last Seen', key: 'last_seen', sortable: true, useSortHandlerFn: true },
+        { label: 'Last Seen', key: 'last_seen', sortable: true, useSortHandlerFunction: true },
       ]
       const sortHandlerFnFetcher = () => {
         return {
@@ -410,9 +387,8 @@ describe('KTable', () => {
       }
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: sortHandlerFnFetcher,
-          isLoading: false,
+          loading: false,
           headers: sortHandlerFnHeaders,
         },
       })
@@ -429,7 +405,6 @@ describe('KTable', () => {
     it('should have sortable class when passed', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
         },
@@ -445,10 +420,9 @@ describe('KTable', () => {
     it('should allow disabling sorting', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
-          disableSorting: true,
+          sortable: false,
         },
       })
 
@@ -465,7 +439,6 @@ describe('KTable', () => {
   //       localVue,
   //       attachToDocument: true,
   //       props: {
-  //         testMode: 'true',
   //         headers: options.headers,
   //         fetcher: () => { return { data: options.data } },
   //       },
@@ -484,7 +457,6 @@ describe('KTable', () => {
   //     localVue,
   //     attachToDocument: true,
   //     props: {
-  //       testMode: 'true',
   //       headers: options.headers,
   //       fetcher: () => { return { data: options.data } },
   //     },
@@ -513,11 +485,10 @@ describe('KTable', () => {
     it('displays pagination when fetcher provided', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           fetcher: () => {
             return largeDataSet
           },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [10, 20, 30, 40],
         },
@@ -529,11 +500,10 @@ describe('KTable', () => {
     it('does not display pagination when pagination disabled', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           fetcher: () => {
             return largeDataSet
           },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [10, 20, 30, 40],
           disablePagination: true,
@@ -546,7 +516,6 @@ describe('KTable', () => {
     it('does not display pagination when no fetcher', () => {
       mount(KTable, {
         props: {
-          testMode: 'true',
           options,
           paginationPageSizes: [10, 20, 30, 40],
         },
@@ -558,9 +527,8 @@ describe('KTable', () => {
     it('does not display pagination when hidePaginationWhenOptional is true and total is less than min pageSize', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: () => { return { data: options.data, total: options.data.length } },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
@@ -573,11 +541,10 @@ describe('KTable', () => {
     it('does not display pagination when hidePaginationWhenOptional is true and total is equal to min pageSize', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: () => {
             return { data: largeDataSet, total: 12 }
           },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [12, 15, 20],
           hidePaginationWhenOptional: true,
@@ -590,11 +557,10 @@ describe('KTable', () => {
     it('does display pagination when total is greater than min pageSize', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: () => {
             return { data: largeDataSet, total: 12 }
           },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
@@ -607,9 +573,8 @@ describe('KTable', () => {
     it('does not display offset-based pagination when hidePaginationWhenOptional is true and total is less than min pageSize', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: () => { return { data: options.data, offset: null } },
-          isLoading: false,
+          loading: false,
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
           hidePaginationWhenOptional: true,
@@ -624,11 +589,10 @@ describe('KTable', () => {
     it('does display offset-based pagination when total is greater than min pageSize', () => {
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: () => {
             return { data: largeDataSet, offset: 'abc' }
           },
-          isLoading: false,
+          loading: false,
           initialFetcherParams: { offset: 'abc' },
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
@@ -652,9 +616,8 @@ describe('KTable', () => {
 
       mount(KTable, {
         propsData: {
-          testMode: 'true',
           fetcher: fns.fetcher,
-          isLoading: false,
+          loading: false,
           initialFetcherParams: { offset: 'abc' },
           headers: options.headers,
           paginationPageSizes: [10, 15, 20],
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 026fdd1ddf..04ebe9680e 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -19,13 +19,13 @@
     </div>
 
     <KSkeleton
-      v-if="(!testMode || testMode === 'loading') && (isTableLoading || isLoading || isRevalidating) && !hasError"
+      v-if="(isTableLoading || loading || isRevalidating) && !error"
       data-testid="k-table-skeleton"
       type="table"
     />
 
     <div
-      v-else-if="hasError"
+      v-else-if="error"
       class="k-table-error-state"
       data-testid="k-table-error-state"
     >
@@ -52,7 +52,7 @@
     </div>
 
     <div
-      v-else-if="!hasError && (!isTableLoading && !isLoading && !isRevalidating) && (data && !data.length)"
+      v-else-if="!error && (!isTableLoading && !loading && !isRevalidating) && (data && !data.length)"
       class="k-table-empty-state"
       data-testid="k-table-empty-state"
     >
@@ -89,8 +89,7 @@
           class="k-table"
           :class="{
             'has-hover': hasHover,
-            'is-clickable': isClickable,
-            'side-border': hasSideBorder
+            'is-clickable': isClickable
           }"
           :data-tableid="tableId"
         >
@@ -102,13 +101,13 @@
               <th
                 v-for="(column, index) in visibleHeaders"
                 :key="`k-table-${tableId}-headers-${index}`"
-                :aria-sort="!disableSorting && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
+                :aria-sort="!sortable && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
                 class="k-table-headers"
                 :class="getHeaderClasses(column, index)"
                 :data-testid="`k-table-header-${column.key}`"
                 :style="columnStyles[column.key]"
                 @click="() => {
-                  if (!disableSorting && column.sortable) {
+                  if (!sortable && column.sortable) {
                     $emit('sort', {
                       prevKey: sortColumnKey,
                       sortColumnKey: column.key,
@@ -148,7 +147,7 @@
                   </slot>
 
                   <KIcon
-                    v-if="!disableSorting && !column.hideLabel && column.sortable"
+                    v-if="!sortable && !column.hideLabel && column.sortable"
                     aria-hidden="true"
                     class="caret"
                     :color="`var(--kui-color-text, ${KUI_COLOR_TEXT})`"
@@ -176,7 +175,6 @@
               :key="`k-table-${tableId}-row-${rowIndex}`"
               :role="isClickable ? 'link' : null"
               :tabindex="isClickable ? 0 : null"
-              v-on="hasSideBorder ? tdlisteners(row, row) : {}"
             >
               <td
                 v-for="(value, index) in visibleHeaders"
@@ -215,7 +213,6 @@
         :offset-next-button-disabled="!offset || !hasNextPage"
         :offset-previous-button-disabled="!previousOffset"
         :page-sizes="paginationPageSizes"
-        :test-mode="!!testMode || undefined"
         :total-count="total"
         @get-next-offset="getNextOffsetHandler"
         @get-previous-offset="getPrevOffsetHandler"
@@ -247,16 +244,12 @@ import type {
   PageChangeData,
   PageSizeChangeData,
   SortColumnOrder,
-  TableSortOrder,
   TableSortPayload,
   TableStatePayload,
-  TableTestMode,
   EmptyStateIconVariant,
 } from '@/types'
 import {
   TablePaginationTypeArray,
-  TableSortOrderArray,
-  TableTestModeArray,
   EmptyStateIconVariants,
 } from '@/types'
 import { KUI_COLOR_TEXT, KUI_ICON_SIZE_20 } from '@kong/design-tokens'
@@ -265,18 +258,6 @@ import ColumnVisibilityMenu from './ColumnVisibilityMenu.vue'
 const { useDebounce, useRequest, useSwrvState } = useUtilities()
 
 const props = defineProps({
-  /**
-   * @deprecated in favor of the "fetcher" prop
-   * Object containing data which creates rows and columns.
-   * @param {Object} options - Options to initialize the component with
-   * @param {Array} options.headers - Array of Objects defining Table Headers
-   * @param {Array} options.data - Array of Objects defining column data
-   */
-  options: {
-    type: Object,
-    default: () => null,
-    required: false,
-  },
   /**
    * Allow columns to be resized
    */
@@ -296,7 +277,7 @@ const props = defineProps({
    * Enable client side sort - only do this if using a fetcher
    * that returns static data
    */
-  enableClientSort: {
+  clientSort: {
     type: Boolean,
     default: false,
   },
@@ -307,24 +288,7 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  /**
-   * @deprecated
-   * the sort order for the table.
-   */
-  sortOrder: {
-    type: String as PropType<TableSortOrder>,
-    default: '',
-    validator: (value: TableSortOrder): boolean => TableSortOrderArray.includes(value),
-  },
-  /**
-   * @deprecated
-   * the key of the column that's currently being sorted
-   */
-  sortKey: {
-    type: String,
-    default: '',
-  },
-  sortHandlerFn: {
+  sortHandlerFunction: {
     type: Function,
     default: () => ({}),
   },
@@ -335,13 +299,6 @@ const props = defineProps({
     type: Function,
     default: () => ({}),
   },
-  /**
-   * A prop that enables a side border with a themable color to it.
-   */
-  hasSideBorder: {
-    type: Boolean,
-    default: false,
-  },
   /**
    * A function that conditionally specifies cell attributes
    */
@@ -352,7 +309,7 @@ const props = defineProps({
   /**
    * A prop that enables a loading skeleton
    */
-  isLoading: {
+  loading: {
     type: Boolean,
     default: false,
   },
@@ -391,7 +348,7 @@ const props = defineProps({
   /**
    * A prop that enables the error state
    */
-  hasError: {
+  error: {
     type: Boolean,
     default: false,
   },
@@ -423,27 +380,6 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  /**
-   * A prop to pass in a custom error state icon
-   */
-  errorStateIcon: {
-    type: String,
-    default: '',
-  },
-  /**
-   * A prop to pass in a color for the error state icon
-   */
-  errorStateIconColor: {
-    type: String,
-    default: '',
-  },
-  /**
-   * A prop to pass in a size for the error state icon
-   */
-  errorStateIconSize: {
-    type: String,
-    default: '50',
-  },
   /**
    * A prop to pass in a fetcher function to enable server-side search, sort
    * and pagination
@@ -515,9 +451,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  disableSorting: {
+  sortable: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   disablePagination: {
     type: Boolean,
@@ -535,16 +471,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  /**
-   * for testing only, strips out generated ids and avoid loading state in tests.
-   * 'true' - no id's no loading
-   * 'loading' - no id's but allow loading
-   */
-  testMode: {
-    type: String as PropType<TableTestMode>,
-    default: undefined,
-    validator: (val: TableTestMode): boolean => TableTestModeArray.includes(val),
-  },
 })
 
 const emit = defineEmits<{
@@ -560,7 +486,7 @@ const emit = defineEmits<{
 const attrs = useAttrs()
 const slots = useSlots()
 
-const tableId = computed((): string => props.testMode ? 'test-table-id-1234' : uuidv4())
+const tableId = uuidv4()
 const defaultFetcherProps = {
   pageSize: 15,
   page: 1,
@@ -584,7 +510,7 @@ const currentHoveredColumn = ref('')
 const hasColumnVisibilityMenu = computed((): boolean => {
   // has hidable columns, no error/loading/empty state
   return !!(tableHeaders.value.filter((header: TableHeader) => header.hidable).length > 0 &&
-    !props.hasError && !isTableLoading.value && !props.isLoading && (data.value && data.value.length))
+    !props.error && !isTableLoading.value && !props.loading && (data.value && data.value.length))
 })
 // columns whose visibility can be toggled
 const visibilityColumns = computed((): TableHeader[] => tableHeaders.value.filter((header: TableHeader) => header.hidable))
@@ -738,10 +664,10 @@ const getHeaderClasses = (column: TableHeader, index: number): Record<string, bo
     'resize-hover': resizeHoverColumn.value === column.key && props.resizeColumns && index !== visibleHeaders.value.length - 1,
     'truncated-column resizable': props.resizeColumns,
     // display sort control if column is sortable, label is visible, and sorting is not disabled
-    sortable: !props.disableSorting && !column.hideLabel && !!column.sortable,
+    sortable: !props.sortable && !column.hideLabel && !!column.sortable,
     // display active sorting styles if column is currently sorted
-    'active-sort': !props.disableSorting && !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
-    [sortColumnOrder.value]: !props.disableSorting && column.key === sortColumnKey.value && !column.hideLabel,
+    'active-sort': !props.sortable && !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
+    [sortColumnOrder.value]: !props.sortable && column.key === sortColumnKey.value && !column.hideLabel,
     'is-scrolled': isScrolled.value,
   }
 }
@@ -803,7 +729,7 @@ const startResize = (evt: MouseEvent, colKey: string) => {
   let col: HTMLElement | null = null
   headerElems.value?.forEach((elem) => {
     if (elem.getAttribute('data-testid') === `k-table-header-${colKey}`) {
-      col = document.querySelector(`[data-tableid="${tableId.value}"] [data-testid="k-table-header-${colKey}"]`)
+      col = document.querySelector(`[data-tableid="${tableId}"] [data-testid="k-table-header-${colKey}"]`)
     }
   })
 
@@ -858,16 +784,6 @@ const fetchData = async () => {
   data.value = res.data as Record<string, any>[]
   total.value = props.paginationTotalItems || res.total || res.data?.length
 
-  // get data
-  if (props.fetcher) {
-    if (props.enableClientSort && sortColumnKey.value && sortColumnOrder.value) {
-      defaultSorter(sortColumnKey.value, '', sortColumnOrder.value, data.value)
-    }
-  } else if (props.options && props.options.data && props.options.data.length) { // support legacy props
-    data.value = props.options.data
-    total.value = props.options.data.length
-  }
-
   if (props.paginationType === 'offset') {
     if (!res.pagination?.offset) {
       offset.value = null
@@ -914,8 +830,6 @@ const initData = () => {
   // get table headers
   if (props.headers && props.headers.length) {
     tableHeaders.value = props.headers as TableHeader[]
-  } else if (props.options && props.options.headers && props.options.headers.length) {
-    tableHeaders.value = props.options.headers
   }
 
   // trigger setting of tableFetcherCacheKey
@@ -931,7 +845,7 @@ const tableFetcherCacheKey = computed((): string => {
   }
 
   // Set the default identifier to a random string
-  let identifierKey: string = tableId.value
+  let identifierKey: string = tableId
   if (props.cacheIdentifier) {
     identifierKey = props.cacheIdentifier
   }
@@ -966,7 +880,7 @@ const { debouncedFn: debouncedRevalidate, generateDebouncedFn: generateDebounced
 const revalidate = generateDebouncedRevalidate(0) // generate a debounced function with zero delay (immediate)
 
 const sortClickHandler = (header: TableHeader): void => {
-  const { key, useSortHandlerFn } = header
+  const { key, useSortHandlerFunction } = header
   const prevKey = sortColumnKey.value + '' // avoid pass by ref
 
   page.value = 1
@@ -989,18 +903,14 @@ const sortClickHandler = (header: TableHeader): void => {
     offsets.value = [null]
   }
 
-  // Use deprecated sort function to sort data passed in via
-  // the deprecated options.data prop
-  if ((props.options && props.options.data) || props.enableClientSort) {
-    if (useSortHandlerFn && props.sortHandlerFn) {
-      props.sortHandlerFn({
+  if (props.clientSort) {
+    if (useSortHandlerFunction && props.sortHandlerFunction) {
+      props.sortHandlerFunction({
         key,
         prevKey,
         sortColumnOrder: sortColumnOrder.value,
         data: data.value,
       })
-    } else {
-      defaultSorter(key, prevKey, sortColumnOrder.value, data.value)
     }
   } else if (props.paginationType !== 'offset') {
     debouncedRevalidate()
@@ -1109,7 +1019,7 @@ watch(state, () => {
 
 watch([stateData, tableState], (newData) => {
   emit('state', {
-    state: newData?.[1],            // newData[tableState]
+    state: newData?.[1], // newData[tableState]
     hasData: newData?.[0]?.hasData, // newData[stateData].hasData
   })
 })
@@ -1159,22 +1069,6 @@ onMounted(() => {
 })
 </script>
 
-<script lang="ts">
-const { clientSideSorter } = useUtilities()
-
-/**
- * @deprecated defaultSorter
- * @param {String} key - the current key to sort by
- * @param {String} previousKey - the previous key used to sort by
- * @param {String} sortOrder - either ascending or descending
- * @param {Array} items - the list of items to sort
- * @return {Object} an object containing the previousKey and sortOrder
- */
-export const defaultSorter = (key: string, previousKey: string, sortOrder: string, items: Record<string, any>[]): Record<string, any> => {
-  return clientSideSorter(key, previousKey, sortOrder, items)
-}
-</script>
-
 <style lang="scss" scoped>
 /* Component variables */
 
diff --git a/src/types/table.ts b/src/types/table.ts
index fb5c0fa63e..c2413ee502 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -25,7 +25,7 @@ export interface TableHeader {
   sortable?: boolean
   hidable?: boolean
   hideLabel?: boolean
-  useSortHandlerFn?: boolean
+  useSortHandlerFunction?: boolean
 }
 
 /**
@@ -36,14 +36,7 @@ export interface TableHeader {
  */
 export type TableColumnSlotName = `column-${string}`
 
-export type TableState = 'loading' | 'error' | 'success'
-
-export const TableSortOrderArray = ['ascending', 'descending', ''] as const
-
-export type TableSortOrder = AnyElementOf<typeof TableSortOrderArray>
-
-export const TableTestModeArray = ['true', 'loading'] as const
-export type TableTestMode = AnyElementOf<typeof TableTestModeArray>
+export type TableState = 'loading' | 'error' | 'success' | 'empty'
 
 export interface TableSortPayload {
   prevKey: string

From b3866bbb3fb94420a69158fdfea6a14067772c5c Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 22 Apr 2024 12:47:24 -0400
Subject: [PATCH 08/33] fix(ktable): rename events [KHCP-9002]

---
 docs/guide/migrating-to-version-9.md | 5 +++++
 src/components/KTable/KTable.vue     | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 6a96fbf9a3..58d153dbd9 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -798,6 +798,11 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `sortOrder` prop (deprecated) has been removed
 * `testMode` prop has been removed
 
+#### Events
+
+* `ktable-error-cta-clicked` event has been renamed to `error-action-click`
+* `ktable-empty-state-cta-clicked` event has been renamed to `empty-state-action-click`
+
 #### Constants, Types & Interfaces
 
 * `useSortHandlerFn` parameter in `TableHeader` interface has been renamed to `useSortHandlerFunction`
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 04ebe9680e..469b0b3373 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -42,7 +42,7 @@
             <KButton
               :data-testid="getTestIdString(errorStateActionMessage)"
               :to="errorStateActionRoute ? errorStateActionRoute : undefined"
-              @click="$emit('ktable-error-cta-clicked')"
+              @click="$emit('error-action-click')"
             >
               {{ errorStateActionMessage }}
             </KButton>
@@ -70,7 +70,7 @@
               :appearance="searchInput ? 'tertiary' : 'primary'"
               :data-testid="getTestIdString(emptyStateActionMessage)"
               :to="emptyStateActionRoute ? emptyStateActionRoute : undefined"
-              @click="$emit('ktable-empty-state-cta-clicked')"
+              @click="$emit('empty-state-action-click')"
             >
               <slot name="empty-state-action-icon" />
               {{ emptyStateActionMessage }}
@@ -476,8 +476,8 @@ const props = defineProps({
 const emit = defineEmits<{
   (e: 'cell-click', value: { data: any }): void
   (e: 'row-click', value: { data: any }): void
-  (e: 'ktable-error-cta-clicked'): void
-  (e: 'ktable-empty-state-cta-clicked'): void
+  (e: 'error-action-click'): void
+  (e: 'empty-state-action-click'): void
   (e: 'update:table-preferences', preferences: TablePreferences): void
   (e: 'sort', value: TableSortPayload): void
   (e: 'state', value: TableStatePayload): void

From f63454a858ab26739f9023b20583b16ff1ce242e Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 22 Apr 2024 12:59:18 -0400
Subject: [PATCH 09/33] fix(ktable): fix sortable prop conditions [KHCP-9002]

---
 src/components/KTable/KTable.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 469b0b3373..30be78524e 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -101,13 +101,13 @@
               <th
                 v-for="(column, index) in visibleHeaders"
                 :key="`k-table-${tableId}-headers-${index}`"
-                :aria-sort="!sortable && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
+                :aria-sort="sortable && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
                 class="k-table-headers"
                 :class="getHeaderClasses(column, index)"
                 :data-testid="`k-table-header-${column.key}`"
                 :style="columnStyles[column.key]"
                 @click="() => {
-                  if (!sortable && column.sortable) {
+                  if (sortable && column.sortable) {
                     $emit('sort', {
                       prevKey: sortColumnKey,
                       sortColumnKey: column.key,
@@ -147,7 +147,7 @@
                   </slot>
 
                   <KIcon
-                    v-if="!sortable && !column.hideLabel && column.sortable"
+                    v-if="sortable && !column.hideLabel && column.sortable"
                     aria-hidden="true"
                     class="caret"
                     :color="`var(--kui-color-text, ${KUI_COLOR_TEXT})`"
@@ -664,10 +664,10 @@ const getHeaderClasses = (column: TableHeader, index: number): Record<string, bo
     'resize-hover': resizeHoverColumn.value === column.key && props.resizeColumns && index !== visibleHeaders.value.length - 1,
     'truncated-column resizable': props.resizeColumns,
     // display sort control if column is sortable, label is visible, and sorting is not disabled
-    sortable: !props.sortable && !column.hideLabel && !!column.sortable,
+    sortable: props.sortable && !column.hideLabel && !!column.sortable,
     // display active sorting styles if column is currently sorted
-    'active-sort': !props.sortable && !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
-    [sortColumnOrder.value]: !props.sortable && column.key === sortColumnKey.value && !column.hideLabel,
+    'active-sort': props.sortable && !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
+    [sortColumnOrder.value]: props.sortable && column.key === sortColumnKey.value && !column.hideLabel,
     'is-scrolled': isScrolled.value,
   }
 }

From 2807d123c771325b26e83e1a0e414a7da815ec7b Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 22 Apr 2024 13:31:12 -0400
Subject: [PATCH 10/33] test(ktable): fix component tests [KHCP-9002]

---
 src/components/KTable/KTable.cy.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 510e10cb28..7efef72319 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -486,7 +486,7 @@ describe('KTable', () => {
       mount(KTable, {
         props: {
           fetcher: () => {
-            return largeDataSet
+            return { data: largeDataSet, total: largeDataSet.length }
           },
           loading: false,
           headers: options.headers,
@@ -501,7 +501,7 @@ describe('KTable', () => {
       mount(KTable, {
         props: {
           fetcher: () => {
-            return largeDataSet
+            return { data: largeDataSet, total: largeDataSet.length }
           },
           loading: false,
           headers: options.headers,
@@ -542,7 +542,7 @@ describe('KTable', () => {
       mount(KTable, {
         propsData: {
           fetcher: () => {
-            return { data: largeDataSet, total: 12 }
+            return { data: largeDataSet, total: largeDataSet.length }
           },
           loading: false,
           headers: options.headers,
@@ -558,7 +558,7 @@ describe('KTable', () => {
       mount(KTable, {
         propsData: {
           fetcher: () => {
-            return { data: largeDataSet, total: 12 }
+            return { data: largeDataSet, total: largeDataSet.length }
           },
           loading: false,
           headers: options.headers,

From a15bc80f2e15bd03fa70a3b3897f513bb245f0c2 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 22 Apr 2024 14:41:00 -0400
Subject: [PATCH 11/33] feat(ktable): reskin selectors [KHCP-9002]

---
 docs/guide/migrating-to-version-9.md        | 15 +++-
 sandbox/pages/SandboxTable/SandboxTable.vue | 96 ++++++++++++++++++++-
 src/components/KTable/KTable.cy.ts          | 58 ++++++-------
 src/components/KTable/KTable.vue            | 52 +++++------
 4 files changed, 161 insertions(+), 60 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 58d153dbd9..a93faee593 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -803,6 +803,19 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `ktable-error-cta-clicked` event has been renamed to `error-action-click`
 * `ktable-empty-state-cta-clicked` event has been renamed to `empty-state-action-click`
 
+#### Structure
+
+* `k-table-container` class has been changed to `k-table`
+* `k-table-toolbar` class and +++ has been changed to `table-toolbar`
+* `k-table-skeleton` +++ has been changed to `table-skeleton`
+* `k-table-error-state` class and +++ has been changed to `table-error-state`
+* `k-table-empty-state` class and +++ has been changed to `table-empty-state`
+* `k-table-wrapper` class has been changed to `table-wrapper`
+* `table.k-table` class has been changed to `table`
+* `k-table-headers` class has been changed to `table-headers`
+* `k-table-header-*` +++ has been changed to `table-header-*`
+* `k-table-pagination` class and +++ has been changed to `table-pagination`
+
 #### Constants, Types & Interfaces
 
 * `useSortHandlerFn` parameter in `TableHeader` interface has been renamed to `useSortHandlerFunction`
@@ -841,8 +854,6 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 ### KToaster
 
-#### Attributes
-
 #### Structure
 
 * `toaster-container-outer` class has been replaced with `k-toaster`
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index 09da9a5ac9..30d40288d4 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -38,7 +38,7 @@
 
           <KTable
             :key="data.tableKey"
-            empty-state-action-message="Emty state message"
+            empty-state-action-message="Empty state action"
             empty-state-action-route="/"
             empty-state-icon-variant="kong"
             empty-state-message="Empty state message"
@@ -71,14 +71,14 @@
 
           <KTable
             empty-state-action-message="Add new item"
+            :error="data.tableErrorState"
             error-state-action-message="Error state action"
             error-state-action-route="/"
             error-state-message="Error state message"
             error-state-title="Error state title"
             :fetcher="fetcher"
-            :has-error="data.tableErrorState"
             :headers="headers(true)"
-            :is-loading="data.tableLoadingState"
+            :loading="data.tableLoadingState"
             resize-columns
           >
             <template #actions>
@@ -87,6 +87,94 @@
           </KTable>
         </KComponent>
       </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="column header & cell">
+        <KTable
+          :fetcher="fetcher"
+          :headers="headers()"
+        >
+          <template #column-username>
+            <div class="horizontal-container">
+              Username
+
+              <KTooltip text="Unique for each user.">
+                <InfoIcon
+                  :color="KUI_COLOR_TEXT_NEUTRAL"
+                  :size="KUI_ICON_SIZE_30"
+                />
+              </KTooltip>
+            </div>
+          </template>
+          <template #email="{ rowValue }">
+            <KCopy :text="rowValue" />
+          </template>
+          <template #actions>
+            <SandboxTableActions />
+          </template>
+        </KTable>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="toolbar">
+        <KTable
+          :fetcher="fetcher"
+          :headers="headers()"
+        >
+          <template #toolbar>
+            <KInput />
+            <KButton size="large">
+              <AddIcon /> Add user
+            </KButton>
+          </template>
+          <template #actions>
+            <SandboxTableActions />
+          </template>
+        </KTable>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="error-state">
+        <KTable
+          error
+          :fetcher="fetcher"
+          :headers="headers()"
+        >
+          <template #error-state>
+            <KEmptyState
+              action-button-text="Slotted error state action"
+              icon-variant="error"
+              message="Slotted error state message"
+              title="Slotted error state title"
+            />
+          </template>
+        </KTable>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="empty-state">
+        <KTable
+          :fetcher="emptyFetcher"
+          :headers="headers()"
+        >
+          <template #empty-state>
+            <KEmptyState
+              action-button-text="Slotted empty state action"
+              message="Slotted empty state message"
+              title="Slotted empty state title"
+            />
+          </template>
+        </KTable>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="empty-state-action-icon">
+        <KTable
+          empty-state-action-message="Empty state action"
+          :fetcher="emptyFetcher"
+          :headers="headers()"
+        >
+          <template #empty-state-action-icon>
+            <AddIcon />
+          </template>
+        </KTable>
+      </SandboxSectionComponent>
     </div>
   </SandboxLayout>
 </template>
@@ -96,6 +184,8 @@ import { inject } from 'vue'
 import SandboxTitleComponent from '../../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../../components/SandboxSectionComponent.vue'
 import SandboxTableActions from './SandboxTableActions.vue'
+import { AddIcon, InfoIcon } from '@kong/icons'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 
 const headers = (hidable: boolean = false) => {
   return [
diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 7efef72319..2f994517df 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -120,7 +120,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-empty-state').should('contain.text', emptySlotContent)
+      cy.getTestId('table-empty-state').should('contain.text', emptySlotContent)
     })
 
     it('displays a loading skeletion when the "loading" prop is set to true"', () => {
@@ -154,7 +154,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-error-state').should('contain.text', errorSlotContent)
+      cy.getTestId('table-error-state').should('contain.text', errorSlotContent)
     })
 
     it('displays a loading state and not an empty state when pending response', () => {
@@ -189,7 +189,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.get('.k-table td:last-of-type > *').contains('a', 'Link')
+      cy.get('.table td:last-of-type > *').contains('a', 'Link')
     })
 
     it('renders content in the toolbar slot', () => {
@@ -204,8 +204,8 @@ describe('KTable', () => {
         },
       })
 
-      cy.get('.k-table-container .k-table-toolbar').find('button').should('be.visible')
-      cy.get('.k-table-container .k-table-toolbar button').should('contain.text', 'Toolbar button')
+      cy.get('.k-table .table-toolbar').find('button').should('be.visible')
+      cy.get('.k-table .table-toolbar button').should('contain.text', 'Toolbar button')
     })
 
     it('has hover class when passed', () => {
@@ -217,7 +217,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.get('.k-table').should('have.class', 'has-hover')
+      cy.get('.table').should('have.class', 'has-hover')
     })
 
     it('renders column resize toggles when resizeColumns is set', () => {
@@ -229,7 +229,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.get('.k-table').find('th.resizable').should('be.visible')
+      cy.get('.table').find('th.resizable').should('be.visible')
       cy.get('.resize-handle').should('exist')
     })
 
@@ -245,7 +245,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.get('.k-table').should('be.visible')
+      cy.get('.table').should('be.visible')
       // menu button is visible
       cy.getTestId('column-visibility-menu-button').should('be.visible')
       cy.getTestId('column-visibility-menu-button').click()
@@ -258,9 +258,9 @@ describe('KTable', () => {
 
       // changes are applied only when Apply button is clicked
       cy.getTestId(`column-visibility-checkbox-${modifiedHeaderKey}`).click()
-      cy.getTestId(`k-table-header-${modifiedHeaderKey}`).should('be.visible')
+      cy.getTestId(`table-header-${modifiedHeaderKey}`).should('be.visible')
       cy.getTestId('apply-button').click()
-      cy.getTestId(`k-table-header-${modifiedHeaderKey}`).should('not.exist')
+      cy.getTestId(`table-header-${modifiedHeaderKey}`).should('not.exist')
     })
   })
 
@@ -285,12 +285,12 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').should('be.visible')
       cy.getTestId('page-size-dropdown-trigger').click()
       cy.get('[data-testid="dropdown-item-trigger"][value="1"]').click()
       cy.getTestId('next-button').click()
       cy.get('.pagination-button').should('contain.text', 2 + '')
-      cy.get('.k-table').find('tr').should('have.length', 4)
+      cy.get('.table').find('tr').should('have.length', 4)
     })
 
     it('when clicking arrows for offset based pagination', () => {
@@ -302,11 +302,11 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').should('be.visible')
       cy.getTestId('page-size-dropdown-trigger').click()
       cy.get('[data-testid="dropdown-item-trigger"][value="15"]').click({ multiple: true, force: true })
       cy.getTestId('next-button').should('exist')
-      cy.get('.k-table').find('tr').should('have.length', 16)
+      cy.get('.table').find('tr').should('have.length', 16)
     })
 
     it('when page size is changed', () => {
@@ -324,12 +324,12 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').should('be.visible')
       cy.getTestId('page-size-dropdown-trigger').click()
       cy.get('[data-testid="dropdown-item-trigger"][value="3"]').click({ multiple: true, force: true })
       cy.getTestId('next-button').click()
       cy.get('.pagination-button.active').should('contain.text', 2 + '')
-      cy.get('.k-table').find('tr').should('have.length', 13)
+      cy.get('.table').find('tr').should('have.length', 13)
     })
 
     it('when sort key or sort direction is changed and NOT using clientSideSort', () => {
@@ -393,11 +393,11 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
-      cy.getTestId('k-table-pagination').find('.kui-icon.chevron-down-icon').click()
-      cy.get('.k-table').find('tr').should('have.length', 6)
-      cy.get('.k-table').find('.kong-icon-chevronDown').last().click()
-      cy.get('.k-table').find('td:nth-child(4)').first().should('has.text', 'Just now')
+      cy.getTestId('table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').find('.kui-icon.chevron-down-icon').click()
+      cy.get('.table').find('tr').should('have.length', 6)
+      cy.get('.table').find('.kong-icon-chevronDown').last().click()
+      cy.get('.table').find('td:nth-child(4)').first().should('has.text', 'Just now')
     })
   })
 
@@ -494,7 +494,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').should('be.visible')
     })
 
     it('does not display pagination when pagination disabled', () => {
@@ -510,7 +510,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('not.exist')
+      cy.getTestId('table-pagination').should('not.exist')
     })
 
     it('does not display pagination when no fetcher', () => {
@@ -521,7 +521,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('not.exist')
+      cy.getTestId('table-pagination').should('not.exist')
     })
 
     it('does not display pagination when hidePaginationWhenOptional is true and total is less than min pageSize', () => {
@@ -535,7 +535,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('not.exist')
+      cy.getTestId('table-pagination').should('not.exist')
     })
 
     it('does not display pagination when hidePaginationWhenOptional is true and total is equal to min pageSize', () => {
@@ -551,7 +551,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('not.exist')
+      cy.getTestId('table-pagination').should('not.exist')
     })
 
     it('does display pagination when total is greater than min pageSize', () => {
@@ -567,7 +567,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').should('be.visible')
     })
 
     it('does not display offset-based pagination when hidePaginationWhenOptional is true and total is less than min pageSize', () => {
@@ -583,7 +583,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('not.exist')
+      cy.getTestId('table-pagination').should('not.exist')
     })
 
     it('does display offset-based pagination when total is greater than min pageSize', () => {
@@ -600,7 +600,7 @@ describe('KTable', () => {
         },
       })
 
-      cy.getTestId('k-table-pagination').should('be.visible')
+      cy.getTestId('table-pagination').should('be.visible')
     })
   })
 
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 30be78524e..995ba37c46 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="k-table-container">
+  <div class="k-table">
     <div
       v-if="hasToolbarSlot"
-      class="k-table-toolbar"
-      data-testid="k-table-toolbar"
+      class="table-toolbar"
+      data-testid="table-toolbar"
     >
       <slot
         name="toolbar"
@@ -20,14 +20,14 @@
 
     <KSkeleton
       v-if="(isTableLoading || loading || isRevalidating) && !error"
-      data-testid="k-table-skeleton"
+      data-testid="table-skeleton"
       type="table"
     />
 
     <div
       v-else-if="error"
-      class="k-table-error-state"
-      data-testid="k-table-error-state"
+      class="table-error-state"
+      data-testid="table-error-state"
     >
       <slot name="error-state">
         <KEmptyState
@@ -53,8 +53,8 @@
 
     <div
       v-else-if="!error && (!isTableLoading && !loading && !isRevalidating) && (data && !data.length)"
-      class="k-table-empty-state"
-      data-testid="k-table-empty-state"
+      class="table-empty-state"
+      data-testid="table-empty-state"
     >
       <slot name="empty-state">
         <KEmptyState
@@ -82,11 +82,11 @@
 
     <div v-else>
       <div
-        class="k-table-wrapper"
+        class="table-wrapper"
         @scroll.passive="scrollHandler"
       >
         <table
-          class="k-table"
+          class="table"
           :class="{
             'has-hover': hasHover,
             'is-clickable': isClickable
@@ -100,11 +100,11 @@
             >
               <th
                 v-for="(column, index) in visibleHeaders"
-                :key="`k-table-${tableId}-headers-${index}`"
+                :key="`table-${tableId}-headers-${index}`"
                 :aria-sort="sortable && column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
-                class="k-table-headers"
+                class="table-headers"
                 :class="getHeaderClasses(column, index)"
-                :data-testid="`k-table-header-${column.key}`"
+                :data-testid="`table-header-${column.key}`"
                 :style="columnStyles[column.key]"
                 @click="() => {
                   if (sortable && column.sortable) {
@@ -129,7 +129,7 @@
                 />
 
                 <div
-                  class="k-table-headers-container"
+                  class="table-headers-container"
                   :class="{ 'resized': resizingColumn === column.key }"
                 >
                   <slot
@@ -172,14 +172,14 @@
             <tr
               v-for="(row, rowIndex) in data"
               v-bind="rowAttrs(row)"
-              :key="`k-table-${tableId}-row-${rowIndex}`"
+              :key="`table-${tableId}-row-${rowIndex}`"
               :role="isClickable ? 'link' : null"
               :tabindex="isClickable ? 0 : null"
             >
               <td
                 v-for="(value, index) in visibleHeaders"
                 v-bind="cellAttrs({ headerKey: value.key, row, rowIndex, colIndex: index })"
-                :key="`k-table-${tableId}-cell-${index}`"
+                :key="`table-${tableId}-cell-${index}`"
                 :class="{
                   'resize-hover': resizeColumns && resizeHoverColumn === value.key && index !== visibleHeaders.length - 1,
                   'truncated-column': resizeColumns
@@ -203,9 +203,9 @@
 
       <KPagination
         v-if="shouldShowPagination"
-        class="k-table-pagination"
+        class="table-pagination"
         :current-page="page"
-        data-testid="k-table-pagination"
+        data-testid="table-pagination"
         :disable-page-jump="disablePaginationPageJump"
         :initial-page-size="pageSize"
         :neighbors="paginationNeighbors"
@@ -728,8 +728,8 @@ const startResize = (evt: MouseEvent, colKey: string) => {
   // get the current column's element
   let col: HTMLElement | null = null
   headerElems.value?.forEach((elem) => {
-    if (elem.getAttribute('data-testid') === `k-table-header-${colKey}`) {
-      col = document.querySelector(`[data-tableid="${tableId}"] [data-testid="k-table-header-${colKey}"]`)
+    if (elem.getAttribute('data-testid') === `table-header-${colKey}`) {
+      col = document.querySelector(`[data-tableid="${tableId}"] [data-testid="table-header-${colKey}"]`)
     }
   })
 
@@ -1076,12 +1076,12 @@ $kTableThPaddingBottom: var(--kui-space-60, $kui-space-60);
 
 /* Component styles */
 
-.k-table-wrapper {
+.table-wrapper {
   overflow: auto;
   width: 100%;
 }
 
-.k-table-toolbar {
+.table-toolbar {
   display: flex;
   gap: var(--kui-space-50, $kui-space-50);
   margin-bottom: var(--kui-space-80, $kui-space-80) !important;
@@ -1092,7 +1092,7 @@ $kTableThPaddingBottom: var(--kui-space-60, $kui-space-60);
   }
 }
 
-.k-table {
+.table {
   border-collapse: collapse;
   margin-top: var(--kui-space-0, $kui-space-0);
   max-width: 100%;
@@ -1206,7 +1206,7 @@ $kTableThPaddingBottom: var(--kui-space-60, $kui-space-60);
         cursor: pointer;
       }
 
-      .k-table-headers-container {
+      .table-headers-container {
         align-items: center !important;
         display: flex !important;
 
@@ -1281,14 +1281,14 @@ $kTableThPaddingBottom: var(--kui-space-60, $kui-space-60);
     }
   }
 
-  .k-table-pagination {
+  .table-pagination {
     padding: var(--kui-space-20, $kui-space-20) !important;
   }
 }
 </style>
 
 <style lang="scss">
-.k-table {
+.table {
   thead {
     th {
       .caret {

From 160189891eab59c417580ea57aca91754ba9f84f Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 22 Apr 2024 17:00:26 -0400
Subject: [PATCH 12/33] feat(ktable): reskin component [KHCP-9002]

---
 docs/guide/migrating-to-version-9.md        |  13 +-
 sandbox/pages/SandboxTable/SandboxTable.vue |  22 +-
 src/components/KTable/KTable.cy.ts          |   2 +-
 src/components/KTable/KTable.vue            | 375 +++++++++-----------
 4 files changed, 177 insertions(+), 235 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index a93faee593..330a37d8f9 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -806,15 +806,16 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 #### Structure
 
 * `k-table-container` class has been changed to `k-table`
-* `k-table-toolbar` class and +++ has been changed to `table-toolbar`
-* `k-table-skeleton` +++ has been changed to `table-skeleton`
-* `k-table-error-state` class and +++ has been changed to `table-error-state`
-* `k-table-empty-state` class and +++ has been changed to `table-empty-state`
+* `k-table-toolbar` class and `data-testid` attribute has been changed to `table-toolbar`
+* `k-table-skeleton` `data-testid` attribute has been changed to `table-skeleton`
+* `k-table-error-state` class and `data-testid` attribute has been changed to `table-error-state`
+* `k-table-empty-state` class and `data-testid` attribute has been changed to `table-empty-state`
 * `k-table-wrapper` class has been changed to `table-wrapper`
 * `table.k-table` class has been changed to `table`
 * `k-table-headers` class has been changed to `table-headers`
-* `k-table-header-*` +++ has been changed to `table-header-*`
-* `k-table-pagination` class and +++ has been changed to `table-pagination`
+* `k-table-header-*` `data-testid` attribute has been changed to `table-header-*`
+* `k-table-pagination` class and `data-testid` attribute has been changed to `table-pagination`
+* `caret` class has been changed to `sort-icon`
 
 #### Constants, Types & Interfaces
 
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index 30d40288d4..f2eaf7dcdc 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -45,7 +45,7 @@
             empty-state-title="Empty state title"
             :fetcher="data.tableEmptyState ? emptyFetcher : fetcher"
             :has-hover="data.tableHasHover"
-            :headers="headers()"
+            :headers="headers(false, true)"
           >
             <template #actions>
               <SandboxTableActions />
@@ -99,16 +99,14 @@
           :headers="headers()"
         >
           <template #column-username>
-            <div class="horizontal-container">
-              Username
+            Username
 
-              <KTooltip text="Unique for each user.">
-                <InfoIcon
-                  :color="KUI_COLOR_TEXT_NEUTRAL"
-                  :size="KUI_ICON_SIZE_30"
-                />
-              </KTooltip>
-            </div>
+            <KTooltip text="Unique for each user.">
+              <InfoIcon
+                :color="KUI_COLOR_TEXT_NEUTRAL"
+                :size="KUI_ICON_SIZE_30"
+              />
+            </KTooltip>
           </template>
           <template #email="{ rowValue }">
             <KCopy :text="rowValue" />
@@ -187,10 +185,10 @@ import SandboxTableActions from './SandboxTableActions.vue'
 import { AddIcon, InfoIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 
-const headers = (hidable: boolean = false) => {
+const headers = (hidable: boolean = false, sortable: boolean = false) => {
   return [
     { key: 'name', label: 'Full Name' },
-    { key: 'username', label: 'Username' },
+    { key: 'username', label: 'Username', sortable },
     { key: 'email', label: 'Email', hidable },
     { key: 'actions', hideLabel: true },
   ]
diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 2f994517df..027e08f59d 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -396,7 +396,7 @@ describe('KTable', () => {
       cy.getTestId('table-pagination').should('be.visible')
       cy.getTestId('table-pagination').find('.kui-icon.chevron-down-icon').click()
       cy.get('.table').find('tr').should('have.length', 6)
-      cy.get('.table').find('.kong-icon-chevronDown').last().click()
+      cy.get('.table').find('.sort-icon').last().click()
       cy.get('.table').find('td:nth-child(4)').first().should('has.text', 'Just now')
     })
   })
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 995ba37c46..469702ea73 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -146,13 +146,11 @@
                     </span>
                   </slot>
 
-                  <KIcon
+                  <ArrowDownIcon
                     v-if="sortable && !column.hideLabel && column.sortable"
-                    aria-hidden="true"
-                    class="caret"
-                    :color="`var(--kui-color-text, ${KUI_COLOR_TEXT})`"
-                    icon="chevronDown"
-                    :size="KUI_ICON_SIZE_20"
+                    class="sort-icon"
+                    :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
+                    :size="KUI_ICON_SIZE_30"
                   />
                 </div>
 
@@ -231,7 +229,7 @@ import KButton from '@/components/KButton/KButton.vue'
 import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
 import KPagination from '@/components/KPagination/KPagination.vue'
-import KIcon from '@/components/KIcon/KIcon.vue'
+import { ArrowDownIcon } from '@kong/icons'
 import useUtilities from '@/composables/useUtilities'
 import type {
   TablePreferences,
@@ -252,7 +250,7 @@ import {
   TablePaginationTypeArray,
   EmptyStateIconVariants,
 } from '@/types'
-import { KUI_COLOR_TEXT, KUI_ICON_SIZE_20 } from '@kong/design-tokens'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import ColumnVisibilityMenu from './ColumnVisibilityMenu.vue'
 
 const { useDebounce, useRequest, useSwrvState } = useUtilities()
@@ -1072,264 +1070,209 @@ onMounted(() => {
 <style lang="scss" scoped>
 /* Component variables */
 
-$kTableThPaddingBottom: var(--kui-space-60, $kui-space-60);
+$kTableThPaddingY: var(--kui-space-50, $kui-space-50);
 
 /* Component styles */
 
-.table-wrapper {
-  overflow: auto;
-  width: 100%;
-}
-
-.table-toolbar {
+.k-table {
   display: flex;
-  gap: var(--kui-space-50, $kui-space-50);
-  margin-bottom: var(--kui-space-80, $kui-space-80) !important;
-  width: 100%;
+  flex-direction: column;
+  gap: var(--kui-space-70, $kui-space-70);
 
-  & > :deep(*) {
+  .table-toolbar {
     display: flex;
-  }
-}
-
-.table {
-  border-collapse: collapse;
-  margin-top: var(--kui-space-0, $kui-space-0);
-  max-width: 100%;
-  width: 100%;
-
-  th,
-  td {
-    padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
-    vertical-align: middle;
-    white-space: nowrap;
+    gap: var(--kui-space-50, $kui-space-50);
+    width: 100%;
   }
 
-  th.resize-hover {
-    // creates a 2px "border" on the right - can't use the border because it will "jump"
-    box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple) inset;
-  }
+  .table-wrapper {
+    overflow: auto;
+    width: 100%;
 
-  td.resize-hover {
-    // creates a 2px "border" on the right - can't use the border because it will "jump"
-    box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border, $kui-color-border) inset;
-  }
+    .table {
+      border-collapse: collapse;
+      max-width: 100%;
+      width: 100%;
 
-  .truncated-column {
-    @include truncate;
-  }
+      th,
+      td {
+        padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
+        vertical-align: middle;
+        white-space: nowrap;
+      }
 
-  thead {
-    background-color: var(--kui-color-background, $kui-color-background);
-    border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
-    height: 60px;
-    position: sticky;
-    top: 0;
+      th.resize-hover {
+        // creates a 2px "border" on the right - can't use the border because it will "jump"
+        box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple) inset;
+      }
 
-    &.is-scrolled {
-      border-bottom: none;
-    }
+      td.resize-hover {
+        // creates a 2px "border" on the right - can't use the border because it will "jump"
+        box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border, $kui-color-border) inset;
+      }
 
-    tr {
-      position: relative;
-
-      &:after {
-        box-shadow: none;
-        content: '';
-        height: 100%;
-        left: 0;
-        opacity: 0;
-        // Super-important to allow clicking on table rows in Safari.
-        // This allows clicks to pass through the "invisible" :after layer
-        pointer-events: none;
-        position: absolute;
-        transition: opacity $tmp-animation-timing-2 ease-in-out;
-        width: 100%;
-        z-index: -1;
+      .truncated-column {
+        @include truncate;
       }
 
-      &.is-scrolled {
-        border-bottom: none;
+      thead {
+        background-color: var(--kui-color-background, $kui-color-background);
+        border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+        height: 44px;
+        position: sticky;
+        top: 0;
 
-        &:after {
-          box-shadow: $tmp-color-shadow;
-          opacity: 1;
-          transition: opacity $tmp-animation-timing-2 ease-in-out;
+        &.is-scrolled {
+          border-bottom: none;
         }
-      }
-    }
 
-    th {
-      font-size: var(--kui-font-size-30, $kui-font-size-30);
-      font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-      padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
-      padding-bottom: $kTableThPaddingBottom;
-      text-align: left;
-      vertical-align: bottom;
-
-      &.resizable {
-        min-width: 40px;
-        position: relative;
-
-        .resize-handle {
-          cursor: col-resize;
-          height: v-bind('headerHeight');
-          position: absolute;
-          right: 0;
-          top: 0;
-          width: 6px;
-
-          &.previous {
+        tr {
+          position: relative;
+
+          &:after {
+            box-shadow: none;
+            content: '';
+            height: 100%;
             left: 0;
-            right: unset;
+            opacity: 0;
+            // Super-important to allow clicking on table rows in Safari.
+            // This allows clicks to pass through the "invisible" :after layer
+            pointer-events: none;
+            position: absolute;
+            transition: opacity $kongponentsTransitionDurTimingFunc;
+            width: 100%;
+            z-index: -1;
+          }
+
+          &.is-scrolled {
+            border-bottom: none;
+
+            &:after {
+              box-shadow: var(--kui-shadow, $kui-shadow);
+              opacity: 1;
+              transition: opacity $kongponentsTransitionDurTimingFunc;
+            }
           }
         }
-      }
 
-      &.active-sort {
-        color: var(--kui-color-text-primary, $kui-color-text-primary);
-      }
+        th {
+          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+          font-size: var(--kui-font-size-30, $kui-font-size-30);
+          font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+          line-height: var(--kui-line-height-30, $kui-line-height-30);
+          padding: $kTableThPaddingY var(--kui-space-60, $kui-space-60);
+          text-align: left;
+          vertical-align: bottom;
+
+          &.resizable {
+            min-width: 40px;
+            position: relative;
+
+            .resize-handle {
+              cursor: col-resize;
+              height: v-bind('headerHeight');
+              position: absolute;
+              right: 0;
+              top: 0;
+              width: 6px;
+
+              &.previous {
+                left: 0;
+                right: unset;
+              }
+            }
+          }
 
-      .sr-only {
-        border-width: var(--kui-border-width-0, $kui-border-width-0);
-        clip: rect(0, 0, 0, 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: var(--kui-space-0, $kui-space-0);
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
-      }
+          &.active-sort {
+            color: var(--kui-color-text, $kui-color-text);
+          }
 
-      &.sortable {
-        cursor: pointer;
-      }
+          .sr-only {
+            border-width: var(--kui-border-width-0, $kui-border-width-0);
+            clip: rect(0, 0, 0, 0);
+            height: 1px;
+            margin: -1px;
+            overflow: hidden;
+            padding: var(--kui-space-0, $kui-space-0);
+            position: absolute;
+            white-space: nowrap;
+            width: 1px;
+          }
 
-      .table-headers-container {
-        align-items: center !important;
-        display: flex !important;
+          &.sortable {
+            cursor: pointer;
 
-        .caret {
-          margin-left: var(--kui-space-40, $kui-space-40) !important;
-        }
+            &.asc .sort-icon {
+              transform: rotate(-180deg);
+            }
+          }
+
+          .table-headers-container {
+            align-items: center;
+            display: flex;
+            gap: var(--kui-space-40, $kui-space-40);
 
-        &.resized {
-          bottom: $kTableThPaddingBottom;
-          position: absolute;
+            &.resized {
+              // when column is resized we need to set position: absolute; to avoid glitching resizing behavior
+              bottom: $kTableThPaddingY;
+              position: absolute;
+            }
+          }
         }
       }
-    }
-  }
-
-  tbody {
-    tr {
-      height: 44px;
 
-      &:not(:last-of-type) {
-        border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
-      }
-    }
+      tbody {
+        tr {
+          height: 48px;
 
-    td {
-      color: var(--kui-color-text, $kui-color-text);
-      white-space: nowrap;
+          &:not(:last-of-type) {
+            border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+          }
+        }
 
-      a {
-        color: var(--kui-color-text-primary, $kui-color-text-primary);
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
+        td {
+          color: var(--kui-color-text, $kui-color-text);
+          font-size: var(--kui-font-size-30, $kui-font-size-30);
+          font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+          line-height: var(--kui-line-height-30, $kui-line-height-30);
+          white-space: nowrap;
         }
       }
-    }
-  }
 
-  // Variants
-  &.has-hover {
-    tbody tr:hover {
-      background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
+      // Variants
+      &.has-hover {
+        tbody tr:hover {
+          background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
 
-      td {
-        border-color: var(--kui-color-border-primary-weakest, $kui-color-border-primary-weakest);
+          td {
+            border-color: var(--kui-color-border-primary-weakest, $kui-color-border-primary-weakest);
+          }
+        }
       }
-    }
-  }
-
-  &.is-clickable {
-    tbody tr {
-      cursor: pointer;
-    }
-  }
-
-  &.side-border {
-    border-collapse: separate;
-    border-spacing: $tmp-border-spacing-0 $tmp-border-spacing-2;
 
-    tbody tr {
-      border-bottom: none;
-    }
-
-    tbody tr td:first-child {
-      border-left: var(--kui-border-width-20, $kui-border-width-20) solid var(--kui-color-border, $kui-color-border);
-    }
-
-    &.has-hover {
-      tbody tr:hover td:first-child {
-        border-left: var(--kui-border-width-20, $kui-border-width-20) solid $tmp-color-steel-300;
+      &.is-clickable {
+        tbody tr {
+          cursor: pointer;
+        }
       }
     }
   }
 
   .table-pagination {
-    padding: var(--kui-space-20, $kui-space-20) !important;
+    margin-top: var(--kui-space-70, $kui-space-70);
   }
 }
 </style>
 
 <style lang="scss">
-.table {
-  thead {
-    th {
-      .caret {
-        position: relative;
-        top: 2px;
-        transform: rotate(0deg);
-      }
-
-      &.sortable {
-        &.asc .caret {
-          transform: rotate(-180deg);
+.k-table {
+  .table {
+    thead {
+      th {
+        &.truncate, .truncate {
+          @include truncate;
         }
       }
-
-      &.truncate, .truncate {
-        @include truncate;
-      }
-    }
-  }
-
-  tbody {
-    td {
-      button:not(.dropdown-item-trigger),
-      .k-button {
-        margin-bottom: calc(-1 * var(--kui-space-40, $kui-space-40));
-        margin-top: calc(-1 * var(--kui-space-40, $kui-space-40));
-      }
-      .k-table-cell-title {
-        color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
-        font-size: var(--kui-font-size-40, $kui-font-size-40);
-        font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-      }
-      .k-table-cell-description {
-        color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong);
-        font-size: var(--kui-font-size-40, $kui-font-size-40);
-        font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-      }
-
-      &.truncate, .truncate {
-        @include truncate;
-      }
     }
   }
 }

From 2cab21ad93d09ffd1e43ac69304023aaa2c4e043 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 23 Apr 2024 17:47:21 -0400
Subject: [PATCH 13/33] fix(ktable): misc fixes & updates [KHCP-9002]

---
 docs/components/catalog.md                    |   4 +-
 docs/guide/migrating-to-version-9.md          |   4 +
 sandbox/pages/SandboxTable/SandboxTable.vue   |  48 ++++-
 .../KTable/ColumnVisibilityMenu.vue           |   9 +-
 src/components/KTable/KTable.cy.ts            |   2 +-
 src/components/KTable/KTable.vue              | 200 +++++++++---------
 src/types/table.ts                            |   6 -
 7 files changed, 157 insertions(+), 116 deletions(-)

diff --git a/docs/components/catalog.md b/docs/components/catalog.md
index c92434b137..d2acd78fad 100644
--- a/docs/components/catalog.md
+++ b/docs/components/catalog.md
@@ -205,11 +205,11 @@ Set this to `true` to limit pagination navigation to `previous` / `next` page on
 
 ### disablePagination
 
-Set this to `true` to remove the pagination bar when using a fetcher.
+Set this to `true` to hide pagination when using a fetcher.
 
 ### hidePaginationWhenOptional
 
-Set this to `true` to hide the pagination UI when the table record count is less than or equal to the `pageSize`.
+Set this to `true` to hide pagination when the table record count is less than or equal to the `pageSize`.
 
 ## KCatalogItem
 
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 330a37d8f9..c7723dd9c0 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -781,6 +781,7 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 
 #### Props
 
+* `hasHover` prop has been removed and replaced with `rowHover` prop
 * `hasSideBorder` prop has been removed
 * `hasError` prop has been removed and replaced with `error` prop
 * `isLoading` prop has been removed and replaced with `loading` prop
@@ -797,6 +798,7 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `options` prop (deprecated) has been removed
 * `sortOrder` prop (deprecated) has been removed
 * `testMode` prop has been removed
+* `paginationType` prop has been removed. You can use new `paginationOffset` prop instead
 
 #### Events
 
@@ -824,6 +826,8 @@ Removed as of `v9`. Use `KBreadcumbs` instead.
 * `TableSortOrder` type has been removed
 * `TableTestModeArray` const has been removed
 * `TableTestMode` type has been removed
+* `TablePaginationTypeArray` const has been removed
+* `TablePaginationType` type has been removed 
 
 ### KTabs
 
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index f2eaf7dcdc..bcf548714a 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -19,14 +19,14 @@
         is-subtitle
         title="Props"
       />
-      <SandboxSectionComponent title="hasHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute">
+      <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute">
         <KComponent
           v-slot="{ data }"
-          :data="{ tableKey: 0, tableHasHover: false, tableEmptyState: false }"
+          :data="{ tableKey: 0, tableRowHover: false, tableEmptyState: false }"
         >
           <div class="horizontal-container">
             <KInputSwitch
-              v-model="data.tableHasHover"
+              v-model="data.tableRowHover"
               label="Has hover"
             />
             <KInputSwitch
@@ -38,14 +38,16 @@
 
           <KTable
             :key="data.tableKey"
+            client-sort
             empty-state-action-message="Empty state action"
             empty-state-action-route="/"
             empty-state-icon-variant="kong"
             empty-state-message="Empty state message"
             empty-state-title="Empty state title"
             :fetcher="data.tableEmptyState ? emptyFetcher : fetcher"
-            :has-hover="data.tableHasHover"
             :headers="headers(false, true)"
+            :row-hover="data.tableRowHover"
+            :sort-handler-function="sortHandlerFunction"
           >
             <template #actions>
               <SandboxTableActions />
@@ -184,13 +186,19 @@ import SandboxSectionComponent from '../../components/SandboxSectionComponent.vu
 import SandboxTableActions from './SandboxTableActions.vue'
 import { AddIcon, InfoIcon } from '@kong/icons'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import type { TableHeader } from '@/types'
 
-const headers = (hidable: boolean = false, sortable: boolean = false) => {
+const headers = (hidable: boolean = false, sortable: boolean = false): TableHeader[] => {
   return [
     { key: 'name', label: 'Full Name' },
-    { key: 'username', label: 'Username', sortable },
+    {
+      key: 'username',
+      label: 'Username',
+      sortable,
+      ...(sortable && { useSortHandlerFunction: true }),
+    },
     { key: 'email', label: 'Email', hidable },
-    { key: 'actions', hideLabel: true },
+    { key: 'actions', label: 'Row actions', hideLabel: true },
   ]
 }
 
@@ -216,6 +224,32 @@ const emptyFetcher = async (): Promise<any> => {
     total: 0,
   }
 }
+
+const sortHandlerFunction = ({ key, sortColumnOrder, data }: any) => {
+  return data.sort((a: any, b: any) => {
+    if (key === 'username') {
+      if (sortColumnOrder === 'asc') {
+        if (a.username > b.username) {
+          return 1
+        } else if (a.username < b.username) {
+          return -1
+        }
+
+        return 0
+      } else {
+        if (a.username > b.username) {
+          return -1
+        } else if (a.username < b.username) {
+          return 1
+        }
+
+        return 0
+      }
+    }
+
+    return data
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index cb19832e2e..a0142a1f88 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -5,7 +5,10 @@
       :kpop-attributes="{ placement: 'bottomEnd' }"
       @toggle-dropdown="handleDropdownToggle"
     >
-      <KTooltip text="Show/Hide Columns">
+      <KTooltip
+        placement="bottomEnd"
+        text="Show/Hide Columns"
+      >
         <KButton
           appearance="secondary"
           aria-label="Show/Hide Columns"
@@ -73,7 +76,7 @@ import KDropdown from '@/components/KDropdown/KDropdown.vue'
 import KDropdownItem from '@/components/KDropdown/KDropdownItem.vue'
 
 const emit = defineEmits<{
-  (e: 'update:visibility', columnVisibility: Record<string, boolean>): void
+  (e: 'update', columnVisibility: Record<string, boolean>): void
 }>()
 
 const props = defineProps({
@@ -106,7 +109,7 @@ const initVisibilityMap = (): void => {
 
 const handleApply = (): void => {
   // pass by ref problems
-  emit('update:visibility', JSON.parse(JSON.stringify(visibilityMap.value)))
+  emit('update', JSON.parse(JSON.stringify(visibilityMap.value)))
   isDirty.value = false
 }
 
diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index 027e08f59d..a65ac28af1 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -213,7 +213,7 @@ describe('KTable', () => {
         props: {
           headers: options.headers,
           fetcher: () => { return { data: options.data } },
-          hasHover: true,
+          rowHover: true,
         },
       })
 
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 469702ea73..d8099173e7 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -14,7 +14,7 @@
         :columns="visibilityColumns"
         :table-id="tableId"
         :visibility-preferences="visibilityPreferences"
-        @update:visibility="(columnMap: Record<string, boolean>) => columnVisibility = columnMap"
+        @update="(columnMap: Record<string, boolean>) => columnVisibility = columnMap"
       />
     </div>
 
@@ -88,7 +88,7 @@
         <table
           class="table"
           :class="{
-            'has-hover': hasHover,
+            'has-hover': rowHover,
             'is-clickable': isClickable
           }"
           :data-tableid="tableId"
@@ -137,9 +137,9 @@
                     :name="getColumnSlotName(column.key)"
                   >
                     <span
+                      class="table-header-label"
                       :class="{
                         'sr-only': column.hideLabel,
-                        'truncated-column': resizeColumns,
                       }"
                     >
                       {{ column.label ? column.label : column.key }}
@@ -180,7 +180,6 @@
                 :key="`table-${tableId}-cell-${index}`"
                 :class="{
                   'resize-hover': resizeColumns && resizeHoverColumn === value.key && index !== visibleHeaders.length - 1,
-                  'truncated-column': resizeColumns
                 }"
                 :style="columnStyles[value.key]"
                 v-on="tdlisteners(row[value.key], row)"
@@ -207,7 +206,7 @@
         :disable-page-jump="disablePaginationPageJump"
         :initial-page-size="pageSize"
         :neighbors="paginationNeighbors"
-        :offset="paginationType === 'offset' ? true : false"
+        :offset="paginationOffset"
         :offset-next-button-disabled="!offset || !hasNextPage"
         :offset-previous-button-disabled="!previousOffset"
         :page-sizes="paginationPageSizes"
@@ -233,7 +232,6 @@ import { ArrowDownIcon } from '@kong/icons'
 import useUtilities from '@/composables/useUtilities'
 import type {
   TablePreferences,
-  TablePaginationType,
   TableHeader,
   TableColumnSlotName,
   SwrvState,
@@ -247,7 +245,6 @@ import type {
   EmptyStateIconVariant,
 } from '@/types'
 import {
-  TablePaginationTypeArray,
   EmptyStateIconVariants,
 } from '@/types'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
@@ -282,7 +279,7 @@ const props = defineProps({
   /**
    * Enables hover highlighting to table rows
    */
-  hasHover: {
+  rowHover: {
     type: Boolean,
     default: true,
   },
@@ -413,7 +410,7 @@ const props = defineProps({
    * A prop to pass in an array of headers for the table
    */
   headers: {
-    type: Array,
+    type: Array as PropType<TableHeader[]>,
     default: () => [],
   },
   /**
@@ -457,10 +454,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  paginationType: {
-    type: String as PropType<TablePaginationType>,
-    default: 'default',
-    validator: (type: TablePaginationType) => TablePaginationTypeArray.includes(type),
+  paginationOffset: {
+    type: Boolean,
+    default: false,
   },
   /**
    * A prop to pass to hide pagination for total table records is less than or equal to pagesize
@@ -513,9 +509,9 @@ const hasColumnVisibilityMenu = computed((): boolean => {
 // columns whose visibility can be toggled
 const visibilityColumns = computed((): TableHeader[] => tableHeaders.value.filter((header: TableHeader) => header.hidable))
 // visibility preferences from the host app (initialized by app)
-const visibilityPreferences = computed((): Record<string, boolean> => props.tablePreferences.columnVisibility || {})
+const visibilityPreferences = computed((): Record<string, boolean> => hasColumnVisibilityMenu.value ? props.tablePreferences.columnVisibility || {} : {})
 // current column visibility state
-const columnVisibility = ref<Record<string, boolean>>(props.tablePreferences.columnVisibility || {})
+const columnVisibility = ref<Record<string, boolean>>(hasColumnVisibilityMenu.value ? props.tablePreferences.columnVisibility || {} : {})
 const total = ref(0)
 const isScrolled = ref(false)
 const page = ref(1)
@@ -638,7 +634,7 @@ const tdlisteners = computed((): any => {
   }
 })
 
-const columnWidths = ref<Record<string, number>>(props.tablePreferences.columnWidths || {})
+const columnWidths = ref<Record<string, number>>(props.resizeColumns ? props.tablePreferences.columnWidths || {} : {})
 const columnStyles = computed(() => {
   const styles: Record<string, any> = {}
   for (const colKey in columnWidths.value) {
@@ -660,7 +656,7 @@ const getHeaderClasses = (column: TableHeader, index: number): Record<string, bo
   return {
     // display the resize handle on the right side of the column if resizeColumns is enabled, hovering current column, and not the last column
     'resize-hover': resizeHoverColumn.value === column.key && props.resizeColumns && index !== visibleHeaders.value.length - 1,
-    'truncated-column resizable': props.resizeColumns,
+    resizable: props.resizeColumns,
     // display sort control if column is sortable, label is visible, and sorting is not disabled
     sortable: props.sortable && !column.hideLabel && !!column.sortable,
     // display active sorting styles if column is currently sorted
@@ -782,7 +778,7 @@ const fetchData = async () => {
   data.value = res.data as Record<string, any>[]
   total.value = props.paginationTotalItems || res.total || res.data?.length
 
-  if (props.paginationType === 'offset') {
+  if (props.paginationOffset) {
     if (!res.pagination?.offset) {
       offset.value = null
 
@@ -820,7 +816,7 @@ const initData = () => {
   sortColumnKey.value = fetcherParams.sortColumnKey ?? defaultFetcherProps.sortColumnKey
   sortColumnOrder.value = fetcherParams.sortColumnOrder as SortColumnOrder ?? defaultFetcherProps.sortColumnOrder as SortColumnOrder
 
-  if (props.paginationType === 'offset') {
+  if (props.paginationOffset) {
     offset.value = fetcherParams.offset
     offsets.value.push(fetcherParams.offset)
   }
@@ -910,7 +906,7 @@ const sortClickHandler = (header: TableHeader): void => {
         data: data.value,
       })
     }
-  } else if (props.paginationType !== 'offset') {
+  } else if (!props.paginationOffset) {
     debouncedRevalidate()
   }
 
@@ -972,8 +968,8 @@ const getPrevOffsetHandler = (): void => {
 //  - hide if neither previous/next offset exists and current data set count is < min pagesize
 const shouldShowPagination = computed((): boolean => {
   return !!(props.fetcher && !props.disablePagination &&
-        !(props.paginationType !== 'offset' && props.hidePaginationWhenOptional && total.value <= props.paginationPageSizes[0]) &&
-        !(props.paginationType === 'offset' && props.hidePaginationWhenOptional && !previousOffset.value && !offset.value && data.value.length < props.paginationPageSizes[0]))
+        !(!props.paginationOffset && props.hidePaginationWhenOptional && total.value <= props.paginationPageSizes[0]) &&
+        !(props.paginationOffset && props.hidePaginationWhenOptional && !previousOffset.value && !offset.value && data.value.length < props.paginationPageSizes[0]))
 })
 
 const getTestIdString = (message: string): string => {
@@ -1062,6 +1058,13 @@ watch([query, page, pageSize], async (newData, oldData) => {
   }
 }, { deep: true, immediate: true })
 
+// because hasColumnVisibilityMenu also accounts for error/loading/empty state, we need to watch it
+watch(hasColumnVisibilityMenu, (newVal) => {
+  if (newVal) {
+    columnVisibility.value = props.tablePreferences.columnVisibility || {}
+  }
+}, { immediate: true })
+
 onMounted(() => {
   initData()
 })
@@ -1075,8 +1078,10 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
 /* Component styles */
 
 .k-table {
+  background-color: var(--kui-color-background, $kui-color-background);
   display: flex;
   flex-direction: column;
+  font-family: var(--kui-font-family-text, $kui-font-family-text);
   gap: var(--kui-space-70, $kui-space-70);
 
   .table-toolbar {
@@ -1096,27 +1101,14 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
 
       th,
       td {
+        @include truncate;
+
         padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
         vertical-align: middle;
         white-space: nowrap;
       }
 
-      th.resize-hover {
-        // creates a 2px "border" on the right - can't use the border because it will "jump"
-        box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple) inset;
-      }
-
-      td.resize-hover {
-        // creates a 2px "border" on the right - can't use the border because it will "jump"
-        box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border, $kui-color-border) inset;
-      }
-
-      .truncated-column {
-        @include truncate;
-      }
-
       thead {
-        background-color: var(--kui-color-background, $kui-color-background);
         border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
         height: 44px;
         position: sticky;
@@ -1153,69 +1145,78 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
               transition: opacity $kongponentsTransitionDurTimingFunc;
             }
           }
-        }
-
-        th {
-          color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-          font-size: var(--kui-font-size-30, $kui-font-size-30);
-          font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-          line-height: var(--kui-line-height-30, $kui-line-height-30);
-          padding: $kTableThPaddingY var(--kui-space-60, $kui-space-60);
-          text-align: left;
-          vertical-align: bottom;
-
-          &.resizable {
-            min-width: 40px;
-            position: relative;
-
-            .resize-handle {
-              cursor: col-resize;
-              height: v-bind('headerHeight');
-              position: absolute;
-              right: 0;
-              top: 0;
-              width: 6px;
 
-              &.previous {
-                left: 0;
-                right: unset;
+          th {
+            color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+            font-size: var(--kui-font-size-30, $kui-font-size-30);
+            font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
+            line-height: var(--kui-line-height-30, $kui-line-height-30);
+            padding: $kTableThPaddingY var(--kui-space-60, $kui-space-60);
+            text-align: left;
+            vertical-align: bottom;
+
+            &.resizable {
+              min-width: 40px;
+              position: relative;
+
+              .resize-handle {
+                cursor: col-resize;
+                height: v-bind('headerHeight');
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 6px;
+
+                &.previous {
+                  left: 0;
+                  right: unset;
+                }
               }
             }
-          }
 
-          &.active-sort {
-            color: var(--kui-color-text, $kui-color-text);
-          }
+            &.active-sort {
+              color: var(--kui-color-text, $kui-color-text);
+            }
 
-          .sr-only {
-            border-width: var(--kui-border-width-0, $kui-border-width-0);
-            clip: rect(0, 0, 0, 0);
-            height: 1px;
-            margin: -1px;
-            overflow: hidden;
-            padding: var(--kui-space-0, $kui-space-0);
-            position: absolute;
-            white-space: nowrap;
-            width: 1px;
-          }
+            .sr-only {
+              border-width: var(--kui-border-width-0, $kui-border-width-0);
+              clip: rect(0, 0, 0, 0);
+              height: 1px;
+              margin: -1px;
+              overflow: hidden;
+              padding: var(--kui-space-0, $kui-space-0);
+              position: absolute;
+              white-space: nowrap;
+              width: 1px;
+            }
 
-          &.sortable {
-            cursor: pointer;
+            &.sortable {
+              cursor: pointer;
 
-            &.asc .sort-icon {
-              transform: rotate(-180deg);
+              &.asc .sort-icon {
+                transform: rotate(-180deg);
+              }
             }
-          }
 
-          .table-headers-container {
-            align-items: center;
-            display: flex;
-            gap: var(--kui-space-40, $kui-space-40);
+            .table-headers-container {
+              align-items: center;
+              display: flex;
+              gap: var(--kui-space-40, $kui-space-40);
 
-            &.resized {
-              // when column is resized we need to set position: absolute; to avoid glitching resizing behavior
-              bottom: $kTableThPaddingY;
-              position: absolute;
+              &.resized {
+                // when column is resized we need to set position: absolute; to avoid glitching resizing behavior
+                bottom: $kTableThPaddingY;
+                position: absolute;
+              }
+
+              .table-header-label {
+                @include truncate;
+              }
+            }
+
+            &.resize-hover {
+              // creates a 2px "border" on the right - can't use the border because it will "jump"
+              box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple) inset;
             }
           }
         }
@@ -1228,14 +1229,19 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
           &:not(:last-of-type) {
             border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
           }
-        }
 
-        td {
-          color: var(--kui-color-text, $kui-color-text);
-          font-size: var(--kui-font-size-30, $kui-font-size-30);
-          font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
-          line-height: var(--kui-line-height-30, $kui-line-height-30);
-          white-space: nowrap;
+          td {
+            color: var(--kui-color-text, $kui-color-text);
+            font-size: var(--kui-font-size-30, $kui-font-size-30);
+            font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+            line-height: var(--kui-line-height-30, $kui-line-height-30);
+            white-space: nowrap;
+
+            &.resize-hover {
+              // creates a 2px "border" on the right - can't use the border because it will "jump"
+              box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border, $kui-color-border) inset;
+            }
+          }
         }
       }
 
diff --git a/src/types/table.ts b/src/types/table.ts
index c2413ee502..93cfeedd64 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -1,5 +1,3 @@
-import type { AnyElementOf } from '@/types/utils'
-
 export type SortColumnOrder = 'asc' | 'desc'
 
 export interface TablePreferences {
@@ -15,10 +13,6 @@ export interface TablePreferences {
   columnVisibility?: Record<string, boolean>
 }
 
-export const TablePaginationTypeArray = ['default', 'offset'] as const
-
-export type TablePaginationType = AnyElementOf<typeof TablePaginationTypeArray>
-
 export interface TableHeader {
   key: string
   label: string

From ad53fac045b06cad197d6799582f66d5912756f5 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 24 Apr 2024 13:37:44 -0400
Subject: [PATCH 14/33] docs(ktable): update component docs [KHCP-9002]

---
 docs/components/catalog.md       |    8 +-
 docs/components/table.md         | 2530 +++++++++---------------------
 src/components/KTable/KTable.vue |    2 +-
 3 files changed, 726 insertions(+), 1814 deletions(-)

diff --git a/docs/components/catalog.md b/docs/components/catalog.md
index d2acd78fad..6a43ae9bf7 100644
--- a/docs/components/catalog.md
+++ b/docs/components/catalog.md
@@ -293,7 +293,9 @@ Set the following props to handle empty state:
 - `emptyStateActionMessage` - Button text for empty state action
 - `emptyStateActionRoute` - Route for empty state action
 
+:::tip
 Should you want to display an icon inside of action button, you can use `empty-state-action-icon` slot.
+:::
 
 When empty state action button is clicked, KCatalog emits the `empty-state-action-click` event.
 
@@ -480,9 +482,13 @@ The `toolbar` slot allows you to slot catalog controls rendered at the top of th
 
 Slot content to be displayed when empty.
 
+### empty-state-action-icon
+
+Slot for icon to be displayed in front of action button text in empty state. See [empty state](#empty) section for example of usage of this slot.
+
 ### error-state
 
-Slot content to be displayed when in an error state.
+Slot content to be displayed when in error state.
 
 ## Events
 
diff --git a/docs/components/table.md b/docs/components/table.md
index fd3e120b5f..a8bf604880 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -1,352 +1,286 @@
 # Table
 
-Pass a fetcher function to build a slot-able table.
+Component that takes care of fetching and rendering data in a table format.
+
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+/>
 
 ```html
-  <KTable :fetcher="fetcher" :headers="headers" />
+<KTable
+  :fetcher="fetcher"
+  :headers="headers"
+/>
 ```
 
-::: warning NOTE
-`KTable` implements `KIcon` which imports .svg files directly, so a loader may be needed in order to render these in your application such as the webpack
-[raw-loader](https://webpack.js.org/loaders/raw-loader/). [See here for more information](/#installation).
-:::
-
 ## Props
 
-### hasHover
-
-Highlight the table row on hover. By default this is set to `true`. In the example we can set it to false as well.
+### headers
 
-<KTable :fetcher="tableOptionsFetcher" :headers="tableOptionsHeaders" :hasHover="false" />
+Array of objects that represent table columns along with some configurations that should apply to each of the columns (whether a columns is sortable, hidable, etc).
 
-```html
-  <KTable :fetcher="fetcher" :headers="headers" :hasHover="false" />
+```ts
+interface TableHeader {
+  key: string // must be unique for each column
+  label: string // visible column header text
+  sortable?: boolean // in the nutshell, this property defines whether sort icon should be displayed next to the column header and whether the column header will emit sort event upon clicking on it
+  hidable?: boolean
+  hideLabel?: boolean // whether column header text should be hidden (only visible to screen readers)
+  useSortHandlerFunction?: boolean // whether KTable should use function passed through sortHandlerFunction prop to apply sorting logic to this column
+}
 ```
 
-### hasSideBorder
+:::tip NOTE
+If at least one column is hidable in the table, KTable will render a dropdown on the right of the table toolbar, directly above the table, which will provide an interface for showing/hiding columns to the user.
+:::
 
-Adds left border to each table row. By default set to `false`. The colors can be overridden by themes.
+For example of `headers` prop usage please refer to [`fetcher` prop documentation](#fetcher) below.
 
-The below example demonstrates the disabled state:
+### fetcher
 
-<KTable :fetcher="tableOptionsFetcher" :headers="tableOptionsHeaders" :hasSideBorder="true" />
+Function that handles data fetching, server-side search and pagination. It takes a single param as an argument which you can conveniently pass as a prop (see [`initialFetcherParams` prop](#initialfetcherparams) for details).
 
-```html
-  <KTable :fetcher="fetcher" :headers="headers" :hasSideBorder="true" />
-```
+Fetcher function is expected to return an object with following properties:
+* `data` - an array of objects to populate table with
+* `total` - the total count of items (if using pagination)
 
-### hasError
+<KTable
+  :fetcher="hardcodedFetcher"
+  :headers="basicHeaders(false, 'username', 'email')"
+  :sort-handler-function="basicSortHandlerFunction"
+  client-sort
+/>
 
-See [the State section](#error) about `hasError`
+```vue
+<template>
+  <KTable
+    :fetcher="fetcher"
+    client-sort
+    :headers="headers"
+    :sort-handler-function="sortHandlerFunction"
+  />
+</template>
 
-### isLoading
+<script setup lang="ts">
+const headers = [
+  { key: 'name', label: 'Full Name' },
+  { key: 'username', label: 'Username', sortable: true, useSortHandlerFunction: true },
+  { key: 'email', label: 'Email', hidable: true },
+]
+
+const fetcher = async (): Promise<any> => {
+  // Fake delay
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  const responseData = [
+    {
+      id: 1,
+      name: 'Leanne Graham', // notice that property keys in data object correspond to each respective key in headers const
+      username: 'Bret',
+      email: 'Sincere@april.biz'
+    },
+    {
+      id: 2,
+      name: 'Ervin Howell',
+      username: 'Antonette',
+      email: 'Shanna@melissa.tv'
+    },
+    ...
+  ]
 
-See [the State section](#loading) about `isLoading`
+  return {
+    data: responseData,
+    total: responseData.length,
+  }
+}
 
-### resizeColumns
+const sortHandlerFunction = ({ key, sortColumnOrder, data }) => {
+  return data.sort((a, b) => {
+    if (key === 'username') {
+      if (sortColumnOrder === 'asc') {
+        if (a.username > b.username) {
+          return 1
+        } else if (a.username < b.username) {
+          return -1
+        }
 
-Allow table column width to be resizable. Adjusting a column's width will trigger an `@update:table-preferences` event.
+        return 0
+      } else {
+        if (a.username > b.username) {
+          return -1
+        } else if (a.username < b.username) {
+          return 1
+        }
 
-<KTable :fetcher="tableOptionsFetcher" :headers="resizeHeaders" resize-columns />
+        return 0
+      }
+    }
 
-```html
-  <KTable :fetcher="fetcher" :headers="headers" resize-columns />
+    return data
+  })
+}
+</script>
 ```
 
-### disablePaginationPageJump
+:::tip NOTE
+Notice that in the example above _Username_ column is sortable and _Email_ column is hidable. In this example sorting is handled on the client side, however should you want to apply serer-side logic to handle sorting, you can bind your logic to [`sort` event](#sort) and perform re-fetching of data as needed.
+:::
 
-Set this to `true` to limit pagination navigation to `previous` / `next` page only.
+### initialFetcherParams
 
-<KTable :fetcher="tableOptionsFetcher" :headers="tableOptionsHeaders" :disablePaginationPageJump="true" />
+Fetcher function takes a single param - an object with following properties:
 
-```html
-  <KTable :fetcher="fetcher" :headers="headers" :disablePaginationPageJump="true" />
+```ts
+interface FetcherParams {
+  pageSize?: number // the number of items to display per page
+  page?: number // the currently visible page
+  query?: string // a text string to filter table data on (defined in the searchInput prop)
+  sortColumnKey?: string // sortable column key (defined in the headers prop)
+  sortColumnOrder?: 'asc' | 'desc' // sorting order
+  offset?: string | null // the value of the offset for offset-based pagination. offset MUST be included in the fetcher params for offset-based pagination to work properly
+}
 ```
 
-### disablePagination
+For ease of configuration, all properties in the `initialFetcherParams` object have default fallback values:
 
-Set this to `true` to remove the pagination bar when using a fetcher.
+```ts
+{ 
+  pageSize: 15,
+  page: 1,
+  query: '',
+  sortColumnKey: '',
+  sortColumnOrder: '',
+  offset: null
+}
+```
 
-### hidePaginationWhenOptional
+### loading
 
-Set this to `true` to hide the pagination UI when the table record count is less than or equal to the `pageSize`.
+Boolean to control whether the component should display loading state. When not explicitly set, KTable will display loading state until function passed through [`fetcher` prop](#fetcher) resolves.
 
-### disableSorting
+<KTable
+  loading
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+/>
+
+```html
+<KTable
+  loading
+  :fetcher="fetcher"
+  :headers="headers"
+/>
+```
 
-Set this to `true` to disable ablity to sort.
+### error
 
-### enableClientSort
+Boolean to control whether the component should display error state. Defaults to `false`. See [error state](#error-1) section for more customization options.
 
-Set this prop to `true` to enable client side sorting if using a fetcher that returns unpaginatinated data.
-This functionality may be flaky.
+<KTable
+  error
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+/>
 
-### sortHandlerFn
+```html
+<KTable
+  error
+  :fetcher="fetcher"
+  :headers="headers"
+/>
+```
 
-Use a custom sort handler function to handle sorting table data for specific columns
+### resizeColumns
 
-::: tip NOTE
+Allow table column width to be resizable (defaults to `false`). Adjusting a column's width will trigger an [`update:table-preferences` event](#updatetable-preferences).
 
-1. In order for a column to use the custom sort handler function, `useSortHandlerFn` must be set to `true` in the [headers](#headers) object
+<KTable
+  resize-columns
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+/>
 
-2. Sort handler functions can take four params:
+```html
+<KTable
+  resize-columns
+  :fetcher="fetcher"
+  :headers="headers"
+/>
+```
 
-- `key`: the key of the column to be sorted
-- `prevKey`: the key of the column previously sorted
-- `sortColumnOrder`: the order in which to sort the column (`asc` or `desc`)
-- `data`: the data returned from the fetcher function response
-:::
+### clientSort
 
-#### sortHandlerFn Example
+Boolean to enable client side sorting if using a fetcher that returns unpaginatinated data. Defaults to `false`. Use this in conjunction with [`sortHandlerFunction` prop](#sorthandlerfunction).
 
-Here the `last_seen` column is set to use the custom sort handler function via the `useSortHandlerFn` property set in the table header object. The function passed into the `sortHandlerFn` prop sorts and returns the table data. The other columns use the default built-in client side sort function because the `useSortHandlerFn` property is not set in the header objects.
+### sortHandlerFunction
 
-<KTable :fetcher="sortHandlerFnFetcher" :headers="sortHandlerFnHeaders" :sortHandlerFn="sortHandlerFn" enable-client-sort />
+Pass a custom sort handler function to handle sorting table data for specific columns.
 
-```html
-<template>
-  <KTable
-    :fetcher="fetcher"
-    :headers="headers"
-    :sortHandlerFn="sortHandlerFn"
-    enable-client-sort
-  />
-</template>
+The function can take an object with these properties as an only argument:
 
-<script lang="ts">
-export default {
-  data () {
-    return {
-      headers: [
-        { label: 'Host', key: 'hostname', sortable: true },
-        { label: 'Version', key: 'version', sortable: true },
-        { label: 'Connected', key: 'connected', sortable: true },
-        { label: 'Last Seen', key: 'last_seen', sortable: true, useSortHandlerFn: true }
-      ],
-    }
-  },
-  methods: {
-    sortHandlerFn({ key, prevKey, sortColumnOrder, data}) {
-      return data.sort((a, b) => {
-        if (key === 'last_seen') {
-          if (sortColumnOrder === 'asc') {
-            if (a.last_ping > b.last_ping) {
-              return 1
-            } else if (a.last_ping < b.last_ping) {
-              return -1
-            }
-            return 0
-          } else {
-            if (a.last_ping > b.last_ping) {
-              return -1
-            } else if (a.last_ping < b.last_ping) {
-              return 1
-            }
-            return 0
-          }
-        }
-      })
-    },
-    fetcher() {
-      return {
-        data: [
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.8.0.0-enterprise-edition',
-            hostname: '99e591ae3776',
-            last_ping: 1648855072,
-            connected: 'Disconnected',
-            last_seen: '6 days ago'
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.7.0.0-enterprise-edition',
-            hostname: '19e591ae3776',
-            last_ping: 1649362660,
-            connected: 'Connected',
-            last_seen: '3 hours ago',
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.8.1.0-enterprise-edition',
-            hostname: '79e591ae3776',
-            last_ping: 1649355460,
-            connected: 'Connected',
-            last_seen: '5 hours ago',
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.6.0.0-enterprise-edition',
-            hostname: '89e591ae3776',
-            last_ping: 1648155072,
-            connected: 'Disconnected',
-            last_seen: '14 days ago'
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.8.2.0-enterprise-edition',
-            hostname: '59e591ae3776',
-            last_ping: 1649855072,
-            connected: 'Connected',
-            last_seen: 'Just now'
-          },
-        ]
-      }
-    },
-  }
+```ts
+interface SortHandlerFunctionParam {
+  key: string // the key of the column to be sorted
+  prevKey: string // the key of the column previously sorted
+  sortColumnOrder: 'asc' | 'desc' // the order in which to sort the column (asc or desc)
+  data: Array<any> // the data returned from the fetcher function response
 }
-</script>
 ```
 
-### fetcher
-
-Use a custom fetcher function to fetch table data and leverage server-side search, sort and pagination.
-
-::: tip NOTE
-All fetcher functions should take a single param. This parameter is a JSON
-object supporting the following properties:
-
-- Pagination support:
-  - `page`: the currently visible page - starts at `1`
-  - `pageSize`: the number of items to display per page
-  - `offset`: the value of the offset for offset-based pagination. `offset` **MUST** be included in the fetcher params for offset-based pagination to work properly.
-  - `hasNextPage`: a boolean value indicating if the next page exists in case of using cursor (`offset`) pagination. This is used to determine disable state of the prev/next page buttons. By default the value is `true`
-- Sort support:
-  - `sortColumnKey`: the column to sort by's `key` defined in the `headers` prop
-  - `sortColumnOrder`: can be 'asc' or 'desc'
-- Search support:
-  - `query`: a text string to filter table data on
+:::tip NOTE
+Please note that you have to set [`clientSort` prop](#clientsort) to `true` as well as to pass `sortable: true` and `useSortHandlerFunction: true` in the respecting [headers object](#headers) to make a column sortable via `sortHandlerFunction`.
 :::
 
-::: tip NOTE
-All fetcher functions should return a JSON object. This JSON object should contain the following properties:
-
-- `total` - the total count of items (if using pagination)
-- `data` - an array of JSON objects to populate the table with
-:::
+Please refer to [`fetcher` prop documentation](#fetcher) for example.
 
-Example fetcher function:
+### rowHover
 
-```js
-fetcher(payload) {
-  const params = {
-    _limit: payload.pageSize,
-    _page: payload.page
-  }
+Boolean to control whether table should display hover state upon hovering rows. Defaults to `true`.
 
-  if (query) {
-    params.q = payload.query
-    params._page = 1
-  }
+### tablePreferences
 
-  if (sortKey) {
-    params._sort = payload.sortColumnKey
-    params._order = payload.sortColumnOrder
-  }
+Table preferences object for persisting some configs.
 
-  return axios.get('/user_list', {
-    baseURL: 'https://kongponents.dev/api',
-    params
-  }).then(res => {
-    return {
-      total: res.total,
-      data: res.data
-    }
-  })
+```ts
+interface TablePreferences {
+  pageSize?: number // the number of items to display per page
+  sortColumnKey?: string // the column to sort by's `key` defined in the table headers
+  sortColumnOrder?: SortColumnOrder // the order by which to sort the column, one of `asc` or `desc`
+  columnWidths?: Record<string, number> // the customized column widths, if resizing is allowed
+  columnVisibility?: Record<string, boolean> // column visibility, if visibility is toggleable
 }
 ```
 
-The `fetcher` function does not actually need to make an API call. Tables that can get their data synchronously can be modified to use a `fetcher` that returns the static data object.
-
-::: tip NOTE
-Remember that the `fetcher` function is responsible for managing pagination/sort/search. So if returning a static data object these features should be explicitly disabled.
-:::
-
-<KTable :fetcher="() => {
-  return {
-    data: [
-      {
-        name: 'Basic Auth',
-        id: '517526354743085',
-        enabled: 'true'
-      },
-      {
-        name: 'Website Desktop',
-        id: '328027447731198',
-        enabled: 'false'
-      },
-      {
-        name: 'Android App',
-        id: '405383051040955',
-        enabled: 'true'
-      }
-    ]
-  }}"
-  :initial-fetcher-params="{
-    sortColumnKey: 'name',
-    sortColumnOrder: 'asc'
-  }"
-  :headers="[
-    { label: 'Name', key: 'name', sortable: true },
-    { label: 'Id', key: 'id', sortable: true },
-    { label: 'Enabled', key: 'enabled', sortable: false }
-  ]"
-  hidePaginationWhenOptional
-  :enableClientSort="true"
+<KTable
+  :table-preferences="{ columnVisibility: { email: false } }"
+  :fetcher="basicFetcher"
+  :headers="basicHeaders(false, null, 'email')"
 />
 
 ```html
-<template>
-  <KTable
-    :fetcher="() => {
-      return {
-        data: [
-          {
-            name: 'Basic Auth',
-            id: '517526354743085',
-            enabled: 'true'
-          },
-          {
-            name: 'Website Desktop',
-            id: '328027447731198',
-            enabled: 'false'
-          },
-          {
-            name: 'Android App',
-            id: '405383051040955',
-            enabled: 'true'
-          }
-        ]
-      }
-    }"
-    :initial-fetcher-params="{
-      sortColumnKey: 'name',
-      sortColumnOrder: 'asc'
-    }"
-    :headers="[
-      { label: 'Name', key: 'name', sortable: true },
-      { label: 'Id', key: 'id', sortable: true },
-      { label: 'Enabled', key: 'enabled', sortable: false }
-    ]"
-    hidePaginationWhenOptional
-    :enableClientSort="true"
-  />
-</template>
+<KTable
+  :table-preferences="{ columnVisibility: { email: false } }"
+  :fetcher="fetcher"
+  :headers="headers"
+/>
 ```
+
 ### cacheIdentifier
 
 The fetcher functionality makes use of [SWRV](https://docs-swrv.netlify.app/) to handle caching of response data. In order to take advantage of this caching, SWRV needs a way to identify which cache entry is associated with the table.
 
 The identifier should be a string and will default to `''` if not provided. In that scenario, we will generate a random ID for the identifier every time the table is mounted.
 
-::: danger Danger
-This identifier must be unique across all `KTable` instances across the entire Vue app, otherwise there is a risk that SWRV will return the cached data of the wrong table.
+:::danger DANGER
+This identifier must be unique across all KTable instances across the entire Vue app, otherwise there is a risk that [SWRV](https://docs-swrv.netlify.app/) will return the cached data of the wrong table.
 :::
 
 ### fetcherCacheKey
 
 Whenever the cache key is changed the fetcher will automatically be called and attempt to fetch new table data.
 
-```html
+```vue
 <template>
   <KTable
     cache-identifier="fetcher-cache-key-example-table"
@@ -356,763 +290,301 @@ Whenever the cache key is changed the fetcher will automatically be called and a
   />
 </template>
 
-<script>
-export default {
-  data () {
-    return {
-      cacheKey: 1
-    }
-  },
-  methods: {
-    itemDeleted () {
-      // take an action on the DOM
-      cacheKey++ // triggers refetch
-    }
-  }
+<script setup lang="ts">
+const cacheKey = ref<number>(1)
+
+const itemDeleted = (): void => {
+  cacheKey.value++ // triggers refetch or reactivity
 }
 </script>
 ```
 
-An alternate implementation is to apply a `key` attribute to the `KTable` in conjunction with a `fetcher` and the SWRV `revalidate` function. To prevent unnecessary calls on mount, the `key` `ref` should have an initial value of `0`.
+An alternate implementation is to apply a `key` attribute to the KTable in conjunction with a `fetcher` and the [SWRV](https://docs-swrv.netlify.app/) `revalidate` function. To prevent unnecessary calls on mount, the `key` `ref` should have an initial value of `0`.
 
-Since the `fetcher` function will handle the intial GET of the data, we want the cache key for the `revalidate` function to evaluate to `falsey` on page load (to avoid an unnecessary duplicate call), and will manually call `revalidate()` and increment the `key` to trigger a refetch and redraw of the table.
+Since the `fetcher` function will handle the initial fetch of the data, we want the cache key for the `revalidate` function to be a falsey value on page load (to avoid an unnecessary duplicate call), and will manually call `revalidate()` and increment the `key` to trigger a refetch and redraw of the table.
 
 ```html
 <template>
   <KTable :key="key" :fetcher="fetcher" :headers="headers" />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  setup () {
-    const key = ref(0) // initialized to zero
-    const fetcher = async ({ pageSize, page, query, offset = null }) => {
-      try {
-        const res = await services.getAll(pageSize, offset)
+<script setup lang="ts">
+const key = ref<string>(0) // initialized to zero
 
-        // handle data
-      } catch (error) {
-        // handle error
-      }
-    }
+const fetcher = async ({ pageSize, page, query, offset = null }) => {
+  try {
+    const res = await services.getAll(pageSize, offset)
 
-    const { revalidate } = composables.useRequest(
-      () => key.value && `service-list-${key.value}`, // will evaluate to falsey on mount, preventing an extra call
-      () => { return fetcher() }
-    )
+    // handle data
+  } catch (error) {
+    // handle error
+  }
+}
 
-    const handleDelete = (id) => {
-      try {
-        const res = await services.delete(id)
+const { revalidate } = composables.useRequest(
+  () => key.value && `service-list-${key.value}`, // will evaluate to falsey on mount, preventing an extra call
+  () => { return fetcher() }
+)
 
-        key.value++
-        revalidate()
-      } catch (error) {
-        // handle error
-      }
-    }
+const handleDelete = (id): void => {
+  try {
+    const res = await services.delete(id)
 
-    return {
-      key,
-      fetcher,
-      headers,
-      handleDelete
-    }
+    key.value++
+    revalidate()
+  } catch (error) {
+    // handle error
   }
-})
+}
 </script>
 ```
 
 ### searchInput
 
-Pass in a string of search input for server-side table filtering. See [the Server-side function section](#server-side-functions) for an example.
+Pass in a string of search input for server-side table filtering.
 
-### headers
+### paginationTotalItems
 
-Pass in an array of header objects for the table.
+Pass the total number of items in the set to populate the pagination text.
 
-| Parameter          | Type    | Description                                                                                                                                |
-| :----------------- | :------ | :----------------------------------------------------------------------------------------------------------------------------------------- |
-| `key`              | string  | A unique key for the column                                                                                                                |
-| `label`            | string  | The label displayed on the table for the column                                                                                            |
-| `sortable`         | boolean | Enables or disables server-side sorting for the column (`false` by default)                                                                |
-| `hidable`          | boolean | Enable show/hide for this column                                                                                                           |
-| `hideLabel`        | boolean | Hides or displays the column label (useful for actions columns)                                                                            |
-| `useSortHandlerFn` | boolean | Uses the function passed in the [sortHandlerFn](#sorthandlerfn) prop to sort the column data instead of the default client sorter function |
+If not provided the fetcher response should return a top-level property `total` or return a `data` property that is an array.
 
-::: tip NOTE
-`sortable` columns emit a `sort` event when clicked, returns:
+### paginationNeighbors
 
-  ```json
-  {
-    prevKey,        // the previously sorted column
-    sortColumnKey,  // the column being sorted now
-    sortColumnOrder // the sort direction (asc/desc)
-  }
-  ```
+Pass in a number of pagination neighbors to be used by the pagination component. See more detail in the [KPagination](/components/pagination.html#neighbors) docs.
 
-:::
+### paginationPageSizes
 
-Example headers array:
+Pass in an array of page sizes for the page size dropdown. If not provided will default to the following:
 
-```html
-<script>
-  export default {
-    data() {
-      return {
-        headers: [
-          { key: 'name', label: 'Name', sortable: true },
-          { key: 'email', label: 'Email', sortable: true },
-          { key: 'department', label: 'department', sortable: true },
-          { key: 'start_date', label: 'Start Date', sortable: true, hidable: true },
-          { key: 'actions', label: '', sortable: false, hideLabel: true },
-        ]
-      }
-    }
-  }
-</script>
+```ts
+[15, 30, 50, 75, 100]
 ```
 
-#### hidable
-
-Using this modal will cause the column visibility menu to be displayed above the table after any toolbar content. Hovering over a column with `hidable: true` will trigger the display of a hide button in the header. An `@update:table-preferences` event is emitted whenever changes are applied.
-
-<KTable :fetcher="tableHideColumnFetcher" :headers="hideColumnHeaders" :table-preferences="hidablePreferences" @update:table-preferences="(tablePrefs) => hidablePreferences.columnVisibility = tablePrefs.columnVisibility" />
-
-```html
-<template>
-  <KTable
-    :fetcher="fetcher"
-    :headers="headers"
-    :table-preferences="myPreferences"
-    @update:table-preferences="(newTablePreferences: TablePreferences) => {
-      myPreferences.columnVisibility = newTablePreferences.columnVisibility
-    }"
-  />
-</template>
+### paginationOffset
 
-<script lang="ts">
-  export default {
-    data() {
-      return {
-        headers: [
-          { label: 'Host', key: 'hostname' },
-          { label: 'Version', key: 'version' },
-          { label: 'Connected', key: 'connected' },
-          { label: 'Last Ping', key: 'last_ping', hidable: true },
-          { label: 'Last Seen', key: 'last_seen', hidable: true },
-        ]
-      }
-    }
-  }
-</script>
-```
+Boolean to control whether underlying KPagination component should use offset pagination type. See [KPagination props](/components/pagination#offset) for details.
 
-### initialFetcherParams
+### disablePaginationPageJump
 
-Pass in an object of parameters for the initial fetcher function call. If not provided, will default to the following values:
+Set this to `true` to limit pagination navigation to previous/next page only.
 
-```js
-{ pageSize: 15, page: 1, query: '', sortColumnKey: '', sortColumnOrder: '' }
-```
+### disablePagination
 
-### paginationTotalItems
+Set this to `true` to hide pagination when using a fetcher.
 
-Pass the total number of items in the set to populate the pagination text:
+### hidePaginationWhenOptional
 
-```html
-1 to 20 of <paginationTotalItems>
-```
+Set this to `true` to hide pagination when the table record count is less than or equal to the `pageSize`.
 
-If not provided the fetcher response should return a top-level property `total` or return a `data` property that is an array.
+### sortable
 
-### paginationNeighbors
+Set this to `false` to disable ability to sort.
 
-Pass in a number of pagination neighbors to be used by the pagination component. See more detail in the [Pagination](/components/pagination.html#neighbors) docs.
+### rowAttrs
 
-### paginationPageSizes
+Function for adding custom attributes to each row. The function should return an object with `key: value` pairs for each attribute.
 
-Pass in an array of page sizes for the page size dropdown. If not provided will default to the following:
+### cellAttrs
 
-```js
-[15, 30, 50, 75, 100]
-```
+Function for adding custom attributes to each table cell. The function should return an object with `key: value` pairs for each attribute.
 
-### paginationType
+## States
 
-Pass in the type of pagination to be used. Options are `default` (page/pageSize) or `offset` (offset/pageSize)
+### Empty
 
-<KTable
-  :fetcher="offsetPaginationFetcher"
-  :headers="offsetPaginationHeaders"
-  :initial-fetcher-params="{ pageSize: offsetPaginationPageSize }"
-  pagination-type="offset" />
+<KTable 
+  :fetcher="emptyFetcher"
+  :headers="basicHeaders()"
+/>
 
 ```html
-<template>
-  <KTable
-    :fetcher="fetcher"
-    :headers="headers"
-    pagination-type="offset"
-  />
-</template>
+<KTable 
+  :fetcher="emptyFetcher"
+  :headers="headers"
+/>
 ```
 
-## Row Attributes
+Set the following props to handle empty state:
 
-A prop to add custom properties to individual rows. The row object is passed as a param.
+- `emptyStateTitle` - Title text for empty state
+- `emptyStateMessage` - Message for empty state
+- `emptyStateIconVariant` - Icon variant for empty state (see [KEmptyState component props](/components/empty-state#iconvariant))
+- `emptyStateActionMessage` - Button text for empty state action
+- `emptyStateActionRoute` - Route for empty state action
 
-`rowAttrs` - This prop takes a function that returns an object comprising the attributes.
+:::tip
+Should you want to display an icon inside of action button, you can use `empty-state-action-icon` slot.
+:::
 
-<KTable :fetcher="tableOptionsRowAttrsFetcher" :headers="tableOptionsRowAttrsHeaders" :rowAttrs="rowAttrsFn" />
+When empty state action button is clicked, KTable emits the `empty-state-action-click` event.
+
+<KTable 
+  :fetcher="emptyFetcher"
+  :headers="basicHeaders()"
+  empty-state-title="No Workspaces exist"
+  empty-state-message="Adding a new Workspace will populate this catalog."
+  empty-state-icon-variant="kong"
+  empty-state-action-message="Create a Workspace"
+  empty-state-action-route="/"
+>
+  <template #empty-state-action-icon>
+    <AddIcon />
+  </template>
+</KTable>
 
 ```html
-<template>
-  <KTable :fetcher="fetcher" :headers="headers" :rowAttrs="rowAttrsFn" />
-</template>
-
-<script>
-export default {
-  methods: {
-    rowAttrsFn (rowItem) {
-      return {
-        class: {
-          'enabled': rowItem.enabled === 'true',
-          'disabled': rowItem.enabled === 'false'
-        },
-        'data-testid': 'row-item'
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.k-table {
-  tr.enabled:hover {
-    --KTableHover: #ccffe1;
-  }
-
-  tr.disabled:hover {
-    --KTableHover: #fff9e6;
-  }
-}
-</style>
+<KTable 
+  :fetcher="emptyFetcher"
+  :headers="headers"
+  empty-state-title="No Workspaces exist"
+  empty-state-message="Adding a new Workspace will populate this table."
+  empty-state-icon-variant="kong"
+  empty-state-action-message="Create a Workspace"
+  empty-state-action-route="/"
+>
+  <template #empty-state-action-icon>
+    <AddIcon />
+  </template>
+</KTable>
 ```
 
-## Cell Attributes
-
-A prop to add custom properties to individual table cells or groups of cells. The cell attributes object is passed as a param.
-
-`cellAttrs` - This prop takes a function that returns an object comprising the attributes.
+### Error
 
-| Parameter   | Description                                         |
-| :---------- | :-------------------------------------------------- |
-| `headerKey` | The header key of the column containing the cell    |
-| `row`       | The contents of the row containing the cell         |
-| `rowIndex`  | The zero-based index of the row containing the cell |
-| `colIndex`  | The zero-based index of the cell within a row       |
+Set the `error` prop to `true` to enable the error state.
 
-<KTable :headers="tableOptionsCellAttrsHeaders" :fetcher="tableOptionsCellAttrsFetcher" :cellAttrs="cellAttrsFn" />
+<KTable
+  error
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+/>
 
 ```html
-<template>
-  <KTable :fetcher="fetcher" :headers="headers" :cellAttrs="cellAttrsFn" />
-</template>
+<KTable
+  error
+  :fetcher="fetcher"
+  :headers="headers"
+/>
+```
 
-<script>
-export default {
-  methods: {
-    cellAttrsFn ({ headerKey, row, rowIndex, colIndex }) {
-      /**
-       * Sets cell background color based on data returned in
-       * the row parameter and the index of the cell
-       */
-      const backgroundColor = () => {
-        if (row.company && row.company === 'Google') {
-          if (colIndex === 0) {
-            return '#4285F4'
-          } else if (colIndex === 1) {
-            return '#DB4437'
-          } else {
-            return '#F4B400'
-          }
-        }
+Set the following properties to customize error state:
 
-        return ''
-      }
+- `errorStateTitle` - Title text for error state
+- `errorStateMessage` - Message for error state
+- `errorStateActionMessage` - Button text for error state action
+- `errorStateActionRoute` - Route for error state action
 
-      /**
-       * Returns an object of attributes to be applied to cells
-       */
-      return {
-        class: {
-          'truncated-keys': headerKey === 'description' || headerKey === 'name',
-        },
-        'datatest-id': `row-${rowIndex + 1}-col-${headerKey}`,
-        style: {
-          'maxWidth': headerKey === 'description' ? '50ch' : headerKey === 'name' ? '22ch' : '25ch',
-          'backgroundColor': backgroundColor(),
-        },
-      }
-    }
-  }
-}
-</script>
+A `error-action-click` event is fired when error state action button is clicked.
 
-<style lang="scss">
-.truncated-keys {
-  line-height: initial;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
-```
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+  error
+  error-state-title="Something went wrong"
+  error-state-message="Error loading data."
+  error-state-action-message="Report an Issue"
+  error-state-action-route="/"
+/>
 
-## Events
+```html
+<KTable
+  error
+  :fetcher="fetcher"
+  :headers="headers"
+  error-state-title="Something went wrong"
+  error-state-message="Error loading data."
+  error-state-action-message="Report an Issue"
+  error-state-action-route="/"
+/>
+```
 
-Bind DOM [events](https://developer.mozilla.org/en-US/docs/Web/Events) to various parts of the table. We support events on both table rows and cells, but must be careful with clickable content in rows when row click is enabled. You can also add logic to check for `metakey` to support cmd/ctrl when clicking. Examples highlighted below.
+## Slots
 
-::: tip NOTE
-Styles and other accessibility-related attributes to indicate whether a row can be clicked are automatically applied when a value that does not evaluate to `undefined` is provided for an event handler.
+### column-header
 
-If you want to conditionally apply an event handler to `@row:click`, the value must evaluate to either a callback function, or `undefined`.
+You can slot in your custom content into each column header. For that, use column `key` value prefixed with `column-*` like in the example below.
 
-If you always provide a function as the value for `@row:click` the table will not be able to correctly determine whether the row should be clickable without executing the callback.
+Slot props:
+* `column` - column header object
 
-<h4><KIcon icon="check" size="22" color="green" style="vertical-align: sub;" class="horizontal-spacing" />Correct Usage</h4>
+:::tip NOTE
+Header slot container is a `display: flex;` element that takes care of spacing between slotted items so you can slot in your items without having to worry about adding margin between them.
+:::
 
-```
-@row:click="isAllowedBool ? handleRowClick : undefined"
-```
-
-<h4><KIcon icon="disabled" size="22" color="red" style="vertical-align: sub;" class="horizontal-spacing" />Incorrect Usage</h4>
-
-```
-@row:click="(evt, row) => isAllowedBool ? handleRowClick(evt, row) : undefined"
-```
-
-:::
-
-### Rows
-
-`@row:{event}` - returns the `Event`, the row item, and the type: `row`
-`row-click` - Event is emitted whenever a row is clicked and the row handler is fired, returns the row `data`
-
-To avoid firing row clicks by accident, the row click handler ignores events coming from `a`, `button`, `input`, and `select` elements (unless they have the `disabled` attribute). As such click handlers attached to these element types do not require stopping propagation via `@click.stop`.
-
-<KInputSwitch v-model="enableRowClick" :label="enableRowClick ? 'Row clicks enabled' : 'Row clicks disabled'" />
-
-<KTable :headers="tableOptionsLinkHeaders" :fetcher="tableOptionsLinkFetcher" @row:click="enableRowClick ? handleRowClick : undefined">
-  <template #company="{ rowValue }">
-    <a @click="linkHander">{{rowValue.label}}</a>
-  </template>
-  <template #actions>
-    <div>
-      <KButton appearance="secondary" @click="buttonHandler">
-        Fire Button Handler!
-      </KButton>
-    </div>
-  </template>
-  <template #input>
-    <KInput type="text" placeholder="Need help?" />
-    <KInput type="text" placeholder="Row click me" disabled />
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+>
+  <template #column-email="{ column }">
+    {{ column.label }} <KBadge>Beta</KBadge>
   </template>
 </KTable>
 
 ```html
-<KInputSwitch v-model="enableRowClick" :label="enableRowClick ? 'Row clicks enabled' : 'Row clicks disabled'" />
-
 <KTable
   :fetcher="fetcher"
   :headers="headers"
-  @row:click="enableRowClick ? handleRowClick : undefined">
-  <template #company="{rowValue}">
-    <!-- .stop not needed on @click because we ignore clicks from anchors -->
-    <a @click="linkHander">{{rowValue.label}}</a>
-  </template>
-  <template #actions>
-    <div>
-      <!-- .stop not needed on @click because we ignore clicks from buttons -->
-      <KButton
-        appearance="secondary"
-        @click="buttonHandler">
-        Fire Button Handler!
-      </KButton>
-    </div>
-  </template>
-  <template #input>
-    <!-- no special handling needed because click events on input elements are ignored -->
-    <KInput type="text" placeholder="Need help?" />
-    <!-- row click is triggered when clicking disabled elements -->
-    <KInput type="text" placeholder="Row click me" disabled />
+>
+  <template #column-email="{ column }">
+    {{ column.label }} <KBadge>Beta</KBadge>
   </template>
 </KTable>
-
-<script>
-export default {
-  data() {
-    return {
-      row: null,
-      eventType: ''
-    }
-  },
-  methods: {
-    handleRowClick(e, row) {
-      const metaKeyPressed = e.metaKey || e.ctrlKey
-
-      if (metaKeyPressed) {
-        this.$toaster.open('MetaKey row click')
-      } else {
-        this.$toaster.open('Row click event fired!')
-      }
-    },
-    linkHander (e) {
-      alert('a link was clicked')
-    },
-    buttonHandler (e) {
-      alert('a button was pressed')
-    }
-  }
-}
-</script>
 ```
 
-Click events tied to non-ignored elements (not `a`, `button`, `input`, `select`) must use the `.stop` keyword to stop propagation firing the row click handler.
+### cell
 
-Using a `KPop` inside of a clickable row requires some special handling. Non-clickable content must be wrapped in a `div` with the `@click.stop` attribute to prevent the row click handler from firing if a user clicks content inside of the popover. Any handlers on non-ignored elements will need to have `.stop`.
+You can slot in each individual cell content. Each cell slot is name after the `key` it corresponds to.
 
-<KTable :headers="tableOptionsLinkHeaders2" :fetcher="tableOptionsLinkFetcher" @row:click="handleRowClick">
-  <template #company="{rowValue}">
-    <a @click="linkHander">{{rowValue.label}}</a>
-  </template>
-  <template #wrapped>
-    <div>Row click event <div class="eventful-row" @click.stop="buttonHandler"><KBadge appearance="success">Button click</KBadge></div></div>
-  </template>
-  <template #other>
-    <div>
-      <KPop title="Cool header">
-        <KButton appearance="tertiary">
-          <template #icon>
-            <KIcon
-              icon="more"
-              color="grey"
-              size="16"
-            />
-          </template>
-        </KButton>
-        <template #content>
-          <div @click.stop>Clicking me does nothing!</div>
-          <div @click.stop="buttonHandler"><KBadge appearance="success">Button click</KBadge></div>
-        </template>
-      </KPop>
-    </div>
-  </template>
-</KTable>
+Slot props:
+* `row` - table row object
+* `rowKey` - table row index
+* `rowValue` - the cell value
 
-```html
 <KTable
-  :fetcher="fetcher"
-  :headers="headers"
-  @row:click="handleRowClick">
-  <template #company="{rowValue}">
-    <a @click="linkHander">{{rowValue.label}}</a>
-  </template>
-  <template #wrapped>
-    <!-- We have a click event on a div, div clicks are not ignored so we need .stop -->
-    <div>Row click event <div @click.stop="buttonHandler"><KBadge appearance="success">Button click</KBadge></div></div>
+  :fetcher="basicFetcher"
+  :headers="basicHeaders(true)"
+  :row-hover="false"
+>
+  <template #email="{ rowValue }">
+    <KCopy :text="rowValue" />
   </template>
-  <template #other>
-    <div>
-      <KPop title="Cool header">
-        <KButton appearance="tertiary">
+  <template #actions>
+    <KDropdown>
+      <template #default>
+        <KButton
+          appearance="tertiary"
+          size="small"
+        >
           <template #icon>
-            <KIcon
-              icon="more"
-              color="grey"
-              size="16"
-            />
+            <MoreIcon />
           </template>
         </KButton>
-        <template #content>
-          <!-- non-clickable content in a KPop MUST be wrapped in a div with @click.stop to prevent row click firing on content click -->
-          <div @click.stop>Clicking me does nothing!</div>
-          <!-- an example where we want a click event to fire from the popover, requires .stop on the @click -->
-          <div @click.stop="buttonHandler"><KBadge appearance="success">Button click</KBadge></div>
-        </template>
-      </KPop>
-    </div>
-  </template>
-</KTable>
-```
-
-### Cells
-
-`@cell:{event}` - returns the `Event`, the cell value, and the type: `cell`
-`cell-click` - Event is emitted whenever a cell is clicked and the cell handler is fired, returns the cell `data`
-
-<template>
-  <div>
-    <div v-if="eventType">
-      {{eventType}} on: {{row}}
-    </div>
-    <div v-else>Waiting</div>
-    <KTable
-      :headers="tableOptionsHeaders"
-      :fetcher="tableOptionsFetcher"
-      @row:click="actionRow"
-      @cell:mouseover="actionRow"
-    />
-  </div>
-</template>
-
-#### Example
-
-```html
-<template>
-  <div>
-    <div v-if="eventType">
-      {{eventType}} on: {{row}}
-    </div>
-    <div v-else>Waiting</div>
-    <KTable
-      :fetcher="fetcher"
-      :headers="headers"
-      @row:click="actionRow"
-      @cell:mouseover="actionRow"
-    />
-  </div>
-</template>
-
-<template>
-  <KCard>
-    <template #default>
-      <div v-if="eventType">
-        {{eventType}} on: {{row}}
-      </div>
-      <div v-else>Waiting</div>
-      <KTable
-        :fetcher="fetcher"
-        :headers="headers"
-        has-hover
-        @row:click="actionRow"
-        @cell:mouseover="actionRow"
-      />
-    </template>
-  </KCard>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      row: null,
-      eventType: ''
-    }
-  },
-  methods: {
-    actionRow (e, row, type) {
-      this.eventType = e.type
-      this.row = row
-    }
-  }
-}
-</script>
-```
-
-### Other Events
-
-#### Sorting
-
-`@sort` - Fired when the user clicks on a sortable column heading
-
-Returns a payload that containing information about the sort action:
-
-```json
-{
-  /** The previous column to sort by's `key` defined in the table headers */
-  prevKey: string,
-  /** The current column to sort by's `key` defined in the table headers */
-  sortColumnKey: string,
-  /** The order by which to sort the column, one of `asc` or `desc` */
-  sortColumnOrder: 'asc' | 'desc'
-}
-```
-
-#### Table Preferences
-
-`@update:table-preferences` - Fired when the user changes the table's `pageSize`, `sortColumnKey`, or `sortColumnOrder`.
-
-Returns a payload that adheres to the `TablePreferences` interface:
-
-```ts
-interface TablePreferences {
-  /** The number of items to display per page */
-  pageSize?: number
-  /** The column to sort by's `key` defined in the table headers */
-  sortColumnKey?: string
-  /** The order by which to sort the column, one of `asc` or `desc` */
-  sortColumnOrder?: 'asc' | 'desc'
-  /** The customized column widths, if resizing is allowed */
-  columnWidths?: Record<string, number>
-  /** Column visibility, if visibility is toggleable */
-  columnVisibility?: Record<string, boolean>
-}
-```
-
-#### Table State
-
-`@state` - Fired when the table state changes.
-
-Returns the `state` and `hasData` (boolean) of the table, `state` can be one of:
-- `loading` - when the table is fetching new table data
-- `error` - when the table fetch failed
-- `success` - when the table fetch completed successfully
-
-## Slots
-
-### Toolbar
-
-The `toolbar` slot allows you to slot table controls rendered right above the `<table>` element such as a search input or other UI elements. It provides the [SWRV](https://docs-swrv.netlify.app/) `state` and `hasData` in the slot param.
-
-```ts
-{
-  state: {
-    hasData: boolean
-    state: string
-  }
-}
-```
-
-If utilizing multiple elements, we recommend adding `display: flex; width: 100%;` to the root slot tag.
-
-<KTable :fetcher="tableOptionsFetcher" :headers="tableOptionsHeaders" :hasHover="false">
-  <template #toolbar="{ state }">
-    <div class="toolbar-container">
-      <KInput v-if="state.hasData" placeholder="Search" />
-      <KSelect appearance="select" :items="[{ label: 'First option', value: '1', selected: true }, { label: 'Another option', value: '2'}]" />
-    </div>
-  </template>
-</KTable>
-
-```html
-<KTable :fetcher="fetcher" :headers="headers">
-  <template #toolbar="{ state }">
-    <div class="toolbar-container">
-      <KInput v-if="state.hasData" placeholder="Search" />
-      <KSelect appearance="select" :items="[{ label: 'Ascending', value: 'asc', selected: true }, { label: 'Descending', value: 'desc'}]" />
-    </div>
-  </template>
-</KTable>
-
-<style lang="scss">
-.toolbar-container {
-  display: flex;
-  justify-content: space-between;
-}
-</style>
-```
-
-### Column Header and Cell
-
-Both column cells & header cells are slottable in KTable. Use slots to gain access to the row data.
-
-- `column-{column-key}` - Will slot the header cell
-- `{column-key}` - Will slot the column cell of a given row
-
-#### Column Header
-
-<KTable :headers="tableOptionsHeaders" :fetcher="tableOptionsFetcher">
-  <template #column-name="{ column }">
-    {{ column.label.toUpperCase() }}
+      </template>
+      <template #items>
+        <KDropdownItem>
+          Edit
+        </KDropdownItem>
+        <KDropdownItem
+          danger
+          has-divider
+        >
+          Delete
+        </KDropdownItem>
+      </template>
+    </KDropdown>
   </template>
 </KTable>
 
-```html
-<template>
-  <KTable :fetcher="fetcher" :headers="headers">
-    <!-- Slot column header "name" -->
-    <template #column-name="{ column }">
-      {{ column.label.toUpperCase() }}
-    </template>
-  </KTable>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      headers: [
-        { key: 'name', label: 'Name', sortable: false },
-        { key: 'id', label: 'ID', sortable: false },
-        { key: 'enabled', label: 'Enabled', sortable: false }
-      ]
-    }
-  }
-}
-</script>
-```
-
-#### Column Cell
-
-This example uses the [`KDropdown`](/components/dropdown) component as the slot content for the `actions` column.
-
-<div>
-  <KTable
-    :headers="tableOptionsHeaders"
-    :fetcher="tableOptionsFetcher">
-    <template #enabled="{rowValue}">
-      <span v-if="rowValue" style="color: green">&#10003;</span>
-      <span v-else style="color: red">&#10007;</span>
-    </template>
-    <template #actions>
-      <KDropdown>
-        <template #default>
-          <KButton
-            appearance="tertiary"
-            size="small"
-          >
-            <template #icon>
-              <KIcon
-                icon="more"
-                color="grey"
-                size="16"
-              />
-            </template>
-          </KButton>
-        </template>
-        <template #items>
-          <KDropdownItem @click="clickHandler('Edit clicked!')">
-            Edit
-          </KDropdownItem>
-          <KDropdownItem
-            has-divider
-            danger
-            @click="clickHandler('Delete clicked!')"
-          >
-            Delete
-          </KDropdownItem>
-        </template>
-      </KDropdown>
-    </template>
-  </KTable>
-</div>
-
-```html
+```vue
 <template>
   <KTable
     :fetcher="fetcher"
     :headers="headers"
+    :row-hover="false"
   >
-    <!-- Slot each "enabled" cell in each row & add icon if matching value -->
-    <template #enabled="{rowValue}">
-      <span v-if="rowValue" style="color: green">&#10003;</span>
-      <span v-else style="color: red">&#10007;</span>
+    <template #email="{ rowValue }">
+      <KCopy :text="rowValue" />
     </template>
-    <!-- Slot each "actions" cell in each row & link -->
     <template #actions>
       <KDropdown>
         <template #default>
@@ -1121,22 +593,17 @@ This example uses the [`KDropdown`](/components/dropdown) component as the slot
             size="small"
           >
             <template #icon>
-              <KIcon
-                icon="more"
-                color="grey"
-                size="16"
-              />
+              <MoreIcon />
             </template>
           </KButton>
         </template>
         <template #items>
-          <KDropdownItem @click="clickHandler('Edit clicked!')">
+          <KDropdownItem>
             Edit
           </KDropdownItem>
           <KDropdownItem
-            has-divider
             danger
-            @click="clickHandler('Delete clicked!')"
+            has-divider
           >
             Delete
           </KDropdownItem>
@@ -1146,975 +613,414 @@ This example uses the [`KDropdown`](/components/dropdown) component as the slot
   </KTable>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      headers: [
-        { key: 'name', label: 'Name', sortable: false },
-        { key: 'id', label: 'ID', sortable: false },
-        { key: 'enabled', label: 'Enabled', sortable: false }
-      ]
-    }
-  }
-}
-</script>
-```
-
-#### Built-in slot styles
-
-Here is another example of how to use slot to completely customize content inside the cell.
-
-::: tip TIP
-You can choose utilize the `.k-table-cell-title` and `.k-table-cell-description` classes within the slot as shown in the example below to leverage preconfigured multi-line styles.
-:::
-
-<div>
-  <KTable
-    :headers="cellSlotHeaders"
-    :fetcher="cellSlotFetcher"
-    :cellAttrs="cellSlotAttrs"
-    :enableClientSort="true"
-    hidePaginationWhenOptional
-    >
-    <template #name="{row}">
-      <img class="horizontal-spacing" src="/img/kong-logomark.png" :alt="row.img.alt">
-      <div>
-        <div class="k-table-cell-title">{{row.name}}</div>
-        <div class="k-table-cell-description">{{row.description}}</div>
-      </div>
-    </template>
-  </KTable>
-</div>
-
-```html
-<template>
-  <KTable
-    :cellAttrs="cellAttrsFn"
-    :enableClientSort="true"
-    :fetcher="fetcher"
-    :headers="headers"
-    hidePaginationWhenOptional
-  >
-    <template #name="{row}">
-      <img :alt="row.img.alt" :src="row.img.src">
-      <div>
-        <div class="k-table-cell-title">{{ row.name }}</div>
-        <div class="k-table-cell-description">{{ row.description }}</div>
-      </div>
-    </template>
-  </KTable>
-</template>
+<script setup lang="ts">
+const headers = [
+  { key: 'name', label: 'Full Name' },
+  { key: 'username', label: 'Username' },
+  { key: 'email', label: 'Email' },
+  { key: 'actions', label: 'Row actions', hideLabel: true },
+]
 
-<script>
-export default {
-  data() {
-    return {
-      headers: [
-        { label: 'Name', key: 'name', sortable: true },
-        { label: 'ID', key: 'id' },
-        { label: 'Enabled', key: 'enabled' }
-      ],
-    }
-  },
-  methods: {
-    fetcher() {
-      return {
-        data: [
-          {
-            name: 'Basic Auth',
-            img: {
-              src: '/img/kong-logo.png',
-              alt: 'Basic Auth Icon',
-            },
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-            id: '517526354743085',
-            enabled: 'true',
-          },
-          {
-            name: 'Website Desktop',
-            img: {
-              src: '/img/kong-logo.png',
-              alt: 'Website Desktop Icon',
-            },
-            description: 'Ut enim ad minim veniam',
-            id: '328027447731198',
-            enabled: 'false',
-          },
-          {
-            name: 'Android App',
-            img: {
-              src: '/img/kong-logo.png',
-              alt: 'Android App Icon',
-            },
-            description: 'Excepteur sint occaecat cupidatat non proident',
-            id: '405383051040955',
-            enabled: 'true',
-          },
-        ],
-      }
-    },
-    cellAttrsFn({ headerKey }) {
-      if (headerKey === 'name') {
-        return { class: 'custom-layout-cell' }
-      }
-    },
-  },
+const fetcher = () => {
+  // fetcher logic
 }
 </script>
-
-<style lang="scss">
-.k-table {
-  td.custom-layout-cell {
-    display: flex;
-  }
-}
-</style>
 ```
 
-### State Slots
+### toolbar
 
-KTable has built-in state management for loading, empty, and error states. You can either use the props described in
-the section below or completely slot in your own content.
+Toolbar is rendered directly above the table. Useful for slotting table controls like search or filter fields.
 
-- `empty-state` - Slot content to be displayed when empty
-- `error-state` - Slot content to be displayed when in an error state
-- `empty-state-action-icon` - Slot for slotting an icon to be rendered to the left of button text in empty state action button
+Slot props:
+* `state` - table state object (refer to [`state` event docs](#state) for more details)
 
-<KCard>
-  <template #default>
-    <KTable :fetcher="emptyFetcher" :headers="headers">
-      <template #empty-state>
-        <div style="text-align: center;">
-          <KIcon icon="warning" />
-          <div>No Content!!!</div>
-        </div>
-      </template>
-      <template #error-state>
-        <KIcon icon="error" />
-        Something went wrong
+:::tip NOTE
+Toolbar slot container is a `display: flex;` element that takes care of spacing between slotted items so you can slot in your items without having to worry about adding margin between them.
+:::
+
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+>
+  <template #toolbar>
+    <KInput placeholder="Search">
+      <template #before>
+        <SearchIcon />
       </template>
-    </KTable>
+    </KInput>
+    <KButton size="large">
+      <AddIcon /> Add user
+    </KButton>
   </template>
-</KCard>
+</KTable>
 
 ```html
-<template>
-  <KTable :fetcher="() => { return { data: [] } }" :headers="headers">
-    <template #empty-state>
-      <KIcon icon="warning" />
-      No Content!!!
-    </template>
-    <template #error-state>
-      <KIcon icon="error" />
-      Something went wrong
-    </template>
-  </KTable>
-</template>
+<KTable
+  :fetcher="fetcher"
+  :headers="headers"
+>
+  <template #toolbar>
+    <KInput placeholder="Search">
+      <template #before>
+        <SearchIcon />
+      </template>
+    </KInput>
+    <KButton size="large">
+      <AddIcon /> Add user
+    </KButton>
+  </template>
+</KTable>
 ```
 
-## States
+### empty-state
 
-### Empty
+Slot content to be displayed when empty.
 
-Set the following properties to handle empty state:
+### empty-state-action-icon
 
-- `emptyStateTitle` - Title text for empty state
-- `emptyStateMessage` - Message for empty state
-- `emptyStateActionRoute` - Route for empty state action
-- `emptyStateActionMessage` - Button text for empty state action
-- `emptyStateIconVariant` - Prop set empty state icon variant. See [KEmptyState component docs](/components/empty-state#iconvariant) for details
+Slot for icon to be displayed in front of action button text in empty state. See [empty state](#empty) section for example of usage of this slot.
 
-If using a CTA button, a `@ktable-empty-state-cta-clicked` event is fired when clicked.
+### error-state
 
-#### Default Empty State Messaging
+Slot content to be displayed when in error state.
 
-<br/>
-<KCard>
-  <template #default>
-    <KTable :fetcher="() => { return { data: [] } }" />
-  </template>
-</KCard>
+## Events
 
-```html
-<template>
-  <KCard>
-    <template #default>
-      <KTable :fetcher="fetcher" :headers="headers" />
-    </template>
-  </KCard>
-</template>
-```
+### Row events
+
+`@row:{event}` - returns the `Event`, the row item, and the type. `row-click` event is emitted whenever a row is clicked and the row click event handler is fired, returns the row `data`.
 
-#### Empty State Full Example
+To avoid firing row clicks by accident, the row click handler ignores events coming from `a`, `button`, `label`, `input`, and `select` elements (unless they have the `disabled` attribute). As such click handlers attached to these element types do not require stopping propagation via `@click.stop`.
 
-<br/>
-<KCard>
-  <template #default>
+<KComponent v-slot="{ data }" :data="{ rowClickEnabled: true }">
+  <div class="vertical-container">
+    <KInputSwitch
+      v-model="data.rowClickEnabled"
+      label="Row clicks"
+    />
     <KTable
-      :fetcher="() => { return { data: [] } }"
-      emptyStateTitle="No Workspaces exist"
-      emptyStateMessage="Adding a new Workspace will populate this table."
-      emptyStateActionMessage="Create a Workspace"
-      emptyStateActionButtonIcon="plus"
-      emptyStateActionRoute="#empty-state-full-example"
-      empty-state-icon-variant="kong">
-      <template #empty-state-action-icon>
-        <AddIcon />
+      :fetcher="numberedColumnsFetcher"
+      :headers="numberedHeaders"
+      hide-pagination-when-optional
+      @row:click="data.rowClickEnabled ? onRowClick : undefined"
+    >
+      <template #column1>
+        <KButton @click="onButtonClick">Fire button click handler</KButton>
+      </template>
+      <template #column2>
+        <KInput label="Table input" />
+      </template>
+      <template #column3>
+        <KExternalLink href="https://kongponents.konghq.com/">External link</KExternalLink>
       </template>
     </KTable>
-  </template>
-</KCard>
+  </div>
+</KComponent>
 
 ```html
-<!-- Using a route string -->
-<template>
-  <KCard>
-    <template #default>
-      <KTable
-        :fetcher="fetcher"
-        :headers="headers"
-        emptyStateTitle="No Workspaces exist"
-        emptyStateMessage="Adding a new Workspace will populate this table."
-        emptyStateActionMessage="Create a Workspace"
-        emptyStateActionButtonIcon="plus"
-        emptyStateActionRoute="create-workspace"
-        empty-state-icon-variant="kong">
-        <template #empty-state-action-icon>
-          <AddIcon />
-        </template>
-      </KTable>
-    </template>
-  </KCard>
-</template>
-
-<!-- Using a route object -->
-<template>
-  <KCard>
-    <template #default>
-      <KTable
-        :fetcher="fetcher"
-        :headers="headers"
-        emptyStateTitle="No Workspaces exist"
-        emptyStateMessage="Adding a new Workspace will populate this table."
-        emptyStateActionMessage="Create a Workspace"
-        emptyStateActionRoute="{
-          name: 'create-workspace',
-          params: {
-            organizationId: 'd27e40e0-c9ac-43e2-8be8-54862fab45ea'
-          }
-        }"
-        empty-state-icon-variant="kong">
-        <template #empty-state-action-icon>
-          <AddIcon />
-        </template>
-      </KTable>
-    </template>
-  </KCard>
-</template>
+<KTable
+  :fetcher="fetcher"
+  :headers="headers"
+  @row:click="onRowClick"
+/>
 ```
 
-### Error
-
-Set the following properties to handle error state:
+### Cell events
 
-- `hasError` - Boolean to toggle error state
-- `errorStateTitle` - Title text for error state
-- `errorStateMessage` - Message for error state
-- `errorStateIcon` - Icon for error state
-- `errorStateIconColor` - Color for error state icon
-- `errorStateIconSize` - Size for error state icon
-- `errorStateActionRoute` - Route for error state action
-- `errorStateActionMessage` - Button text for error state action
+`@cell:{event}` - returns the `Event`, the cell value, and the type. `cell-click` event is emitted whenever a cell is clicked and the cell click event handler is fired, returns the cell `data`.
 
-If using a CTA button, a `ktable-error-cta-clicked` event is fired when clicked.
-
-#### Default Error State Messaging
-
-<br/>
-<KCard>
-  <template #default>
-    <KTable :fetcher="() => { return { data: [] } }" :hasError="true" />
-  </template>
-</KCard>
-
-```html
-<template>
-  <KCard>
-    <template #default>
-      <KTable :fetcher="fetcher" :headers="headers" :hasError="true" />
-    </template>
-  </KCard>
-</template>
-```
-
-#### Error State Full Example
-
-<br/>
-<KCard>
-  <template #default>
+<KComponent v-slot="{ data }" :data="{ cellClickEnabled: true }">
+  <div class="vertical-container">
+    <KInputSwitch
+      v-model="data.cellClickEnabled"
+      label="Cell clicks"
+    />
     <KTable
-      :fetcher="() => { return { data: [] } }"
-      :hasError="true"
-      errorStateTitle="Something went wrong"
-      errorStateMessage="We are not able to load the data for this table."
-      errorStateActionMessage="Report an Issue"
-      errorStateActionRoute="#error-state-full-example"
-      errorStateIcon="dangerCircle"
-      errorStateIconColor="#e6173a"
-      errorStateIconSize="35" />
-  </template>
-</KCard>
+      :fetcher="numberedColumnsFetcher"
+      :headers="numberedHeaders"
+      hide-pagination-when-optional
+      @cell:click="data.cellClickEnabled ? onCellClick : undefined"
+    >
+      <template #column1>
+        <KButton @click="onButtonClick">Fire button click handler</KButton>
+      </template>
+      <template #column2>
+        <KInput label="Table input" />
+      </template>
+      <template #column3>
+        <KExternalLink href="https://kongponents.konghq.com/">External link</KExternalLink>
+      </template>
+    </KTable>
+  </div>
+</KComponent>
 
 ```html
-<!-- Using a route string -->
-<template>
-  <KCard>
-    <template #default>
-      <KTable
-        :fetcher="fetcher"
-        :headers="headers"
-        :hasError="true"
-        errorStateTitle="Something went wrong"
-        errorStateMessage="We are not able to load the data for this table."
-        errorStateActionMessage="Report an Issue"
-        errorStateActionRoute="report-issue"
-        errorStateIcon="dangerCircle"
-        errorStateIconColor="#e6173a"
-        errorStateIconSize="35" />
-    </template>
-  </KCard>
-</template>
-
-<!-- Using a route object -->
-<template>
-  <KCard>
-    <template #default>
-      <KTable
-        :fetcher="fetcher"
-        :headers="headers"
-        :hasError="true"
-        errorStateTitle="Something went wrong"
-        errorStateMessage="We are not able to load the data for this table."
-        errorStateActionMessage="Report an Issue"
-        errorStateActionRoute="{
-          name: 'report-issue',
-          params: {
-            organizationId: 'd27e40e0-c9ac-43e2-8be8-54862fab45ea'
-          }
-        }"
-        errorStateIcon="dangerCircle"
-        errorStateIconColor="#e6173a"
-        errorStateIconSize="35" />
-    </template>
-  </KCard>
-</template>
+<KTable
+  :fetcher="fetcher"
+  :headers="headers"
+  @cell:click="onCellClick"
+/>
 ```
 
-### Loading
+### sort
 
-Set the `isLoading` prop to `true` to enable the loading state.
+Fired when user clicks on a sortable column heading. Event payload is object of type `TableSortPayload`:
 
-<KCard>
-  <template #default>
-    <KTable
-      :fetcher="() => { return { data: [] } }"
-      :isLoading="true"
-      class="my-0" />
-  </template>
-</KCard>
-
-```html
-<template>
-<KCard>
-  <template #default>
-    <KTable
-      :fetcher="fetcher"
-      :headers="headers"
-      :isLoading="true" />
-  </template>
-</KCard>
-</template>
+```ts
+interface TableSortPayload {
+  prevKey: string
+  sortColumnKey: string
+  sortColumnOrder: string
+}
 ```
 
-## Server-side functions
+### state
 
-Pass a fetcher function to enable server-side search, sort and pagination. The fetcher function should structure the ajax request URL in such a way that enables server side sort, search and pagination per the requirements of the API being used.
+Fired when the table state changes. Returns an object of type `TableStatePayload`:
 
-::: tip NOTE
-The loading state is handled automatically. When the `fetcher` is called the internal loading state is triggered and will be resolved when the fetcher returns. You can override this behavior using the `isLoading` prop.
-:::
-
-<KTable :fetcher="fetcher" :headers="headers" />
+```ts
+interface TableStatePayload {
+  state: TableState
+  hasData: boolean
+}
 
+type TableState = 'loading' | 'error' | 'success' | 'empty'
 ```
-Example URL
 
-https://kongponents.dev/api/components?_page=1&_limit=10&_sort=name&_order=desc
-```
+### empty-state-action-click
 
-```html
-<!-- Example Component Usage -->
+Emitted when empty state action button is clocked.
 
-<KCard>
-  <template #default>
-    <KInput placeholder="Search" v-model="search" type="search" />
-    <KTable
-      cache-identifier="server-side-functions-table"
-      :fetcher="fetcher"
-      :initial-fetcher-params="{
-        pageSize: 15,
-        page: 1,
-        query: '',
-        sortColumnKey: '',
-        sortColumnOrder: ''
-      }"
-      :headers="[
-        { label: 'Title', key: 'title', sortable: true },
-        { label: 'Description', key: 'description', sortable: true },
-        { label: 'Enabled', key: 'enabled', sortable: false }
-      ]"
-      :search-input="search"
-    />
-  </template>
-</KCard>
-```
+### error-action-click
 
-```js
-// Example Fetcher Function
+Emitted when error state action button is clicked.
 
-fetcher(payload) {
-  const { pageSize, page, query, sortColumnKey, sortColumnOrder, offset } = payload
+### update:table-preferences
 
-  const params = {
-    _limit: pageSize,
-    _page: page
-  }
+Fired when the user changes the table's page size, performs sorting, resizes columns or toggles column visibility. Event payload is object of type `TablePreferences` interface (see [`tablePreferences` prop](#tablepreferences) for details).
 
-  if (query) {
-    params.q = query
-    params._page = 1
-  }
+<script setup lang="ts">
+import { AddIcon, SearchIcon, MoreIcon } from '@kong/icons'
+import { getCurrentInstance } from 'vue'
 
-  if (sortKey) {
-    params._sort = sortColumnKey
-    params._order = sortColumnOrder
-  }
+const $toaster = getCurrentInstance()?.appContext.config.globalProperties.$toaster
 
-  if (offset) {
-    params._offset = offset
+const basicHeaders = (actions: boolean = false, sortable: string | null = null, hidable: string | null = null) => {
+  const keys = {
+    name: { 
+      key: 'name',
+      label: 'Full Name'
+    },
+    username: {
+      key: 'username',
+      label: 'Username' 
+    },
+    email: { 
+      key: 'email',
+      label: 'Email' 
+    },
+    ...(actions && { 
+      actions: {
+        key: 'actions',
+        label: 'Row actions',
+        hideLabel: true
+      },
+    })
   }
 
-  return axios.get('/user_list', {
-    baseURL: 'https://kongponents.dev/api',
-    params
-  }).then(res => {
-    return {
-      total: res.total,
-      data: res.data
+  const headers = []
+  for (const [key, value] of Object.entries(keys)) {
+    if ((!sortable && !hidable) || (sortable !== key && hidable !== key)) {
+      headers.push({ ...value })
+    } else if (sortable && sortable === key) {
+      headers.push({ ...value, sortable: true, useSortHandlerFunction: true })
+    } else if (hidable && hidable === key) {
+      headers.push({ ...value, hidable: true })
     }
-  })
+  }
+
+  return headers
 }
-```
 
-<!-- The markdownlint disable below is necessary due to some syntax in the <script> tags - `yarn lint` will not pass without this -->
-<!-- markdownlint-disable MD011 MD037 -->
+const basicFetcher = async (): Promise<any> => {
+  // Fake delay
+  await new Promise((resolve) => setTimeout(resolve, 2000))
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { AddIcon } from '@kong/icons'
+  const response = await fetch('https://jsonplaceholder.typicode.com/users')
+  const responseData = await response.json()
 
-export default defineComponent({
-  components: {
-    AddIcon
-  },
-  data() {
-    return {
-      row: null,
-      eventType: '',
-      enableRowClick: true,
-      offsetPaginationPageSize: 15,
-      offsetPaginationData: {},
-      hidablePreferences: {},
-      headers: [
-        { label: 'Title', key: 'title', sortable: true },
-        { label: 'Description', key: 'description', sortable: true },
-        { label: 'Enabled', key: 'enabled', sortable: false }
-      ],
-      resizeHeaders: [
-        { label: 'Name', key: 'name' },
-        { label: 'ID', key: 'id' },
-        { label: 'Enabled', key: 'enabled' },
-      ],
-      tableOptionsHeaders: [
-        { label: 'Name', key: 'name' },
-        { label: 'ID', key: 'id' },
-        { label: 'Enabled', key: 'enabled' },
-        { key: 'actions', hideLabel: true }
-      ],
-      hideColumnHeaders: [
-        { label: 'Host', key: 'hostname' },
-        { label: 'Version', key: 'version' },
-        { label: 'Connected', key: 'connected' },
-        { label: 'Last Ping', key: 'last_ping', hidable: true },
-        { label: 'Last Seen', key: 'last_seen', hidable: true },
-      ],
-      tableOptionsRowAttrsHeaders: [
-        { label: 'Type', key: 'type' },
-        { label: 'Value', key: 'value' },
-        { label: 'Enabled', key: 'enabled'}
-      ],
-      tableOptionsLinkHeaders: [
-        { label: 'Company', key: 'company' },
-        { label: 'Input', key: 'input' },
-        { key: 'actions', hideLabel: true }
-      ],
-      tableOptionsLinkHeaders2: [
-        { label: 'Company', key: 'company' },
-        { label: 'Wrapped', key: 'wrapped' },
-        { label: 'Pop', key: 'other' }
-      ],
-      tableOptionsCellAttrsHeaders: [
-        { label: 'Name', key: 'name' },
-        { label: 'Company', key: 'company' },
-        { label: 'Description', key: 'description' }
-      ],
-      sortHandlerFnHeaders: [
-        { label: 'Host', key: 'hostname', sortable: true },
-        { label: 'Version', key: 'version', sortable: true },
-        { label: 'Connected', key: 'connected', sortable: true },
-        { label: 'Last Seen', key: 'last_seen', sortable: true, useSortHandlerFn: true }
-      ],
-      offsetPaginationHeaders: [
-        { label: 'Host', key: 'hostname', sortable: false },
-        { label: 'Version', key: 'version', sortable: false },
-        { label: 'Connected', key: 'connected', sortable: false },
-        { label: 'Last Seen', key: 'last_seen', sortable: false }
-      ],
-      cellSlotHeaders: [
-        { label: 'Name', key: 'name', sortable: true },
-        { label: 'ID', key: 'id' },
-        { label: 'Enabled', key: 'enabled' }
-      ]
-    }
-  },
-  methods: {
-    resolveAfter5MiliSec(count, pageSize, page, sortKey, sortOrder) {
-      // simulate pagination and sort
-      let limit = count
-      if ((pageSize *page) < count) {
-        limit = pageSize
-      }
-      let myItems = []
-      for (let i = ((page-1)* pageSize); i < limit; i++) {
-          let offset = sortOrder === 'asc' ? count-i : i+1
-          myItems.push({
-            title: "Item " + offset,
-            description: "The item's description for number " + offset,
-            enabled: offset % 2 === 0
-          })
-        }
+  return {
+    data: responseData,
+    total: responseData.length,
+  }
+}
 
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve(myItems);
-        }, 500);
-      });
-    },
-    async fetcher(payload) {
-      const params = {
-        _limit: payload.pageSize,
-        _page: payload.page,
-        data: await this.resolveAfter5MiliSec(20, payload.pageSize, payload.page, payload.sortColumnKey, payload.sortColumnOrder),
-        total: 20
-      }
-      return params
-    },
-    tableOptionsFetcher () {
-      return {
-        data: [
-          {
-            name: 'Basic Auth',
-            id: '517526354743085',
-            enabled: 'true'
-          },
-          {
-            name: 'Website Desktop',
-            id: '328027447731198',
-            enabled: 'false'
-          },
-          {
-            name: 'Android App',
-            id: '405383051040955',
-            enabled: 'true'
-          }
-        ]
-      }
+// use hardcoded response instead of basicFetcher when you need data in the table to match the data in the example
+// in case data returned by https://jsonplaceholder.typicode.com/users endpoint ever changes
+const hardcodedFetcher = async (): Promise<any> => {
+  // Fake delay
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  const responseData = [
+    {
+      id: 1,
+      name: 'Leanne Graham',
+      username: 'Bret',
+      email: 'Sincere@april.biz'
     },
-    emptyFetcher () {
-      return { data: [] }
-    },
-    tableHideColumnFetcher () {
-      return {
-        data: [{
-          id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-          version: '2.8.0.0-enterprise-edition',
-          hostname: '99e591ae3776',
-          last_ping: 1648855072,
-          connected: 'Disconnected',
-          last_seen: '6 days ago'
-        },
-        {
-          id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-          version: '2.7.0.0-enterprise-edition',
-          hostname: '19e591ae3776',
-          last_ping: 1649362660,
-          connected: 'Connected',
-          last_seen: '3 hours ago',
-        },
-        {
-          id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-          version: '2.8.1.0-enterprise-edition',
-          hostname: '79e591ae3776',
-          last_ping: 1649355460,
-          connected: 'Connected',
-          last_seen: '5 hours ago',
-        },
-        {
-          id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-          version: '2.6.0.0-enterprise-edition',
-          hostname: '89e591ae3776',
-          last_ping: 1648155072,
-          connected: 'Disconnected',
-          last_seen: '14 days ago'
-        }]
-      }
-    },
-    tableOptionsLinkFetcher () {
-      return {
-        data: [
-          { company: { href: 'http://www.creative.com', label: 'Creative Labs' } },
-          { company: { href: 'http://www.bang-olufsen.com', label: 'Bang&Olufsen' } },
-          { company: { href: 'http://www.klipsch.com', label: 'Klipsch' } },
-          { company: { href: 'http://www.bose.com', label: 'Bose'} },
-          { company: { href: 'http://www.sennheiser.com', label: 'Sennheiser'} }
-        ]
-      }
-    },
-    tableOptionsRowAttrsFetcher () {
-      return {
-        data: [
-          {
-            type: 'desktop',
-            value: 'Windows 10',
-            enabled: 'true'
-          },
-          {
-            type: 'phone',
-            value: 'LineageOS',
-            enabled: 'false'
-          },
-          {
-            type: 'tablet',
-            value: 'ipadOS',
-            enabled: 'true'
-          }
-        ]
-      }
-    },
-    tableOptionsCellAttrsFetcher() {
-      return {
-        data: [
-          {
-            name: 'SageMaker',
-            company: 'Amazon',
-            description: 'Amazon SageMaker is a fully-managed service that enables developers and data scientists to quickly and easily build, train, and deploy machine learning models at any scale. Amazon SageMaker removes all the barriers that typically slow down developers who want to use machine learning.',
-          },
-          {
-            name: 'Azure Machine Learning Studio',
-            company: 'Microsoft',
-            description: 'Azure Machine Learning Studio is a GUI-based integrated development environment for constructing and operationalizing Machine Learning workflow on Azure.',
-          },
-          {
-            name: 'IBM Watson Machine Learning',
-            company: 'IBM',
-            description: 'IBM Watson Studio accelerates the machine and deep learning workflows required to infuse AI into your business to drive innovation.',
-          },
-          {
-            name: 'TensorFlow',
-            company: 'Google',
-            description: 'TensorFlow is an open source software library for numerical computation using data flow graphs.',
-          },
-        ]
-      }
-    },
-    sortHandlerFn({ key, prevKey, sortColumnOrder, data}) {
-      return data.sort((a, b) => {
-        if (key === 'last_seen') {
-          if (sortColumnOrder === 'asc') {
-            if (a.last_ping < b.last_ping) {
-              return 1
-            } else if (a.last_ping > b.last_ping) {
-              return -1
-            }
-
-            return 0
-          } else {
-            if (a.last_ping < b.last_ping) {
-              return -1
-            } else if (a.last_ping > b.last_ping) {
-              return 1
-            }
-
-            return 0
-          }
-        }
-      })
-    },
-    sortHandlerFnFetcher() {
-      return {
-        data: [
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.8.0.0-enterprise-edition',
-            hostname: '99e591ae3776',
-            last_ping: 1648855072,
-            connected: 'Disconnected',
-            last_seen: '6 days ago'
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.7.0.0-enterprise-edition',
-            hostname: '19e591ae3776',
-            last_ping: 1649362660,
-            connected: 'Connected',
-            last_seen: '3 hours ago',
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.8.1.0-enterprise-edition',
-            hostname: '79e591ae3776',
-            last_ping: 1649355460,
-            connected: 'Connected',
-            last_seen: '5 hours ago',
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.6.0.0-enterprise-edition',
-            hostname: '89e591ae3776',
-            last_ping: 1648155072,
-            connected: 'Disconnected',
-            last_seen: '14 days ago'
-          },
-          {
-            id: '08cc7d81-a9d8-4ae1-a42f-8d4e5a919d07',
-            version: '2.8.2.0-enterprise-edition',
-            hostname: '59e591ae3776',
-            last_ping: 1649855072,
-            connected: 'Connected',
-            last_seen: 'Just now'
-          },
-        ]
-      }
+    {
+      id: 2,
+      name: 'Ervin Howell',
+      username: 'Antonette',
+      email: 'Shanna@melissa.tv'
     },
-    actionRow (e, row, type) {
-      this.eventType = e.type
-      this.row = row
+    {
+      id: 3,
+      name: 'Clementine Bauch',
+      username: 'Samantha',
+      email: 'Nathan@yesenia.net'
     },
-    handleRowClick(e, row) {
-      const metaKeyPressed = e.metaKey || e.ctrlKey
-
-      if (metaKeyPressed) {
-        this.$toaster.open('MetaKey row click')
-      } else {
-        this.$toaster.open('Row click event fired!')
-      }
+    {
+      id: 4,
+      name: 'Patricia Lebsack',
+      username: 'Karianne',
+      email: 'Julianne.OConner@kory.org'
     },
-    linkHander (e) {
-      alert('a link was clicked')
+    {
+      id: 5,
+      name: 'Chelsey Dietrich',
+      username: 'Kamren',
+      email: 'Lucio_Hettinger@annie.ca'
     },
-    buttonHandler (e) {
-      alert('a button was pressed')
+    {
+      id: 6,
+      name: 'Mrs. Dennis Schulist',
+      username: 'Leopoldo_Corkery',
+      email: 'Karley_Dach@jasper.info'
     },
-    clickHandler (msg) {
-      this.$toaster.open(msg)
+    {
+      id: 7,
+      name: 'Kurtis Weissnat',
+      username: 'Elwyn.Skiles',
+      email: 'Telly.Hoeger@billy.biz'
     },
-    rowAttrsFn (rowItem) {
-      return {
-        class: {
-          'enabled': rowItem.enabled === 'true',
-          'disabled': rowItem.enabled === 'false'
-        },
-        'data-testid': 'row-item'
-      }
+    {
+      id: 8,
+      name: 'Nicholas Runolfsdottir V',
+      username: 'Maxime_Nienow',
+      email: 'Sherwood@rosamond.me'
     },
-    cellAttrsFn ({ headerKey, row, rowIndex, colIndex }) {
-      /**
-       * Sets cell background color based on data returned in
-       * the row parameter and the index of the cell
-       */
-      const backgroundColor = () => {
-        if (row.company && row.company === 'Google') {
-          if (colIndex === 0) {
-            return '#4285F4'
-          } else if (colIndex === 1) {
-            return '#DB4437'
-          } else {
-            return '#F4B400'
-          }
-        }
-
-        return ''
-      }
-
-      /**
-       * Returns an object of attributes to be applied to cells
-       */
-      return {
-        class: {
-          'truncated-keys': headerKey === 'description' || headerKey === 'name',
-        },
-        'datatest-id': `row-${rowIndex + 1}-col-${headerKey}`,
-        style: {
-          'maxWidth': headerKey==='description' ? '50ch' : headerKey === 'name' ? '22ch' : '25ch',
-          'backgroundColor': backgroundColor(),
-        },
-      }
+    {
+      id: 9,
+      name: 'Glenna Reichert',
+      username: 'Delphine',
+      email: 'Chaim_McDermott@dana.io'
     },
-    async generateOffsetPaginationTableData(pgSize) {
-      const pageSize = pgSize || this.offsetPaginationPageSize
-      const data = []
-      const offsetObj = {}
-      const offsetVal = 'offset'
-
-      for (let i = 0; i < 50; i++) {
-        data.push({
-          id: `08cc7d81-a9d8-4ae1-a42f-8d4e5a919d0${i}`,
-          version: '2.8.0.0-enterprise-edition',
-          hostname: `99e591ae377${i}`,
-          last_ping: 1648855072,
-          connected: 'Connected',
-          last_seen: `${i} days ago`
-        })
-      }
-
-      const totalPages = Math.ceil(data.length / pageSize)
-
-      for (let i = 0; i < totalPages; i++) {
-        const start = i * pageSize
-        const end = pageSize * (i + 1)
+    {
+      id: 10,
+      name: 'Clementina DuBuque',
+      username: 'Moriah.Stanton',
+      email: 'Rey.Padberg@karina.biz'
+    }
+  ]
 
-        offsetObj[`${offsetVal}_${i}`] = { data: [], pagination: { offset: '' } }
-        offsetObj[`${offsetVal}_${i}`].data = data.slice(start, end)
+  return {
+    data: responseData,
+    total: responseData.length,
+  }
+}
 
-        if (i < totalPages - 1) {
-          offsetObj[`${offsetVal}_${i}`].pagination.offset = `${offsetVal}_${i + 1}`
+const basicSortHandlerFunction = ({ key, sortColumnOrder, data }: any) => {
+  return data.sort((a: any, b: any) => {
+    if (key === 'username') {
+      if (sortColumnOrder === 'asc') {
+        if (a.username > b.username) {
+          return 1
+        } else if (a.username < b.username) {
+          return -1
         }
-      }
 
-      this.offsetPaginationData = offsetObj
-    },
-    async offsetPaginationFetcher({ pageSize, offset }) {
-      if (pageSize !== this.offsetPaginationPageSize) {
-        this.offsetPaginationPageSize = pageSize
-        this.generateOffsetPaginationTableData()
-      }
+        return 0
+      } else {
+        if (a.username > b.username) {
+          return -1
+        } else if (a.username < b.username) {
+          return 1
+        }
 
-      return offset
-        ? this.offsetPaginationData[offset]
-        : Object.values(this.offsetPaginationData)[0]
-    },
-    cellSlotFetcher () {
-      return {
-        data: [
-          {
-            name:'Basic Auth',
-            img: {
-              alt: 'Basic Auth Icon'
-            },
-            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-            id: '517526354743085',
-            enabled: 'true'
-          },
-          {
-            name: 'Website Desktop',
-            img: {
-              alt: 'Website Desktop Icon'
-            },
-            description: 'Ut enim ad minim veniam',
-            id: '328027447731198',
-            enabled: 'false'
-          },
-          {
-            name: 'Android App',
-            img: {
-              alt: 'Android App Icon'
-            },
-            description: 'Excepteur sint occaecat cupidatat non proident',
-            id: '405383051040955',
-            enabled: 'true'
-          }
-        ]
-      }
-    },
-    cellSlotAttrs ({ headerKey }) {
-      if (headerKey === 'name') {
-        return { class: 'custom-layout-cell' }
+        return 0
       }
     }
-  },
-  mounted() {
-    this.generateOffsetPaginationTableData()
-  }
-})
-</script>
-
-<style lang="scss">
-.k-table {
-  display: table;
 
-  th, tr, td {
-    border: unset;
-  }
-
-  td.custom-layout-cell {
-    display: flex;
+    return data
+  })
+}
 
-    img {
-      width: 30px;
-      object-fit: contain;
-    }
+const emptyFetcher = async (): Promise<any> => {
+  // Fake delay
+  await new Promise((resolve) => setTimeout(resolve, 2000))
 
-    .k-table-cell-description {
-      max-width: 240px;
-    }
+  return {
+    data: [],
+    total: 0,
   }
 }
 
-.horizontal-spacing {
-  margin-right: $kui-space-40;
+const numberedHeaders = [
+  {
+    key: 'column1',
+    label: 'Column 1'
+  },
+  {
+    key: 'column2',
+    label: 'Column 2'
+  },
+  {
+    key: 'column3',
+    label: 'Column 3'
+  }
+]
+
+const numberedColumnsFetcher = () => {
+  return {
+    data: [
+      { 
+        column1: 'Row 1 cell 1',
+        column2: 'Row 1 cell 2',
+        column3: 'Row 1 cell 3'
+      },
+      { 
+        column1: 'Row 2 cell 1',
+        column2: 'Row 2 cell 2',
+        column3: 'Row 2 cell 3'
+      },
+      { 
+        column1: 'Row 3 cell 1',
+        column2: 'Row 3 cell 2',
+        column3: 'Row 3 cell 3'
+      }
+    ],
+    total: 3
+  }
 }
 
-.truncated-keys {
-  line-height: initial;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+const onRowClick = (event, row) => {
+  $toaster.open({ appearance: 'success', title: 'Row clicked! Row data:', message: row })
 }
 
-.k-table-cell-description {
-  line-height: initial;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+const onButtonClick = () => {
+  $toaster.open({ appearance: 'system', title: 'Button clicked!', message: 'Button click is handled separately from row or cell clicks.' })
 }
 
-.eventful-row {
-  display: inline-block;
+const onCellClick = (event, cell) => {
+  $toaster.open({ title: 'Cell clicked! Cell data:', message: cell })
 }
+</script>
 
-.toolbar-container {
+<style lang="scss" scoped>
+.vertical-container {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: $kui-space-50;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index d8099173e7..47b776f5e6 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -578,7 +578,7 @@ const tdlisteners = computed((): any => {
   return (entity: any, rowData: any) => {
     const rowListeners = pluckListeners('onRow:', attrs)(rowData, 'row')
     const cellListeners = pluckListeners('onCell:', attrs)(entity, 'cell')
-    const ignoredElements = ['a', 'button', 'input', 'select']
+    const ignoredElements = ['a', 'button', 'label', 'input', 'select']
 
     if (rowListeners.click) {
       isClickable.value = true

From 8149cd446863c55760415aeb9855c665d7fdd930 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 24 Apr 2024 16:12:08 -0400
Subject: [PATCH 15/33] docs(tabs): disabled tab tooltip example [KHCP-9002]

---
 docs/components/tabs.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 93d8587df8..c6e5ba1954 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -232,6 +232,11 @@ In order provide the tab panel content (when the `hidePanels` prop is set to `fa
     Documentation
   </template>
   <template #docs><b>Documentation</b> tab content</template>
+  <template #disabled-anchor>
+    <KTooltip text="This tab item is disabled.">
+      <div>Disabled</div>
+    </KTooltip>
+  </template>
 </KTabs>
 
 ```html
@@ -252,6 +257,11 @@ In order provide the tab panel content (when the `hidePanels` prop is set to `fa
     Documentation
   </template>
   <template #docs><b>Documentation</b> tab content</template>
+  <template #disabled-anchor>
+    <KTooltip text="This tab item is disabled.">
+      <div>Disabled</div>
+    </KTooltip>
+  </template>
 </KTabs>
 ```
 
@@ -305,6 +315,7 @@ const slottedTabs = ref<Tab[]>([
   { hash: '#gateway', title: 'Gateway' },
   { hash: '#notifications', title: 'Notifications' },
   { hash: '#docs', title: 'Documentation' },
+  { hash: '#disabled', title: 'Disabled', disabled: true }
 ])
 
 const panelsActiveHash = ref('#gateway')

From 549b5e56784a9aafede2438bcbd81c183b806b18 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Wed, 24 Apr 2024 17:40:37 -0400
Subject: [PATCH 16/33] revert(kexternallink): revert changes [KHCP-9002]

---
 src/components/KExternalLink/KExternalLink.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KExternalLink/KExternalLink.vue b/src/components/KExternalLink/KExternalLink.vue
index 425419d7da..0ddd1be394 100644
--- a/src/components/KExternalLink/KExternalLink.vue
+++ b/src/components/KExternalLink/KExternalLink.vue
@@ -45,7 +45,7 @@ const isHrefValid = computed((): boolean => !!isValidUrl(props.href))
   font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
   gap: var(--kui-space-20, $kui-space-20);
   list-style: inherit;
-  outline-offset: 0px;
+  outline: none;
   text-decoration: none;
 
   &:hover {

From c8dcdfc7b7473d3af03c08260f564e22850c51e3 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 25 Apr 2024 11:37:32 -0400
Subject: [PATCH 17/33] feat(ktable): add column header tooltip [KHCP-9002]

---
 docs/components/table.md                    | 59 ++++++++++++++++++---
 sandbox/pages/SandboxTable/SandboxTable.vue | 17 +++---
 src/components/KTable/KTable.vue            | 54 ++++++++++++++++++-
 src/types/table.ts                          |  4 +-
 4 files changed, 114 insertions(+), 20 deletions(-)

diff --git a/docs/components/table.md b/docs/components/table.md
index a8bf604880..01aa3dd15f 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -26,6 +26,7 @@ interface TableHeader {
   label: string // visible column header text
   sortable?: boolean // in the nutshell, this property defines whether sort icon should be displayed next to the column header and whether the column header will emit sort event upon clicking on it
   hidable?: boolean
+  tooltip?: string // when provided, an info icon will be rendered next to the column label, upon hovering on which the tooltip will be revealed
   hideLabel?: boolean // whether column header text should be hidden (only visible to screen readers)
   useSortHandlerFunction?: boolean // whether KTable should use function passed through sortHandlerFunction prop to apply sorting logic to this column
 }
@@ -65,8 +66,18 @@ Fetcher function is expected to return an object with following properties:
 <script setup lang="ts">
 const headers = [
   { key: 'name', label: 'Full Name' },
-  { key: 'username', label: 'Username', sortable: true, useSortHandlerFunction: true },
-  { key: 'email', label: 'Email', hidable: true },
+  {
+    key: 'username',
+    label: 'Username',
+    sortable: true,
+    tooltip: 'Unique for each user.',
+    useSortHandlerFunction: true
+  },
+  {
+    key: 'email',
+    label: 'Email',
+    hidable: true
+  },
 ]
 
 const fetcher = async (): Promise<any> => {
@@ -500,7 +511,7 @@ A `error-action-click` event is fired when error state action button is clicked.
 
 ## Slots
 
-### column-header
+### Column Header
 
 You can slot in your custom content into each column header. For that, use column `key` value prefixed with `column-*` like in the example below.
 
@@ -531,7 +542,7 @@ Header slot container is a `display: flex;` element that takes care of spacing b
 </KTable>
 ```
 
-### cell
+### Cell
 
 You can slot in each individual cell content. Each cell slot is name after the `key` it corresponds to.
 
@@ -618,7 +629,11 @@ const headers = [
   { key: 'name', label: 'Full Name' },
   { key: 'username', label: 'Username' },
   { key: 'email', label: 'Email' },
-  { key: 'actions', label: 'Row actions', hideLabel: true },
+  {
+    key: 'actions',
+    label: 'Row actions',
+    hideLabel: true
+  },
 ]
 
 const fetcher = () => {
@@ -627,6 +642,33 @@ const fetcher = () => {
 </script>
 ```
 
+### Header Tooltip
+
+If you want to utilize HTML in the column header's tooltip, use the slot. Similar to column header slot, use column `key` value prefixed with `tooltip-*` like in the example below.
+
+Slot props:
+* `column` - column header object
+
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+>
+  <template #tooltip-email>
+    HubSpot Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
+  </template>
+</KTable>
+
+```html
+<KTable
+  :fetcher="fetcher"
+  :headers="headers"
+>
+  <template #tooltip-email>
+    HubSpot Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
+  </template>
+</KTable>
+```
+
 ### toolbar
 
 Toolbar is rendered directly above the table. Useful for slotting table controls like search or filter fields.
@@ -686,7 +728,7 @@ Slot content to be displayed when in error state.
 
 ## Events
 
-### Row events
+### Row Events
 
 `@row:{event}` - returns the `Event`, the row item, and the type. `row-click` event is emitted whenever a row is clicked and the row click event handler is fired, returns the row `data`.
 
@@ -725,7 +767,7 @@ To avoid firing row clicks by accident, the row click handler ignores events com
 />
 ```
 
-### Cell events
+### Cell Events
 
 `@cell:{event}` - returns the `Event`, the cell value, and the type. `cell-click` event is emitted whenever a cell is clicked and the cell click event handler is fired, returns the cell `data`.
 
@@ -813,7 +855,8 @@ const basicHeaders = (actions: boolean = false, sortable: string | null = null,
     },
     username: {
       key: 'username',
-      label: 'Username' 
+      label: 'Username',
+      tooltip: 'Unique for each user.'
     },
     email: { 
       key: 'email',
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index bcf548714a..0462bfcc1e 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -46,6 +46,7 @@
             empty-state-title="Empty state title"
             :fetcher="data.tableEmptyState ? emptyFetcher : fetcher"
             :headers="headers(false, true)"
+            resize-columns
             :row-hover="data.tableRowHover"
             :sort-handler-function="sortHandlerFunction"
           >
@@ -95,7 +96,7 @@
         is-subtitle
         title="Slots"
       />
-      <SandboxSectionComponent title="column header & cell">
+      <SandboxSectionComponent title="column header & column tooltip & cell">
         <KTable
           :fetcher="fetcher"
           :headers="headers()"
@@ -103,12 +104,10 @@
           <template #column-username>
             Username
 
-            <KTooltip text="Unique for each user.">
-              <InfoIcon
-                :color="KUI_COLOR_TEXT_NEUTRAL"
-                :size="KUI_ICON_SIZE_30"
-              />
-            </KTooltip>
+            <KBadge>Beta</KBadge>
+          </template>
+          <template #tooltip-email>
+            Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
           </template>
           <template #email="{ rowValue }">
             <KCopy :text="rowValue" />
@@ -184,8 +183,7 @@ import { inject } from 'vue'
 import SandboxTitleComponent from '../../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../../components/SandboxSectionComponent.vue'
 import SandboxTableActions from './SandboxTableActions.vue'
-import { AddIcon, InfoIcon } from '@kong/icons'
-import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import { AddIcon } from '@kong/icons'
 import type { TableHeader } from '@/types'
 
 const headers = (hidable: boolean = false, sortable: boolean = false): TableHeader[] => {
@@ -194,6 +192,7 @@ const headers = (hidable: boolean = false, sortable: boolean = false): TableHead
     {
       key: 'username',
       label: 'Username',
+      tooltip: 'Columns with a tooltip.',
       sortable,
       ...(sortable && { useSortHandlerFunction: true }),
     },
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 47b776f5e6..49027560db 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -146,6 +146,26 @@
                     </span>
                   </slot>
 
+                  <KTooltip
+                    v-if="column.tooltip || $slots[getColumnTooltipSlotName(column.key)]"
+                    position-fixed
+                  >
+                    <InfoIcon
+                      class="header-tooltip-trigger"
+                      :color="KUI_COLOR_TEXT_NEUTRAL"
+                      :size="KUI_ICON_SIZE_30"
+                    />
+
+                    <template #content>
+                      <slot
+                        :column="getGeneric(column)"
+                        :name="getColumnTooltipSlotName(column.key)"
+                      >
+                        {{ column.tooltip }}
+                      </slot>
+                    </template>
+                  </KTooltip>
+
                   <ArrowDownIcon
                     v-if="sortable && !column.hideLabel && column.sortable"
                     class="sort-icon"
@@ -228,12 +248,13 @@ import KButton from '@/components/KButton/KButton.vue'
 import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
 import KPagination from '@/components/KPagination/KPagination.vue'
-import { ArrowDownIcon } from '@kong/icons'
+import { InfoIcon, ArrowDownIcon } from '@kong/icons'
 import useUtilities from '@/composables/useUtilities'
 import type {
   TablePreferences,
   TableHeader,
   TableColumnSlotName,
+  TableColumnTooltipSlotName,
   SwrvState,
   SwrvStateData,
   TableState,
@@ -536,6 +557,15 @@ const getColumnSlotName = (columnKey: string): TableColumnSlotName => {
   return `column-${columnKey}`
 }
 
+/**
+ * Utilize a helper function to generate the column tooltip slot name.
+ * This helps TypeScript infer the slot name in the template section so that the slot props can be resolved.
+ * @param {string} columnKey The column.key
+ */
+const getColumnTooltipSlotName = (columnKey: string): TableColumnTooltipSlotName => {
+  return `tooltip-${columnKey}`
+}
+
 /**
  * To avoid requiring the consuming app to typecast if they want to use `row` or `column`
  * we strip the types to something generic before we put it in the slot for use.
@@ -663,6 +693,7 @@ const getHeaderClasses = (column: TableHeader, index: number): Record<string, bo
     'active-sort': props.sortable && !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
     [sortColumnOrder.value]: props.sortable && column.key === sortColumnKey.value && !column.hideLabel,
     'is-scrolled': isScrolled.value,
+    'has-tooltip': !!column.tooltip,
   }
 }
 
@@ -1156,9 +1187,20 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
             vertical-align: bottom;
 
             &.resizable {
-              min-width: 40px;
+              // set min with so the column can't be collapsed to nothing - avoiding bad UX
+              min-width: 40px !important; // needs important because resizing will set min-width inline
               position: relative;
 
+              // when sortable or has tooltip (or both), we need to increase the min-width to account for icons
+              &.sortable,
+              &.has-tooltip {
+                min-width: 80px !important; // needs important because resizing will set min-width inline
+              }
+
+              &.sortable.has-tooltip {
+                min-width: 100px !important; // needs important because resizing will set min-width inline
+              }
+
               .resize-handle {
                 cursor: col-resize;
                 height: v-bind('headerHeight');
@@ -1212,6 +1254,14 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
               .table-header-label {
                 @include truncate;
               }
+
+              .header-tooltip-trigger {
+                cursor: help;
+              }
+
+              .sort-icon {
+                flex-shrink: 0;
+              }
             }
 
             &.resize-hover {
diff --git a/src/types/table.ts b/src/types/table.ts
index 93cfeedd64..9955ee70d4 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -18,17 +18,19 @@ export interface TableHeader {
   label: string
   sortable?: boolean
   hidable?: boolean
+  tooltip?: string
   hideLabel?: boolean
   useSortHandlerFunction?: boolean
 }
 
 /**
- * Provide a type interface for KTable `column-*` slot names.
+ * Provide a type interface for KTable `column-*` and `tooltip-*` slot names.
  *
  * This helps TypeScript infer the slot name in the template section so that
  * the slot props can be resolved.
  */
 export type TableColumnSlotName = `column-${string}`
+export type TableColumnTooltipSlotName = `tooltip-${string}`
 
 export type TableState = 'loading' | 'error' | 'success' | 'empty'
 

From 8d3da7c14997c17f2f81643c7b6a559b77a201b3 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 25 Apr 2024 11:54:26 -0400
Subject: [PATCH 18/33] test(ktable): add column header tooltip test
 [KHCP-9002]

---
 src/components/KTable/KTable.cy.ts | 16 +++++++++++++++-
 src/components/KTable/KTable.vue   |  6 +++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/KTable/KTable.cy.ts b/src/components/KTable/KTable.cy.ts
index a65ac28af1..7c4f0e3415 100644
--- a/src/components/KTable/KTable.cy.ts
+++ b/src/components/KTable/KTable.cy.ts
@@ -2,6 +2,7 @@ import { mount } from 'cypress/vue'
 import { h } from 'vue'
 import KTable from '@/components/KTable/KTable.vue'
 import { offsetPaginationHeaders, offsetPaginationFetcher } from '../../../mocks/KTableMockData'
+import type { TableHeader } from '@/types'
 
 const largeDataSet = [
   {
@@ -72,7 +73,7 @@ const options = {
     { label: 'ID', key: 'id', sortable: false, hideLabel: false },
     { label: 'Enabled', key: 'enabled', sortable: false, hideLabel: false },
     { label: '', key: 'actions', sortable: false, hideLabel: true },
-  ],
+  ] as TableHeader[],
   data: [
     {
       name: 'Basic Auth',
@@ -262,6 +263,19 @@ describe('KTable', () => {
       cy.getTestId('apply-button').click()
       cy.getTestId(`table-header-${modifiedHeaderKey}`).should('not.exist')
     })
+
+    it('renders tooltip when provided in headers', () => {
+      options.headers[0].tooltip = 'This is a tooltip'
+
+      mount(KTable, {
+        props: {
+          headers: options.headers,
+          fetcher: () => { return { data: options.data } },
+        },
+      })
+
+      cy.getTestId(`tooltip-${options.headers[0].key}`).should('be.visible')
+    })
   })
 
   describe('data revalidates and changes as expected', () => {
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 49027560db..949def97c2 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -129,6 +129,7 @@
                 />
 
                 <div
+                  :aria-describedby="column.tooltip || $slots[getColumnTooltipSlotName(column.key)] ? `${getColumnTooltipSlotName(column.key)}-${tableId}` : undefined"
                   class="table-headers-container"
                   :class="{ 'resized': resizingColumn === column.key }"
                 >
@@ -148,11 +149,13 @@
 
                   <KTooltip
                     v-if="column.tooltip || $slots[getColumnTooltipSlotName(column.key)]"
+                    :data-testid="getColumnTooltipSlotName(column.key)"
                     position-fixed
+                    :tooltip-id="`${getColumnTooltipSlotName(column.key)}-${tableId}`"
                   >
                     <InfoIcon
                       class="header-tooltip-trigger"
-                      :color="KUI_COLOR_TEXT_NEUTRAL"
+                      :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
                       :size="KUI_ICON_SIZE_30"
                     />
 
@@ -248,6 +251,7 @@ import KButton from '@/components/KButton/KButton.vue'
 import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
 import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
 import KPagination from '@/components/KPagination/KPagination.vue'
+import KTooltip from '@/components/KTooltip/KTooltip.vue'
 import { InfoIcon, ArrowDownIcon } from '@kong/icons'
 import useUtilities from '@/composables/useUtilities'
 import type {

From 062f77e3cf6fe9b399e4b4480ce5625ba065a080 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 25 Apr 2024 16:51:34 -0400
Subject: [PATCH 19/33] docs(ktable, kcatalog): pagination section [KHCP-9002]

---
 docs/components/catalog.md                    | 159 ++++++++----------
 docs/components/table.md                      |  42 ++---
 .../KTable/ColumnVisibilityMenu.vue           |   5 +-
 3 files changed, 87 insertions(+), 119 deletions(-)

diff --git a/docs/components/catalog.md b/docs/components/catalog.md
index 6a43ae9bf7..e9e522b956 100644
--- a/docs/components/catalog.md
+++ b/docs/components/catalog.md
@@ -175,33 +175,14 @@ const itemDeleted = () => {
 
 Pass in a string of search input for server-side table filtering.
 
-### paginationTotalItems
+## Pagination
 
-Pass the total number of items in the set to populate the pagination text. See [KPagination component docs](/components/pagination) for more details.
+KCatalog uses KPagination component under the hood and exposes a few props as a way to modify how pagination looks and behaves in card catalogs. See [KPagination](/components/pagination.html#props) docs for more details and examples:
 
-If not provided the fetcher response should return a top-level property `total` or return a `data` property that is an array.
-
-### paginationNeighbors
-
-Pass in a number of pagination neighbors to be used by the pagination component. See more detail in the [KPagination component docs](/components/pagination.html#neighbors).
-
-### paginationPageSizes
-
-Pass in an array of page sizes for the page size dropdown. If not provided will default to the following:
-
-```ts
-[15, 30, 50, 75, 100]
-```
-
-### disablePaginationPageJump
-
-Set this to `true` to limit pagination navigation to `previous` / `next` page only.
-
-<KCatalog :fetcher="fetcher" :disablePaginationPageJump="true" :paginationPageSizes="[4, 5, 6]" :initial-fetcher-params="{ pageSize: 4, page: 1 }" />
-
-```html
-<KCatalog :disable-pagination-page-jump="true" :fetcher="fetcher" />
-```
+* `paginationTotalItems`
+* `paginationNeighbors`
+* `paginationPageSizes`
+* `disablePaginationPageJump`
 
 ### disablePagination
 
@@ -211,70 +192,6 @@ Set this to `true` to hide pagination when using a fetcher.
 
 Set this to `true` to hide pagination when the table record count is less than or equal to the `pageSize`.
 
-## KCatalogItem
-
-KCatalog generates a KCatalogItem for each item in the `items` property. At the most basic level, KCatalogItem is a wrapper around KCard to display correctly inside KCatalog. You can use the `body` slot of the KCatalog to manually create your own catalog items.
-
-### Props
-
-#### item
-
-Object instance of `CatalogItem` from which card content is built.
-
-#### truncate
-
-A boolean (default to `true`), whether or not to truncate the description text.
-
-```html
-<KCatalogItem :item="item" :truncate="false" class="catalog-item" />
-```
-
-### Slots
-
-#### card-title
-
-The title content for the card.
-
-#### card-body
-
-The body content for the card.
-
-#### card-footer
-
-The footer content for the card.
-
-<KCatalogItem>
-  <template #card-title>
-    Card Title
-  </template>
-  <template #card-body>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
-  </template>
-  <template #card-footer>
-    <KBadge appearance="neutral">Card footer</KBadge>
-  </template>
-</KCatalogItem>
-
-```html
-<KCatalogItem>
-  <template #card-title>
-    Card Title
-  </template>
-  <template #card-body>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
-  </template>
-  <template #card-footer>
-    <KBadge appearance="neutral">Card footer</KBadge>
-  </template>
-</KCatalogItem>
-```
-
-### Events
-
-#### click
-
-Fired when item is clicked. Event payload is item object.
-
 ## States
 
 ### Empty
@@ -526,6 +443,70 @@ Returns the `state` and `hasData` (boolean) of the catalog, `state` can be one o
 - `error` - when the catalog fetch failed
 - `success` - when the catalog fetch completed successfully
 
+## KCatalogItem
+
+KCatalog generates a KCatalogItem for each item in the `items` property. At the most basic level, KCatalogItem is a wrapper around KCard to display correctly inside KCatalog. You can use the `body` slot of the KCatalog to manually create your own catalog items.
+
+### Props
+
+#### item
+
+Object instance of `CatalogItem` from which card content is built.
+
+#### truncate
+
+A boolean (default to `true`), whether or not to truncate the description text.
+
+```html
+<KCatalogItem :item="item" :truncate="false" class="catalog-item" />
+```
+
+### Slots
+
+#### card-title
+
+The title content for the card.
+
+#### card-body
+
+The body content for the card.
+
+#### card-footer
+
+The footer content for the card.
+
+<KCatalogItem>
+  <template #card-title>
+    Card Title
+  </template>
+  <template #card-body>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
+  </template>
+  <template #card-footer>
+    <KBadge appearance="neutral">Card footer</KBadge>
+  </template>
+</KCatalogItem>
+
+```html
+<KCatalogItem>
+  <template #card-title>
+    Card Title
+  </template>
+  <template #card-body>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.
+  </template>
+  <template #card-footer>
+      <KBadge appearance="neutral">Card footer</KBadge>
+  </template>
+</KCatalogItem>
+```
+
+### Events
+
+#### click
+
+Fired when item is clicked. Event payload is item object.
+
 <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import { AddIcon, MoreIcon } from '@kong/icons'
diff --git a/docs/components/table.md b/docs/components/table.md
index 01aa3dd15f..e657a6e11f 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -354,31 +354,27 @@ const handleDelete = (id): void => {
 
 Pass in a string of search input for server-side table filtering.
 
-### paginationTotalItems
-
-Pass the total number of items in the set to populate the pagination text.
-
-If not provided the fetcher response should return a top-level property `total` or return a `data` property that is an array.
-
-### paginationNeighbors
+### sortable
 
-Pass in a number of pagination neighbors to be used by the pagination component. See more detail in the [KPagination](/components/pagination.html#neighbors) docs.
+Set this to `false` to disable ability to sort.
 
-### paginationPageSizes
+### rowAttrs
 
-Pass in an array of page sizes for the page size dropdown. If not provided will default to the following:
+Function for adding custom attributes to each row. The function should return an object with `key: value` pairs for each attribute.
 
-```ts
-[15, 30, 50, 75, 100]
-```
+### cellAttrs
 
-### paginationOffset
+Function for adding custom attributes to each table cell. The function should return an object with `key: value` pairs for each attribute.
 
-Boolean to control whether underlying KPagination component should use offset pagination type. See [KPagination props](/components/pagination#offset) for details.
+## Pagination
 
-### disablePaginationPageJump
+KTable uses KPagination component under the hood and exposes a few props as a way to modify how pagination looks and behaves in tables. See [KPagination](/components/pagination.html#props) docs for more details and examples:
 
-Set this to `true` to limit pagination navigation to previous/next page only.
+* `paginationTotalItems`
+* `paginationNeighbors`
+* `paginationPageSizes`
+* `paginationOffset`
+* `disablePaginationPageJump`
 
 ### disablePagination
 
@@ -388,18 +384,6 @@ Set this to `true` to hide pagination when using a fetcher.
 
 Set this to `true` to hide pagination when the table record count is less than or equal to the `pageSize`.
 
-### sortable
-
-Set this to `false` to disable ability to sort.
-
-### rowAttrs
-
-Function for adding custom attributes to each row. The function should return an object with `key: value` pairs for each attribute.
-
-### cellAttrs
-
-Function for adding custom attributes to each table cell. The function should return an object with `key: value` pairs for each attribute.
-
 ## States
 
 ### Empty
diff --git a/src/components/KTable/ColumnVisibilityMenu.vue b/src/components/KTable/ColumnVisibilityMenu.vue
index a0142a1f88..9b90cffb12 100644
--- a/src/components/KTable/ColumnVisibilityMenu.vue
+++ b/src/components/KTable/ColumnVisibilityMenu.vue
@@ -7,7 +7,7 @@
     >
       <KTooltip
         placement="bottomEnd"
-        text="Show/Hide Columns"
+        :text="isDropdownOpen ? undefined : 'Show/Hide Columns'"
       >
         <KButton
           appearance="secondary"
@@ -94,6 +94,7 @@ const props = defineProps({
   },
 })
 
+const isDropdownOpen = ref<boolean>(false)
 const visibilityMap = ref<Record<string, boolean>>({})
 const isDirty = ref(false)
 const menuItemsRef = ref<HTMLDivElement>()
@@ -114,6 +115,8 @@ const handleApply = (): void => {
 }
 
 const handleDropdownToggle = (isOpen: boolean): void => {
+  isDropdownOpen.value = isOpen
+
   // set scroll classes on open
   if (isOpen && menuItemsRef.value) {
     setTimeout(() => {

From d9b9322cf06fdd09c198381265e1a7fb10dd5fcf Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 25 Apr 2024 17:03:41 -0400
Subject: [PATCH 20/33] docs(ktable): add examples [KHCP-9002]

---
 docs/components/table.md | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/docs/components/table.md b/docs/components/table.md
index e657a6e11f..d9753b0180 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -362,10 +362,50 @@ Set this to `false` to disable ability to sort.
 
 Function for adding custom attributes to each row. The function should return an object with `key: value` pairs for each attribute.
 
+The passed function receives row value object as an argument.
+
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+  :row-attrs="(row) => { return { 'data-testid': `row-${row.id}` } }"
+/>
+
+```html
+<KTable
+  :row-attrs="(row) => { return { 'data-testid': `row-${row.id}` } }"
+  :fetcher="fetcher"
+  :headers="headers"
+/>
+```
+
 ### cellAttrs
 
 Function for adding custom attributes to each table cell. The function should return an object with `key: value` pairs for each attribute.
 
+The passed function receives an object with these parameters as an argument:
+```ts
+{
+  headerKey: string // header key
+  row: object // row value
+  rowIndex: number // row index
+  colIndex: index // column index
+}
+```
+
+<KTable
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+  :cell-attrs="({ headerKey, row }) => { return { 'data-testid': `column-${headerKey}-row-${row.id}` } }"
+/>
+
+```html
+<KTable
+  :cell-attrs="({ headerKey, row }) => { return { 'data-testid': `column-${headerKey}-row-${row.id}` } }"
+  :fetcher="fetcher"
+  :headers="headers"
+/>
+```
+
 ## Pagination
 
 KTable uses KPagination component under the hood and exposes a few props as a way to modify how pagination looks and behaves in tables. See [KPagination](/components/pagination.html#props) docs for more details and examples:

From 513d219c6457184d0caabcef4f3b4d8a24216982 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 26 Apr 2024 09:57:21 -0400
Subject: [PATCH 21/33] chore: fix package.json [KHCP-9002]

---
 package.json | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/package.json b/package.json
index ac753c9116..1a4df71375 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,6 @@
 {
   "name": "@kong/kongponents",
-<<<<<<< HEAD
-<<<<<<< HEAD
   "version": "9.0.0-alpha.149",
-=======
-  "version": "9.0.0-alpha.145",
->>>>>>> c01912548 (chore(release): 9.0.0-alpha.145 [skip ci])
-=======
-  "version": "9.0.0-alpha.146",
->>>>>>> e1406a43d (chore(release): 9.0.0-alpha.146 [skip ci])
   "description": "Kong Component library",
   "type": "module",
   "repository": {
@@ -61,11 +53,7 @@
     "semantic-release": "semantic-release"
   },
   "dependencies": {
-<<<<<<< HEAD
     "@kong/icons": "^1.9.1",
-=======
-    "@kong/icons": "^1.9.0",
->>>>>>> 52f3c2dfe (fix(deps): update dependency @kong/icons to ^1.9.0 (#2144))
     "@popperjs/core": "^2.11.8",
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
@@ -89,17 +77,8 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@cypress/vite-dev-server": "^5.0.7",
     "@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
-<<<<<<< HEAD
     "@evilmartians/lefthook": "^1.6.10",
     "@kong-ui-public/sandbox-layout": "^2.0.52",
-=======
-    "@evilmartians/lefthook": "^1.6.7",
-<<<<<<< HEAD
-    "@kong-ui-public/sandbox-layout": "^2.0.50",
->>>>>>> af75cab08 (chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.50 (#2145))
-=======
-    "@kong-ui-public/sandbox-layout": "^2.0.51",
->>>>>>> d81d57a4f (chore(deps): update dependency @kong-ui-public/sandbox-layout to ^2.0.51 (#2146))
     "@kong/design-tokens": "^1.12.11",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",

From 97a1dd231d7cfe6a033bca8835e9a0e34cf122fd Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Fri, 26 Apr 2024 12:46:44 -0400
Subject: [PATCH 22/33] fix(ktable): apply pr feedback

Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com>
---
 docs/components/table.md         | 6 +++---
 src/components/KTable/KTable.vue | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/components/table.md b/docs/components/table.md
index d9753b0180..0db717e35c 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -18,13 +18,13 @@ Component that takes care of fetching and rendering data in a table format.
 
 ### headers
 
-Array of objects that represent table columns along with some configurations that should apply to each of the columns (whether a columns is sortable, hidable, etc).
+Array of objects that represent table columns along with some configurations that should apply to each of the columns (whether a column is sortable, hidable, etc).
 
 ```ts
 interface TableHeader {
   key: string // must be unique for each column
   label: string // visible column header text
-  sortable?: boolean // in the nutshell, this property defines whether sort icon should be displayed next to the column header and whether the column header will emit sort event upon clicking on it
+  sortable?: boolean // in a nutshell, this property defines whether sort icon should be displayed next to the column header and whether the column header will emit sort event upon clicking on it
   hidable?: boolean
   tooltip?: string // when provided, an info icon will be rendered next to the column label, upon hovering on which the tooltip will be revealed
   hideLabel?: boolean // whether column header text should be hidden (only visible to screen readers)
@@ -42,7 +42,7 @@ For example of `headers` prop usage please refer to [`fetcher` prop documentatio
 
 Function that handles data fetching, server-side search and pagination. It takes a single param as an argument which you can conveniently pass as a prop (see [`initialFetcherParams` prop](#initialfetcherparams) for details).
 
-Fetcher function is expected to return an object with following properties:
+Fetcher function is expected to return an object with the following properties:
 * `data` - an array of objects to populate table with
 * `total` - the total count of items (if using pagination)
 
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 949def97c2..7855c3b3d2 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -1191,7 +1191,7 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
             vertical-align: bottom;
 
             &.resizable {
-              // set min with so the column can't be collapsed to nothing - avoiding bad UX
+              // set min width so the column can't be collapsed to nothing - avoiding bad UX
               min-width: 40px !important; // needs important because resizing will set min-width inline
               position: relative;
 
@@ -1269,7 +1269,7 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
             }
 
             &.resize-hover {
-              // creates a 2px "border" on the right - can't use the border because it will "jump"
+              // creates a 2px "border" on the right - can't use border property because it will "jump"
               box-shadow: calc(-1 * var(--kui-border-width-20, $kui-border-width-20)) 0 0 0 var(--kui-color-border-decorative-purple, $kui-color-border-decorative-purple) inset;
             }
           }

From 2661f64e267dafe369d0766a9157a4c57c430b60 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 26 Apr 2024 12:47:37 -0400
Subject: [PATCH 23/33] fix(ktable): address pr feedback [KHCP-9002]

---
 src/components/KTable/KTable.vue | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 7855c3b3d2..816f9431bc 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -1323,17 +1323,3 @@ $kTableThPaddingY: var(--kui-space-50, $kui-space-50);
   }
 }
 </style>
-
-<style lang="scss">
-.k-table {
-  .table {
-    thead {
-      th {
-        &.truncate, .truncate {
-          @include truncate;
-        }
-      }
-    }
-  }
-}
-</style>

From b7a2a3c2505f119f746b9efa897f99b6c063e577 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 26 Apr 2024 13:52:30 -0400
Subject: [PATCH 24/33] fix(ktable): minor type fix [KHCP-9002]

---
 src/components/KTable/KTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 816f9431bc..32c19eb282 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -435,7 +435,7 @@ const props = defineProps({
    * A prop to pass in an array of headers for the table
    */
   headers: {
-    type: Array as PropType<TableHeader[]>,
+    type: Array,
     default: () => [],
   },
   /**

From 1327ffe2a16f904b4a595191362d440ec304dbc3 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 May 2024 09:58:47 -0400
Subject: [PATCH 25/33] fix(ktable): minor fix [KHCP-9002]

---
 src/components/KTable/KTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 66ec10ce91..314d1f10fe 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -526,6 +526,7 @@ const resizingColumn = ref('')
 const resizerHoveredColumn = ref('')
 // lowest priority - currently hovered resizable column (mouse is somewhere in the <th>)
 const currentHoveredColumn = ref('')
+const hasHidableColumns = computed((): boolean => tableHeaders.value.filter((header: TableHeader) => header.hidable).length > 0)
 const hasColumnVisibilityMenu = computed((): boolean => {
   // has hidable columns, no error/loading/empty state
   return !!(hasHidableColumns.value &&
@@ -973,7 +974,6 @@ const scrollHandler = (event: any): void => {
   }
 }
 
-const hasHidableColumns = computed((): boolean => tableHeaders.value.filter((header: TableHeader) => header.hidable).length > 0)
 // Store the tablePreferences in a computed property to utilize in the watcher
 const tablePreferences = computed((): TablePreferences => ({
   pageSize: pageSize.value,

From eb4eb08aa8d47b19af8170ae5c8ec765fb9c4e2c Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 May 2024 10:49:06 -0400
Subject: [PATCH 26/33] fix(utilities): remove client side sorter function
 [KHCP-9002]

---
 src/composables/useUtilities.cy.ts | 178 +----------------------------
 src/composables/useUtilities.ts    |  66 -----------
 2 files changed, 1 insertion(+), 243 deletions(-)

diff --git a/src/composables/useUtilities.cy.ts b/src/composables/useUtilities.cy.ts
index 408df8f09b..d1017ce82a 100644
--- a/src/composables/useUtilities.cy.ts
+++ b/src/composables/useUtilities.cy.ts
@@ -4,183 +4,7 @@
 
 import useUtilities from '@/composables/useUtilities'
 
-const { clientSideSorter, getSizeFromString, stripRequiredLabel } = useUtilities()
-
-describe('Client-side sorting (deprecated in favor of server-side sorting)', () => {
-  it('clientSideSorter(): sorts the items by string', () => {
-    const items = [
-      {
-        custom_id: '1234',
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
-        username: 'henry',
-      }, {
-        custom_id: '1345',
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
-        username: 'bobby',
-      }, {
-        custom_id: '13445',
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
-        username: 'zach',
-      },
-    ]
-
-    expect(items[0].username).equal('henry')
-
-    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('username', '', 'ascending', items)
-
-    expect(items[0].username).equal('bobby')
-    expect(sortKey1).equal('username')
-    expect(sortOrder1).equal('ascending')
-
-    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('username', 'username', sortOrder1, items)
-
-    expect(items[0].username).equal('zach')
-    expect(sortKey2).equal('username')
-    expect(sortOrder2).equal('descending')
-  })
-
-  it('clientSideSorter(): sorts the items by number', () => {
-    const items = [
-      {
-        custom_id: 1234,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
-        username: 'henry',
-      }, {
-        custom_id: 0,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
-        username: 'bobby',
-      }, {
-        custom_id: 13445,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
-        username: 'zach',
-      },
-    ]
-
-    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('custom_id', '', 'ascending', items)
-
-    expect(items[0].username).equal('bobby')
-    expect(items[0].custom_id).equal(0)
-    expect(sortKey1).equal('custom_id')
-    expect(sortOrder1).equal('ascending')
-
-    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('custom_id', 'custom_id', sortOrder1, items)
-
-    expect(items[0].username).equal('zach')
-    expect(items[0].custom_id).equal(13445)
-    expect(sortKey2).equal('custom_id')
-    expect(sortOrder2).equal('descending')
-  })
-
-  it('clientSideSorter(): sorts undefined and null values', () => {
-    const items = [
-      {
-        custom_id: 2145,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
-        username: 'bobby',
-      }, {
-        custom_id: 13445,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
-        username: 'zach',
-      },
-      {
-        custom_id: 3145,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb5',
-        username: undefined,
-      },
-      {
-        custom_id: 1234,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
-        username: null,
-      },
-    ]
-
-    expect(items[0].username).equal('bobby')
-    expect(items[0].custom_id).equal(2145)
-
-    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('username', '', 'ascending', items)
-
-    expect(items[0].username).equal(undefined)
-    expect(items[0].custom_id).equal(3145)
-    expect(sortKey1).equal('username')
-    expect(sortOrder1).equal('ascending')
-
-    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('username', 'username', sortOrder1, items)
-
-    expect(items[0].username).equal('zach')
-    expect(items[0].custom_id).equal(13445)
-    expect(sortKey2).equal('username')
-    expect(sortOrder2).equal('descending')
-  })
-
-  it('clientSideSorter(): sorts the items by first item in the array', () => {
-    const items = [
-      {
-        custom_id: 1234,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
-        usernames: ['henry', 'jacob'],
-      }, {
-        custom_id: 145,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
-        usernames: ['bobby', 'jones'],
-      }, {
-        custom_id: 13445,
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
-        usernames: ['zach', 'hondo'],
-      },
-    ]
-
-    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('usernames', '', 'ascending', items)
-
-    expect(items[0].usernames[0]).equal('bobby')
-    expect(items[0].custom_id).equal(145)
-    expect(sortKey1).equal('usernames')
-    expect(sortOrder1).equal('ascending')
-
-    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('usernames', 'usernames', sortOrder1, items)
-
-    expect(items[0].usernames[0]).equal('zach')
-    expect(items[0].custom_id).equal(13445)
-    expect(sortKey2).equal('usernames')
-    expect(sortOrder2).equal('descending')
-  })
-
-  it('clientSideSorter(): sorts the items by first item in the array - number', () => {
-    const items = [
-      {
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
-        favoriteNumbers: [1234, 2],
-      }, {
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
-        favoriteNumbers: [145],
-      }, {
-        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
-        favoriteNumbers: [-1],
-      },
-    ]
-
-    const { previousKey: sortKey1, sortOrder: sortOrder1 } =
-      clientSideSorter('favoriteNumbers', '', 'ascending', items)
-
-    expect(items.map(i => ({ favoriteNumbers: i.favoriteNumbers }))).to.deep.equal([
-      { favoriteNumbers: [-1] },
-      { favoriteNumbers: [145] },
-      { favoriteNumbers: [1234, 2] },
-    ])
-    expect(sortKey1).equal('favoriteNumbers')
-    expect(sortOrder1).equal('ascending')
-
-    const { previousKey: sortKey2, sortOrder: sortOrder2 } =
-      clientSideSorter('favoriteNumbers', 'favoriteNumbers', sortOrder1, items)
-
-    expect(items.map(i => ({ favoriteNumbers: i.favoriteNumbers }))).to.deep.equal([
-      { favoriteNumbers: [1234, 2] },
-      { favoriteNumbers: [145] },
-      { favoriteNumbers: [-1] },
-    ])
-    expect(sortKey2).equal('favoriteNumbers')
-    expect(sortOrder2).equal('descending')
-  })
-})
+const { getSizeFromString, stripRequiredLabel } = useUtilities()
 
 describe('getSizeFromString(): ', () => {
   it('handles numbers', () => {
diff --git a/src/composables/useUtilities.ts b/src/composables/useUtilities.ts
index ac9ead7252..2fafa054ea 100644
--- a/src/composables/useUtilities.ts
+++ b/src/composables/useUtilities.ts
@@ -98,71 +98,6 @@ export default function useUtilities() {
     }
   }
 
-  /**
-   * @param {String} key - the current key to sort by
-   * @param {String} previousKey - the previous key used to sort by
-   * @param {String} sortOrder - either ascending or descending
-   * @param {Array} items - the list of items to sort
-   * @return {Object} an object containing the previousKey and sortOrder
-   */
-  const clientSideSorter = (key: string, previousKey: string, sortOrder: string, items: Record<string, any>[]) => {
-    let comparator = null
-
-    const numberComparator = (a: number, b: number | string) => {
-      if (typeof b === 'number' && !Number.isNaN(a) && !Number.isNaN(b)) {
-        return a - b
-      }
-
-      return 0
-    }
-    const stringComparator = (a: string, b: string) => {
-      return a.localeCompare(b)
-    }
-
-    if (key !== previousKey) {
-      comparator = (a: any, b: any) => {
-        const transformer = (val: string | number) => {
-          if (val === undefined || val === null) {
-            return ''
-          }
-
-          if (typeof val === 'number') {
-            return val
-          }
-
-          if (Array.isArray(val) && val.length && typeof val[0] === 'number') {
-            return val[0]
-          }
-
-          return String(val)
-        }
-
-        const newValA: any = transformer(a[key])
-        const newValB: any = transformer(b[key])
-
-        switch (typeof newValA) {
-          case 'number':
-            return numberComparator(newValA, newValB)
-          default:
-            return stringComparator(newValA, newValB)
-        }
-      }
-
-      items.sort(comparator)
-      previousKey = key
-      sortOrder = 'ascending'
-    } else {
-      items.reverse()
-      if (sortOrder === 'descending' || sortOrder === 'desc') {
-        sortOrder = 'ascending'
-      } else {
-        sortOrder = 'descending'
-      }
-    }
-
-    return { previousKey, sortOrder }
-  }
-
   const useSwrvState = (response: Ref<any>, error: Ref<any>, isValidating: Ref<boolean>) => {
     const state = ref(swrvState.PENDING)
     const hasData = ref(false)
@@ -277,7 +212,6 @@ export default function useUtilities() {
   return {
     useRequest,
     useDebounce,
-    clientSideSorter,
     useSwrvState,
     getSizeFromString,
     cloneDeep,

From dd8046b4af1f41cee6e36a86d9488f383687ebee Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 May 2024 16:28:22 -0400
Subject: [PATCH 27/33] chore(sandbox): minor tweak [KHCP-9002]

---
 sandbox/pages/SandboxTable/SandboxTable.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index 0462bfcc1e..de4ecc5326 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -56,7 +56,10 @@
           </KTable>
         </KComponent>
       </SandboxSectionComponent>
-      <SandboxSectionComponent title="loading & resizeColumns & error & errorStateTitle & errorStateMessage & errorStateActionMessage & errorStateActionRoute">
+      <SandboxSectionComponent
+        description="This table has clickable rows."
+        title="loading & resizeColumns & error & errorStateTitle & errorStateMessage & errorStateActionMessage & errorStateActionRoute"
+      >
         <KComponent
           v-slot="{ data }"
           :data="{ tableLoadingState: false, tableErrorState: false }"
@@ -83,6 +86,7 @@
             :headers="headers(true)"
             :loading="data.tableLoadingState"
             resize-columns
+            @row:click="(_event: any, row: any) => onRowClick(row)"
           >
             <template #actions>
               <SandboxTableActions />
@@ -249,6 +253,10 @@ const sortHandlerFunction = ({ key, sortColumnOrder, data }: any) => {
     return data
   })
 }
+
+const onRowClick = (row: any) => {
+  alert(`Row clicked:' ${JSON.stringify(row)}`)
+}
 </script>
 
 <style lang="scss" scoped>

From b9bfc2957e065002fcbe1db2872b34776efb0b5a Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 May 2024 16:52:05 -0400
Subject: [PATCH 28/33] fix(utilities): add client side sorter function back
 [KHCP-9002]

---
 src/composables/useUtilities.cy.ts | 178 ++++++++++++++++++++++++++++-
 src/composables/useUtilities.ts    |  66 +++++++++++
 2 files changed, 243 insertions(+), 1 deletion(-)

diff --git a/src/composables/useUtilities.cy.ts b/src/composables/useUtilities.cy.ts
index d1017ce82a..408df8f09b 100644
--- a/src/composables/useUtilities.cy.ts
+++ b/src/composables/useUtilities.cy.ts
@@ -4,7 +4,183 @@
 
 import useUtilities from '@/composables/useUtilities'
 
-const { getSizeFromString, stripRequiredLabel } = useUtilities()
+const { clientSideSorter, getSizeFromString, stripRequiredLabel } = useUtilities()
+
+describe('Client-side sorting (deprecated in favor of server-side sorting)', () => {
+  it('clientSideSorter(): sorts the items by string', () => {
+    const items = [
+      {
+        custom_id: '1234',
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
+        username: 'henry',
+      }, {
+        custom_id: '1345',
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
+        username: 'bobby',
+      }, {
+        custom_id: '13445',
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
+        username: 'zach',
+      },
+    ]
+
+    expect(items[0].username).equal('henry')
+
+    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('username', '', 'ascending', items)
+
+    expect(items[0].username).equal('bobby')
+    expect(sortKey1).equal('username')
+    expect(sortOrder1).equal('ascending')
+
+    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('username', 'username', sortOrder1, items)
+
+    expect(items[0].username).equal('zach')
+    expect(sortKey2).equal('username')
+    expect(sortOrder2).equal('descending')
+  })
+
+  it('clientSideSorter(): sorts the items by number', () => {
+    const items = [
+      {
+        custom_id: 1234,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
+        username: 'henry',
+      }, {
+        custom_id: 0,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
+        username: 'bobby',
+      }, {
+        custom_id: 13445,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
+        username: 'zach',
+      },
+    ]
+
+    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('custom_id', '', 'ascending', items)
+
+    expect(items[0].username).equal('bobby')
+    expect(items[0].custom_id).equal(0)
+    expect(sortKey1).equal('custom_id')
+    expect(sortOrder1).equal('ascending')
+
+    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('custom_id', 'custom_id', sortOrder1, items)
+
+    expect(items[0].username).equal('zach')
+    expect(items[0].custom_id).equal(13445)
+    expect(sortKey2).equal('custom_id')
+    expect(sortOrder2).equal('descending')
+  })
+
+  it('clientSideSorter(): sorts undefined and null values', () => {
+    const items = [
+      {
+        custom_id: 2145,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
+        username: 'bobby',
+      }, {
+        custom_id: 13445,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
+        username: 'zach',
+      },
+      {
+        custom_id: 3145,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb5',
+        username: undefined,
+      },
+      {
+        custom_id: 1234,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
+        username: null,
+      },
+    ]
+
+    expect(items[0].username).equal('bobby')
+    expect(items[0].custom_id).equal(2145)
+
+    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('username', '', 'ascending', items)
+
+    expect(items[0].username).equal(undefined)
+    expect(items[0].custom_id).equal(3145)
+    expect(sortKey1).equal('username')
+    expect(sortOrder1).equal('ascending')
+
+    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('username', 'username', sortOrder1, items)
+
+    expect(items[0].username).equal('zach')
+    expect(items[0].custom_id).equal(13445)
+    expect(sortKey2).equal('username')
+    expect(sortOrder2).equal('descending')
+  })
+
+  it('clientSideSorter(): sorts the items by first item in the array', () => {
+    const items = [
+      {
+        custom_id: 1234,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
+        usernames: ['henry', 'jacob'],
+      }, {
+        custom_id: 145,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
+        usernames: ['bobby', 'jones'],
+      }, {
+        custom_id: 13445,
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
+        usernames: ['zach', 'hondo'],
+      },
+    ]
+
+    const { previousKey: sortKey1, sortOrder: sortOrder1 } = clientSideSorter('usernames', '', 'ascending', items)
+
+    expect(items[0].usernames[0]).equal('bobby')
+    expect(items[0].custom_id).equal(145)
+    expect(sortKey1).equal('usernames')
+    expect(sortOrder1).equal('ascending')
+
+    const { previousKey: sortKey2, sortOrder: sortOrder2 } = clientSideSorter('usernames', 'usernames', sortOrder1, items)
+
+    expect(items[0].usernames[0]).equal('zach')
+    expect(items[0].custom_id).equal(13445)
+    expect(sortKey2).equal('usernames')
+    expect(sortOrder2).equal('descending')
+  })
+
+  it('clientSideSorter(): sorts the items by first item in the array - number', () => {
+    const items = [
+      {
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cbb',
+        favoriteNumbers: [1234, 2],
+      }, {
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb3',
+        favoriteNumbers: [145],
+      }, {
+        id: '410ecd35-696e-4e7a-ad35-c69bd4e14cb4',
+        favoriteNumbers: [-1],
+      },
+    ]
+
+    const { previousKey: sortKey1, sortOrder: sortOrder1 } =
+      clientSideSorter('favoriteNumbers', '', 'ascending', items)
+
+    expect(items.map(i => ({ favoriteNumbers: i.favoriteNumbers }))).to.deep.equal([
+      { favoriteNumbers: [-1] },
+      { favoriteNumbers: [145] },
+      { favoriteNumbers: [1234, 2] },
+    ])
+    expect(sortKey1).equal('favoriteNumbers')
+    expect(sortOrder1).equal('ascending')
+
+    const { previousKey: sortKey2, sortOrder: sortOrder2 } =
+      clientSideSorter('favoriteNumbers', 'favoriteNumbers', sortOrder1, items)
+
+    expect(items.map(i => ({ favoriteNumbers: i.favoriteNumbers }))).to.deep.equal([
+      { favoriteNumbers: [1234, 2] },
+      { favoriteNumbers: [145] },
+      { favoriteNumbers: [-1] },
+    ])
+    expect(sortKey2).equal('favoriteNumbers')
+    expect(sortOrder2).equal('descending')
+  })
+})
 
 describe('getSizeFromString(): ', () => {
   it('handles numbers', () => {
diff --git a/src/composables/useUtilities.ts b/src/composables/useUtilities.ts
index 2fafa054ea..ac9ead7252 100644
--- a/src/composables/useUtilities.ts
+++ b/src/composables/useUtilities.ts
@@ -98,6 +98,71 @@ export default function useUtilities() {
     }
   }
 
+  /**
+   * @param {String} key - the current key to sort by
+   * @param {String} previousKey - the previous key used to sort by
+   * @param {String} sortOrder - either ascending or descending
+   * @param {Array} items - the list of items to sort
+   * @return {Object} an object containing the previousKey and sortOrder
+   */
+  const clientSideSorter = (key: string, previousKey: string, sortOrder: string, items: Record<string, any>[]) => {
+    let comparator = null
+
+    const numberComparator = (a: number, b: number | string) => {
+      if (typeof b === 'number' && !Number.isNaN(a) && !Number.isNaN(b)) {
+        return a - b
+      }
+
+      return 0
+    }
+    const stringComparator = (a: string, b: string) => {
+      return a.localeCompare(b)
+    }
+
+    if (key !== previousKey) {
+      comparator = (a: any, b: any) => {
+        const transformer = (val: string | number) => {
+          if (val === undefined || val === null) {
+            return ''
+          }
+
+          if (typeof val === 'number') {
+            return val
+          }
+
+          if (Array.isArray(val) && val.length && typeof val[0] === 'number') {
+            return val[0]
+          }
+
+          return String(val)
+        }
+
+        const newValA: any = transformer(a[key])
+        const newValB: any = transformer(b[key])
+
+        switch (typeof newValA) {
+          case 'number':
+            return numberComparator(newValA, newValB)
+          default:
+            return stringComparator(newValA, newValB)
+        }
+      }
+
+      items.sort(comparator)
+      previousKey = key
+      sortOrder = 'ascending'
+    } else {
+      items.reverse()
+      if (sortOrder === 'descending' || sortOrder === 'desc') {
+        sortOrder = 'ascending'
+      } else {
+        sortOrder = 'descending'
+      }
+    }
+
+    return { previousKey, sortOrder }
+  }
+
   const useSwrvState = (response: Ref<any>, error: Ref<any>, isValidating: Ref<boolean>) => {
     const state = ref(swrvState.PENDING)
     const hasData = ref(false)
@@ -212,6 +277,7 @@ export default function useUtilities() {
   return {
     useRequest,
     useDebounce,
+    clientSideSorter,
     useSwrvState,
     getSizeFromString,
     cloneDeep,

From 0df734e10a1a68dbcbe12de3ed433fa2da16fe79 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 May 2024 17:06:58 -0400
Subject: [PATCH 29/33] fix(ktable): add default sorter function back
 [KHCP-9002]

---
 sandbox/pages/SandboxTable/SandboxTable.vue | 2 +-
 src/components/KTable/KTable.vue            | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index de4ecc5326..cd022f879a 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -19,7 +19,7 @@
         is-subtitle
         title="Props"
       />
-      <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute">
+      <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute & sortHandlerFunction">
         <KComponent
           v-slot="{ data }"
           :data="{ tableKey: 0, tableRowHover: false, tableEmptyState: false }"
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 314d1f10fe..e540e59d80 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -275,7 +275,7 @@ import {
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import ColumnVisibilityMenu from './ColumnVisibilityMenu.vue'
 
-const { useDebounce, useRequest, useSwrvState } = useUtilities()
+const { useDebounce, useRequest, useSwrvState, clientSideSorter: defaultClientSideSorter } = useUtilities()
 
 const props = defineProps({
   /**
@@ -852,6 +852,10 @@ const initData = () => {
   sortColumnKey.value = fetcherParams.sortColumnKey ?? defaultFetcherProps.sortColumnKey
   sortColumnOrder.value = fetcherParams.sortColumnOrder as SortColumnOrder ?? defaultFetcherProps.sortColumnOrder as SortColumnOrder
 
+  if (props.clientSort && sortColumnKey.value && sortColumnOrder.value) {
+    defaultClientSideSorter(sortColumnKey.value, '', sortColumnOrder.value, data.value)
+  }
+
   if (props.paginationOffset) {
     offset.value = fetcherParams.offset
     offsets.value.push(fetcherParams.offset)
@@ -941,6 +945,8 @@ const sortClickHandler = (header: TableHeader): void => {
         sortColumnOrder: sortColumnOrder.value,
         data: data.value,
       })
+    } else {
+      defaultClientSideSorter(key, prevKey, sortColumnOrder.value, data.value)
     }
   } else if (!props.paginationOffset) {
     debouncedRevalidate()

From e4cb43a0159ebb55fe084214b4a33bf66f151870 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Mon, 6 May 2024 17:22:16 -0400
Subject: [PATCH 30/33] docs(table): minor updates [KHCP-9002]

---
 docs/components/table.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/components/table.md b/docs/components/table.md
index 0db717e35c..5bf92cb120 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -228,6 +228,10 @@ Boolean to enable client side sorting if using a fetcher that returns unpaginati
 
 Pass a custom sort handler function to handle sorting table data for specific columns.
 
+:::warning WARNING
+If [`clientSort` prop](#clientsort) is `true` but no `sortHandlerFunction` provided, KTable will apply a default sorting function for client side sorting. This may produce unexpected results. Passing `sortHandlerFunction` to handle client side sorting of table data is the only way to **reliably** use client side sorting.
+:::
+
 The function can take an object with these properties as an only argument:
 
 ```ts

From a342b76def96ce4e13f352d868ad8d36eb108d87 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Tue, 7 May 2024 00:18:52 -0400
Subject: [PATCH 31/33] docs(table): tweak wording [KHCP-9002]

---
 docs/components/table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/table.md b/docs/components/table.md
index 5bf92cb120..2830818817 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -229,7 +229,7 @@ Boolean to enable client side sorting if using a fetcher that returns unpaginati
 Pass a custom sort handler function to handle sorting table data for specific columns.
 
 :::warning WARNING
-If [`clientSort` prop](#clientsort) is `true` but no `sortHandlerFunction` provided, KTable will apply a default sorting function for client side sorting. This may produce unexpected results. Passing `sortHandlerFunction` to handle client side sorting of table data is the only way to **reliably** use client side sorting.
+If [`clientSort` prop](#clientsort) is `true` but no `sortHandlerFunction` provided, KTable will apply some default logic for client side sorting. This may produce unexpected results. We recommend to **always** provide `sortHandlerFunction` when using client side sorting.
 :::
 
 The function can take an object with these properties as an only argument:

From 6e875e3edc328b0a33df8a1edeb7b7b2c7f163b2 Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Tue, 7 May 2024 16:10:31 -0400
Subject: [PATCH 32/33] docs(table): apply pr feedback

Co-authored-by: Kai Arrowood <kai.arrowood@konghq.com>
---
 docs/components/table.md | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/components/table.md b/docs/components/table.md
index 2830818817..0332fb6d12 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -25,7 +25,7 @@ interface TableHeader {
   key: string // must be unique for each column
   label: string // visible column header text
   sortable?: boolean // in a nutshell, this property defines whether sort icon should be displayed next to the column header and whether the column header will emit sort event upon clicking on it
-  hidable?: boolean
+  hidable?: boolean // allow toggling column visibility
   tooltip?: string // when provided, an info icon will be rendered next to the column label, upon hovering on which the tooltip will be revealed
   hideLabel?: boolean // whether column header text should be hidden (only visible to screen readers)
   useSortHandlerFunction?: boolean // whether KTable should use function passed through sortHandlerFunction prop to apply sorting logic to this column
@@ -33,10 +33,10 @@ interface TableHeader {
 ```
 
 :::tip NOTE
-If at least one column is hidable in the table, KTable will render a dropdown on the right of the table toolbar, directly above the table, which will provide an interface for showing/hiding columns to the user.
+If at least one column is `hidable` in the table, KTable will render a dropdown on the right of the table toolbar, directly above the table, which will provide an interface for showing/hiding columns to the user.
 :::
 
-For example of `headers` prop usage please refer to [`fetcher` prop documentation](#fetcher) below.
+For an example of `headers` prop usage please refer to [`fetcher` prop documentation](#fetcher) below.
 
 ### fetcher
 
@@ -87,7 +87,8 @@ const fetcher = async (): Promise<any> => {
   const responseData = [
     {
       id: 1,
-      name: 'Leanne Graham', // notice that property keys in data object correspond to each respective key in headers const
+      // notice that property keys in data object correspond to each respective key in headers const
+      name: 'Leanne Graham', 
       username: 'Bret',
       email: 'Sincere@april.biz'
     },
@@ -135,12 +136,12 @@ const sortHandlerFunction = ({ key, sortColumnOrder, data }) => {
 ```
 
 :::tip NOTE
-Notice that in the example above _Username_ column is sortable and _Email_ column is hidable. In this example sorting is handled on the client side, however should you want to apply serer-side logic to handle sorting, you can bind your logic to [`sort` event](#sort) and perform re-fetching of data as needed.
+Notice that in the example above the _Username_ column is `sortable` and the _Email_ column is `hidable`. In this example sorting is handled on the client side, however should you want to apply server-side logic to handle sorting, you can bind your logic to the [`sort` event](#sort) and perform re-fetching of data as needed.
 :::
 
 ### initialFetcherParams
 
-Fetcher function takes a single param - an object with following properties:
+Fetcher function takes a single param - an object with the following properties:
 
 ```ts
 interface FetcherParams {
@@ -168,7 +169,7 @@ For ease of configuration, all properties in the `initialFetcherParams` object h
 
 ### loading
 
-Boolean to control whether the component should display loading state. When not explicitly set, KTable will display loading state until function passed through [`fetcher` prop](#fetcher) resolves.
+Boolean to control whether the component should display the loading state. When not explicitly set, KTable will display the loading state until the function passed for the [`fetcher` prop](#fetcher) resolves.
 
 <KTable
   loading
@@ -186,7 +187,7 @@ Boolean to control whether the component should display loading state. When not
 
 ### error
 
-Boolean to control whether the component should display error state. Defaults to `false`. See [error state](#error-1) section for more customization options.
+Boolean to control whether the component should display the error state. Defaults to `false`. See [error state](#error-1) section for more customization options.
 
 <KTable
   error
@@ -222,17 +223,17 @@ Allow table column width to be resizable (defaults to `false`). Adjusting a colu
 
 ### clientSort
 
-Boolean to enable client side sorting if using a fetcher that returns unpaginatinated data. Defaults to `false`. Use this in conjunction with [`sortHandlerFunction` prop](#sorthandlerfunction).
+Boolean to enable client side sorting if using a fetcher that returns unpaginated data. Defaults to `false`. Use this in conjunction with [`sortHandlerFunction` prop](#sorthandlerfunction).
 
 ### sortHandlerFunction
 
 Pass a custom sort handler function to handle sorting table data for specific columns.
 
 :::warning WARNING
-If [`clientSort` prop](#clientsort) is `true` but no `sortHandlerFunction` provided, KTable will apply some default logic for client side sorting. This may produce unexpected results. We recommend to **always** provide `sortHandlerFunction` when using client side sorting.
+If [`clientSort` prop](#clientsort) is `true` but no `sortHandlerFunction` provided, KTable will apply some default logic for client side sorting. This may produce unexpected results. We recommend **always** providing a `sortHandlerFunction` when using client side sorting.
 :::
 
-The function can take an object with these properties as an only argument:
+The function can take an object with these properties as the only argument:
 
 ```ts
 interface SortHandlerFunctionParam {
@@ -244,7 +245,7 @@ interface SortHandlerFunctionParam {
 ```
 
 :::tip NOTE
-Please note that you have to set [`clientSort` prop](#clientsort) to `true` as well as to pass `sortable: true` and `useSortHandlerFunction: true` in the respecting [headers object](#headers) to make a column sortable via `sortHandlerFunction`.
+Please note that you have to set [`clientSort` prop](#clientsort) to `true` as well as to pass `sortable: true` and `useSortHandlerFunction: true` in the respective [headers object](#headers) to make a column sortable via `sortHandlerFunction`.
 :::
 
 Please refer to [`fetcher` prop documentation](#fetcher) for example.

From b393f4915213bf134d469041b9a4f277d41d43f4 Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Thu, 9 May 2024 09:26:29 -0400
Subject: [PATCH 33/33] fix(kskeleton): adjust table row height [KHCP-9002]

---
 src/components/KSkeleton/TableSkeleton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KSkeleton/TableSkeleton.vue b/src/components/KSkeleton/TableSkeleton.vue
index cfa4463ee6..04106e9336 100644
--- a/src/components/KSkeleton/TableSkeleton.vue
+++ b/src/components/KSkeleton/TableSkeleton.vue
@@ -53,7 +53,7 @@ const calcWidth = (cell: number, row: number): SkeletonBoxWidth => {
   .skeleton-table-row {
     display: flex;
     gap: var(--kui-space-20, $kui-space-20);
-    padding: var(--kui-space-80, $kui-space-80) var(--kui-space-40, $kui-space-40);
+    padding: var(--kui-space-60, $kui-space-60) var(--kui-space-40, $kui-space-40);
     width: 100%;
 
     &:not(:last-child) {