fix(DataTable): expose expandable prop

packages/ui/src/components/va-data-table/VaDataTable.stories.ts

@@ -351,3 +351,181 @@ export const RowSlot = defineStory({
     `,
   }),
 })
+
+export const ExpandableRowPagination = () => ({
+  components: { VaDataTable, VaPagination },
+  data () {
+    const items = [
+      {
+        id: 1,
+        name: 'Leanne Graham',
+        username: 'Bret',
+        email: 'Sincere@april.biz',
+        phone: '1-770-736-8031',
+        website: 'hildegard.org',
+      },
+      {
+        id: 2,
+        name: 'Ervin Howell',
+        username: 'Antonette',
+        email: 'Shanna@melissa.tv',
+        phone: '010-692-6593',
+        website: 'anastasia.net',
+      },
+      {
+        id: 3,
+        name: 'Clementine Bauch',
+        username: 'Samantha',
+        email: 'Nathan@yesenia.net',
+        phone: '1-463-123-4447',
+        website: 'ramiro.info',
+      },
+      {
+        id: 4,
+        name: 'Patricia Lebsack',
+        username: 'Karianne',
+        email: 'Julianne.OConner@kory.org',
+        phone: '493-170-9623',
+        website: 'kale.biz',
+      },
+      {
+        id: 5,
+        name: 'Chelsey Dietrich',
+        username: 'Kamren',
+        email: 'Lucio_Hettinger@annie.ca',
+        phone: '(254)954-1289',
+        website: 'demarco.info',
+      },
+    ]
+
+    const columns = [
+      { key: 'name' },
+      { key: 'username' },
+      { key: 'email' },
+      { key: 'actions', width: 80 },
+    ]
+
+    const currentPage = ref(0)
+
+    return {
+      items,
+      columns,
+      currentPage,
+    }
+  },
+
+  template: `
+    <VaDataTable
+      :items="items"
+      :columns="columns"
+      :per-page="2"
+      :current-page="currentPage"
+    >
+      <template #cell(actions)="{ row, isExpanded }">
+          <button
+            @click="row.toggleRowDetails()"
+          >
+            {{ isExpanded ? 'Hide': 'More info' }}
+          </button>
+      </template>
+
+      <template #expandableRow="{ rowData }" >
+        <div>
+          {{ rowData }}
+        </div>
+      </template>
+    </VaDataTable>
+    <VaPagination
+      v-model="currentPage"
+      :pages="items.length"
+    />
+  `,
+})
+
+export const ExpandableRowPaginationSlice = () => ({
+  components: { VaDataTable, VaPagination },
+  data () {
+    const items = [
+      {
+        id: 1,
+        name: 'Leanne Graham',
+        username: 'Bret',
+        email: 'Sincere@april.biz',
+        phone: '1-770-736-8031',
+        website: 'hildegard.org',
+      },
+      {
+        id: 2,
+        name: 'Ervin Howell',
+        username: 'Antonette',
+        email: 'Shanna@melissa.tv',
+        phone: '010-692-6593',
+        website: 'anastasia.net',
+      },
+      {
+        id: 3,
+        name: 'Clementine Bauch',
+        username: 'Samantha',
+        email: 'Nathan@yesenia.net',
+        phone: '1-463-123-4447',
+        website: 'ramiro.info',
+      },
+      {
+        id: 4,
+        name: 'Patricia Lebsack',
+        username: 'Karianne',
+        email: 'Julianne.OConner@kory.org',
+        phone: '493-170-9623',
+        website: 'kale.biz',
+      },
+      {
+        id: 5,
+        name: 'Chelsey Dietrich',
+        username: 'Kamren',
+        email: 'Lucio_Hettinger@annie.ca',
+        phone: '(254)954-1289',
+        website: 'demarco.info',
+      },
+    ]
+
+    const columns = [
+      { key: 'name' },
+      { key: 'username' },
+      { key: 'email' },
+      { key: 'actions', width: 80 },
+    ]
+
+    const currentPage = ref(0)
+
+    return {
+      items,
+      columns,
+      currentPage,
+    }
+  },
+
+  template: `
+    <VaDataTable
+      :items="items.slice(currentPage * 2, (currentPage + 1) * 2)"
+      :columns="columns"
+    >
+      <template #cell(actions)="{ row, isExpanded }">
+          <button
+            @click="row.toggleRowDetails()"
+          >
+            {{ isExpanded ? 'Hide': 'More info' }}
+          </button>
+      </template>
+
+      <template #expandableRow="{ rowData }" >
+        <div>
+          {{ rowData }}
+        </div>
+      </template>
+    </VaDataTable>
+    <VaPagination
+      v-model="currentPage"
+      :pages="items.length"
+    />
+  `,
+})

packages/ui/src/components/va-data-table/VaDataTable.vue

@@ -293,12 +293,18 @@ const props = defineProps({
   ariaSelectRowLabel: useTranslationProp('$t:selectRowByIndex'),
 
   delay: { type: [Number, String], default: 0 },
+
+  expanded: {
+    type: Array as PropType<boolean[]>,
+    default: () => [],
+  },
 })
 
 const emit = defineEmits([
   'update:modelValue', // `modelValue` is selectedItems
   'update:sortBy',
   'update:sortingOrder',
+  'update:expanded',
   'filtered',
   'sorted',
   'selectionChange',
@@ -311,7 +317,7 @@ const emit = defineEmits([
 
 const { columnsComputed } = useColumns(props)
 
-const { rowsComputed } = useRows(columnsComputed, props)
+const { rowsComputed } = useRows(columnsComputed, props, emit)
 
 const { filteredRows } = useFilterable(rowsComputed, props, emit)
 

packages/ui/src/components/va-data-table/hooks/useRows.ts

@@ -1,4 +1,4 @@
-import { Ref, ref, computed, ExtractPropTypes } from 'vue'
+import { Ref, computed, ExtractPropTypes, watch } from 'vue'
 
 import { createItemsProp, useItemsTrackByProp } from './useCommonProps'
 
@@ -12,6 +12,7 @@ import type {
   DataTableItemKey,
   DataTableRowData,
 } from '../types'
+import { useVModelStateful } from '../../../composables'
 
 export const getItemKey = <T extends Record<string, any>>(source: DataTableItem<T>, itemsTrackBy: string | ((item: DataTableItem<T>) => any)): DataTableItemKey => (
   typeof itemsTrackBy === 'function'
@@ -60,14 +61,16 @@ const buildTableRow = <Item extends DataTableItem>(
 }
 
 type RowsProps<Item> = Omit<ExtractPropTypes<ReturnType<typeof createRowsProps>>, 'items'> & {
-  items: Item[]
+  items: Item[],
+  expanded: boolean[]
 }
 
 export const useRows = <Item extends Record<string, any>>(
   columns: Ref<DataTableColumnInternal[]>,
   props: RowsProps<Item>,
+  emit: (event: 'update:expanded', value: boolean[]) => void,
 ) => {
-  const expandableRows = ref<Record<number, boolean>>({})
+  const expandableRows = useVModelStateful(props, 'expanded', emit)
 
   const rowsComputed = computed(() => props.items
     .map((rawItem, index) => ({
@@ -82,6 +85,10 @@ export const useRows = <Item extends Record<string, any>>(
       isExpandableRowVisible: !!expandableRows.value[index],
     })))
 
+  watch(() => props.items, () => {
+    expandableRows.value = props.items.map(() => false)
+  })
+
   return {
     rowsComputed,
   }

packages/ui/src/composables/std/internal/useVModelStateful.ts

@@ -18,5 +18,9 @@ export const useVModelStateful = <P, K extends keyof P>(props: P, key: K, emit:
     },
   })
 
-  return valueProxy
+  Object.defineProperty(valueProxy, 'userProvided', {
+    get: () => isUserProvided.value,
+  })
+
+  return valueProxy as unknown as Ref<P[K]> & { userProvided: boolean }
 }