diff --git a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue index f8b60409..a3175d26 100644 --- a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue +++ b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue @@ -84,6 +84,16 @@ const handleSort = (direction: 'ascending' | 'descending') => { emit('sort', direction) } + + // The whole sortable header is the sort control: a pointer click anywhere on + // it, or Enter/Space while it is focused, toggles the sort — mirroring the + // sort button's own toggle (none/descending → ascending, ascending → descending). + // The sort button stops its own click/keydown from bubbling here, so activating + // the button never double-toggles via this handler. + const toggleSort = () => { + if (!props.sortable) return + handleSort(props.sortDirection === 'ascending' ? 'descending' : 'ascending') + }