Added sorting interaction on enter press

vuetifyjs · Feb 6, 2025 · 9de6a0d · 9de6a0d
1 parent eb82be7
commit 9de6a0d
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx
@@ -102,7 +102,11 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
         top: (props.sticky || props.fixedHeader) ? `calc(var(--v-table-header-height) * ${y})` : undefined,
       }
     }
-
+    function handleEnterKeyPress (event: KeyboardEvent, column: InternalDataTableHeader) {
+      if (event.key === 'Enter' && !props.disableSort) {
+        toggleSort(column)
+      }
+    }
     function getSortIcon (column: InternalDataTableHeader) {
       const item = sortBy.value.find(item => item.key === column.key)
 
@@ -166,6 +170,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           lastFixed={ column.lastFixed }
           noPadding={ noPadding }
           { ...headerProps }
+          onKeydown={ (event: KeyboardEvent) => column.sortable && handleEnterKeyPress(event, column) }
         >
           {{
             default: () => {