feat(VDataTable): loading prop to accept object with side (#22872)

resolves #9655

Author: J-Sek

packages/api-generator/src/locale/en/VDataTable.json

@@ -39,6 +39,7 @@
     "item.data-table-select": "Slot to replace the default `v-checkbox-btn` used when selecting rows.",
     "item.data-table-expand": "Slot to replace the default `v-icon` used when expanding rows.",
     "item.<name>": "Slot to customize a specific column.",
+    "loader": "Slot to replace the default `v-progress-linear` shown when `loading` is set.",
     "loading": "Defines content for when `loading` is true and no items are provided.",
     "tbody": "Slot to replace the default table `<tbody>`.",
     "thead": "Slot to replace the default table `<thead>`.",

packages/vuetify/src/components/VDataTable/VDataTable.tsx

@@ -13,6 +13,7 @@ import { makeDataTableExpandProps, provideExpanded } from './composables/expand'
 import { createGroupBy, makeDataTableGroupProps, provideGroupBy, useGroupedItems, useOpenAllGroups } from './composables/group'
 import { createHeaders, makeDataTableHeaderProps } from './composables/headers'
 import { makeDataTableItemsProps, useDataTableItems } from './composables/items'
+import { useLoadingConfig } from './composables/loading'
 import { useOptions } from './composables/options'
 import {
   createPagination,
@@ -25,6 +26,7 @@ import { makeDataTableSelectProps, provideSelection } from './composables/select
 import { createSort, makeDataTableSortProps, provideSort, useSortedItems } from './composables/sort'
 import { provideDefaults } from '@/composables/defaults'
 import { makeFilterProps, useFilter } from '@/composables/filter'
+import { LoaderSlot } from '@/composables/loader'
 
 // Utilities
 import { computed, toRef, toRefs, toValue } from 'vue'
@@ -220,6 +222,8 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
 
     const { isExpanded, toggleExpand } = provideExpanded(props)
 
+    const loadingConfig = useLoadingConfig(() => props.loading, () => props.color)
+
     useOptions({
       page,
       itemsPerPage,
@@ -313,6 +317,20 @@ export const VDataTable = genericComponent<new <T extends readonly any[], V>(
                       />
                     )}
                     { slots['body.append']?.(slotProps.value) }
+                    { loadingConfig.active.value && ['end', 'both'].includes(loadingConfig.side.value) && (
+                      <tr class="v-data-table-progress v-data-table-progress--bottom">
+                        <th colspan={ columns.value.length }>
+                          <LoaderSlot
+                            name="v-data-table-progress"
+                            absolute
+                            active
+                            color={ loadingConfig.color.value }
+                            indeterminate
+                            v-slots={{ default: slots.loader }}
+                          />
+                        </th>
+                      </tr>
+                    )}
                   </tbody>
                 )}
                 { slots.tbody?.(slotProps.value) }

packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx

@@ -7,6 +7,7 @@ import { VSelect } from '@/components/VSelect'
 
 // Composables
 import { useHeaders } from './composables/headers'
+import { useLoadingConfig } from './composables/loading'
 import { useSelection } from './composables/select'
 import { useSort } from './composables/sort'
 import { useBackgroundColor } from '@/composables/color'
@@ -139,6 +140,8 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
 
     const { displayClasses, mobile } = useDisplay(props)
 
+    const loadingConfig = useLoadingConfig(() => props.loading, () => props.color)
+
     const slotProps = computed(() => ({
       headers: headers.value,
       columns: columns.value,
@@ -366,16 +369,14 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
               </tr>
             ))}
 
-          { props.loading && (
+          { loadingConfig.active.value && ['start', 'both'].includes(loadingConfig.side.value) && (
             <tr class="v-data-table-progress">
               <th colspan={ columns.value.length }>
                 <LoaderSlot
                   name="v-data-table-progress"
                   absolute
                   active
-                  color={ typeof props.loading === 'boolean' || props.loading === 'true'
-                    ? props.color
-                    : props.loading }
+                  color={ loadingConfig.color.value }
                   indeterminate
                   v-slots={{ default: slots.loader }}
                 />

packages/vuetify/src/components/VDataTable/VDataTableRows.tsx

@@ -19,7 +19,7 @@ import { genericComponent, getPrefixedEventHandlers, pick, propsFactory, useRend
 // Types
 import type { Component, PropType, TransitionProps } from 'vue'
 import type { Group, GroupSummary } from './composables/group'
-import type { CellProps, DataTableItem, GroupHeaderSlot, GroupSummarySlot, ItemSlot, RowProps } from './types'
+import type { CellProps, DataTableItem, DataTableLoading, GroupHeaderSlot, GroupSummarySlot, ItemSlot, RowProps } from './types'
 import type { VDataTableGroupHeaderRowSlots } from './VDataTableGroupHeaderRow'
 import type { VDataTableRowSlots } from './VDataTableRow'
 import type { GenericProps } from '@/util'
@@ -36,7 +36,7 @@ export type VDataTableRowsSlots<T> = VDataTableGroupHeaderRowSlots & VDataTableR
 
 export const makeVDataTableRowsProps = propsFactory({
   color: String,
-  loading: [Boolean, String],
+  loading: [Boolean, String, Object] as PropType<DataTableLoading>,
   loadingText: {
     type: String,
     default: '$vuetify.dataIterator.loadingText',

packages/vuetify/src/components/VDataTable/composables/loading.ts

@@ -0,0 +1,30 @@
+// Utilities
+import { computed } from 'vue'
+
+// Types
+import type { DataTableLoading, DataTableLoadingSide } from '../types'
+
+export function useLoadingConfig (
+  loading: () => DataTableLoading | undefined,
+  fallbackColor: () => string | undefined,
+) {
+  const active = computed(() => {
+    const v = loading()
+    return v != null && v !== false && v !== 'false'
+  })
+
+  const side = computed<DataTableLoadingSide>(() => {
+    const v = loading()
+    if (typeof v === 'object' && v !== null && v.side) return v.side
+    return 'start'
+  })
+
+  const color = computed(() => {
+    const v = loading()
+    if (typeof v === 'object' && v !== null && v.color) return v.color
+    if (typeof v === 'string' && v !== 'true') return v
+    return fallbackColor()
+  })
+
+  return { active, side, color }
+}

packages/vuetify/src/components/VDataTable/types.ts

@@ -7,6 +7,12 @@ import type { SelectItemKey } from '@/util'
 
 export type DataTableCompareFunction<T = any> = (a: T, b: T) => number | null
 
+export type DataTableLoadingSide = 'start' | 'end' | 'both'
+export type DataTableLoading =
+  | boolean
+  | string
+  | { side?: DataTableLoadingSide, color?: string }
+
 export type DataTableHeader<T = Record<string, any>> = {
   key?: 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {})
   value?: SelectItemKey<T>