fix(VDataTable): add missing disable-sort prop (#19820)

resolves #19197

Author: MajesticPotatoe

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.",

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."

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.",

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 `<thead>` element.",

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<VDataTableHeadersSlots>()({
           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<VDataTableHeadersSlots>()({
               return (
                 <div class="v-data-table-header__content">
                   <span>{ column.title }</span>
-                  { column.sortable && (
+                  { column.sortable && !props.disableSort && (
                     <VIcon
                       key="icon"
                       class="v-data-table-header__sort-icon"
@@ -223,7 +224,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
       const headerProps = mergeProps(props.headerProps ?? {} ?? {})
 
       const displayItems = computed<ItemProps['items']>(() => {
-        return columns.value.filter(column => column?.sortable)
+        return columns.value.filter(column => column?.sortable && !props.disableSort)
       })
 
       const appendIcon = computed(() => {

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

@@ -95,8 +95,11 @@ export function useSort () {
 }
 
 // TODO: abstract into project composable
-export function useSortedItems <T extends InternalItem> (
-  props: { customKeySort: Record<string, DataTableCompareFunction> | undefined },
+export function useSortedItems<T extends InternalItem> (
+  props: {
+    customKeySort: Record<string, DataTableCompareFunction> | undefined
+    disableSort?: Boolean
+  },
   items: Ref<T[]>,
   sortBy: Ref<readonly SortItem[]>,
   options?: {
@@ -107,7 +110,7 @@ export function useSortedItems <T extends InternalItem> (
 ) {
   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,