diff --git a/packages/api-generator/src/locale/en/VDataTableHeader.json b/packages/api-generator/src/locale/en/VDataTableHeader.json index 5f4ddba267f..9ac97c72528 100644 --- a/packages/api-generator/src/locale/en/VDataTableHeader.json +++ b/packages/api-generator/src/locale/en/VDataTableHeader.json @@ -1,6 +1,5 @@ { "props": { - "disableSort": "Toggles rendering of sort button.", "everyItem": "Indicates if all items in table are selected.", "headers": "Array of header items to display.", "mobile": "Renders mobile view of headers.", diff --git a/packages/api-generator/src/locale/en/VDataTableHeaders.json b/packages/api-generator/src/locale/en/VDataTableHeaders.json index 9670a86c82e..d00ed1ab290 100644 --- a/packages/api-generator/src/locale/en/VDataTableHeaders.json +++ b/packages/api-generator/src/locale/en/VDataTableHeaders.json @@ -1,5 +1,6 @@ { "props": { + "disableSort": "Toggles rendering of sort button.", "sortAscIcon": "Icon used for ascending sort button.", "sortDescIcon": "Icon used for descending sort button.", "sticky": "Sticks the header to the top of the table." diff --git a/packages/api-generator/src/locale/en/VDataTableServer.json b/packages/api-generator/src/locale/en/VDataTableServer.json index ce305f63a7b..56c3edfed52 100644 --- a/packages/api-generator/src/locale/en/VDataTableServer.json +++ b/packages/api-generator/src/locale/en/VDataTableServer.json @@ -12,6 +12,7 @@ "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.", "dataTableGroup": "Slot for custom rendering of a group.", "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "disableSort": "Disables sorting completely.", "expanded-row": "Slot for custom rendering of an expanded row.", "footer.prepend": "Adds content to the empty space in the footer.", "group-header": "Slot for custom rendering of a group header.", diff --git a/packages/api-generator/src/locale/en/VDataTableVirtual.json b/packages/api-generator/src/locale/en/VDataTableVirtual.json index 7428773c59f..56058592aa3 100644 --- a/packages/api-generator/src/locale/en/VDataTableVirtual.json +++ b/packages/api-generator/src/locale/en/VDataTableVirtual.json @@ -9,6 +9,7 @@ "column.data-table-select": "Slot to replace the default `v-simple-checkbox` used when selecting rows.", "data-table-group": "Slot for custom rendering of a group.", "data-table-select": "Slot for custom rendering of a header cell with the select checkbox.", + "disableSort": "Disables sorting completely.", "expanded-row": "Slot for custom rendering of an expanded row.", "group-header": "Slot for custom rendering of a group header.", "headers": "Slot to replace the default rendering of the `` element.", diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx index d075842d788..0702a348976 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx @@ -60,6 +60,7 @@ export type VDataTableHeadersSlots = { export const makeVDataTableHeadersProps = propsFactory({ color: String, sticky: Boolean, + disableSort: Boolean, multiSort: Boolean, sortAscIcon: { type: IconValue, @@ -142,7 +143,7 @@ export const VDataTableHeaders = genericComponent()({ align={ column.align } class={[ { - 'v-data-table__th--sortable': column.sortable, + 'v-data-table__th--sortable': column.sortable && !props.disableSort, 'v-data-table__th--sorted': isSorted(column), 'v-data-table__th--fixed': column.fixed, }, @@ -192,7 +193,7 @@ export const VDataTableHeaders = genericComponent()({ return (
{ column.title } - { column.sortable && ( + { column.sortable && !props.disableSort && ( ()({ const headerProps = mergeProps(props.headerProps ?? {} ?? {}) const displayItems = computed(() => { - return columns.value.filter(column => column?.sortable) + return columns.value.filter(column => column?.sortable && !props.disableSort) }) const appendIcon = computed(() => { diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index 7c1b80e225c..0c9beba1c2f 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -95,8 +95,11 @@ export function useSort () { } // TODO: abstract into project composable -export function useSortedItems ( - props: { customKeySort: Record | undefined }, +export function useSortedItems ( + props: { + customKeySort: Record | undefined + disableSort?: Boolean + }, items: Ref, sortBy: Ref, options?: { @@ -107,7 +110,7 @@ export function useSortedItems ( ) { const locale = useLocale() const sortedItems = computed(() => { - if (!sortBy.value.length) return items.value + if (!sortBy.value.length || props.disableSort) return items.value return sortItems(items.value, sortBy.value, locale.current.value, { transform: options?.transform,