feat(VDataTable): infer headers from first item if not provided

vuetifyjs · Nov 3, 2023 · 15e7dd3 · 15e7dd3
1 parent 0c87f70
commit 15e7dd3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/vuetify/src/labs/VDataTable/__tests__/headers.spec.ts b/packages/vuetify/src/labs/VDataTable/__tests__/headers.spec.ts
@@ -6,6 +6,7 @@ import { describe, expect, it } from '@jest/globals'
 describe('VDataTable headers', () => {
   it('flattens 2d headers', () => {
     const { headers, columns } = createHeaders({
+      items: [],
       headers: [
         { key: 'foo' },
         { key: 'bar', children: [{ key: 'fizz' }, { key: 'buzz' }] },
@@ -22,6 +23,7 @@ describe('VDataTable headers', () => {
 
   it('orders sibling columns correctly', () => {
     const { headers, columns } = createHeaders({
+      items: [],
       headers: [
         {
           key: 'left',

diff --git a/packages/vuetify/src/labs/VDataTable/composables/headers.ts b/packages/vuetify/src/labs/VDataTable/composables/headers.ts
@@ -1,5 +1,5 @@
 // Utilities
-import { inject, provide, ref, watchEffect } from 'vue'
+import { capitalize, inject, provide, ref, watchEffect } from 'vue'
 import { consoleError, propsFactory } from '@/util'
 
 // Types
@@ -8,10 +8,7 @@ import type { SortItem } from './sort'
 import type { DataTableHeader, InternalDataTableHeader } from '../types'
 
 export const makeDataTableHeaderProps = propsFactory({
-  headers: {
-    type: Array as PropType<DeepReadonly<DataTableHeader[]>>,
-    default: () => ([]),
-  },
+  headers: Array as PropType<DeepReadonly<DataTableHeader[]>>,
 }, 'DataTable-header')
 
 export const VDataTableHeadersSymbol: InjectionKey<{
@@ -20,7 +17,8 @@ export const VDataTableHeadersSymbol: InjectionKey<{
 }> = Symbol.for('vuetify:data-table-headers')
 
 type HeaderProps = {
-  headers: DeepReadonly<DataTableHeader[]>
+  headers: DeepReadonly<DataTableHeader[]> | undefined
+  items: any[]
 }
 
 const defaultHeader = { title: '', sortable: false }
@@ -229,7 +227,10 @@ export function createHeaders (
   const columns = ref<InternalDataTableHeader[]>([])
 
   watchEffect(() => {
-    const items = props.headers.slice()
+    const _headers = props.headers ||
+      Object.keys(props.items[0] ?? {}).map(key => ({ key, title: capitalize(key) })) as never
+
+    const items = _headers.slice()
     const keys = extractKeys(items)
 
     if (options?.groupBy?.value.length && !keys.has('data-table-group')) {