diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 298360c8c0..56d269db0c 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -84,6 +84,7 @@ export default defineConfig({
             { text: 'Slideout', link: '/components/slideout' },
             { text: 'Stepper', link: '/components/stepper' },
             { text: 'Table', link: '/components/table' },
+            { text: 'Table View', link: '/components/table-view' },
             { text: 'Tabs', link: '/components/tabs' },
             { text: 'Textarea', link: '/components/textarea' },
             { text: 'Toaster', link: '/components/toaster' },
diff --git a/docs/components/table-view.md b/docs/components/table-view.md
new file mode 100644
index 0000000000..bacad1e294
--- /dev/null
+++ b/docs/components/table-view.md
@@ -0,0 +1,1091 @@
+# Table View
+
+Component for displaying data in table format.
+
+:::tip NOTE
+KTableView does not handle data management capabilities like data fetching, functional pagination, sorting or searching. If you are looking for a component that integrates with the data layer, check out [KTable](/components/table).
+:::
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+## Props
+
+### headers
+
+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 TableViewHeader {
+  /** must be unique for each column, see Reserved Header Keys section for more information about 'actions' key value */
+  key: string
+  /** visible column header text */
+  label: string
+  /** 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 */
+  sortable?: boolean
+  /** allow toggling column visibility */
+  hidable?: boolean
+  /** when provided, an info icon will be rendered next to the column label, upon hovering on which the tooltip will be revealed */
+  tooltip?: string
+  /** whether column header text should be hidden (only visible to screen readers) */
+  hideLabel?: boolean
+}
+```
+
+:::tip NOTE
+If at least one column is `hidable` in the table, KTableView 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 an example of `headers` prop usage please refer to [`data` prop documentation](#data) below.
+
+#### Reserved Header Keys
+
+- `actions` - the column displays an actions [KDropdown](/components/dropdown) button for each row and displays no label (as if `hideLabel` was `true`; you can set `hideLabel` parameter to `false` to show the label). KTableView will automatically render the actions dropdown button with an icon and you simply need to provide dropdown items via the [`action-items` slot](#action-items).
+
+### data
+
+Data to be rendered in the table. Accepted interface is an array of objects where each property key should have a corresponding `key` in the [`headers` prop](#headers).
+
+```ts
+type TableViewData = Record<string, any>[]
+```
+
+<KTableView
+  :data="basicDataSortable"
+  :headers="basicHeaders(true, 'username', 'email')"
+  @sort="sortBasicData"
+  :pagination-attributes="{ totalCount: basicData.length }"
+>
+  <template #action-items>
+    <KDropdownItem>
+      Edit
+    </KDropdownItem>
+    <KDropdownItem
+      danger
+      has-divider
+    >
+      Delete
+    </KDropdownItem>
+  </template>
+</KTableView>
+
+```vue
+<template>
+  <KTableView
+    :data="tableData"
+    :headers="headers"
+    @sort="sortData"
+    :pagination-attributes="{ totalCount: tableData.length }"
+  >
+    <template #action-items>
+      <KDropdownItem>
+        Edit
+      </KDropdownItem>
+      <KDropdownItem
+        danger
+        has-divider
+      >
+        Delete
+      </KDropdownItem>
+    </template>
+  </KTableView>
+</template>
+
+<script setup lang="ts">
+import type { TableViewHeader, TableViewData } from '@kong/kongponents'
+
+const headers: Array<TableViewHeader> = [
+  {
+    key: 'name', 
+    label: 'Full Name', 
+  },
+  {
+    key: 'username',
+    label: 'Username',
+    sortable: true,
+    tooltip: 'Unique for each user.',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+    hidable: true,
+  },
+  {
+    key: 'actions',
+    label: 'Row actions',
+  },
+]
+
+const tableData = ref<TableViewData>([
+  {
+    id: 1,
+    // notice that property keys in data object correspond to each respective key in headers const
+    name: 'Leanne Graham', 
+    username: 'Bret',
+    email: 'Sincere@april.biz'
+  },
+  {
+    id: 2,
+    name: 'Ervin Howell',
+    username: 'Antonette',
+    email: 'Shanna@melissa.tv'
+  },
+  ...
+])
+
+const sortData = (sortData: TableSortPayload): void => {
+  const data = [...tableData.value]
+  const { sortColumnKey, sortColumnOrder } = sortData || { sortColumnKey: 'username', sortColumnOrder: 'asc' }
+
+  data.sort((a: Record<string, any>, b: Record<string, any>) => {
+    if (sortColumnKey === '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 0
+  })
+
+  tableData.value = data
+}
+</script>
+```
+
+:::tip NOTE
+Notice that in the example above the _Username_ column is `sortable` and the _Email_ column is `hidable`.
+:::
+
+### loading
+
+Boolean to control whether the component should display the loading state. Defaults to `false`.
+
+<KTableView
+  loading
+  :data="basicData"
+  :headers="basicHeaders()"
+/>
+
+```html
+<KTableView
+  loading
+  :data="tableData"
+  :headers="headers"
+/>
+```
+
+### error
+
+Boolean to control whether the component should display the error state. Defaults to `false`. See [error state](#error-1) section for more customization options.
+
+<KTableView
+  error
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  error
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+### resizeColumns
+
+Allow table column width to be resizable (defaults to `false`). Adjusting a column's width will trigger an [`update:table-preferences` event](#updatetable-preferences).
+
+<KTableView
+  resize-columns
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  resize-columns
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+### rowHover
+
+Boolean to control whether table should display hover state upon hovering rows. Defaults to `true`.
+
+### tablePreferences
+
+Can be used to pass object with locally stored preferences for different table configuration options. For example, when user resizes a column in a given table, `update:table-preferences` event will be emitted - you can then save the value and re-apply it next time user encounters this table.
+
+```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?: SortColumnOrder
+  /** the customized column widths, if resizing is allowed */
+  columnWidths?: Record<string, number>
+  /** column visibility, if visibility is toggleable */
+  columnVisibility?: Record<string, boolean>
+}
+```
+
+<KTableView
+  :table-preferences="{ columnVisibility: { email: false } }"
+  :data="basicData"
+  :headers="basicHeaders(false, null, 'email')"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  :table-preferences="{ columnVisibility: { email: false } }"
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+### rowAttrs
+
+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.
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :row-attrs="(row) => { return { 'data-testid': `row-${row.id}` } }"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  :row-attrs="(row) => { return { 'data-testid': `row-${row.id}` } }"
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+### rowLink
+
+Function for turning row into a link. The function receives row value object as an argument and should return an object with two optional parameters:
+
+```ts
+interface RowLink {
+  /** RouteLocationRaw or url string for row link */
+  to?: RouteLocationRaw | string
+  /** Target for row link */
+  target?: '_self' | '_blank' | '_parent' | '_top'
+}
+```
+
+<KTableView
+  :row-link="getRowLink"
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```vue
+<template>
+  <KTableView
+    :row-link="getRowLink"
+    :data="tableData"
+    :headers="headers"
+    :pagination-attributes="{ totalCount: tableData.length }"
+  />
+</template>
+
+
+<script setup lang="ts">
+import type { RowLink } from '@kong/kongponents'
+
+const headers = [...]
+
+const tableData = [...]
+
+const getRowLink = (row: Record<string, any>): RowLink => ({
+  // using static route for demonstration purposes
+  // but you can generate dynamic routes based on the row data
+  to: { name: 'home' }, // pass a string to render the link as an anchor element instead of a router-link
+  target: '_blank',
+})
+</script>
+```
+
+### 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
+}
+```
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :cell-attrs="({ headerKey, row }) => { return { 'data-testid': `column-${headerKey}-row-${row.id}` } }"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  :cell-attrs="({ headerKey, row }) => { return { 'data-testid': `column-${headerKey}-row-${row.id}` } }"
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+### maxHeight
+
+Limit the table height by passing a number, in pixels. If the table height exceeds the specified number, it will be scrollable. Table header is a `position: sticky;` element and will always be visible.
+
+<KTableView
+  max-height="300"
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+/>
+
+```html
+<KTableView
+  max-height="300"
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+/>
+```
+
+### paginationAttributes
+
+Object to be passed to underlying pagination component. See [KPagination props](/components/pagination#props) for more details. Expects an object of type `TablePaginationAttributes`:
+
+```ts
+interface TablePaginationAttributes {
+  totalCount?: number
+  pageSizes?: number[]
+  initialPageSize?: number
+  currentPage?: number
+  offset?: boolean
+  disablePageJump?: boolean
+  offsetPreviousButtonDisabled?: boolean
+  offsetNextButtonDisabled?: boolean
+}
+```
+
+<KTableView
+  :pagination-attributes="{ totalCount: basicPaginatedData.length, pageSizes: [5, 10] }"
+  :data="paginatedData"
+  :headers="basicHeaders()"
+  @page-change="onPageChange"
+  @page-size-change="onPageSizeChange"
+/>
+
+```html
+<KTableView
+  :pagination-attributes="{ totalCount: tableData.length, pageSizes: [5, 10] }"
+  :data="paginatedData"
+  :headers="headers"
+/>
+```
+
+### hidePagination
+
+A boolean to hide pagination element (defaults to `false`).
+
+## States
+
+### Empty
+
+<KTableView 
+  :data="[]"
+  :headers="basicHeaders()"
+/>
+
+```html
+<KTableView 
+  :data="[]"
+  :headers="headers"
+/>
+```
+
+Set the following props to handle empty state:
+
+- `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
+- `emptyStateButtonAppearance` - Appearance of empty state action button. See [KButton `appearance` prop](/components/button#appearance) for details
+
+:::tip
+To display an icon inside of action button, you can use the `empty-state-action-icon` slot.
+:::
+
+When the empty state action button is clicked, KTableView emits the `empty-state-action-click` event.
+
+<KTableView 
+  :data="[]"
+  :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="/"
+  empty-state-button-appearance="secondary"
+>
+  <template #empty-state-action-icon>
+    <AddIcon />
+  </template>
+</KTableView>
+
+```html
+<KTableView 
+  :data="[]"
+  :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="/"
+  empty-state-button-appearance="secondary"
+>
+  <template #empty-state-action-icon>
+    <AddIcon />
+  </template>
+</KTableView>
+```
+
+### Error
+
+Set the `error` prop to `true` to enable the error state.
+
+<KTableView
+  error
+  :data="basicData"
+  :headers="basicHeaders()"
+/>
+
+```html
+<KTableView
+  error
+  :data="tableData"
+  :headers="headers"
+/>
+```
+
+Set the following properties to customize the error state:
+
+- `errorStateTitle` - Title text for the error state
+- `errorStateMessage` - Message for the error state
+- `errorStateActionMessage` - Button text for the error state action
+- `errorStateActionRoute` - Route for the error state action
+
+A `error-action-click` event is emitted when error state action button is clicked.
+
+<KTableView
+  :data="basicData"
+  :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="/"
+/>
+
+```html
+<KTableView
+  error
+  :data="tableData"
+  :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="/"
+/>
+```
+
+## Slots
+
+### 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.
+
+Slot props:
+* `column` - column header object
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+>
+  <template #column-email="{ column }">
+    {{ column.label }} <KBadge>Beta</KBadge>
+  </template>
+</KTableView>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+>
+  <template #column-email="{ column }">
+    {{ column.label }} <KBadge>Beta</KBadge>
+  </template>
+</KTableView>
+```
+
+### Cell
+
+You can provide each individual cell's content via slot. Each cell slot is named after the header `key` it corresponds to.
+
+Slot props:
+* `row` - table row object
+* `rowKey` - table row index
+* `rowValue` - the cell value
+
+:::warning NOTE
+This slot is not supported for the [`actions` column](#reserved-header-keys).
+:::
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+>
+  <template #email="{ rowValue }">
+    <KCopy :text="rowValue" />
+  </template>
+</KTableView>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+>
+  <template #email="{ rowValue }">
+    <KCopy :text="rowValue" />
+  </template>
+</KTableView>
+```
+
+### Header Tooltip
+
+Utilize HTML in the column header's tooltip by utilizing this slot. Similar to the column header slot, it uses the column `key` value prefixed with `tooltip-*` as shown in the example below.
+
+Slot props:
+* `column` - column header object
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+>
+  <template #tooltip-email>
+    HubSpot Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
+  </template>
+</KTableView>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+>
+  <template #tooltip-email>
+    HubSpot Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
+  </template>
+</KTableView>
+```
+
+### toolbar
+
+The toolbar is rendered directly above the table and is useful for providing table controls like search or filter fields.
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders()"
+  :pagination-attributes="{ totalCount: basicData.length }"
+>
+  <template #toolbar>
+    <KInput placeholder="Search">
+      <template #before>
+        <SearchIcon />
+      </template>
+    </KInput>
+    <KButton size="large">
+      <AddIcon /> Add user
+    </KButton>
+  </template>
+</KTableView>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+>
+  <template #toolbar>
+    <KInput placeholder="Search">
+      <template #before>
+        <SearchIcon />
+      </template>
+    </KInput>
+    <KButton size="large">
+      <AddIcon /> Add user
+    </KButton>
+  </template>
+</KTableView>
+```
+
+### empty-state
+
+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 error state.
+
+### action-items
+
+Slot for passing action dropdown items. See [KDropdownItem component docs](/components/dropdown#kdropdownitem) for details.
+
+Slot props:
+* `row` - table row object
+* `rowKey` - table row index
+
+:::tip NOTE
+This slot is only available when the `actions` header key is present in [`headers`](#reserved-header-keys).
+:::
+
+<KTableView
+  :data="basicData"
+  :headers="basicHeaders(true)"
+  :pagination-attributes="{ totalCount: basicData.length }"
+>
+  <template #action-items>
+    <KDropdownItem>
+      Edit
+    </KDropdownItem>
+    <KDropdownItem
+      danger
+      has-divider
+    >
+      Delete
+    </KDropdownItem>
+  </template>
+</KTableView>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  :pagination-attributes="{ totalCount: tableData.length }"
+>
+  <template #action-items>
+    <KDropdownItem>
+      Edit
+    </KDropdownItem>
+    <KDropdownItem
+      danger
+      has-divider
+    >
+      Delete
+    </KDropdownItem>
+  </template>
+</KTableView>
+```
+
+## 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 emitted, returns the row `data`.
+
+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`.
+
+The table in the example below contains buttons, inputs and links to demonstrate how KTableView handles clicks on different interactive elements within the table as well as clicks on its rows.
+
+Try clicking below on the table row, and then within elements inside the table cells.
+
+<KComponent v-slot="{ data }" :data="{ rowClickEnabled: true }">
+  <div class="vertical-container">
+    <KInputSwitch
+      v-model="data.rowClickEnabled"
+      label="Row clicks"
+    />
+    <KTableView
+      :data="numberedColumnsData"
+      :headers="numberedHeaders"
+      @row:click="data.rowClickEnabled ? onRowClick : undefined"
+      hide-pagination
+    >
+      <template #column1>
+        <KButton @click="onButtonClick">Button with click handler</KButton>
+      </template>
+      <template #column2>
+        <KInput label="Table input" />
+      </template>
+      <template #column3>
+        <KExternalLink href="https://kongponents.konghq.com/">External link</KExternalLink>
+      </template>
+    </KTableView>
+  </div>
+</KComponent>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  @row:click="onRowClick"
+  hide-pagination
+/>
+```
+
+### 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 emitted, returns the cell `data`.
+
+The table in the example below contains buttons, inputs and links to demonstrate how KTableView handles clicks on different interactive elements within the table as well as clicks on its cells.
+
+<KComponent v-slot="{ data }" :data="{ cellClickEnabled: true }">
+  <div class="vertical-container">
+    <KInputSwitch
+      v-model="data.cellClickEnabled"
+      label="Cell clicks"
+    />
+    <KTableView
+      :data="numberedColumnsData"
+      :headers="numberedHeaders"
+      @cell:click="data.cellClickEnabled ? onCellClick : undefined"
+      hide-pagination
+    >
+      <template #column1>
+        <KButton appearance="secondary" @click="onButtonClick">Button with click handler</KButton>
+      </template>
+      <template #column2="{ rowKey }">
+        <KInputSwitch v-model="toggleModel[rowKey]" />
+      </template>
+      <template #column3>
+        <KExternalLink hide-icon href="https://kongponents.konghq.com/">External link</KExternalLink>
+      </template>
+    </KTableView>
+  </div>
+</KComponent>
+
+```html
+<KTableView
+  :data="tableData"
+  :headers="headers"
+  @cell:click="onCellClick"
+  hide-pagination
+/>
+```
+
+### Pagination Events
+
+KTableView propagates all events emitted by underlying pagination component. See [KPagination docs](/components/pagination#events) for more details.
+
+### sort
+
+Emitted when user clicks on a sortable column heading. Event payload is object of type `TableSortPayload`:
+
+```ts
+interface TableSortPayload {
+  prevKey: string
+  sortColumnKey: string
+  sortColumnOrder: string
+}
+```
+
+Refer to [`data` prop usage](#data) for example.
+
+### empty-state-action-click
+
+Emitted when empty state action button is clocked.
+
+### error-action-click
+
+Emitted when error state action button is clicked.
+
+### update:table-preferences
+
+Emitted when the user performs sorting, resizes columns or toggles column visibility. Event payload is object of type `TablePreferences` interface (see [`tablePreferences` prop](#tablepreferences) for details).
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { AddIcon, SearchIcon, MoreIcon } from '@kong/icons'
+import { ToastManager } from '@/index'
+
+const toaster = new ToastManager()
+
+const basicHeaders = (actions: boolean = false, sortable: string | null = null, hidable: string | null = null): Array<TableViewHeader> => {
+  const keys = {
+    name: { 
+      key: 'name',
+      label: 'Full Name'
+    },
+    username: {
+      key: 'username',
+      label: 'Username',
+      tooltip: 'Unique for each user.'
+    },
+    email: { 
+      key: 'email',
+      label: 'Email' 
+    },
+    ...(actions && { 
+      actions: {
+        key: 'actions',
+        label: 'Row actions',
+      },
+    })
+  }
+
+  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 })
+    } else if (hidable && hidable === key) {
+      headers.push({ ...value, hidable: true })
+    }
+  }
+
+  return headers
+}
+
+const basicData: TableViewData = [
+  {
+    id: 1,
+    name: 'Leanne Graham',
+    username: 'Bret',
+    email: 'Sincere@april.biz',
+  },
+  {
+    id: 2,
+    name: 'Ervin Howell',
+    username: 'Antonette',
+    email: 'Shanna@melissa.tv',
+  },
+  {
+    id: 3,
+    name: 'Clementine Bauch',
+    username: 'Samantha',
+    email: 'Nathan@yesenia.net',
+  },
+  {
+    id: 4,
+    name: 'Patricia Lebsack',
+    username: 'Karianne',
+    email: 'Julianne.OConner@kory.org',
+  },
+  {
+    id: 5,
+    name: 'Chelsey Dietrich',
+    username: 'Kamren',
+    email: 'Lucio_Hettinger@annie.ca',
+  },
+  {
+    id: 6,
+    name: 'Mrs. Dennis Schulist',
+    username: 'Leopoldo_Corkery',
+    email: 'Karley_Dach@jasper.info',
+  },
+  {
+    id: 7,
+    name: 'Kurtis Weissnat',
+    username: 'Elwyn.Skiles',
+    email: 'Telly.Hoeger@billy.biz',
+  },
+  {
+    id: 8,
+    name: 'Nicholas Runolfsdottir V',
+    username: 'Maxime_Nienow',
+    email: 'Sherwood@rosamond.me',
+  },
+  {
+    id: 9,
+    name: 'Glenna Reichert',
+    username: 'Delphine',
+    email: 'Chaim_McDermott@dana.io',
+  },
+  {
+    id: 10,
+    name: 'Clementina DuBuque',
+    username: 'Moriah.Stanton',
+    email: 'Rey.Padberg@karina.biz',
+  },
+]
+
+const basicDataSortable = ref<TableViewData>(basicData)
+
+const sortBasicData = (sortData: TableSortPayload): void => {
+  const data = [...basicData]
+  const { sortColumnKey, sortColumnOrder } = sortData || { sortColumnKey: 'username', sortColumnOrder: 'asc' }
+
+  data.sort((a: Record<string, any>, b: Record<string, any>) => {
+    if (sortColumnKey === '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 0
+  })
+
+  basicDataSortable.value = data
+}
+
+const extraRecords: TableViewData = [
+  {
+    id: 1,
+    name: 'Chris Lo',
+    username: 'Krislow',
+    email: 'dj@kris.low',
+  },
+  {
+    id: 2,
+    name: 'Vitaliy Yarmak',
+    username: 'Tamarack',
+    email: 'Right@sail.xyz',
+  },
+]
+const basicPaginatedData: TableViewData = [...basicData, ...extraRecords]
+const paginatedPageSize = ref<number>(5)
+const paginatedData = ref<TableViewData>(basicPaginatedData.slice(0, paginatedPageSize.value))
+const onPageChange = ({ page }: PageChangeData) => {
+  if (page === 1) {
+    paginatedData.value = basicPaginatedData.slice(0, paginatedPageSize.value)
+  } else {
+    paginatedData.value = basicPaginatedData.slice((paginatedPageSize.value * (page - 1)), (paginatedPageSize.value * (page - 1)) + paginatedPageSize.value)
+  }
+}
+const onPageSizeChange = ({ pageSize }: PageChangeData) => {
+  paginatedPageSize.value = pageSize
+}
+
+const getRowLink = (row: Record<string, any>): TableRowAttributes => ({
+  // using static route for demonstration purposes
+  // but you can generate dynamic routes based on the row data
+  to: { path: '/' }, // pass a string to render the link as an anchor element instead of a router-link
+  target: '_blank',
+})
+
+const numberedHeaders: Array<TableViewHeader> = [
+  {
+    key: 'column1',
+    label: 'Column 1'
+  },
+  {
+    key: 'column2',
+    label: 'Column 2'
+  },
+  {
+    key: 'column3',
+    label: 'Column 3'
+  }
+]
+
+const numberedColumnsData: TableViewData = [
+  { 
+    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'
+  }
+]
+
+const onRowClick = (event, row) => {
+  toaster.open({ appearance: 'success', title: 'Row clicked! Row data:', message: row })
+}
+
+const onButtonClick = () => {
+  toaster.open({ appearance: 'system', title: 'Button clicked!', message: 'Button click is handled separately from row or cell clicks.' })
+}
+
+const onCellClick = (event, cell) => {
+  toaster.open({ title: 'Cell clicked! Cell data:', message: cell })
+}
+
+const toggleModel = ref<boolean[]>([false, false, false])
+</script>
+
+<style lang="scss" scoped>
+.vertical-container {
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-50;
+}
+</style>
diff --git a/docs/components/table.md b/docs/components/table.md
index 427dc71694..0eab53c665 100644
--- a/docs/components/table.md
+++ b/docs/components/table.md
@@ -2,6 +2,10 @@
 
 Component that takes care of fetching and rendering data in a table format.
 
+:::tip NOTE
+If you are looking for a simpler table component that does not integrate data fetching, check out [KTableView](/components/table-view).
+:::
+
 <KTable
   :fetcher="basicFetcher"
   :headers="basicHeaders()"
@@ -411,6 +415,24 @@ The passed function receives an object with these parameters as an argument:
 />
 ```
 
+### maxHeight
+
+Pass a number (px) you want to limit table height to. If the height table exceeds the specified number, it will be scrollable. Table header is a `position: sticky;` element and will always be visible.
+
+<KTable
+  max-height="300"
+  :fetcher="basicFetcher"
+  :headers="basicHeaders()"
+/>
+
+```html
+<KTable
+  max-height="300"
+  :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:
diff --git a/sandbox/index.ts b/sandbox/index.ts
index 0b194e3b19..2473b2dab4 100644
--- a/sandbox/index.ts
+++ b/sandbox/index.ts
@@ -43,6 +43,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
   { name: 'KSlideout', to: { name: 'slideout' } },
   { name: 'KStepper', to: { name: 'stepper' } },
   { name: 'KTable', to: { name: 'table' } },
+  { name: 'KTableView', to: { name: 'table-view' } },
   { name: 'KTabs', to: { name: 'tabs' } },
   { name: 'KTextarea', to: { name: 'textarea' } },
   { name: 'KToaster', to: { name: 'toaster' } },
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index f416f02694..02c32e7089 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -9,7 +9,7 @@
         is-subtitle
         title="Props"
       />
-      <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute & sortHandlerFunction">
+      <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute & sortHandlerFunction & maxHeight">
         <KComponent
           v-slot="{ data }"
           :data="{ tableKey: 0, tableRowHover: false, tableEmptyState: false }"
@@ -36,7 +36,7 @@
             empty-state-title="Empty state title"
             :fetcher="data.tableEmptyState ? emptyFetcher : fetcher"
             :headers="headers(false, true)"
-            resize-columns
+            max-height="300"
             :row-hover="data.tableRowHover"
             :sort-handler-function="sortHandlerFunction"
           >
@@ -47,7 +47,7 @@
         </KComponent>
       </SandboxSectionComponent>
       <SandboxSectionComponent
-        description="This table has clickable rows."
+        description="All rows in this table are clickable."
         title="loading & resizeColumns & error & errorStateTitle & errorStateMessage & errorStateActionMessage & errorStateActionRoute"
       >
         <KComponent
diff --git a/sandbox/pages/SandboxTableView/SandboxTableView.vue b/sandbox/pages/SandboxTableView/SandboxTableView.vue
new file mode 100644
index 0000000000..58946213ef
--- /dev/null
+++ b/sandbox/pages/SandboxTableView/SandboxTableView.vue
@@ -0,0 +1,381 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KTableView"
+  >
+    <div class="k-table-view-sandbox">
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="rowHover & emptyStateIconVariant & emptyStateTitle & emptyStateMessage & emptyStateActionMessage & emptyStateActionRoute & emptyStateButtonAppearance & maxHeight">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ tableKey: 0, tableRowHover: false, tableEmptyState: false }"
+        >
+          <div class="horizontal-container">
+            <KInputSwitch
+              v-model="data.tableRowHover"
+              label="Has hover"
+            />
+            <KInputSwitch
+              v-model="data.tableEmptyState"
+              label="Empty state"
+              @change="data.tableKey++"
+            />
+          </div>
+
+          <KTableView
+            :key="data.tableKey"
+            :data="data.tableEmptyState ? [] : sortedData"
+            empty-state-action-message="Empty state action"
+            empty-state-action-route="/"
+            empty-state-button-appearance="secondary"
+            empty-state-icon-variant="kong"
+            empty-state-message="Empty state message"
+            empty-state-title="Empty state title"
+            :headers="headers(false, true)"
+            max-height="300"
+            :row-hover="data.tableRowHover"
+            @sort="sortData"
+          >
+            <template #action-items>
+              <SandboxTableViewActions />
+            </template>
+          </KTableView>
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        description="All rows in this table are clickable."
+        title="loading & resizeColumns & error & errorStateTitle & errorStateMessage & errorStateActionMessage & errorStateActionRoute & hidePagination"
+      >
+        <KComponent
+          v-slot="{ data }"
+          :data="{ tableLoadingState: false, tableErrorState: false, hidePagination: false }"
+        >
+          <div class="horizontal-container">
+            <KInputSwitch
+              v-model="data.tableLoadingState"
+              label="Loading state"
+            />
+            <KInputSwitch
+              v-model="data.tableErrorState"
+              label="Error state"
+            />
+            <KInputSwitch
+              v-model="data.hidePagination"
+              label="Hide pagination"
+            />
+          </div>
+
+          <KTableView
+            :data="tableData"
+            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"
+            :headers="headers(true)"
+            :hide-pagination="data.hidePagination"
+            :loading="data.tableLoadingState"
+            resize-columns
+            @row:click="(_event: any, row: any) => onRowClick(row)"
+          >
+            <template #action-items>
+              <SandboxTableViewActions />
+            </template>
+          </KTableView>
+        </KComponent>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="rowLink (router-link)">
+        <KTableView
+          :data="sortedData"
+          :headers="headers()"
+          :row-link="getRowLinksRouter"
+        >
+          <template #action-items>
+            <SandboxTableViewActions />
+          </template>
+          <template #username="{ rowValue }">
+            <KExternalLink
+              class="username-link"
+              href="https://kongponents.konghq.com/components/alert.html"
+            >
+              @{{ rowValue }}
+            </KExternalLink>
+          </template>
+          <template #email="{ rowValue }">
+            <KCopy :text="rowValue" />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="rowLink (anchor)">
+        <KTableView
+          :data="sortedData"
+          :headers="headers()"
+          :row-link="getRowLinksAnchor"
+        >
+          <template #action-items>
+            <SandboxTableViewActions />
+          </template>
+          <template #username="{ rowValue }">
+            <KExternalLink
+              class="username-link"
+              href="https://kongponents.konghq.com/components/alert.html"
+            >
+              @{{ rowValue }}
+            </KExternalLink>
+          </template>
+          <template #email="{ rowValue }">
+            <KCopy :text="rowValue" />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent
+        title="column header & column tooltip & cell"
+      >
+        <KTableView
+          :data="tableData"
+          :headers="headers()"
+        >
+          <template #column-username>
+            Username
+
+            <KBadge>Beta</KBadge>
+          </template>
+          <template #tooltip-email>
+            Id: <code>8576925e-d7e0-4ecd-8f14-15db1765e69a</code>
+          </template>
+          <template #email="{ rowValue }">
+            <KCopy :text="rowValue" />
+          </template>
+          <template #action-items>
+            <SandboxTableViewActions />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="toolbar">
+        <KTableView
+          :data="tableData"
+          :headers="headers()"
+        >
+          <template #toolbar>
+            <KInput />
+            <KButton size="large">
+              <AddIcon /> Add user
+            </KButton>
+          </template>
+          <template #action-items>
+            <SandboxTableViewActions />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="after">
+        <KTableView
+          :data="tableData"
+          :headers="headers()"
+        >
+          <template #after>
+            <KPagination :total-count="10" />
+          </template>
+          <template #action-items>
+            <SandboxTableViewActions />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="error-state">
+        <KTableView
+          :data="tableData"
+          error
+          :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>
+        </KTableView>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="empty-state">
+        <KTableView
+          :data="[]"
+          :headers="headers()"
+        >
+          <template #empty-state>
+            <KEmptyState
+              action-button-text="Slotted empty state action"
+              message="Slotted empty state message"
+              title="Slotted empty state title"
+            />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="empty-state-action-icon">
+        <KTableView
+          :data="[]"
+          empty-state-action-message="Empty state action"
+          :headers="headers()"
+        >
+          <template #empty-state-action-icon>
+            <AddIcon />
+          </template>
+        </KTableView>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject, ref } from 'vue'
+import SandboxTitleComponent from '../../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../../components/SandboxSectionComponent.vue'
+import type { TableHeader, TableViewData, TableSortPayload, RowLink } from '@/types'
+import SandboxTableViewActions from './SandboxTableViewActions.vue'
+import { AddIcon } from '@kong/icons'
+
+const headers = (hidable: boolean = false, sortable: boolean = false): TableHeader[] => {
+  return [
+    { key: 'name', label: 'Full Name' },
+    { key: 'username', label: 'Username', tooltip: 'Columns with a tooltip.', sortable },
+    { key: 'email', label: 'Email', hidable },
+    { key: 'actions', label: 'Row actions' },
+  ]
+}
+
+const tableData: TableViewData = [
+  {
+    id: 1,
+    name: 'Leanne Graham',
+    username: 'Bret',
+    email: 'Sincere@april.biz',
+  },
+  {
+    id: 2,
+    name: 'Ervin Howell',
+    username: 'Antonette',
+    email: 'Shanna@melissa.tv',
+  },
+  {
+    id: 3,
+    name: 'Clementine Bauch',
+    username: 'Samantha',
+    email: 'Nathan@yesenia.net',
+  },
+  {
+    id: 4,
+    name: 'Patricia Lebsack',
+    username: 'Karianne',
+    email: 'Julianne.OConner@kory.org',
+  },
+  {
+    id: 5,
+    name: 'Chelsey Dietrich',
+    username: 'Kamren',
+    email: 'Lucio_Hettinger@annie.ca',
+  },
+  {
+    id: 6,
+    name: 'Mrs. Dennis Schulist',
+    username: 'Leopoldo_Corkery',
+    email: 'Karley_Dach@jasper.info',
+  },
+  {
+    id: 7,
+    name: 'Kurtis Weissnat',
+    username: 'Elwyn.Skiles',
+    email: 'Telly.Hoeger@billy.biz',
+  },
+  {
+    id: 8,
+    name: 'Nicholas Runolfsdottir V',
+    username: 'Maxime_Nienow',
+    email: 'Sherwood@rosamond.me',
+  },
+  {
+    id: 9,
+    name: 'Glenna Reichert',
+    username: 'Delphine',
+    email: 'Chaim_McDermott@dana.io',
+  },
+  {
+    id: 10,
+    name: 'Clementina DuBuque',
+    username: 'Moriah.Stanton',
+    email: 'Rey.Padberg@karina.biz',
+  },
+]
+
+const sortedData = ref<TableViewData>(tableData)
+
+const onRowClick = (row: any) => {
+  alert(`Row clicked:' ${JSON.stringify(row)}`)
+}
+
+const sortData = (sortData: TableSortPayload): void => {
+  const data = [...tableData]
+  const { sortColumnKey, sortColumnOrder } = sortData || { sortColumnKey: 'username', sortColumnOrder: 'asc' }
+
+  data.sort((a: Record<string, any>, b: Record<string, any>) => {
+    if (sortColumnKey === '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 0
+  })
+
+  sortedData.value = data
+}
+
+const getRowLinksRouter = (row: Record<string, any>): RowLink => ({
+  // using static route for demonstration purposes
+  // but you can generate dynamic routes based on the row data
+  to: { name: 'home' }, // pass a string to render the link as an anchor element instead of a router-link
+  target: '_blank',
+})
+
+const getRowLinksAnchor = (row: Record<string, any>): RowLink => ({
+  to: 'https://kongponents.konghq.com/',
+  target: '_blank',
+})
+</script>
+
+<style lang="scss" scoped>
+.k-table-view-sandbox {
+  .horizontal-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $kui-space-50;
+  }
+
+  .username-link {
+    text-transform: lowercase;
+  }
+}
+</style>
diff --git a/sandbox/pages/SandboxTableView/SandboxTableViewActions.vue b/sandbox/pages/SandboxTableView/SandboxTableViewActions.vue
new file mode 100644
index 0000000000..0d90c0b88f
--- /dev/null
+++ b/sandbox/pages/SandboxTableView/SandboxTableViewActions.vue
@@ -0,0 +1,11 @@
+<template>
+  <KDropdownItem>
+    Edit
+  </KDropdownItem>
+  <KDropdownItem
+    danger
+    has-divider
+  >
+    Delete
+  </KDropdownItem>
+</template>
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index 6a55712f5b..bcc150b984 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -170,6 +170,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Stepper Sandbox' },
     component: () => import('../pages/SandboxStepper.vue'),
   },
+  {
+    path: '/table-view',
+    name: 'table-view',
+    meta: { title: 'Table View Sandbox' },
+    component: () => import('../pages/SandboxTableView/SandboxTableView.vue'),
+  },
   {
     path: '/table',
     name: 'table',
diff --git a/src/components/KCard/KCard.vue b/src/components/KCard/KCard.vue
index 894b974e42..206eff870a 100644
--- a/src/components/KCard/KCard.vue
+++ b/src/components/KCard/KCard.vue
@@ -82,6 +82,8 @@ const showCardHeader = computed((): boolean => {
       font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
       line-height: var(--kui-line-height-30, $kui-line-height-30);
       margin: var(--kui-space-0, $kui-space-0);
+      text-align: left;
+      width: 100%;
     }
 
     .card-actions {
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index bcd353d28b..3cc2f8febf 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -83,6 +83,7 @@
     <div v-else>
       <div
         class="table-wrapper"
+        :style="tableWrapperStyles"
         @scroll.passive="scrollHandler"
       >
         <table
@@ -197,22 +198,22 @@
               :tabindex="isClickable ? 0 : null"
             >
               <td
-                v-for="(value, index) in visibleHeaders"
-                v-bind="cellAttrs({ headerKey: value.key, row, rowIndex, colIndex: index })"
+                v-for="(header, index) in visibleHeaders"
+                v-bind="cellAttrs({ headerKey: header.key, row, rowIndex, colIndex: index })"
                 :key="`table-${tableId}-cell-${index}`"
                 :class="{
-                  'resize-hover': resizeColumns && resizeHoverColumn === value.key && index !== visibleHeaders.length - 1,
+                  'resize-hover': resizeColumns && resizeHoverColumn === header.key && index !== visibleHeaders.length - 1,
                 }"
-                :style="columnStyles[value.key]"
-                v-on="tdlisteners(row[value.key], row)"
+                :style="columnStyles[header.key]"
+                v-on="tdlisteners(row[header.key], row)"
               >
                 <slot
-                  :name="value.key"
+                  :name="header.key"
                   :row="getGeneric(row)"
                   :row-key="rowIndex"
-                  :row-value="row[value.key]"
+                  :row-value="row[header.key]"
                 >
-                  {{ row[value.key] }}
+                  {{ row[header.key] }}
                 </slot>
               </td>
             </tr>
@@ -272,7 +273,7 @@ import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 import ColumnVisibilityMenu from './ColumnVisibilityMenu.vue'
 import useUniqueId from '@/composables/useUniqueId'
 
-const { useDebounce, useRequest, useSwrvState, clientSideSorter: defaultClientSideSorter } = useUtilities()
+const { useDebounce, useRequest, useSwrvState, clientSideSorter: defaultClientSideSorter, getSizeFromString } = useUtilities()
 
 const props = defineProps({
   /**
@@ -487,6 +488,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  maxHeight: {
+    type: String,
+    default: 'none',
+  },
 })
 
 const emit = defineEmits<{
@@ -549,6 +554,9 @@ const isClickable = ref(false)
 const hasInitialized = ref(false)
 const nextPageClicked = ref(false)
 const hasToolbarSlot = computed((): boolean => !!slots.toolbar || hasColumnVisibilityMenu.value)
+const tableWrapperStyles = computed((): Record<string, string> => ({
+  maxHeight: getSizeFromString(props.maxHeight),
+}))
 
 /**
  * Utilize a helper function to generate the column slot name.
@@ -738,12 +746,10 @@ const headerHeight = computed((): string => {
   const elem = headerElems.value?.item(0)
   if (elem) {
     const styles = window?.getComputedStyle(elem)
-
     if (styles?.height) {
       return `${parseInt(styles.height, 10)}px`
     }
   }
-
   return 'auto'
 })
 
@@ -978,10 +984,10 @@ const pageSizeChangeHandler = ({ pageSize: newPageSize }: PageSizeChangeData) =>
 }
 
 const scrollHandler = (event: any): void => {
-  if (event && event.target && event.target.scrollTop) {
+  if (event && event.target && typeof event.target.scrollTop === 'number') {
     if (event.target.scrollTop > 1) {
       isScrolled.value = true
-    } else if (event.target.scrollTop) {
+    } else if (event.target.scrollTop === 0) {
       isScrolled.value = !isScrolled.value
     }
   }
@@ -1122,220 +1128,17 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-/* Component variables */
-
-$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 {
-    display: flex;
-    gap: var(--kui-space-50, $kui-space-50);
-    width: 100%;
-  }
-
-  .table-wrapper {
-    overflow: auto;
-    width: 100%;
-
-    .table {
-      border-collapse: collapse;
-      max-width: 100%;
-      width: 100%;
-
-      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;
-      }
-
-      thead {
-        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;
+  @include table;
 
-        &.is-scrolled {
-          border-bottom: none;
-        }
-
-        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 $kongponentsTransitionDurTimingFunc;
-            width: 100%;
-            z-index: -1;
-          }
-
-          &.is-scrolled {
-            border-bottom: none;
-
-            &:after {
-              box-shadow: var(--kui-shadow, $kui-shadow);
-              opacity: 1;
-              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 {
-              // 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;
-
-              // 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');
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: 6px;
-
-                &.previous {
-                  left: 0;
-                  right: unset;
-                }
-              }
-            }
-
-            &.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;
-            }
-
-            &.sortable {
-              cursor: pointer;
-
-              &.asc .sort-icon {
-                transform: rotate(-180deg);
-              }
-            }
-
-            .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;
-              }
-
-              .table-header-label {
-                @include truncate;
-              }
-
-              .header-tooltip-trigger {
-                cursor: help;
-              }
-
-              .sort-icon {
-                flex-shrink: 0;
-              }
-            }
-
-            &.resize-hover {
-              // 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;
-            }
-          }
-        }
-      }
-
-      tbody {
-        tr {
-          height: 48px;
-
-          &:not(:last-child) {
-            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;
-
-            &.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;
-            }
-          }
-        }
-      }
-
-      // 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);
-          }
-        }
-      }
-
-      &.is-clickable {
-        tbody tr {
-          cursor: pointer;
+  table {
+    thead {
+      tr {
+        .resize-handle {
+          height: v-bind('headerHeight');
         }
       }
     }
   }
-
-  .table-pagination {
-    margin-top: var(--kui-space-70, $kui-space-70);
-  }
 }
 </style>
diff --git a/src/components/KTableView/KTableView.cy.ts b/src/components/KTableView/KTableView.cy.ts
new file mode 100644
index 0000000000..74f7a6c326
--- /dev/null
+++ b/src/components/KTableView/KTableView.cy.ts
@@ -0,0 +1,397 @@
+import { mount } from 'cypress/vue'
+import { h } from 'vue'
+import KTableView from '@/components/KTableView/KTableView.vue'
+import type { TableHeader } from '@/types'
+
+const largeDataSet = [
+  {
+    name: 'Basic Auth',
+    id: '517526354743085',
+    enabled: 'true',
+  },
+  {
+    name: 'Website Desktop',
+    id: '328027447731198',
+    enabled: 'false',
+  },
+  {
+    name: 'Android App',
+    id: '405383051040955',
+    enabled: 'true',
+  },
+  {
+    name: 'Basic Auth',
+    id: '517526354743085',
+    enabled: 'true',
+  },
+  {
+    name: 'Website Desktop',
+    id: '328027447731198',
+    enabled: 'false',
+  },
+  {
+    name: 'Android App',
+    id: '405383051040955',
+    enabled: 'true',
+  },
+  {
+    name: 'Basic Auth',
+    id: '517526354743085',
+    enabled: 'true',
+  },
+  {
+    name: 'Website Desktop',
+    id: '328027447731198',
+    enabled: 'false',
+  },
+  {
+    name: 'Android App',
+    id: '405383051040955',
+    enabled: 'true',
+  },
+  {
+    name: 'Basic Auth',
+    id: '517526354743085',
+    enabled: 'true',
+  },
+  {
+    name: 'Website Desktop',
+    id: '328027447731198',
+    enabled: 'false',
+  },
+  {
+    name: 'Android App',
+    id: '405383051040955',
+    enabled: 'true',
+  },
+]
+
+const options = {
+  headers: [
+    { label: 'Name', key: 'name', sortable: true },
+    { label: 'ID', key: 'id', sortable: false },
+    { label: 'Enabled', key: 'enabled', sortable: false },
+    { label: '', key: 'actions', sortable: false },
+  ] as TableHeader[],
+  data: [
+    {
+      name: 'Basic Auth',
+      id: '517526354743085',
+      enabled: 'true',
+    },
+    {
+      name: 'Website Desktop',
+      id: '328027447731198',
+      enabled: 'false',
+    },
+    {
+      name: 'Android App',
+      id: '405383051040955',
+      enabled: 'true',
+    },
+  ],
+}
+
+describe('KTableView', () => {
+  describe('states', () => {
+    it('displays an empty state when no data is available', () => {
+      mount(KTableView, {
+        props: {
+          data: [],
+          headers: options.headers,
+        },
+      })
+
+      cy.get('.k-empty-state').should('be.visible')
+    })
+
+    it('displays an empty state when no data is available (slot)', () => {
+      const emptySlotContent = 'Look mah! I am empty!'
+      mount(KTableView, {
+        props: {
+          data: [],
+          headers: options.headers,
+        },
+        slots: {
+          'empty-state': () => h('span', {}, emptySlotContent),
+        },
+      })
+
+      cy.getTestId('table-empty-state').should('contain.text', emptySlotContent)
+    })
+
+    it('displays a loading skeletion when the "loading" prop is set to true"', () => {
+      mount(KTableView, {
+        props: {
+          loading: true,
+        },
+      })
+
+      cy.get('.skeleton-table-wrapper').should('be.visible')
+    })
+
+    it('displays an error state when the "error" prop is set to true"', () => {
+      mount(KTableView, {
+        props: {
+          error: true,
+        },
+      })
+
+      cy.get('.k-empty-state.error').should('be.visible')
+    })
+
+    it('displays an error state (slot)', () => {
+      const errorSlotContent = 'Look mah! I am erroneous!'
+      mount(KTableView, {
+        props: {
+          error: true,
+        },
+        slots: {
+          'error-state': () => h('span', {}, errorSlotContent),
+        },
+      })
+
+      cy.getTestId('table-error-state').should('contain.text', errorSlotContent)
+    })
+  })
+
+  describe('default', () => {
+    it('renders link in action slot', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+        slots: {
+          name: () => h('a', { href: '#' }, 'Link'),
+        },
+      })
+
+      cy.get('.table td:first-of-type > *').contains('a', 'Link')
+    })
+
+    it('renders content in the toolbar slot', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+        slots: {
+          toolbar: () => h('button', {}, 'Toolbar button'),
+        },
+      })
+
+      cy.get('.k-table-view .table-toolbar').find('button').should('be.visible')
+      cy.get('.k-table-view .table-toolbar button').should('contain.text', 'Toolbar button')
+    })
+
+    it('has hover class when passed', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+          rowHover: true,
+        },
+      })
+
+      cy.get('.table').should('have.class', 'has-hover')
+    })
+
+    it('renders column resize toggles when resizeColumns is set', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+          resizeColumns: true,
+        },
+      })
+
+      cy.get('.table').find('th.resizable').should('be.visible')
+      cy.get('.resize-handle').should('exist')
+    })
+
+    it('renders column show/hide when headers.hidable is set', () => {
+      // make ID column hidable
+      options.headers[1].hidable = true
+      const modifiedHeaderKey = options.headers[1].key
+
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+      })
+
+      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()
+
+      // only columns with hidable set to true should be visible and checked by default
+      cy.getTestId(`column-visibility-menu-item-${modifiedHeaderKey}`).should('be.visible')
+      cy.getTestId(`column-visibility-menu-item-${options.headers[0].key}`).should('not.exist')
+      cy.getTestId(`column-visibility-checkbox-${modifiedHeaderKey}`).should('be.visible')
+      cy.getTestId(`column-visibility-checkbox-${modifiedHeaderKey}`).should('be.checked')
+
+      // changes are applied only when Apply button is clicked
+      cy.getTestId(`column-visibility-checkbox-${modifiedHeaderKey}`).click()
+      cy.getTestId(`table-header-${modifiedHeaderKey}`).should('be.visible')
+      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(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+      })
+
+      cy.getTestId(`tooltip-${options.headers[0].key}`).should('be.visible')
+    })
+
+    it('displays actions dropdown when actions key is provided', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+      })
+
+      cy.getTestId('actions-dropdown').should('be.visible').and('have.length', options.data.length)
+      cy.get('th').eq(options.headers.indexOf(options.headers.find((header => header.key === 'actions'))!)).find('.table-header-label').should('have.class', 'sr-only')
+    })
+
+    it('displays each row as link when rowLink prop is provided', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+          rowLink: () => ({
+            to: '/link',
+          }),
+        },
+      })
+
+      cy.get('table tbody td').each(($el) => {
+        cy.wrap($el).should('have.class', 'row-link').should('be.visible')
+      })
+
+      cy.get('table tbody td>a.cell-wrapper').each(($el) => {
+        cy.wrap($el).should('be.visible')
+      })
+    })
+  })
+
+  describe('handles prop changes as expected', () => {
+    it('reacts to changes in headers', () => {
+      mount(KTableView, {
+        propsData: {
+          data: largeDataSet,
+          headers: [
+            { label: 'Name', key: 'name' },
+          ],
+        },
+      }).then((component) => {
+        cy.get('.table').find('th').should('have.length', 1)
+        cy.getTestId('table-header-name').should('be.visible').then(() => {
+          component.wrapper.setProps({
+            headers: [
+              { label: 'Name', key: 'name' },
+              { label: 'ID', key: 'id' },
+            ],
+          }).then(() => {
+            cy.get('.table').find('th').should('have.length', 2)
+            cy.getTestId('table-header-id').should('be.visible')
+            cy.get('.table').find('td').eq(1).should('contain', '517526354743085')
+          })
+        })
+      })
+    })
+  })
+
+  describe('sorting', () => {
+    it('should have sortable class when passed', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+      })
+
+      cy.get('th').each(($el, index) => {
+        if (index === 0) {
+          cy.wrap($el).should('have.class', 'sortable')
+        }
+      })
+    })
+
+    it('should emit event when sortable column is clicked', () => {
+      mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+      })
+
+      cy.get('th').eq(0).click().then(() => {
+        cy.get('th').eq(0).should('have.class', 'active-sort')
+        cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'sort').and('have.length', 1)
+      })
+    })
+  })
+
+  describe('pagination', () => {
+    it('displays pagination when data is provided', () => {
+      mount(KTableView, {
+        props: {
+          data: options.data,
+          headers: options.headers,
+        },
+      })
+
+      cy.getTestId('table-pagination').should('be.visible')
+    })
+
+    it('does not display pagination when hidePagination prop is true', () => {
+      mount(KTableView, {
+        props: {
+          data: options.data,
+          headers: options.headers,
+          hidePagination: true,
+        },
+      })
+
+      cy.getTestId('table-pagination').should('not.exist')
+    })
+
+    it('does not display pagination when data is empty', () => {
+      mount(KTableView, {
+        props: {
+          data: [],
+          headers: options.headers,
+        },
+      })
+
+      cy.getTestId('table-pagination').should('not.exist')
+    })
+
+    it('passes the correct props to the pagination component', () => {
+      mount(KTableView, {
+        props: {
+          data: options.data,
+          headers: options.headers,
+          paginationAttributes: {
+            totalCount: 100,
+            currentPage: 2,
+          },
+        },
+      })
+
+      cy.getTestId('visible-items').eq(0).should('contain.text', '16 to 30  of 100')
+    })
+  })
+})
diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
new file mode 100644
index 0000000000..2870195340
--- /dev/null
+++ b/src/components/KTableView/KTableView.vue
@@ -0,0 +1,941 @@
+<template>
+  <div class="k-table-view">
+    <div
+      v-if="hasToolbarSlot"
+      class="table-toolbar"
+      data-testid="table-toolbar"
+    >
+      <slot name="toolbar" />
+      <ColumnVisibilityMenu
+        v-if="hasColumnVisibilityMenu"
+        :columns="visibilityColumns"
+        :table-id="tableId"
+        :visibility-preferences="visibilityPreferences"
+        @update="(columnMap: Record<string, boolean>) => columnVisibility = columnMap"
+      />
+    </div>
+
+    <KSkeleton
+      v-if="loading && !error"
+      data-testid="table-skeleton"
+      type="table"
+    />
+
+    <div
+      v-else-if="error"
+      class="table-error-state"
+      data-testid="table-error-state"
+    >
+      <slot name="error-state">
+        <KEmptyState
+          icon-variant="error"
+          :message="errorStateMessage"
+          :title="errorStateTitle"
+        >
+          <template
+            v-if="!!errorStateActionMessage"
+            #action
+          >
+            <KButton
+              data-testid="error-state-action"
+              :to="errorStateActionRoute"
+              @click="$emit('error-action-click')"
+            >
+              {{ errorStateActionMessage }}
+            </KButton>
+          </template>
+        </KEmptyState>
+      </slot>
+    </div>
+
+    <div
+      v-else-if="!error && !loading && (data && !data.length)"
+      class="table-empty-state"
+      data-testid="table-empty-state"
+    >
+      <slot name="empty-state">
+        <KEmptyState
+          :icon-variant="emptyStateIconVariant"
+          :message="emptyStateMessage"
+          :title="emptyStateTitle"
+        >
+          <template
+            v-if="!!emptyStateActionMessage"
+            #action
+          >
+            <KButton
+              :appearance="emptyStateButtonAppearance"
+              data-testid="empty-state-action"
+              :to="emptyStateActionRoute"
+              @click="$emit('empty-state-action-click')"
+            >
+              <slot name="empty-state-action-icon" />
+              {{ emptyStateActionMessage }}
+            </KButton>
+          </template>
+        </KEmptyState>
+      </slot>
+    </div>
+
+    <div v-else>
+      <div
+        class="table-wrapper"
+        :style="tableWrapperStyles"
+        @scroll.passive="scrollHandler"
+      >
+        <table
+          v-bind-once="{ 'data-tableid': tableId }"
+          class="table"
+          :class="{
+            'has-hover': rowHover && !isActionsDropdownHovered,
+            'is-clickable': isClickable
+          }"
+        >
+          <thead :class="{ 'is-scrolled': isScrolled }">
+            <tr
+              ref="headerRow"
+              :class="{ 'is-scrolled': isScrolled }"
+            >
+              <th
+                v-for="(column, index) in visibleHeaders"
+                :key="`table-${tableId}-headers-${index}`"
+                :aria-sort="column.key === sortColumnKey ? (sortColumnOrder === 'asc' ? 'ascending' : 'descending') : undefined"
+                class="table-headers"
+                :class="getHeaderClasses(column, index)"
+                :data-testid="`table-header-${column.key}`"
+                :style="columnStyles[column.key]"
+                @click="() => onHeaderClick(column)"
+                @mouseleave="currentHoveredColumn = ''"
+                @mouseover="currentHoveredColumn = column.key"
+              >
+                <div
+                  v-if="resizeColumns && index !== 0"
+                  class="resize-handle previous"
+                  @click.stop
+                  @mousedown="startResize($event, visibleHeaders[index - 1].key)"
+                  @mouseleave="resizerHoveredColumn = ''"
+                  @mouseover="resizerHoveredColumn = visibleHeaders[index - 1].key"
+                />
+
+                <div
+                  :aria-describedby="column.tooltip || $slots[getColumnTooltipSlotName(column.key)] ? `${getColumnTooltipSlotName(column.key)}-${tableId}` : undefined"
+                  class="table-headers-container"
+                  :class="{ 'resized': resizingColumn === column.key }"
+                >
+                  <slot
+                    :column="getGeneric(column)"
+                    :name="getColumnSlotName(column.key)"
+                  >
+                    <span
+                      class="table-header-label"
+                      :class="{
+                        'sr-only': column.hideLabel || (column.key === TableViewHeaderKeys.ACTIONS && column.hideLabel !== false),
+                      }"
+                    >
+                      {{ column.label ? column.label : column.key }}
+                    </span>
+                  </slot>
+
+                  <KTooltip
+                    v-if="column.tooltip || $slots[getColumnTooltipSlotName(column.key)]"
+                    :data-testid="getColumnTooltipSlotName(column.key)"
+                    :tooltip-id="`${getColumnTooltipSlotName(column.key)}-${tableId}`"
+                  >
+                    <InfoIcon
+                      class="header-tooltip-trigger"
+                      :color="`var(--kui-color-text-neutral, ${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="!column.hideLabel && column.key !== TableViewHeaderKeys.ACTIONS && column.sortable"
+                    class="sort-icon"
+                    :color="`var(--kui-color-text-neutral, ${KUI_COLOR_TEXT_NEUTRAL})`"
+                    :size="KUI_ICON_SIZE_30"
+                  />
+                </div>
+
+                <div
+                  v-if="resizeColumns && index !== visibleHeaders.length - 1"
+                  class="resize-handle"
+                  @click.stop
+                  @mousedown="startResize($event, column.key)"
+                  @mouseleave="resizerHoveredColumn = ''"
+                  @mouseover="resizerHoveredColumn = column.key"
+                />
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="(row, rowIndex) in data"
+              v-bind="rowAttrs(row)"
+              :key="`table-${tableId}-row-${rowIndex}`"
+              :role="!!rowLink(row).to ? 'link' : undefined"
+              :tabindex="isClickable || !!rowLink(row).to ? 0 : undefined"
+            >
+              <td
+                v-for="(header, index) in visibleHeaders"
+                v-bind="cellAttrs({ headerKey: header.key, row, rowIndex, colIndex: index })"
+                :key="`table-${tableId}-cell-${index}`"
+                :class="{
+                  'resize-hover': resizeColumns && resizeHoverColumn === header.key && index !== visibleHeaders.length - 1,
+                  'row-link': !!rowLink(row).to,
+                }"
+                :style="columnStyles[header.key]"
+                v-on="tdlisteners(row[header.key], row)"
+              >
+                <component
+                  :is="getRowLinkComponent(row, header.key)"
+                  class="cell-wrapper"
+                  v-bind="getRowLinkAttrs(row, header.key)"
+                >
+                  <slot
+                    v-if="header.key !== TableViewHeaderKeys.ACTIONS"
+                    :name="header.key"
+                    :row="getGeneric(row)"
+                    :row-key="rowIndex"
+                    :row-value="row[header.key]"
+                  >
+                    {{ row[header.key] }}
+                  </slot>
+
+                  <KDropdown
+                    v-else
+                    class="actions-dropdown"
+                    data-testid="actions-dropdown"
+                    :kpop-attributes="{ placement: 'bottom-end' }"
+                  >
+                    <KButton
+                      appearance="tertiary"
+                      :aria-label="header.label"
+                      class="actions-dropdown-trigger"
+                      icon
+                      size="small"
+                      @mouseleave="isActionsDropdownHovered = false"
+                      @mouseover="isActionsDropdownHovered = true"
+                    >
+                      <MoreIcon
+                        class="more-icon"
+                        decorative
+                      />
+                    </KButton>
+
+                    <template #items>
+                      <slot
+                        name="action-items"
+                        :row="getGeneric(row)"
+                        :row-value="row[header.key]"
+                      />
+                    </template>
+                  </KDropdown>
+                </component>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <KPagination
+        v-if="showPagination"
+        class="table-pagination"
+        data-testid="table-pagination"
+        v-bind="paginationAttributes"
+        @get-next-offset="$emit('get-next-offset')"
+        @get-previous-offset="$emit('get-previous-offset')"
+        @page-change="$emit('page-change', $event)"
+        @page-size-change="onPaginationPageSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { ref, watch, computed, useAttrs, useSlots } from 'vue'
+import KButton from '@/components/KButton/KButton.vue'
+import KEmptyState from '@/components/KEmptyState/KEmptyState.vue'
+import KSkeleton from '@/components/KSkeleton/KSkeleton.vue'
+import KTooltip from '@/components/KTooltip/KTooltip.vue'
+import { InfoIcon, ArrowDownIcon, MoreIcon } from '@kong/icons'
+import type {
+  TablePreferences,
+  TableViewHeader,
+  TableViewData,
+  TableColumnSlotName,
+  TableColumnTooltipSlotName,
+  SortColumnOrder,
+  TableSortPayload,
+  EmptyStateIconVariant,
+  ButtonAppearance,
+  RowLink,
+  TablePaginationAttributes,
+  PageChangeData,
+  PageSizeChangeData,
+} from '@/types'
+import { EmptyStateIconVariants } from '@/types'
+import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_30 } from '@kong/design-tokens'
+import ColumnVisibilityMenu from './../KTable/ColumnVisibilityMenu.vue'
+import useUniqueId from '@/composables/useUniqueId'
+import useUtilities from '@/composables/useUtilities'
+import type { RouteLocationRaw } from 'vue-router'
+import KPagination from '@/components/KPagination/KPagination.vue'
+
+enum TableViewHeaderKeys {
+  ACTIONS = 'actions',
+}
+
+const props = defineProps({
+  /**
+   * Allow columns to be resized
+   */
+  resizeColumns: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * Used to customize the initial state of the table.
+   * Column visibility/width.
+   */
+  tablePreferences: {
+    type: Object as PropType<TablePreferences>,
+    default: () => ({}),
+  },
+  /**
+   * Enables hover highlighting to table rows
+   */
+  rowHover: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * A function that conditionally specifies row attributes on each row
+   */
+  rowAttrs: {
+    type: Function as PropType<(row: Record<string, any>) => Record<string, string>>,
+    default: () => ({}),
+  },
+  /**
+   * A function that conditionally turns a row into a link
+   */
+  rowLink: {
+    type: Function as PropType<(row: Record<string, any>) => RowLink>,
+    default: () => ({}),
+  },
+  /**
+   * A function that conditionally specifies cell attributes
+   */
+  cellAttrs: {
+    type: Function,
+    default: () => ({}),
+  },
+  /**
+   * A prop that enables a loading skeleton
+   */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * A prop to pass in a custom empty state title
+   */
+  emptyStateTitle: {
+    type: String,
+    default: 'No Data',
+  },
+  /**
+   * A prop to pass in a custom empty state message
+   */
+  emptyStateMessage: {
+    type: String,
+    default: 'There is no data to display.',
+  },
+  /**
+   * A prop to pass in a custom empty state action route
+   */
+  emptyStateActionRoute: {
+    type: [Object, String] as PropType<RouteLocationRaw | string>,
+    default: null,
+  },
+  /**
+   * A prop to pass in a custom empty state action message
+   */
+  emptyStateActionMessage: {
+    type: String,
+    default: '',
+  },
+  emptyStateIconVariant: {
+    type: String as PropType<EmptyStateIconVariant>,
+    default: EmptyStateIconVariants.Default,
+  },
+  emptyStateButtonAppearance: {
+    type: String as PropType<ButtonAppearance>,
+    default: 'primary',
+  },
+  /**
+   * A prop that enables the error state
+   */
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * A prop to pass in a custom error state title
+   */
+  errorStateTitle: {
+    type: String,
+    default: 'An error occurred',
+  },
+  /**
+   * A prop to pass in a custom error state message
+   */
+  errorStateMessage: {
+    type: String,
+    default: 'Data cannot be displayed due to an error.',
+  },
+  /**
+   * A prop to pass in a custom error state action route
+   */
+  errorStateActionRoute: {
+    type: [Object, String] as PropType<RouteLocationRaw | string>,
+    default: null,
+  },
+  /**
+   * A prop to pass in a custom error state action message
+   */
+  errorStateActionMessage: {
+    type: String,
+    default: '',
+  },
+  /**
+   * A prop to pass in an array of headers for the table
+   */
+  headers: {
+    type: Array as PropType<TableViewHeader[]>,
+    default: () => [],
+  },
+  data: {
+    type: Array as PropType<TableViewData>,
+    default: () => [],
+  },
+  maxHeight: {
+    type: String,
+    default: 'none',
+  },
+  hidePagination: {
+    type: Boolean,
+    default: false,
+  },
+  paginationAttributes: {
+    type: Object as PropType<TablePaginationAttributes>,
+    default: () => ({}),
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'cell-click', value: { data: any }): void
+  (e: 'row-click', value: { data: any }): 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: 'page-change', val: PageChangeData): void
+  (e: 'page-size-change', val: PageSizeChangeData): void
+  (e: 'get-next-offset'): void
+  (e: 'get-previous-offset'): void
+}>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const tableId = useUniqueId()
+const { getSizeFromString } = useUtilities()
+
+const headerRow = ref<HTMLDivElement>()
+// all headers
+const tableHeaders = ref<TableViewHeader[]>([])
+// currently visible headers
+const visibleHeaders = ref<TableViewHeader[]>([])
+// highest priority - column currently being resized (mouse may be completely outside the column)
+const resizingColumn = ref('')
+// column the user is currently hovering over the resize handle for (may be hovered on the adjacent column to what we want to resize)
+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: TableViewHeader) => header.hidable).length > 0)
+const hasColumnVisibilityMenu = computed((): boolean => {
+  // has hidable columns, no error/loading/empty state
+  return !!(hasHidableColumns.value &&
+    !props.error && !props.loading && !props.loading && (props.data && props.data.length))
+})
+// columns whose visibility can be toggled
+const visibilityColumns = computed((): TableViewHeader[] => tableHeaders.value.filter((header: TableViewHeader) => header.hidable))
+// visibility preferences from the host app (initialized by app)
+const visibilityPreferences = computed((): Record<string, boolean> => hasColumnVisibilityMenu.value ? props.tablePreferences.columnVisibility || {} : {})
+// current column visibility state
+const columnVisibility = ref<Record<string, boolean>>(hasColumnVisibilityMenu.value ? props.tablePreferences.columnVisibility || {} : {})
+const isScrolled = ref(false)
+const sortColumnKey = ref('')
+const sortColumnOrder = ref<SortColumnOrder>('desc')
+const isClickable = ref(false)
+const hasToolbarSlot = computed((): boolean => !!slots.toolbar || hasColumnVisibilityMenu.value)
+const isActionsDropdownHovered = ref<boolean>(false)
+const tableWrapperStyles = computed((): Record<string, string> => ({
+  maxHeight: getSizeFromString(props.maxHeight),
+}))
+
+/**
+ * Utilize a helper function to generate the column 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 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.
+ * @param obj The object to strip the type from
+ */
+const getGeneric = (obj: Record<string, any>): any => {
+  return obj as unknown as any
+}
+
+/**
+ * Grabs listeners from attrs matching a prefix to attach the
+ * event that is dynamic. e.g. `v-on:cell:click`, `@row:focus` etc.
+ * @param {String} prefix - event listener prefix e.g. `row:`, `cell:`
+ * @param {any} attrs - attrs on the vue instance to pluck from
+ * @returns {Function} - returns a function that can pass an entity to the
+                         listener callback function.
+*/
+const pluckListeners = (prefix: any, attrs: any): any => {
+  return (entity: any, type: any) => {
+    const onRE = /^on[^a-z]/
+    const listeners = {} as any
+
+    for (const property in attrs) {
+      if (onRE.test(property) && !!attrs[property]) {
+        listeners[property] = attrs[property]
+      }
+    }
+
+    return Object.keys(listeners).reduce((acc: any, curr) => {
+      if (curr.indexOf(prefix) === 0) {
+        const parts = curr.split(prefix)
+        acc[parts[1]] = (e: any) => listeners[curr](e, entity, type)
+      }
+      return acc
+    }, {})
+  }
+}
+
+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', 'label', 'input', 'select', 'span[role="checkbox"]']
+
+    if (rowListeners.click || cellListeners.click) {
+      isClickable.value = true
+    }
+
+    return {
+      ...rowListeners,
+      ...cellListeners,
+      click(e: any) {
+        const targetClasses = e.target.className
+        let isIgnored = ignoredElements.includes(e.target.tagName.toLowerCase())
+        let isPopoverContent = false
+
+        // check for popover class
+        if (typeof targetClasses === 'string' || Array.isArray(targetClasses)) {
+          isPopoverContent = targetClasses.includes('k-popover')
+        } else if (typeof targetClasses === 'object') {
+          isPopoverContent = Object.keys(targetClasses).includes('k-popover')
+        }
+
+        // check parent for popover class
+        if (e.target.closest('.popover-content') !== null) {
+          isPopoverContent = true
+        }
+
+        // check parent of target is not an ignored elem
+        for (let i = 0; i < ignoredElements.length; i++) {
+          if (e.target.closest(ignoredElements[i]) !== null) {
+            isIgnored = true
+            break
+          }
+        }
+
+        // ignore click if it is from the popover, or is a non-disabled ignored element
+        if ((!isIgnored || e.target.hasAttribute('disabled')) &&
+                 !isPopoverContent && (rowListeners.click || cellListeners.click)) {
+          if (cellListeners.click) {
+            emit('cell-click', { data: entity })
+            const result = cellListeners.click(e, entity, 'cell')
+            if (typeof result === 'function') {
+              result(e, entity)
+            }
+          } else {
+            emit('row-click', { data: rowData })
+            const result = rowListeners.click(e, rowData, 'row')
+            if (typeof result === 'function') {
+              result(e, rowData)
+            }
+          }
+        }
+      },
+    }
+  }
+})
+
+// default column widths for better UX
+// actions column is always 54px (padding-left + button width + padding-right adds up to 54px)
+const defaultColumnWidths = { actions: 54 }
+const columnWidths = ref<Record<string, number>>(props.resizeColumns ? props.tablePreferences.columnWidths || defaultColumnWidths : defaultColumnWidths)
+const columnStyles = computed(() => {
+  const styles: Record<string, any> = {}
+  for (const colKey in columnWidths.value) {
+    // no width set
+    if (!columnWidths.value[colKey]) {
+      continue
+    }
+    const width = columnWidths.value[colKey] + 'px'
+    styles[colKey] = {
+      width,
+      maxWidth: width,
+      minWidth: width,
+    }
+  }
+  return styles
+})
+
+const getHeaderClasses = (column: TableViewHeader, index: number): Record<string, boolean> => {
+  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,
+    resizable: props.resizeColumns,
+    // display sort control if column is sortable, label is visible, and sorting is not disabled
+    sortable: !column.hideLabel && !!column.sortable,
+    // display active sorting styles if column is currently sorted
+    'active-sort': !column.hideLabel && !!column.sortable && column.key === sortColumnKey.value,
+    [sortColumnOrder.value]: column.key === sortColumnKey.value && !column.hideLabel,
+    'is-scrolled': isScrolled.value,
+    'has-tooltip': !!column.tooltip,
+  }
+}
+
+const onHeaderClick = (column: TableViewHeader) => {
+  if (column.sortable) {
+    emit('sort', {
+      prevKey: sortColumnKey.value,
+      sortColumnKey: column.key,
+      sortColumnOrder: sortColumnOrder.value === 'asc' ? 'desc' : 'asc', // display opposite because sortColumnOrder outdated
+    })
+    sortClickHandler(column)
+  }
+}
+
+/**
+ * We have to track the state of all three hover events because
+ * they have differing priorities that can have clashing styles.
+ */
+const resizerHoverState = computed((): string => {
+  if (resizingColumn.value) {
+    // highest priority - resize event in progress, mouse may be completely outside of the column
+    return 'resizing'
+  } else if (resizerHoveredColumn.value) {
+    // hovered over a column resize handle (may need to trigger styles on the adjacent column instead of the current)
+    return 'resize-hover'
+  } else if (currentHoveredColumn.value) {
+    // lowest priority - hovered somewhere in the <th> of a resizable column
+    return 'th-hover'
+  }
+
+  return ''
+})
+
+const resizeHoverColumn = computed((): string => {
+  switch (resizerHoverState.value) {
+    case 'resizing':
+      return resizingColumn.value
+    case 'resize-hover':
+      return resizerHoveredColumn.value
+    case 'th-hover':
+      return currentHoveredColumn.value
+    default:
+      return ''
+  }
+})
+
+// get the resizable header divs to be used for the resize observers
+// eslint-disable-next-line no-undef
+const headerElems = computed((): NodeListOf<Element> | undefined => headerRow.value?.querySelectorAll('th.resizable'))
+const headerHeight = computed((): string => {
+  const elem = headerElems.value?.item(0)
+  if (elem) {
+    const styles = window?.getComputedStyle(elem)
+    if (styles?.height) {
+      return `${parseInt(styles.height, 10)}px`
+    }
+  }
+  return 'auto'
+})
+
+const startResize = (evt: MouseEvent, colKey: string) => {
+  let x = 0
+  let width = 0
+
+  resizingColumn.value = colKey
+
+  // get the current column's element
+  let col: HTMLElement | null = null
+  headerElems.value?.forEach((elem) => {
+    if (elem.getAttribute('data-testid') === `table-header-${colKey}`) {
+      col = document?.querySelector(`[data-tableid="${tableId}"] [data-testid="table-header-${colKey}"]`)
+    }
+  })
+
+  // resize in progress
+  const mouseMoveHandler = (e: MouseEvent): void => {
+    // distance mouse has moved
+    const dx = e.clientX - x
+
+    // Update column width to match
+    col?.setAttribute('style', `width: ${width + dx}px`)
+    columnWidths.value[colKey] = width + dx
+  }
+
+  // done resizing
+  const mouseUpHandler = (): void => {
+    resizingColumn.value = ''
+    document?.removeEventListener('mousemove', mouseMoveHandler)
+    document?.removeEventListener('mouseup', mouseUpHandler)
+    emitTablePreferences()
+  }
+
+  // get mouse position
+  x = evt.clientX
+
+  if (col) {
+    // set current column's width
+    const styles = window?.getComputedStyle(col)
+    if (styles?.width) {
+      width = parseInt(styles.width, 10)
+    }
+
+    // event listeners for resizing
+    document?.addEventListener('mousemove', mouseMoveHandler)
+    document?.addEventListener('mouseup', mouseUpHandler)
+  }
+}
+
+const showPagination = computed((): boolean => {
+  if (props.hidePagination) {
+    return false
+  }
+
+  if (props.data && props.data.length && props.paginationAttributes.totalCount && props.paginationAttributes.totalCount <= props.data.length) {
+    return false
+  }
+
+  return true
+})
+
+// Ensure `props.headers` are reactive.
+watch(() => props.headers, (newVal: TableViewHeader[]) => {
+  if (newVal && newVal.length) {
+    tableHeaders.value = newVal
+  }
+}, { deep: true, immediate: true })
+
+const sortClickHandler = (header: TableViewHeader): void => {
+  const { key } = header
+
+  if (sortColumnKey.value) {
+    if (key === sortColumnKey.value) {
+      if (sortColumnOrder.value === 'asc') {
+        sortColumnOrder.value = 'desc'
+      } else {
+        sortColumnOrder.value = 'asc'
+      }
+    } else {
+      sortColumnKey.value = key
+      sortColumnOrder.value = 'asc'
+    }
+  } else {
+    sortColumnKey.value = key
+    sortColumnOrder.value = 'asc'
+  }
+
+  // Emit an event whenever one of the tablePreferences are updated
+  emitTablePreferences()
+}
+
+const scrollHandler = (event: any): void => {
+  if (event && event.target && typeof event.target.scrollTop === 'number') {
+    if (event.target.scrollTop > 1) {
+      isScrolled.value = true
+    } else if (event.target.scrollTop === 0) {
+      isScrolled.value = !isScrolled.value
+    }
+  }
+}
+
+// determine the component to use for the row link
+const getRowLinkComponent = (row: Record<string, any>, columnKey: string): string => {
+  const { to } = props.rowLink(row)
+
+  if (!to || columnKey === TableViewHeaderKeys.ACTIONS) {
+    return 'div'
+  }
+
+  return typeof to === 'object' ? 'router-link' : 'a'
+}
+
+// returns attributes for the wrapper element in each row link
+const getRowLinkAttrs = (row: Record<string, any>, columnKey: string): Record<string, any> => {
+  // if the column is the actions column, return an empty object
+  if (columnKey === TableViewHeaderKeys.ACTIONS) {
+    return {}
+  }
+
+  const { to, target } = props.rowLink(row)
+  const isRouterLink = to && typeof to === 'object'
+  const isAnchor = to && typeof to === 'string'
+
+  return {
+    ...(isRouterLink && { to: to }),
+    ...(isAnchor && { href: to }),
+    ...((isRouterLink || isAnchor) && {
+      ...(target && { target: target }),
+    }),
+  }
+}
+
+const getInitialPageSize = (): number | null => {
+  if (props.paginationAttributes.initialPageSize) {
+    return props.paginationAttributes.initialPageSize
+  } else if (props.paginationAttributes.pageSizes) {
+    return props.paginationAttributes.pageSizes[0]
+  }
+
+  return null
+}
+const paginationPageSize = ref<number | null>(getInitialPageSize())
+const onPaginationPageSizeChange = (data: PageSizeChangeData): void => {
+  paginationPageSize.value = data.pageSize
+  emit('page-size-change', data)
+}
+
+// Store the tablePreferences in a computed property to utilize in the watcher
+const tablePreferences = computed((): TablePreferences => ({
+  sortColumnKey: sortColumnKey.value,
+  sortColumnOrder: sortColumnOrder.value as 'asc' | 'desc',
+  ...(props.resizeColumns ? { columnWidths: columnWidths.value } : {}),
+  ...(hasHidableColumns.value ? { columnVisibility: columnVisibility.value } : {}),
+  ...(paginationPageSize.value && !props.hidePagination && { pageSize: paginationPageSize.value }),
+}))
+
+const emitTablePreferences = (): void => {
+  emit('update:table-preferences', tablePreferences.value)
+}
+
+watch([columnVisibility, tableHeaders], (newVals) => {
+  const newVisibility = newVals[0]
+  const newHeaders = newVals[1]
+  const newVisibleHeaders = newHeaders.filter((header: TableViewHeader) => newVisibility[header.key] !== false)
+
+  if (JSON.stringify(newVisibleHeaders) !== JSON.stringify(visibleHeaders.value)) {
+    visibleHeaders.value = newVisibleHeaders
+    emitTablePreferences()
+  }
+}, { 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 })
+</script>
+
+<style lang="scss" scoped>
+.k-table-view {
+  @include table;
+
+  table {
+    thead {
+      tr {
+        .resize-handle {
+          height: v-bind('headerHeight');
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        td {
+          .actions-dropdown {
+            .actions-dropdown-trigger {
+              color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+
+              &:hover:not(:disabled):not(:focus):not(:active) {
+                background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+                color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong);
+              }
+
+              &:focus-visible {
+                background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+                color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
+              }
+
+              &:active {
+                background-color: var(--kui-color-background-neutral-weaker, $kui-color-background-neutral-weaker);
+                color: var(--kui-color-text-neutral-strongest, $kui-color-text-neutral-strongest);
+              }
+
+              .more-icon {
+                pointer-events: none;
+              }
+            }
+          }
+
+          &.row-link {
+            padding: var(--kui-space-0, $kui-space-0);
+
+            a.cell-wrapper {
+              color: var(--kui-color-text, $kui-color-text);
+              display: block;
+              padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
+              text-decoration: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index bab3860cd0..bc45fc6d10 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -50,3 +50,4 @@ export { default as KTreeList } from './KTreeList/KTreeList.vue'
 export { default as KExternalLink } from './KExternalLink/KExternalLink.vue'
 export { default as KTruncate } from './KTruncate/KTruncate.vue'
 export { default as KCopy } from './KCopy/KCopy.vue'
+export { default as KTableView } from './KTableView/KTableView.vue'
diff --git a/src/global-components.ts b/src/global-components.ts
index 1849c576d2..030f890a52 100644
--- a/src/global-components.ts
+++ b/src/global-components.ts
@@ -48,9 +48,10 @@ declare module 'vue' {
     ToastManager: typeof components.ToastManager
     KTruncate: typeof components.KTruncate
     KCopy: typeof components.KCopy
+    KTableView: typeof components.KTableView
     // {%%NEW_KONGPONENT%%} (do not remove comment)
   }
 }
 
 // Must have an export to be a module
-export {}
+export { }
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 2b3e7a2ebe..fe11af5c3a 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -5,6 +5,7 @@
 @import "@/styles/mixins/badges";
 @import "@/styles/mixins/loaders";
 @import "@/styles/mixins/buttons";
+@import "@/styles/mixins/tables";
 
 /* Common mixins for all components */
 
diff --git a/src/styles/mixins/_tables.scss b/src/styles/mixins/_tables.scss
new file mode 100644
index 0000000000..3fcb25a789
--- /dev/null
+++ b/src/styles/mixins/_tables.scss
@@ -0,0 +1,224 @@
+@mixin table {
+  /* Local variables */
+  $tableThPaddingY: var(--kui-space-50, $kui-space-50);
+
+  /* Styles */
+  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 {
+    display: flex;
+    gap: var(--kui-space-50, $kui-space-50);
+    width: 100%;
+  }
+
+  .table-wrapper {
+    overflow: auto;
+    width: 100%;
+
+    table {
+      border-collapse: collapse;
+      max-width: 100%;
+      width: 100%;
+
+      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;
+      }
+
+      thead {
+        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;
+
+        &.is-scrolled {
+          background-color: var(--kui-color-background, $kui-color-background);
+        }
+
+        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 $kongponentsTransitionDurTimingFunc;
+            width: 100%;
+            z-index: -1;
+          }
+
+          &.is-scrolled {
+            &:after {
+              border-bottom: var(--kui-border-width-10, $kui-border-width-10) solid
+                var(--kui-color-border, $kui-color-border);
+              box-shadow: var(--kui-shadow, $kui-shadow);
+              opacity: 1;
+              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: $tableThPaddingY var(--kui-space-60, $kui-space-60);
+            text-align: left;
+            vertical-align: bottom;
+
+            &.resizable {
+              // 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;
+
+              // 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 {
+                // height property is set in component style block since it's bound to the calculated value
+                cursor: col-resize;
+                position: absolute;
+                right: 0;
+                top: 0;
+                width: 6px;
+
+                &.previous {
+                  left: 0;
+                  right: unset;
+                }
+              }
+            }
+
+            &.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;
+            }
+
+            &.sortable {
+              cursor: pointer;
+
+              &.asc .sort-icon {
+                transform: rotate(-180deg);
+              }
+            }
+
+            .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: $tableThPaddingY;
+                position: absolute;
+              }
+
+              .table-header-label {
+                @include truncate;
+              }
+
+              .header-tooltip-trigger {
+                cursor: help;
+              }
+
+              .sort-icon {
+                flex-shrink: 0;
+              }
+            }
+
+            &.resize-hover {
+              // 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;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          height: 48px;
+
+          &:not(:last-child) {
+            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;
+
+            &.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;
+            }
+
+            .row-link {
+              color: var(--kui-color-text, $kui-color-text);
+              display: block;
+              padding: var(--kui-space-50, $kui-space-50) var(--kui-space-60, $kui-space-60);
+              text-decoration: none;
+            }
+
+            .row-cell-wrapper {
+              display: contents;
+            }
+          }
+        }
+      }
+
+      // Variants
+      &.has-hover {
+        tbody tr:hover {
+          background-color: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest);
+        }
+      }
+
+      &.is-clickable {
+        tbody tr {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .table-pagination {
+    margin-top: var(--kui-space-70, $kui-space-70);
+  }
+}
diff --git a/src/types/table.ts b/src/types/table.ts
index d6addee1ac..7d6176bcd9 100644
--- a/src/types/table.ts
+++ b/src/types/table.ts
@@ -1,3 +1,5 @@
+import type { RouteLocationRaw } from 'vue-router'
+
 export type SortColumnOrder = 'asc' | 'desc'
 
 export interface TablePreferences {
@@ -13,6 +15,8 @@ export interface TablePreferences {
   columnVisibility?: Record<string, boolean>
 }
 
+export type TableViewData = Record<string, any>[]
+
 export interface TableHeader {
   /** Must be unique for each column */
   key: string
@@ -30,6 +34,8 @@ export interface TableHeader {
   useSortHandlerFunction?: boolean
 }
 
+export interface TableViewHeader extends Omit<TableHeader, 'useSortHandlerFunction'> { }
+
 /**
  * Provide a type interface for KTable `column-*` and `tooltip-*` slot names.
  *
@@ -50,3 +56,21 @@ export interface TableStatePayload {
   state: TableState
   hasData: boolean
 }
+
+export interface RowLink {
+  /** RouteLocationRaw or url string for row link */
+  to?: RouteLocationRaw | string
+  /** Target for row link */
+  target?: '_self' | '_blank' | '_parent' | '_top'
+}
+
+export interface TablePaginationAttributes {
+  totalCount?: number
+  pageSizes?: number[]
+  initialPageSize?: number
+  currentPage?: number
+  offset?: boolean
+  disablePageJump?: boolean
+  offsetPreviousButtonDisabled?: boolean
+  offsetNextButtonDisabled?: boolean
+}