[Bug Report][3.4.7] VDataTable - headers prop typescript error

[webdevnerdstuff]

Environment

Vuetify Version: 3.4.7
Vue Version: 3.3.12
Browsers: Chrome 120.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

1. Load reproduction link
2. Notice the headers type error

Expected Behavior

Should not error

Actual Behavior

The align property of the headers array when added causes the error.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

As per @KaelWD it needs as const

Example without align

Error

Type '{ title: string; key: string; align: string; }[]' is not assignable to type 'readonly { readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}); readonly value?: SelectItemKey<Record<string, any>>; ... 11 more ...; readonly children?: readonly any[]; }[] & readonly { ...; }[]'.
  Type '{ title: string; key: string; align: string; }[]' is not assignable to type 'readonly { readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {}); readonly value?: SelectItemKey<Record<string, any>>; ... 11 more ...; readonly children?: readonly any[]; }[]'.ts(2322)
index.d.mts(21300, 9): The expected type comes from property 'headers' which is declared here on type 'Partial<{ page: string | number; style: StyleValue; expanded: readonly string[]; tag: string; sticky: boolean; noDataText: string; loadingText: string; itemsPerPageText: string; sortBy: readonly SortItem[]; ... 27 more ...; fixedFooter: boolean; }> & ... 4 more ... & Record<...>'
(property) headers?: readonly {
    readonly key?: "data-table-group" | "data-table-select" | "data-table-expand" | (string & {});
    readonly value?: SelectItemKey<Record<string, any>>;
    ... 11 more ...;
    readonly children?: readonly any[];
}[] & readonly {
    ...;
}[]

[agne-matheus]

Same issue here!! the property works but with red error line in :headers="tableHeaders"

[weekyear]

same issue..

[agne-matheus]

I've found a "solution", just give a type any to the Headers array. The error / warning will desapear:

const tableHeaders: any = [
	{
		title: "Cliente",
		value: "descricao",
		sortable: true,
	},
	...
];

[webdevnerdstuff]

A better workaround solution would be to type it VDataTable['$props']['headers']

[KaelWD]

#16680

headers = [...] as const

[webdevnerdstuff]

To help others understand how to use this (as I wasn't sure at first either).

const headers = ref([
  { title: 'Plant', align: 'start', sortable: false, key: 'name' },
  { title: 'Light', align: 'end', key: 'light' },
  { title: 'Height', align: 'end', key: 'height' },
  { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },
  { title: 'Price ($)', align: 'end', key: 'price' },
] as const)

[Employee87]

i think things like align and other props whos values are fixed set of string values, need to be declared as const. Alternatively, you can also declare typings like this

type VDataTableItem = Exclude<NonNullable<VDataTable["$props"]["items"]>[number], Readonly<unknown[]>>;
type VDataTableHeader = Exclude<NonNullable<VDataTable["$props"]["headers"]>[number], Readonly<unknown[]>>;

and set your header as those types.

[itelmenko]

issue closed? why? important types are not exported yet.
VDataTable["$props"]["items"] - is very dirty and does not work

[sataqi]

To help others understand how to use this (as I wasn't sure at first either).

const headers = ref([
  { title: 'Plant', align: 'start', sortable: false, key: 'name' },
  { title: 'Light', align: 'end', key: 'light' },
  { title: 'Height', align: 'end', key: 'height' },
  { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },
  { title: 'Price ($)', align: 'end', key: 'price' },
] as const)

in my case, as sortable property is optional, I assign it to few columns that are true and leave others. I get the TS error: type 'unknown' is not assignable to 'boolean', earlier I fixed by assigning false to remaining columns.
for now, this solution also works but I'd greatly appreciate an insight to how it does.