reintroduce column sort (#10496)

This re introduces the column sort behaviour that was lost when the type indicator was added
![column-sort](https://github.com/enso-org/enso/assets/170310417/fe33faed-d816-4447-bd57-755fd3c06856)

app/gui2/src/components/visualizations/TableVisualization.vue

@@ -136,7 +136,7 @@ useAutoBlur(tableNode)
 const widths = reactive(new Map<string, number>())
 const defaultColDef = {
   editable: false,
-  sortable: true as boolean,
+  sortable: true,
   filter: true,
   resizable: true,
   minWidth: 25,
@@ -327,14 +327,24 @@ function toField(name: string, valueType?: ValueType | null | undefined): ColDef
       icon = 'mixed'
   }
   const svgTemplate = `<svg viewBox="0 0 16 16" width="16" height="16"> <use xlink:href="${icons}#${icon}"/> </svg>`
+  const menu = `<span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"> </span>`
+  const sort = `
+      <span ref="eFilter" class="ag-header-icon ag-header-label-icon ag-filter-icon" aria-hidden="true"></span>
+      <span ref="eSortOrder" class="ag-header-icon ag-sort-order" aria-hidden="true">1</span>
+      <span ref="eSortAsc" class="ag-header-icon ag-sort-ascending-icon" aria-hidden="true"></span>
+      <span ref="eSortDesc" class="ag-header-icon ag-sort-descending-icon" aria-hidden="true"></span>
+      <span ref="eSortNone" class="ag-header-icon ag-sort-none-icon" aria-hidden="true"></span>
+    `
   const template =
     icon ?
-      `<div style='display:flex; flex-direction:row; justify-content:space-between; width:inherit;'> ${name} <span ref="eMenu" class="ag-header-icon ag-header-cell-menu-button"> </span> ${svgTemplate}</div>`
-    : `<div>${name}</div>`
+      `<span style='display:flex; flex-direction:row; justify-content:space-between; width:inherit;'><span ref="eLabel" class="ag-header-cell-label" role="presentation" style='display:flex; flex-direction:row; justify-content:space-between; width:inherit;'> ${name} ${menu}</span> ${sort} ${svgTemplate}</span>`
+    : `<span ref="eLabel" style='display:flex; flex-direction:row; justify-content:space-between; width:inherit;'>${name} ${menu} ${sort}</span>`
   return {
     field: name,
     headerComponentParams: {
       template,
+      enableSorting: true,
+      setAriaSort: () => {},
     },
     headerTooltip: displayValue ? displayValue : '',
   }
@@ -541,7 +551,6 @@ watchEffect(() => {
 
   // If data is truncated, we cannot rely on sorting/filtering so will disable.
   options.defaultColDef.filter = !isTruncated.value
-  options.defaultColDef.sortable = !isTruncated.value
   options.api.setColumnDefs(mergedColumnDefs)
   options.api.setRowData(rowData)
 })