From 670169fbbb04918c1134280e1caff33296bc5520 Mon Sep 17 00:00:00 2001
From: Vitaly <vitaly.raichev@epicmax.co>
Date: Thu, 25 May 2023 17:19:28 +0300
Subject: [PATCH] [#3279] VaDataTable docs improvement (#3412)

* fix(#3279): update block api in docs

* fix(#3279): fix types and styles in VaDataTable component

* fix(#3279): update VaDataTable docs examples

* fix(#3279): update locales

* fix(#3279): style fixing block components

* fix(#3279): tweak VaValue prop type

* #3279: fix block api component

* #3279: tweak data-table api-options

* #3279: review suggestions

* #3279: review suggestions
---
 .../page-config/blocks/alert/index.vue        |  11 +-
 .../blocks/api/components/api-table.vue       |  38 +++-
 .../modules/page-config/blocks/api/index.vue  |  16 +-
 .../modules/page-config/blocks/api/types.ts   |   5 +-
 .../page-config/blocks/example/index.vue      |   4 +-
 .../ui-elements/data-table/api-options.ts     | 148 +++++++++++--
 .../data-table/examples/Binding.vue           |  40 ++--
 .../ui-elements/data-table/examples/CRUD.vue  |  13 +-
 .../data-table/examples/ColgroupSlots.vue     |   9 +-
 .../data-table/examples/CustomSlots.vue       |  10 +-
 .../data-table/examples/Default.vue           |   4 +-
 .../data-table/examples/ExpandableRow.vue     |  24 +--
 .../data-table/examples/Filtering.vue         |  29 ++-
 .../data-table/examples/InlineEditing.vue     |  16 +-
 .../ui-elements/data-table/examples/Other.vue |  43 ++--
 .../data-table/examples/Pagination.vue        |  22 +-
 .../data-table/examples/Selection.vue         |  62 ++----
 .../data-table/examples/SelectionWithKeys.vue |  31 +--
 .../data-table/examples/Sorting.vue           |  38 +---
 .../data-table/examples/StaticSlots.vue       |  77 +++----
 .../data-table/examples/Sticky.vue            | 136 +++---------
 .../data-table/examples/Styling.vue           | 197 +++---------------
 .../ui-elements/data-table/index.ts           |   6 +-
 packages/docs/translations/en.json            |  40 ++--
 packages/docs/translations/ru.json            |  28 +--
 .../components/va-data-table/VaDataTable.vue  |   9 +-
 .../components/VaDataTableThRow.vue           |  74 +++----
 .../components/va-data-table/hooks/useRows.ts |   4 +-
 .../ui/src/components/va-data-table/types.ts  |   4 +-
 .../ui/src/components/va-value/VaValue.vue    |   2 +-
 30 files changed, 481 insertions(+), 659 deletions(-)

diff --git a/packages/docs/modules/page-config/blocks/alert/index.vue b/packages/docs/modules/page-config/blocks/alert/index.vue
index 6f9d731eec..5d3ade9be7 100644
--- a/packages/docs/modules/page-config/blocks/alert/index.vue
+++ b/packages/docs/modules/page-config/blocks/alert/index.vue
@@ -21,7 +21,7 @@ const { t } = useI18n()
 
 <template>
   <va-alert
-    class="page-config-alert my-2"
+    class="page-config-alert"
     :color="color"
     :outline="!solid"
   >
@@ -31,8 +31,13 @@ const { t } = useI18n()
 
 <style lang="scss">
 .page-config-alert {
-  p {
-    margin: 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+  .MarkdownView {
+    p {
+      margin: 0;
+    }
   }
 }
 </style>
diff --git a/packages/docs/modules/page-config/blocks/api/components/api-table.vue b/packages/docs/modules/page-config/blocks/api/components/api-table.vue
index a73265f4ca..bc8b65a540 100644
--- a/packages/docs/modules/page-config/blocks/api/components/api-table.vue
+++ b/packages/docs/modules/page-config/blocks/api/components/api-table.vue
@@ -3,22 +3,29 @@
 import { type PropType } from 'vue'
 import { MarkdownView } from '../../shared/markdown'
 import { Anchor } from '../../shared/anchor'
+import { CodeView } from '../../shared/code';
 
 defineProps({
   data: {
-    type: Array as PropType<Record<string, any>[]>
+    type: Array as PropType<Record<string, any>[]>,
+    default: () => ([]),
   },
   columns: {
-    type: Array as PropType<string[]>
+    type: Array as PropType<string[]>,
+    default: () => ([]),
   },
   title: {
     type: String,
+    default: '',
   }
 })
 </script>
 
 <template>
-  <h4 v-if="title" class="ApiDocs__header">
+  <h4
+    v-if="title"
+    class="ApiDocs__header"
+  >
     {{ title }}
     <Anchor :text="title" />
   </h4>
@@ -37,22 +44,33 @@ defineProps({
       </thead>
       <tbody>
         <tr
-          v-for="(row, key) in data"
-          :key="key"
+          v-for="(row, index) in data"
+          :key="index"
           class="ApiDocs__table__row"
         >
           <td
-            v-for="(data, key) in row"
-            :key="data"
+            v-for="(value, key) in row"
+            :key="key"
           >
             <slot
               :name="key"
-              v-bind="{ key, data }"
+              v-bind="{ key, data: value }"
             >
               <MarkdownView
-                v-if="data"
-                :content="data.toString()"
+                v-if="typeof value === 'string'"
+                :content="value.toString()"
               />
+              <div v-if="typeof value === 'object'">
+                <MarkdownView
+                  v-if="value.text"
+                  :content="value.text.toString()"
+                />
+                <CodeView
+                  v-if="value.code"
+                  :code="value.code"
+                  language="typescript"
+                />
+              </div>
             </slot>
           </td>
         </tr>
diff --git a/packages/docs/modules/page-config/blocks/api/index.vue b/packages/docs/modules/page-config/blocks/api/index.vue
index f5b92f5611..860cc2dd2c 100644
--- a/packages/docs/modules/page-config/blocks/api/index.vue
+++ b/packages/docs/modules/page-config/blocks/api/index.vue
@@ -34,7 +34,7 @@ const props = defineProps({
 
 const withManual = computed(() => {
   return merge(props.meta, props.manual as ManualApiOptions)
-}) 
+})
 
 const { t, te, fallbackLocale } = useI18n()
 
@@ -94,7 +94,12 @@ const eventsOptions = computed(() => Object
   .filter(([key, prop]) => !prop.hidden)
   .map(([key, prop]) => ({
     name: key,
-    description: t(getTranslation('events', key)),
+    description: prop.types && typeof prop.types === 'string'
+      ? {
+          text: t(getTranslation('events', key)) + '. ' + t(getTranslation('events', 'eventArgument')),
+          code: prop.types
+        }
+      : t(getTranslation('events', key))
   }))
   .sort((a, b) => {
     return a.name.localeCompare(b.name)
@@ -105,7 +110,12 @@ const slotsOptions = computed(() => Object
   .entries(withManual.value.slots || {})
   .map(([key, prop]) => ({
     name: key,
-    description: t(getTranslation('slots', key)),
+    description: prop.types
+      ? {
+          text: t(getTranslation('slots', key)) + '. ' + t(getTranslation('slots', 'scopeAvailable')),
+          code: prop.types
+        }
+      : t(getTranslation('slots', key))
   }))
   .sort((a, b) => {
     return a.name.localeCompare(b.name)
diff --git a/packages/docs/modules/page-config/blocks/api/types.ts b/packages/docs/modules/page-config/blocks/api/types.ts
index 1b82d321e3..ab5d0e7b4f 100644
--- a/packages/docs/modules/page-config/blocks/api/types.ts
+++ b/packages/docs/modules/page-config/blocks/api/types.ts
@@ -31,13 +31,14 @@ export type ManualMethodApiOptions = ManualApiOptionsItem & {
 }
 
 export type ManualEventApiOptions = ManualApiOptionsItem & {
-  types: string;
+  types?: string;
   hidden?: boolean; // Won't appear in documentation. Intended for internal usage events.
   isDOMEvent?: boolean;
   // add more here
 }
 
 export type ManualSlotApiOptions = ManualApiOptionsItem & {
+  types?: string;
   // add more here
 }
 
@@ -65,4 +66,4 @@ export type VisualOptions = {
   hideSlotsTitle?: boolean
   hideCssVariables?: boolean
   hideCssVariablesTitle?: boolean
-}
\ No newline at end of file
+}
diff --git a/packages/docs/modules/page-config/blocks/example/index.vue b/packages/docs/modules/page-config/blocks/example/index.vue
index 0addbbc67f..37a7d0d31b 100644
--- a/packages/docs/modules/page-config/blocks/example/index.vue
+++ b/packages/docs/modules/page-config/blocks/example/index.vue
@@ -76,7 +76,7 @@ const description = computed(() => {
     />
   </template>
 
-  <div class="page-config-example mb-3">
+  <div class="page-config-example">
     <va-card
       outlined
       class="page-config-example__card"
@@ -116,6 +116,8 @@ const description = computed(() => {
 
 <style lang="scss" scoped>
 .page-config-example {
+  margin-bottom: 2rem;
+
   &__card {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/packages/docs/page-config/ui-elements/data-table/api-options.ts b/packages/docs/page-config/ui-elements/data-table/api-options.ts
index 62a7224208..8149122f56 100644
--- a/packages/docs/page-config/ui-elements/data-table/api-options.ts
+++ b/packages/docs/page-config/ui-elements/data-table/api-options.ts
@@ -1,3 +1,96 @@
+const headerScope = `
+{
+  key: string,
+  label: string,
+}`
+
+const cellScope = `
+{
+  cell: DataTableCellScope,
+  row: DataTableRowScope,
+}
+
+// types description
+
+type DataTableCellScope {
+  rowIndex: number, // the same as "initialIndex" in "DataTableRowScope" type
+  rowKey: any,
+  rowData: DataTableItem,
+  column: DataTableColumnScope,
+  source: any,
+  value: string,
+}
+
+type DataTableRowScope {
+  initialIndex: number,
+  itemKey: any,
+  cells: DataTableCellScope[],
+  /** Same rowData as in DataTableCellScope */
+  rowData: DataTableItem,
+}
+
+type DataTableColumnScope {
+  source: DataTableColumn | string,
+  initialIndex: number,
+  key: string,
+  name: string,
+  label: string,
+}
+
+type DataTableItem = Record<string, any>
+`
+
+const cellKeyScope = `
+{
+  rowIndex: number,
+  rowKey: any,
+  rowData: DataTableItem, // the same as in the "cell" slot
+  column: DataTableColumnScope, // the same as in the "cell" slot
+  source: any,
+  value: string,
+  row: DataTableRowScope, // the same as in the "cell" slot
+  isExpanded: boolean,
+}`
+
+const expandableRowScope = `
+{
+  initialIndex: number,
+  itemKey: any,
+  cells: DataTableRowScope[], // the same as in the "cell" slot
+  /** Same rowData as in DataTableRowScope */
+  rowData: DataTableItem, // the same as in the "cell" slot
+  toggleRowDetails: (show?: boolean) => void,
+  isExpandableRowVisible: boolean,
+}`
+
+const filteredEvent = `
+{
+  items: DataTableItem[],
+  itemsIndexes: number[],
+}`
+
+const rowClickEvent = `
+// type RowClickEvent
+{
+  event: Event, // native mouse event
+  item: DataTableItem,
+  itemIndex: number,
+}`
+
+const selectionChangeEvent = `
+{
+  currentSelectedItems: (DataTableItem | DataTableItemKey)[],
+  previousSelectedItems: (DataTableItem | DataTableItemKey)[],
+}`
+
+const sortedEvent = `
+{
+  sortBy: string,
+  sortingOrder: DataTableSortingOrder,
+  items: DataTableItem[],
+  itemsIndexes: number[],
+}`
+
 export default defineManualApi({
   props: {
     columns: {
@@ -21,49 +114,62 @@ export default defineManualApi({
   },
   events: {
     filtered: {
-      types: "`() => FilteredEmit`",
+      types: filteredEvent,
     },
     selectionChange: {
-      types: "`() => SelectionChangeEmit`",
+      types: selectionChangeEvent,
     },
     sorted: {
-      types: "`() => SortedEmit`",
+      types: sortedEvent,
     },
     "update:sortBy": {
-      types: "`() => String`",
+      types: 'type String',
     },
     "update:sortingOrder": {
-      types: "`() => DataTableSortingOrder`",
+      types: 'type DataTableSortingOrder',
     },
     "row:click": {
-      types: "`() => RowClickEmit`",
+      types: rowClickEvent,
     },
     "row:contextmenu": {
-      types: "`() => RowClickEmit`",
+      types: 'type RowClickEvent',
     },
     "row:dblclick": {
-      types: "`() => RowClickEmit`",
-    },
-    "scroll:bottom": {
-      types: "`() => Event`",
-    },
-    "scroll:top": {
-      types: "`() => Event`",
+      types: 'type RowClickEvent',
     },
+    "scroll:bottom": {},
+    "scroll:top": {},
   },
   slots: {
-    colgroup: {},
+    colgroup: {
+      types: 'type DataTableColumnScope[]',
+    },
     headerPrepend: {},
-    header: {},
-    "header(key)": {},
+    header: {
+      types: headerScope,
+    },
+    "header(key)": {
+      types: headerScope,
+    },
     headerAppend: {},
     bodyPrepend: {},
-    cell: {},
-    "cell(key)": {},
+    cell: {
+      types: cellScope,
+    },
+    "cell(key)": {
+      types: cellKeyScope,
+    },
     bodyAppend: {},
     footerPrepend: {},
-    footer: {},
-    "footer(key)": {},
+    footer: {
+      types: headerScope,
+    },
+    "footer(key)": {
+      types: headerScope,
+    },
     footerAppend: {},
+    expandableRow: {
+      types: expandableRowScope,
+    },
   },
 });
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Binding.vue b/packages/docs/page-config/ui-elements/data-table/examples/Binding.vue
index be7c66f3b3..39d9a206d3 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Binding.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Binding.vue
@@ -1,14 +1,12 @@
 <template>
-  <div class="row mb-6">
+  <div class="flex flex-wrap gap-6 mb-6">
     <va-checkbox
       v-model="isRowBind"
-      class="flex flex-col md3 sm4 xs6"
       label="Row bind"
     />
 
     <va-checkbox
       v-model="isCellBind"
-      class="flex flex-col md3 sm4 xs6"
       label="Cell bind"
     />
   </div>
@@ -27,7 +25,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -74,7 +72,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
       isCellBind: true,
       isRowBind: true,
@@ -83,18 +81,16 @@ export default defineComponent({
 
   methods: {
     getRowBind(row) {
-      const classes = ["customRowClass_1"];
       if (row.name === "Ervin Howell") {
-        classes.push(["customRowClass_2", "customRowClass_3"]);
-      } else if (row.phone.startsWith("(")) {
-        classes.push({ customRowClass_4: true });
+        return {
+          class: ["custom-class"]
+        };
       }
-      return { class: classes };
     },
     getCellBind(cell, row, column) {
-      if (column.key === "username" && cell.startsWith("S")) {
+      if (column.key === "username") {
         return {
-          style: { fontWeight: "bold" },
+          style: { color: "#EF476F" },
           onClick: () => console.log(cell),
         };
       }
@@ -103,20 +99,10 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
-.customRowClass_1 {
-  color: darkblue;
-}
-
-.customRowClass_2 {
-  background-color: rgb(205, 242, 174);
-}
-
-.customRowClass_3 {
-  color: rgb(244, 10, 10);
-}
-
-.customRowClass_4 {
-  background-color: rgb(213, 187, 241);
+<style lang="scss" scoped>
+::v-deep(.custom-class) {
+  text-decoration: line-through;
+  pointer-events: none;
+  background-color: var(--va-background-element);
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/CRUD.vue b/packages/docs/page-config/ui-elements/data-table/examples/CRUD.vue
index 9dc19324b4..db1e44e606 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/CRUD.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/CRUD.vue
@@ -1,12 +1,12 @@
 <template>
   <va-data-table
-    class="table-crud-example"
+    class="table-crud"
     :items="items"
     :columns="columns"
     striped
   >
     <template #headerAppend>
-      <tr class="table-crud-example__slot">
+      <tr class="table-crud__slot">
         <th
           v-for="key in Object.keys(createdItem)"
           :key="key"
@@ -38,13 +38,14 @@
       <va-button
         preset="plain"
         icon="delete"
+        class="ml-3"
         @click="deleteItemById(rowIndex)"
       />
     </template>
   </va-data-table>
 
   <va-modal
-    class="modal-crud-example"
+    class="modal-crud"
     :model-value="!!editedItem"
     title="Edit item"
     size="small"
@@ -55,7 +56,7 @@
       v-for="key in Object.keys(editedItem)"
       :key="key"
       v-model="editedItem[key]"
-      class="my-3"
+      class="my-6"
       :label="key"
     />
   </va-modal>
@@ -151,7 +152,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.table-crud-example {
+.table-crud {
   --va-form-element-default-width: 0;
 
   .va-input {
@@ -165,7 +166,7 @@ export default defineComponent({
   }
 }
 
-.modal-crud-example {
+.modal-crud {
   .va-input {
     display: block;
   }
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue b/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
index c2b10fd891..8be1787365 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/ColgroupSlots.vue
@@ -5,7 +5,7 @@
   >
     <template #colgroup>
       <col span="5">
-      <col class="table-example--slots">
+      <col class="table-slots">
     </template>
   </va-data-table>
 </template>
@@ -15,7 +15,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -52,7 +52,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
     };
   },
@@ -60,7 +60,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.table-example--slots {
+.table-slots {
   background-color: var(--va-background-element);
+  color: var(--va-on-background-element);
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/CustomSlots.vue b/packages/docs/page-config/ui-elements/data-table/examples/CustomSlots.vue
index 0b4e30d4c4..7032882574 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/CustomSlots.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/CustomSlots.vue
@@ -8,14 +8,14 @@
         {{ label }}
       </va-chip>
     </template>
-    <template #header(companyName)>
-      Company Name
-    </template>
     <template #cell(street)="{ value }">
       <va-chip size="small">
         {{ value }}
       </va-chip>
     </template>
+    <template #cell(username)="{ value }">
+      <strong>{{ value }}</strong>
+    </template>
   </va-data-table>
 </template>
 
@@ -24,7 +24,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -108,7 +108,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
     };
   },
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Default.vue b/packages/docs/page-config/ui-elements/data-table/examples/Default.vue
index d50ad852c8..f7ae283284 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Default.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Default.vue
@@ -7,7 +7,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -51,7 +51,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
     };
   },
 });
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/ExpandableRow.vue b/packages/docs/page-config/ui-elements/data-table/examples/ExpandableRow.vue
index 8fd67917c8..f8864f0b75 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/ExpandableRow.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/ExpandableRow.vue
@@ -40,22 +40,12 @@
   </va-data-table>
 </template>
 
-<style>
-  .va-data-table__table-tr--expanded td {
-    background: var(--va-background-border);
-  }
-
-  .va-data-table__table-expanded-content td {
-    background-color: var(--va-background-element);
-  }
-</style>
-
 <script>
 import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -106,9 +96,19 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns
     };
   },
 });
 </script>
+
+<style>
+  .va-data-table__table-tr--expanded td {
+    background: var(--va-background-border);
+  }
+
+  .va-data-table__table-expanded-content td {
+    background-color: var(--va-background-element);
+  }
+</style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Filtering.vue b/packages/docs/page-config/ui-elements/data-table/examples/Filtering.vue
index 0d323010dd..1e49a17636 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Filtering.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Filtering.vue
@@ -1,21 +1,18 @@
 <template>
-  <div class="row">
+  <div class="grid md:grid-cols-2 gap-6 mb-6">
     <va-input
       v-model="input"
-      class="flex flex-col mb-2 md6 xs12"
       placeholder="Filter..."
+      class="w-full"
     />
 
-    <div class="flex flex-col mb-2 md6 xs12">
+    <div class="flex flex-col gap-6">
       <va-checkbox
-        v-model="useCustomFilteringFn"
-        class="mb-3 d-block"
+        v-model="isCustomFilteringFn"
         label="Use custom filtering function (looks for an exact match)"
       />
-
       <va-checkbox
         v-model="isDebounceInput"
-        class="d-block"
         label="Debounce input"
       />
     </div>
@@ -30,14 +27,12 @@
   />
 
   <va-alert
-    class="mt-3"
+    class="!mt-6"
     color="info"
     outline
   >
-    <span>
-      Number of filtered items:
-      <va-chip>{{ filteredCount }}</va-chip>
-    </span>
+    Number of filtered items:
+    <va-chip>{{ filteredCount }}</va-chip>
   </va-alert>
 </template>
 
@@ -47,7 +42,7 @@ import debounce from "lodash/debounce.js";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -176,19 +171,19 @@ export default defineComponent({
     const input = "";
 
     return {
-      items: users,
+      items,
       columns,
       input,
       filter: input,
       isDebounceInput: false,
-      useCustomFilteringFn: false,
-      filteredCount: users.length,
+      isCustomFilteringFn: false,
+      filteredCount: items.length,
     };
   },
 
   computed: {
     customFilteringFn() {
-      return this.useCustomFilteringFn ? this.filterExact : undefined;
+      return this.isCustomFilteringFn ? this.filterExact : undefined;
     },
   },
 
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/InlineEditing.vue b/packages/docs/page-config/ui-elements/data-table/examples/InlineEditing.vue
index 0d42f3a3dd..bd02ce359b 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/InlineEditing.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/InlineEditing.vue
@@ -1,6 +1,6 @@
 <template>
   <va-data-table
-    class="table-inline-example"
+    class="table-inline"
     :items="items"
     :columns="columns"
   >
@@ -9,12 +9,12 @@
       :key="item.key"
       #[`cell(${item.key})`]="{ value, row }"
     >
-      <div class="table-inline-example__cell">
+      <div class="table-inline__cell">
         <va-value #default="doShowInput">
           <va-input
             v-if="doShowInput.value"
             :model-value="value"
-            @change="() => { 
+            @change="($event) => {
               row.rowData[item.key] = $event.target.value
               doShowInput.value = false
             }"
@@ -22,8 +22,8 @@
             @vue:mounted="$event.component.ctx.focus()"
           />
           <span
-            class="table-inline-example__item"
-            :class="doShowInput.value ? 'table-inline-example__item--hidden' : ''"
+            class="table-inline__item"
+            :class="doShowInput.value ? 'table-inline__item--hidden' : ''"
             @click="doShowInput.value = true"
           >
             {{ value }}
@@ -77,8 +77,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.table-inline-example {
-  .table-inline-example__cell {
+.table-inline {
+  &__cell {
     position: relative;
     height: 100%;
     width: 100%;
@@ -86,7 +86,7 @@ export default defineComponent({
     align-items: center;
   }
 
-  .table-inline-example__item {
+  &__item {
     cursor: pointer;
 
     &--hidden {
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Other.vue b/packages/docs/page-config/ui-elements/data-table/examples/Other.vue
index 3355ec0299..36c1a533d5 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Other.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Other.vue
@@ -1,71 +1,62 @@
 <template>
-  <div class="row">
-    <div class="flex flex-col lg4 mb-2">
+  <div class="grid sm:grid-cols-3 gap-6 mb-6">
+    <div>
       <va-switch
         v-model="isTableStriped"
-        class="mt-2"
-        label="Striped style"
+        label="Striped"
         size="small"
       />
       <br>
       <va-switch
         v-model="animated"
-        class="mt-2"
-        label="Animated rows"
+        label="Animated"
         size="small"
       />
       <br>
       <va-switch
         v-model="isTableRowsClickable"
-        class="mt-2"
-        label="Clickable rows"
+        label="Clickable"
         size="small"
       />
     </div>
 
-    <div class="flex flex-col lg4 mb-2">
+    <div>
       <va-switch
         v-model="isTableLoading"
-        class="mt-2"
-        label="Loading state"
+        label="Loading"
         size="small"
       />
       <br>
       <va-switch
         v-model="prependSlot"
-        class="mt-2"
-        label="Add (prepend) slots"
+        label="Prepend slots"
         size="small"
       />
       <br>
       <va-switch
         v-model="appendSlot"
-        class="mt-2"
-        label="Add (append) slots"
+        label="Append slots"
         size="small"
       />
     </div>
 
-    <div class="flex flex-col lg4 mb-2">
+    <div>
       <va-switch
         v-model="hideDefaultHeader"
-        class="mt-2"
-        label="Hide default header"
+        label="Hide header"
         size="small"
       />
       <br>
       <va-switch
         v-model="footerClone"
-        class="mt-2"
-        label="Clone header to footer"
+        label="Clone footer"
         size="small"
         :disabled="hideDefaultHeader"
       />
       <br>
       <va-switch
         v-model="footerSorting"
-        class="mt-2"
-        label="Allow foot sorting"
+        label="Foot sorting"
         size="small"
         :disabled="hideDefaultHeader || !footerClone"
       />
@@ -76,7 +67,7 @@
     :items="items"
     :columns="columns"
     :striped="isTableStriped"
-    :selectable="true"
+    selectable
     :clickable="isTableRowsClickable"
     :loading="isTableLoading"
     :hide-default-header="hideDefaultHeader"
@@ -153,7 +144,7 @@
 
   <va-alert
     v-if="isTableRowsClickable"
-    class="mt-3"
+    class="!mt-6"
     color="info"
     outline
   >
@@ -170,7 +161,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -217,7 +208,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
       isTableLoading: false,
       isTableStriped: true,
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Pagination.vue b/packages/docs/page-config/ui-elements/data-table/examples/Pagination.vue
index baa205103a..7811a162d1 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Pagination.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Pagination.vue
@@ -1,24 +1,20 @@
 <template>
-  <div class="row">
+  <div class="grid sm:grid-cols-2 md:grid-cols-5 gap-6 mb-6">
     <va-input
       v-model.number="perPage"
-      class="flex flex-col mb-2 md3"
       type="number"
       placeholder="Items..."
       label="Items per page"
     />
-
     <va-input
       v-model.number="currentPage"
-      class="flex flex-col mb-2 md3"
       type="number"
       placeholder="Page..."
       label="Current page"
     />
-
     <va-input
       v-model="filter"
-      class="flex flex-col mb-2 md6"
+      class="sm:col-span-2 md:col-span-3"
       placeholder="Filter..."
     />
   </div>
@@ -28,17 +24,16 @@
     :columns="columns"
     :per-page="perPage"
     :current-page="currentPage"
-    :selectable="true"
+    selectable
     :filter="filter"
     @filtered="filtered = $event.items"
   >
     <template #bodyAppend>
       <tr>
-        <td colspan="8">
-          <div class="table-example--pagination">
+        <td colspan="6">
+          <div class="flex justify-center mt-4">
             <va-pagination
               v-model="currentPage"
-              input
               :pages="pages"
             />
           </div>
@@ -123,10 +118,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-.table-example--pagination {
-  display: flex;
-  justify-content: center;
-}
-</style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Selection.vue b/packages/docs/page-config/ui-elements/data-table/examples/Selection.vue
index 17821bf715..3594e9385f 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Selection.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Selection.vue
@@ -1,66 +1,50 @@
 <template>
-  <div class="row">
-    <va-checkbox
-      v-model="selectable"
-      class="flex flex-col mb-2 md4"
-      label="Selectable"
-    />
-
+  <div class="grid sm:grid-cols-2 gap-6 mb-6">
     <va-select
       v-model="selectMode"
-      class="flex flex-col mb-2 md4"
       label="Select mode"
       :options="selectModeOptions"
     />
-
     <va-select
       v-model="selectedColor"
-      class="flex flex-col mb-2 md4"
       label="Selected color"
       :options="selectColorOptions"
     />
   </div>
 
-  <va-button @click="shuffleItems">
-    Shuffle items
-  </va-button>
-
   <va-data-table
     v-model="selectedItems"
     :items="items"
     :columns="columns"
-    :selectable="selectable"
+    selectable
     :select-mode="selectMode"
     :selected-color="selectedColor"
     @selectionChange="selectedItemsEmitted = $event.currentSelectedItems"
   />
 
   <va-alert
-    class="mt-3"
+    class="!mt-6"
     color="info"
     outline
   >
-    <span>
-      Selected items (click to unselect):
-      <va-chip
-        v-for="item in selectedItemsEmitted"
-        :key="item.id"
-        class="ml-2"
-        @click="unselectItem(item)"
-      >
-        {{ item.id }}
-      </va-chip>
-    </span>
+    Selected items (click to unselect):
+    <va-chip
+      v-for="item in selectedItemsEmitted"
+      :key="item.id"
+      class="ml-2"
+      @click="unselectItem(item)"
+    >
+      {{ item.id }}
+    </va-chip>
   </va-alert>
 </template>
 
 <script>
 import { defineComponent } from "vue";
-import shuffle from "lodash/shuffle.js";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -107,35 +91,23 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
-      selectable: true,
-      selectedItems: [users[1]],
+      selectedItems: [items[1]],
       selectedItemsEmitted: [],
       selectMode: "multiple",
-      selectedColor: "#888888",
+      selectedColor: "primary",
       selectModeOptions: ["single", "multiple"],
-      selectColorOptions: ["primary", "danger", "warning", "#888888"],
+      selectColorOptions: ["primary", "danger", "warning", "#EF467F"],
     };
   },
 
-  watch: {
-    selectable(value) {
-      if (!value) {
-        this.selectedItems = [];
-      }
-    },
-  },
-
   methods: {
     unselectItem(item) {
       this.selectedItems = this.selectedItems.filter(
         (selectedItem) => selectedItem !== item
       );
     },
-    shuffleItems() {
-      this.items = shuffle(this.items);
-    },
   },
 });
 </script>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/SelectionWithKeys.vue b/packages/docs/page-config/ui-elements/data-table/examples/SelectionWithKeys.vue
index 79c078cf52..1a3951fb40 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/SelectionWithKeys.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/SelectionWithKeys.vue
@@ -1,5 +1,8 @@
 <template>
-  <va-button @click="shuffleItems">
+  <va-button
+    class="mb-6"
+    @click="shuffleItems"
+  >
     Shuffle and update items
   </va-button>
 
@@ -14,21 +17,19 @@
   />
 
   <va-alert
-    class="mt-3"
+    class="!mt-6"
     color="info"
     outline
   >
-    <span>
-      Selected items (click to unselect):
-      <va-chip
-        v-for="item in selectedItemsEmitted"
-        :key="item"
-        class="ml-2"
-        @click="unselectItem(item)"
-      >
-        {{ item }}
-      </va-chip>
-    </span>
+    Selected items (click to unselect):
+    <va-chip
+      v-for="item in selectedItemsEmitted"
+      :key="item"
+      class="ml-2"
+      @click="unselectItem(item)"
+    >
+      {{ item }}
+    </va-chip>
   </va-alert>
 </template>
 
@@ -38,7 +39,7 @@ import shuffle from "lodash/shuffle.js";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -85,7 +86,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
       selectedItems: ["Antonette"],
       selectedItemsEmitted: [],
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Sorting.vue b/packages/docs/page-config/ui-elements/data-table/examples/Sorting.vue
index 79dd0399cd..4ee615da84 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Sorting.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Sorting.vue
@@ -1,15 +1,12 @@
 <template>
-  <div class="row">
+  <div class="grid sm:grid-cols-2 gap-6 mb-6">
     <va-select
       v-model="sortBy"
-      class="flex flex-col mb-2 md6"
       label="Sort by"
       :options="sortByOptions()"
     />
-
     <va-select
       v-model="sortingOrder"
-      class="flex flex-col mb-2 md6"
       label="Sorting order"
       :options="sortingOrderOptions"
       :value-by="(option) => option.value"
@@ -21,36 +18,8 @@
     v-model:sorting-order="sortingOrder"
     :items="items"
     :columns="columns"
-    :hoverable="true"
-    @sorted="
-      sortedRowsEmitted = $event.items.map(row => row.id),
-      sortingOrderEmitted = $event.sortingOrder,
-      sortByEmitted = $event.sortBy
-    "
+    hoverable
   />
-
-  <va-alert
-    class="mt-3"
-    color="info"
-    outline
-  >
-    <span v-if="sortingOrder">
-      Sorted items order (showing id):
-      <va-chip v-show="!!sortedRowsEmitted.length">{{
-        sortedRowsEmitted.join(" --> ")
-      }}</va-chip>
-      <va-chip v-show="!!sortingOrderEmitted">{{
-        sortingOrderEmitted
-      }}</va-chip>
-      <va-chip v-show="!!sortByEmitted">{{ sortByEmitted }}</va-chip>
-    </span>
-    <span v-else>
-      Unsorted items order (showing id):
-      <va-chip v-show="!!sortedRowsEmitted.length">{{
-        sortedRowsEmitted.join(", ")
-      }}</va-chip>
-    </span>
-  </va-alert>
 </template>
 
 <script>
@@ -197,9 +166,6 @@ export default defineComponent({
       sortBy: "username",
       sortingOrder: "asc",
       sortingOrderOptions,
-      sortByEmitted: "",
-      sortingOrderEmitted: "",
-      sortedRowsEmitted: [],
     };
   },
 
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/StaticSlots.vue b/packages/docs/page-config/ui-elements/data-table/examples/StaticSlots.vue
index d4fb9c9e9e..b53f563879 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/StaticSlots.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/StaticSlots.vue
@@ -5,62 +5,33 @@
     footer-clone
   >
     <template #headerPrepend>
-      <tr class="table-example-slots__head">
-        <th colspan="6">
-          Custom cell which span all cells (headPrepend slot)
-        </th>
+      <tr class="table-slots">
+        <th colspan="6"><span>#headerPrepend</span> slot</th>
       </tr>
     </template>
     <template #headerAppend>
-      <tr class="table-example-slots__head">
-        <th colspan="1">
-          #
-        </th>
-        <th colspan="2">
-          User info
-        </th>
-        <th colspan="3">
-          Contact info
-        </th>
+      <tr class="table-slots">
+        <th colspan="6"><span>#headerAppend</span> slot</th>
       </tr>
     </template>
-
     <template #bodyPrepend>
-      <tr class="table-example-slots__body">
-        <td colspan="4">
-          Custom cell which span 4 cells (bodyPrepend slot)
-        </td>
-        <td colspan="2">
-          Custom cell which span 2 cells (bodyPrepend slot)
-        </td>
+      <tr class="table-slots">
+        <td colspan="6"><span>#bodyPrepend</span> slot</td>
       </tr>
     </template>
     <template #bodyAppend>
-      <tr class="table-example-slots__body">
-        <td colspan="6">
-          Custom cell which span all cells (bodyAppend slot)
-        </td>
+      <tr class="table-slots">
+        <td colspan="6"><span>#bodyAppend</span> slot</td>
       </tr>
     </template>
-
     <template #footerPrepend>
-      <tr class="table-example-slots__foot">
-        <th colspan="3">
-          Span 3 cells
-        </th>
-        <th colspan="2">
-          Span 2 cells
-        </th>
-        <th colspan="1">
-          Span 1 cells
-        </th>
+      <tr class="table-slots">
+        <th colspan="6"><span>#footerPrepend</span> slot</th>
       </tr>
     </template>
     <template #footerAppend>
-      <tr class="table-example-slots__foot">
-        <th colspan="6">
-          Span all cells (footAppend slot)
-        </th>
+      <tr class="table-slots">
+        <th colspan="6"><span>#footerAppend</span> slot</th>
       </tr>
     </template>
   </va-data-table>
@@ -71,7 +42,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -108,7 +79,7 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
+      items,
       columns,
     };
   },
@@ -116,15 +87,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.table-example-slots__head {
-  background-color: var(--va-info);
-}
-
-.table-example-slots__body {
+.table-slots {
   background-color: var(--va-background-element);
-}
+  color: var(--va-on-background-element);
 
-.table-example-slots__foot {
-  background-color: var(--va-background-element);
+  th, td {
+    text-transform: none !important;
+    font-size: 0.8rem;
+    font-weight: unset;
+  }
+
+  span {
+    font-weight: bold;
+    color: var(--va-primary);
+  }
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue b/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
index d0e2fd9812..0385d36489 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Sticky.vue
@@ -1,11 +1,5 @@
 <template>
-  <div class="sticky-table-example">
-    <va-data-table
-      :items="items"
-      footer-clone
-      height="180px"
-    />
-
+  <div class="grid gap-10">
     <va-data-table
       :items="items"
       sticky-header
@@ -17,65 +11,29 @@
       :items="items"
       :style="{
         '--va-data-table-height': '300px',
-        '--va-data-table-thead-background': 'var(--va-secondary)',
+        '--va-data-table-thead-background': 'var(--va-background-element)',
         '--va-data-table-tfoot-background': 'var(--va-background-element)',
-        '--va-data-table-thead-color': 'var(--va-warning)',
+        '--va-data-table-thead-color': '#2C82E0',
       }"
       sticky-header
       footer-clone
       sticky-footer
-    >
-      <template #headerAppend>
-        <tr>
-          <th colspan="1">
-            #
-          </th>
-          <th colspan="2">
-            User info
-          </th>
-          <th colspan="3">
-            Contact info
-          </th>
-        </tr>
-      </template>
-      <template #footerPrepend>
-        <tr>
-          <th colspan="6">
-            Additional data in the footer prepend slot
-          </th>
-        </tr>
-      </template>
-    </va-data-table>
+    />
 
     <va-data-table
-      class="my-custom-table-class"
+      class="custom-table"
       :items="items"
       height="100%"
       sticky-header
       footer-clone
       sticky-footer
       :scroll-bottom-margin="20"
-      @scroll:top="logger"
-      @scroll:bottom="onScrollDown"
+      @scroll:top="logger('--- scroll top ---')"
+      @scroll:bottom="logger('--- scroll bottom ---')"
     >
       <template #headerPrepend>
         <tr>
-          <th colspan="6">
-            With scroll events
-          </th>
-        </tr>
-      </template>
-      <template
-        v-if="isLoading"
-        #bodyAppend
-      >
-        <tr>
-          <td colspan="6">
-            <va-inner-loading
-              :loading="isLoading"
-              style="height: 2rem;"
-            />
-          </td>
+          <th colspan="6">With scroll events</th>
         </tr>
       </template>
     </va-data-table>
@@ -87,7 +45,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent({
   data() {
-    const users = [
+    const items = [
       {
         id: 1,
         name: "Leanne Graham",
@@ -155,70 +113,34 @@ export default defineComponent({
     ];
 
     return {
-      items: users,
-      isLoading: false,
+      items,
     };
   },
 
   methods: {
-    logger() {
-      console.log("--- scroll top ---");
-    },
-    onScrollDown() {
-      if (this.isLoading) {
-        return;
-      }
-      this.isLoading = true;
-      setTimeout(() => {
-        this.loadUsers();
-        this.isLoading = false;
-      }, 1500);
-    },
-    loadUsers() {
-      const lastId = this.items[this.items.length - 1].id;
-      const uploadedUser = {
-        name: "New User",
-        username: "NewUser",
-        email: "newUser@nebulean.com",
-        phone: "(254)954-5289",
-        website: "nebulean.info",
-      };
-      const loadedUsers = [1, 2, 3].map((id) => ({
-        ...uploadedUser,
-        id: lastId + id,
-      }));
-      this.items = [...this.items, ...loadedUsers];
+    logger(msg) {
+      console.log(msg);
     },
   },
 });
 </script>
 
-<style lang="scss">
-.sticky-table-example {
-  .va-data-table {
-    border: 1px solid var(--va-background-element);
-  }
-
-  .va-data-table + .va-data-table {
-    margin-top: 2rem;
-  }
-
-  .my-custom-table-class {
-    --va-data-table-thead-background:
-      linear-gradient(
-        0deg,
-        var(--va-primary),
-        var(--va-info)
-      );
-    --va-data-table-tfoot-background:
-      linear-gradient(
-        0deg,
-        var(--va-info),
-        var(--va-primary)
-      );
-    --va-data-table-max-height: 250px;
-    --va-data-table-thead-color: var(--va-text-inverted);
-    --va-data-table-tfoot-color: var(--va-text-inverted);
-  }
+<style lang="scss" scoped>
+::v-deep(.custom-table) {
+  --va-data-table-thead-background:
+    linear-gradient(
+      0deg,
+      var(--va-primary),
+      var(--va-info)
+    );
+  --va-data-table-tfoot-background:
+    linear-gradient(
+      0deg,
+      var(--va-info),
+      var(--va-primary)
+    );
+  --va-data-table-max-height: 300px;
+  --va-data-table-thead-color: var(--va-text-inverted);
+  --va-data-table-tfoot-color: var(--va-text-inverted);
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/examples/Styling.vue b/packages/docs/page-config/ui-elements/data-table/examples/Styling.vue
index c04c99efe2..001937d00e 100644
--- a/packages/docs/page-config/ui-elements/data-table/examples/Styling.vue
+++ b/packages/docs/page-config/ui-elements/data-table/examples/Styling.vue
@@ -1,130 +1,17 @@
 <template>
-  <div class="row mb-6">
-    <div class="flex flex-col md4">
-      <va-select
-        v-model="columns[0].thAlign"
-        label="First heading align"
-        :options="alignOptions"
-      />
-      <va-select
-        v-model="columns[0].thVerticalAlign"
-        class="mt-2"
-        label="First heading vertical align"
-        :options="verticalAlignOptions"
-      />
-      <va-select
-        v-model="columns[0].width"
-        class="mt-2"
-        label="First heading width"
-        :options="widthOptions"
-        clearable
-      />
-    </div>
-    <div class="flex flex-col md4">
-      <va-select
-        v-model="columns[1].thAlign"
-        label="Second heading align"
-        :options="alignOptions"
-      />
-      <va-select
-        v-model="columns[1].thVerticalAlign"
-        class="mt-2"
-        label="Second heading vertical align"
-        :options="verticalAlignOptions"
-      />
-      <va-select
-        v-model="columns[1].width"
-        class="mt-2"
-        label="Second heading width"
-        :options="widthOptions"
-        clearable
-      />
-    </div>
-    <div class="flex flex-col md4">
-      <va-select
-        v-model="columns[2].thAlign"
-        label="Third heading align"
-        :options="alignOptions"
-      />
-      <va-select
-        v-model="columns[2].thVerticalAlign"
-        class="mt-2"
-        label="Third heading vertical align"
-        :options="verticalAlignOptions"
-      />
-      <va-select
-        v-model="columns[2].width"
-        class="mt-2"
-        label="Third heading width"
-        :options="widthOptions"
-        clearable
-      />
-    </div>
-  </div>
-
-  <div class="row mb-6">
-    <div class="flex flex-col md4">
-      <va-select
-        v-model="columns[0].tdAlign"
-        label="First column align"
-        :options="alignOptions"
-        color="#990099"
-      />
-      <va-select
-        v-model="columns[0].tdVerticalAlign"
-        class="mt-2"
-        label="First column vertical align"
-        :options="verticalAlignOptions"
-        color="#990099"
-      />
-    </div>
-    <div class="flex flex-col md4">
-      <va-select
-        v-model="columns[1].tdAlign"
-        label="Second column align"
-        :options="alignOptions"
-        color="#990099"
-      />
-      <va-select
-        v-model="columns[1].tdVerticalAlign"
-        class="mt-2"
-        label="Second column vertical align"
-        :options="verticalAlignOptions"
-        color="#990099"
-      />
-    </div>
-    <div class="flex flex-col md4">
-      <va-select
-        v-model="columns[2].tdAlign"
-        label="Third column align"
-        :options="alignOptions"
-        color="#990099"
-      />
-      <va-select
-        v-model="columns[2].tdVerticalAlign"
-        class="mt-2"
-        label="Third column vertical align"
-        :options="verticalAlignOptions"
-        color="#990099"
-      />
-    </div>
-  </div>
-
-  <div class="row mb-6">
+  <div class="flex flex-wrap gap-6 mb-6">
     <va-checkbox
       v-model="useAdditionalClass"
-      class="flex flex-col mb-1 md6"
-      label="Use additional class to cells of first column"
+      label="Additional class"
     />
     <va-checkbox
       v-model="useAdditionalStyle"
-      class="flex flex-col mb-1 md6"
-      label="Use additional styles to cells of second column"
+      label="Additional style"
     />
   </div>
 
   <va-data-table
-    class="table-example"
+    class="table"
     :items="items"
     :columns="columns"
   />
@@ -138,61 +25,48 @@ export default defineComponent({
     const items = [
       {
         id: 1,
-        text: "Some text 1",
-        target: "Some prop 1",
+        props: "thAlign, thVerticalAlign, thClass, thStyle",
+        description: 'Set css rules "align" and "vertical-align", "class" and "style" for header and footer cells',
       },
       {
         id: 2,
-        text: "Some text 2",
-        target: "Some prop 2",
+        props: "tdAlign, tdVerticalAlign, tdClass, tdStyle",
+        description: 'Set css rules "align" and "vertical-align", "class" and "style" for body cells',
       },
       {
         id: 3,
-        text: "Some text 3",
-        target: "Some prop 3",
+        props: "width",
+        description: 'Set "width" for a column',
       },
     ];
 
     const columns = [
       {
         key: "id",
-        label: "ID",
-        thAlign: "left",
-        thVerticalAlign: "top",
-        tdAlign: "left",
+        label: "#",
+        thAlign: "center",
+        tdAlign: "center",
         tdVerticalAlign: "top",
-        sortable: true,
+        width: "40px",
       },
       {
-        key: "text",
-        label: "Text",
+        key: "props",
+        label: "Props",
         thAlign: "center",
-        thVerticalAlign: "middle",
-        tdAlign: "center",
-        tdVerticalAlign: "middle",
-        sortable: true,
+        tdVerticalAlign: "top",
+        width: "25%"
       },
       {
-        key: "target",
-        label: "Target",
-        thAlign: "right",
-        thVerticalAlign: "bottom",
-        tdAlign: "right",
-        tdVerticalAlign: "bottom",
-        sortable: true,
+        key: "description",
+        label: "Description",
+        thAlign: "center",
+        tdVerticalAlign: "top",
       },
     ];
 
-    const verticalAlignOptions = ["top", "middle", "bottom"];
-    const alignOptions = ["left", "center", "right"];
-    const widthOptions = ["25%", "200px", 300];
-
     return {
       items,
       columns,
-      verticalAlignOptions,
-      alignOptions,
-      widthOptions,
       useAdditionalClass: true,
       useAdditionalStyle: true,
     };
@@ -201,13 +75,13 @@ export default defineComponent({
   watch: {
     useAdditionalClass: {
       handler(value) {
-        this.columns[0].tdClass = value && "additionalClass";
+        this.columns[2].tdClass = value && "additional-class";
       },
       immediate: true,
     },
     useAdditionalStyle: {
       handler(value) {
-        this.columns[1].tdStyle = value && { color: "blue", fontWeight: 900 };
+        this.columns[1].tdStyle = value && { color: "#EF467F" };
       },
       immediate: true,
     },
@@ -215,26 +89,23 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
-.table-example {
-  th {
-    background-color: var(--va-background-element);
-    border: 1px solid currentColor;
-    height: 50px;
+<style lang="scss" scoped>
+.table {
+  ::v-deep(th) {
+    border: 1px solid var(--va-background-border);
   }
 
-  tr {
-    border-bottom: 1px solid currentColor;
+  ::v-deep(tr) {
+    border-bottom: 1px solid var(--va-background-border);
 
     td {
-      height: 70px;
+      height: 4rem;
+      white-space: normal;
     }
   }
 }
 
-.additionalClass {
-  color: orange;
-  font-style: italic;
-  font-weight: 900;
+::v-deep(.additional-class) {
+  font-weight: bolder;
 }
 </style>
diff --git a/packages/docs/page-config/ui-elements/data-table/index.ts b/packages/docs/page-config/ui-elements/data-table/index.ts
index cb2d875319..f2d1309274 100644
--- a/packages/docs/page-config/ui-elements/data-table/index.ts
+++ b/packages/docs/page-config/ui-elements/data-table/index.ts
@@ -48,12 +48,8 @@ export default definePageConfig({
     block.example("Sticky", { hideTitle: true }),
 
     block.example("Other"),
-
-    block.paragraph("dataTable.examples.other.text[1]"),
-    block.example("CRUD", { hideTitle: true }),
-
+    block.example("CRUD"),
     block.example("ExpandableRow"),
-
     block.example("InlineEditing"),
 
     block.subtitle("all.api"),
diff --git a/packages/docs/translations/en.json b/packages/docs/translations/en.json
index 088cf50882..6fde7c2210 100644
--- a/packages/docs/translations/en.json
+++ b/packages/docs/translations/en.json
@@ -147,7 +147,8 @@
         "clickAppend": "The event is triggered by clicking on the `append` slot",
         "clickAppendInner": "The event is triggered by clicking on the `appendInner` slot",
         "updateModelValue": "The event is triggered when the component needs to change the model. Is also used by `v-model`",
-        "updateFocused": "The event is triggered when the component needs to toggle the focus"
+        "updateFocused": "The event is triggered when the component needs to toggle the focus",
+        "eventArgument": "The event argument is:"
       },
       "props": {
         "align": "Customizes horizontal position of component (flex based). Available values are strings: 'left', 'center', 'right', 'between', 'around', 'stretch'.",
@@ -218,6 +219,9 @@
         "fallbackRender": "Allows to use render function to render custom contents if image failed to load or src doesn't specified",
         "delay": "Sets throttling delay (ms) for the components any data change (useful for huge data).",
         "ratio": "Aspect ratio of the component's wrapper."
+      },
+      "slots": {
+        "scopeAvailable": "Slot scope available:"
       }
     },
     "VaBadge": {
@@ -1069,17 +1073,20 @@
         "wrapperSize": "Size (width or height) of the component's viewport (can be number or string with \"px\"/\"rem\" value). Suitable only for the state with the virtual scrolling enabled.",
         "cellBind": "Adds attributes to a table cell using `v-bind`. This can be an object type (with attributes that vue supports) or a function that returns such an object. As arguments, the function receives a table cell element (`any` type), a row (`DataTableItem` type), a column (`TableColumn` type), and a row index",
         "scrollTopMargin": "Sets the threshold (`px`) for scrolling up when the `scroll:top` event is enabled.",
-        "scrollBottomMargin": "Sets the threshold (`px`) for scrolling down when the `scroll:bottom` event is enabled."
+        "scrollBottomMargin": "Sets the threshold (`px`) for scrolling down when the `scroll:bottom` event is enabled.",
+        "ariaSelectAllRowsLabel": "The area label for header checkbox, if table is selectable.",
+        "ariaSelectRowLabel": "The area label for the checkbox on each row, if available for selection.",
+        "ariaSortColumnByLabel": "The aria label for each header column if it's sortable."
       },
       "events": {
         "updateSortBy": "Emits when `sort-by` changed",
         "updateSortingOrder": "Emits when `sorting-order` changed",
-        "filtered": "`va-data-table` emits the `filtered` event each time filtering is applied (and when the filter is cleared), with the following param: `FilteredEmit` = \n &#123;\n &nbsp; `items: DataTableItem[]`,\n &nbsp; `itemsIndexes: number[]`\n &#125;",
-        "sorted": "Each time the table's sorting changes, the `sorted` event is thrown, with the following param: `SortedEmit` = \n &#123;\n &nbsp; `sortBy: string`,\n &nbsp; `sortingOrder: DataTableSortingOrder`,\n &nbsp; `items: DataTableItem[]`,\n &nbsp; `itemsIndexes: number[]`\n &#125;",
-        "rowClick": "When row clicked the event is thrown with the following param: `RowClickEmit` = \n &#123;\n &nbsp; `event: Event`,\n &nbsp; `item: DataTableItem`,\n &nbsp; `itemIndex: number`\n &#125;",
-        "rowDblclick": "Double-clicking a row raises an event with the `RowClickEmit` param",
-        "rowContextmenu": "When the context menu is clicked on a row, an event is raised with the `RowClickEmit` param",
-        "selectionChange": "The `selectionChange` event is thrown each time the selection changes. It provides the following object: `SelectionChangeEmit` = \n&#123;\n &nbsp; `currentSelectedItems: (DataTableItem | DataTableItemKey)[]`,\n &nbsp; `previousSelectedItems: (DataTableItem | DataTableItemKey)[]`\n &#125;",
+        "filtered": "`va-data-table` emits the `filtered` event each time filtering is applied (and when the filter is cleared)",
+        "sorted": "Each time the table's sorting changes, the `sorted` event is thrown",
+        "rowClick": "When row clicked the event is thrown",
+        "rowDblclick": "Double-clicking a row raises an event",
+        "rowContextmenu": "When the context menu is clicked on a row, an event is raised",
+        "selectionChange": "The `selectionChange` event is thrown each time the selection changes",
         "scrollBottom": "Emits when table scroll down reaches `scrollBottomMargin`.",
         "scrollTop": "Emits when table scroll top reaches `scrollTopMargin`."
       },
@@ -1092,7 +1099,7 @@
         "headerAppend": "Appends custom rows inside table header (`thead`)",
         "bodyPrepend": "Prepends `tbody` with custom rows",
         "cell": "Targets all the cells. Is bound to the current cell (to it internal representation)",
-        "expandableRow": "Targets all the row. Adds an expandable row underneath. To trigger expansion use `row.toggleExpandableRow`",
+        "expandableRow": "Targets all the row. Adds an expandable row underneath. To trigger expansion use `row.toggleRowDetails`",
         "cellKey": "Allows to target only cells of a specified by the given `key` column. Is bound to the current cell",
         "bodyAppend": "Appends rows to the table's `tbody`",
         "footerPrepend": "Prepends rows to the table's `tfoot`",
@@ -4641,10 +4648,10 @@
         "title": "Slots",
         "text": [
           "Slots allow you to control the display of data and their views in different parts of the table. The examples below demonstrate some of these slots and what you can do with each of them.",
-          "**Using custom slots**. Custom slots (*username*, *street* and *company name*) display certain data.",
+          "**Using custom slots**. Custom slots (`username`, `street`) display certain data.",
           "**Showing header, body and footer's prepend and append static rows**. For added (prepended and appended) static rows an additional `className` with a background color is set.",
           "**Using `colgroup` slot to set specific attributes to columns**. For last column an additional `className` with a background color is set.",
-          "Slot names that are not in `columns` will be omitted."
+          "Slot names that are not in `columns` prop will be omitted."
         ]
       },
       "filtering": {
@@ -4693,7 +4700,7 @@
       },
       "expandableRow": {
         "title": "Expandable rows",
-        "text": "Each row could can be additionally expanded by providing `expandableRow` slot. Slot expansion is triggered by `row.toggleExpandableRow` slot property"
+        "text": "Each row could can be additionally expanded by providing `expandableRow` slot. Slot expansion is triggered by `row.toggleRowDetails` slot property"
       },
       "inlineEditing": {
         "title": "Inline Editing",
@@ -4701,10 +4708,11 @@
       },
       "other": {
         "title": "Other",
-        "text": [
-          "The component has many different properties, some of them are shown below with an example.",
-          "Example of `va-data-table` with **CRUD** actions using a `va-modal` component for editing each row:"
-        ]
+        "text": "The component has many different properties, some of them are shown below with an example."
+      },
+      "crud": {
+        "title": "CRUD actions",
+        "text": "Example of `va-data-table` with **CRUD** actions using a `va-modal` component for editing each row:"
       }
     },
     "variables": "[GitHub Variables Page](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-data-table/_variables.scss)[[target=_blank]]"
diff --git a/packages/docs/translations/ru.json b/packages/docs/translations/ru.json
index 6c6d35b99b..b0a6efda2e 100644
--- a/packages/docs/translations/ru.json
+++ b/packages/docs/translations/ru.json
@@ -145,7 +145,8 @@
         "clickAppend": "Событие вызывается при клике по слоту `append`",
         "clickAppendInner": "Событие вызывается при клике по слоту `appendInner`",
         "updateModelValue": "Событие запускается, когда компоненту необходимо изменить модель. Также используется `v-model`",
-        "updateFocused": "Событие запускается, когда компоненту необходимо переключить `focus`"
+        "updateFocused": "Событие запускается, когда компоненту необходимо переключить `focus`",
+        "eventArgument": "Аргумент события:"
       },
       "props": {
         "align": "Задает горизонтальное позиционирование (основано на `flex`), доступны следующие опции: `left`, `center`, `right`, `between`, `around` и `stretch`",
@@ -215,6 +216,9 @@
         "fallbackRender": "Позволяет задать функцию-рендерер с настраиваемым содержимым, если изображение не указано или не удалось загрузить.",
         "delay": "Устанавливает задержку (тротлинг в ms) изменения данных в компоненте (при рендеринге больших объемов данных).",
         "ratio": "Соотношение сторон обертки компонента."
+      },
+      "slots": {
+        "scopeAvailable": "В слоте доступны данные:"
       }
     },
     "VaBadge": {
@@ -1057,12 +1061,12 @@
       "events": {
         "updateSortBy": "Событие генерируется при изменении `sort-by`",
         "updateSortingOrder": "Событие генерируется при изменении `sorting-order`",
-        "filtered": "`va-data-table` генерирует событие `filtered` каждый раз, когда применяется фильтрация (и когда фильтр очищается), со следующим параметром: `FilteredEmit` = \n &#123;\n &nbsp; `items: DataTableItem[]`,\n &nbsp; `itemsIndexes: number[]`\n &#125;",
-        "sorted": "Каждый раз, когда сортировка таблицы изменяется, генерируется событие `sorted` со следующим параметром: `SortedEmit` = \n &#123;\n &nbsp; `sortBy: string`,\n &nbsp; `sortingOrder: DataTableSortingOrder`,\n &nbsp; `items: DataTableItem[]`,\n &nbsp; `itemsIndexes: number[]`\n &#125;",
-        "rowClick": "При щелчке по строке возникает событие со следующим параметром: `RowClickEmit` = \n &#123;\n &nbsp; `event: Event`,\n &nbsp; `item: DataTableItem`,\n &nbsp; `itemIndex: number`\n &#125;",
-        "rowDblclick": "Двойной щелчок по строке вызывает событие с параметром `RowClickEmit`",
-        "rowContextmenu": "При щелчке контекстного меню по строке возникает событие с параметром `RowClickEmit`",
-        "selectionChange": "Событие `selectionChange` генерируется каждый раз при изменении выделения строк. Он предоставляет следующий объект: `SelectionChangeEmit` = \n&#123;\n &nbsp; `currentSelectedItems: (DataTableItem | DataTableItemKey)[]`,\n &nbsp; `previousSelectedItems: (DataTableItem | DataTableItemKey)[]`\n &#125;",
+        "filtered": "`va-data-table` генерирует событие `filtered` каждый раз, когда применяется фильтрация (и когда фильтр очищается)",
+        "sorted": "Каждый раз, когда сортировка таблицы изменяется, генерируется событие `sorted`",
+        "rowClick": "При щелчке по строке генерируется событие",
+        "rowDblclick": "Двойной щелчок по строке вызывает событие",
+        "rowContextmenu": "При щелчке контекстного меню по строке возникает событие",
+        "selectionChange": "Событие `selectionChange` генерируется каждый раз при изменении выделения строк",
         "scrollBottom": "Событие генерируется, когда прокрутка таблицы вниз достигает `scrollBottomMargin`.",
         "scrollTop": "Событие генерируется, когда прокрутка таблицы вверх достигает `scrollTopMargin`."
       },
@@ -4467,7 +4471,6 @@
     },
     "installation": "Установка AG Grid",
     "dependencies": "Для того чтобы начать пользоваться AG Grid, установите зависимости в свой проект.",
-    "importStyles": "Затем сделайте импорт стилей, которые задают каркас таблиц и примените тему `ag-theme-vuestic` на компоненте таблицы.",
     "importStyles": [
       "Затем сделайте импорт стилей в файл `main.*`, которые задают каркас таблиц и примените тему `ag-theme-vuestic` на компоненте таблицы.",
       "В зависимости от настроек вашего проекта или ваших целей вы можете импортировать заранее скомпилированные стили `{'@'}vuestic/ag-grid-theme` или `{'@'}vuestic/ag-grid-theme/scss` для использования наших SCSS-миксинов."
@@ -4521,7 +4524,7 @@
         "title": "Слоты",
         "text": [
           "Слоты позволяют управлять отображением данных и их представлений в разных частях таблицы. Примеры ниже демонстрирует некоторые из этих слотов и то, что вы можете делать с каждым из них.",
-          "**Использование пользовательских слотов**. Пользовательские слоты (*username*, *street* и *company name*) отображают определенные данные.",
+          "**Использование пользовательских слотов**. Пользовательские слоты (`username`, `street`) отображают определенные данные.",
           "**Отображение добавляемых статических строк в header, body и footer**. Для добавленных (в начале и в конце) статических строк установлен дополнительный `className` с цветом фона.",
           "**Использование слота `colgroup` для установки определенных атрибутов столбцов**. Для последнего столбца установлен дополнительный `className` с цветом фона.",
           "Свойство `columns` обязательно при использовании слотов. Названия слотов не указанных в свойстве `columns` не будут отображаться."
@@ -4573,7 +4576,7 @@
       },
       "expandableRow": {
         "title": "Раскрывающиеся строки",
-        "text": "Каждая строка может быть дополнительно расширена с помощью слота `expandableRow`. Расширение слота запускается свойством слота `row.toggleExpandableRow`."
+        "text": "Каждая строка может быть дополнительно расширена с помощью слота `expandableRow`. Расширение слота запускается свойством слота `row.toggleRowDetails`."
       },
       "inlineEditing": {
         "title": "Встроенное редактирование",
@@ -4581,10 +4584,7 @@
       },
       "other": {
         "title": "Другое",
-        "text": [
-          "Компонент имеет множество разных свойств, некоторые из них показаны ниже на примере.",
-          "Пример `va-data-table` с операциями **CRUD** с использованием компонента `va-modal` для редактирования каждой строки:"
-        ]
+        "text": "Компонент имеет множество разных свойств, некоторые из них показаны ниже на примере."
       }
     },
     "variables": "[Страница с переменными на GitHub](https://github.com/epicmaxco/vuestic-ui/blob/develop/packages/ui/src/components/va-data-table/_variables.scss)[[target=_blank]]"
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.vue b/packages/ui/src/components/va-data-table/VaDataTable.vue
index 1ab0448e24..1b7876229f 100644
--- a/packages/ui/src/components/va-data-table/VaDataTable.vue
+++ b/packages/ui/src/components/va-data-table/VaDataTable.vue
@@ -48,7 +48,9 @@
                 v-on:toggleBulkSelection="toggleBulkSelection"
                 v-on:toggleSorting="toggleSorting"
               >
-                <template v-for="(_, slot) of $slots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+                <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
               </va-data-table-th-row>
             </slot>
 
@@ -59,7 +61,6 @@
             ref="list"
             class="va-data-table__table-tbody"
           >
-
             <slot name="bodyPrepend" />
 
             <transition-group
@@ -171,7 +172,9 @@
                 v-on:toggleBulkSelection="toggleBulkSelection"
                 v-on:toggleSorting="toggleSorting"
               >
-                <template v-for="(_, slot) of $slots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope" /></template>
+                <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope" />
+                </template>
               </va-data-table-th-row>
             </slot>
 
diff --git a/packages/ui/src/components/va-data-table/components/VaDataTableThRow.vue b/packages/ui/src/components/va-data-table/components/VaDataTableThRow.vue
index 6d1a36653f..b2cc510749 100644
--- a/packages/ui/src/components/va-data-table/components/VaDataTableThRow.vue
+++ b/packages/ui/src/components/va-data-table/components/VaDataTableThRow.vue
@@ -165,48 +165,50 @@ export default defineComponent({
 @import "../../../styles/resources/index.scss";
 @import "../variables";
 
-.va-data-table__table-th {
-  padding: var(--va-data-table-cell-padding);
-  width: var(--va-data-table-width);
-  min-width: var(--va-data-table-width);
-  text-align: var(--va-data-table-align);
-  vertical-align: var(--va-data-table-vertical-align);
-  font-size: var(--va-data-table-thead-font-size);
-  line-height: var(--va-data-table-thead-line-height);
-  font-weight: var(--va-data-table-thead-font-weight);
-  text-transform: var(--va-data-table-thead-text-transform);
-  letter-spacing: var(--va-data-table-thead-letter-spacing);
-  cursor: var(--va-data-table-cursor);
-
-  .va-data-table__table-th-wrapper {
-    display: flex;
-    align-items: center;
-
-    @include keyboard-focus-outline($offset: 2px);
-  }
+.va-data-table .va-data-table__table {
+  .va-data-table__table-th {
+    padding: var(--va-data-table-cell-padding);
+    width: var(--va-data-table-width);
+    min-width: var(--va-data-table-width);
+    text-align: var(--va-data-table-align);
+    vertical-align: var(--va-data-table-vertical-align);
+    font-size: var(--va-data-table-thead-font-size);
+    line-height: var(--va-data-table-thead-line-height);
+    font-weight: var(--va-data-table-thead-font-weight);
+    text-transform: var(--va-data-table-thead-text-transform);
+    letter-spacing: var(--va-data-table-thead-letter-spacing);
+    cursor: var(--va-data-table-cursor);
+
+    .va-data-table__table-th-wrapper {
+      display: flex;
+      align-items: center;
+
+      @include keyboard-focus-outline($offset: 2px);
+    }
 
-  .va-data-table__table-th-sorting-icon {
-    opacity: 0;
-    user-select: none;
-    pointer-events: none;
+    .va-data-table__table-th-sorting-icon {
+      opacity: 0;
+      user-select: none;
+      pointer-events: none;
 
-    &.active {
-      opacity: 1;
-      pointer-events: initial;
-    }
+      &.active {
+        opacity: 1;
+        pointer-events: initial;
+      }
 
-    &:focus-visible {
-      opacity: 1;
+      &:focus-visible {
+        opacity: 1;
+      }
     }
-  }
 
-  span {
-    flex-grow: 1;
-  }
+    span {
+      flex-grow: 1;
+    }
 
-  &:hover {
-    .va-data-table__table-th-sorting-icon:not(.active, :focus-visible) {
-      opacity: var(--va-data-table-hover-th-opacity);
+    &:hover {
+      .va-data-table__table-th-sorting-icon:not(.active, :focus-visible) {
+        opacity: var(--va-data-table-hover-th-opacity);
+      }
     }
   }
 }
diff --git a/packages/ui/src/components/va-data-table/hooks/useRows.ts b/packages/ui/src/components/va-data-table/hooks/useRows.ts
index 4ff1e94aa4..f1e4c0e67d 100644
--- a/packages/ui/src/components/va-data-table/hooks/useRows.ts
+++ b/packages/ui/src/components/va-data-table/hooks/useRows.ts
@@ -46,7 +46,7 @@ const buildTableRow = (
   initialIndex: number,
   itemsTrackBy: string | ((item: DataTableItem) => any),
   columns: DataTableColumnInternal[],
-): DataTableRow => {
+) => {
   const itemKey = getItemKey(source, itemsTrackBy)
 
   return {
@@ -64,7 +64,7 @@ export const useRows = (
 ) => {
   const expandableRows = ref<Record<number, boolean>>({})
 
-  const rowsComputed = computed(() => props.items
+  const rowsComputed = computed<DataTableRow[]>(() => props.items
     .map((rawItem, index) => ({
       ...buildTableRow(rawItem, index, props.itemsTrackBy, columns.value),
       toggleRowDetails: (show?: boolean) => {
diff --git a/packages/ui/src/components/va-data-table/types.ts b/packages/ui/src/components/va-data-table/types.ts
index 19d9a81cf9..59f42590ff 100644
--- a/packages/ui/src/components/va-data-table/types.ts
+++ b/packages/ui/src/components/va-data-table/types.ts
@@ -99,9 +99,11 @@ export interface DataTableRow {
   initialIndex: number
   itemKey: DataTableItemKey
   source: DataTableItem
-  cells: DataTableCell[],
+  cells: DataTableCell[]
   /** Same rowData as in DataTableCell */
   rowData: DataTableItem
+  toggleRowDetails: (show?: boolean) => void
+  isExpandableRowVisible: boolean
 }
 
 export type DataTableFilterMethod = (source: any) => boolean
diff --git a/packages/ui/src/components/va-value/VaValue.vue b/packages/ui/src/components/va-value/VaValue.vue
index 6023c1d770..f442878364 100644
--- a/packages/ui/src/components/va-value/VaValue.vue
+++ b/packages/ui/src/components/va-value/VaValue.vue
@@ -14,7 +14,7 @@ export default defineComponent({
   name: 'VaValue',
 
   props: {
-    defaultValue: { type: [] as PropType<any>, required: false, default: false },
+    defaultValue: { type: null as unknown as PropType<any>, required: false, default: false },
   },
 
   setup (props, { slots }) {