rename tooltip message, sort sorting for truncated data and re introd…

…uce the row label (#10533)

closes #10530

this renames the tooltip from using 'node' to 'component,

<img width="341" alt="image" src="https://github.com/enso-org/enso/assets/170310417/1ee35556-a982-47aa-99ac-544108b11afe">

![row-label](https://github.com/enso-org/enso/assets/170310417/d81482d9-df49-45da-b447-571a8e9171ea)

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

@@ -330,7 +330,7 @@ function toField(name: string, valueType?: ValueType | null | undefined): ColDef
   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="eSortOrder" class="ag-header-icon ag-sort-order" aria-hidden="true"></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>
@@ -343,7 +343,6 @@ function toField(name: string, valueType?: ValueType | null | undefined): ColDef
     field: name,
     headerComponentParams: {
       template,
-      enableSorting: true,
       setAriaSort: () => {},
     },
     headerTooltip: displayValue ? displayValue : '',
@@ -406,7 +405,7 @@ function toLinkField(fieldName: string): ColDef {
     field: fieldName,
     onCellDoubleClicked: (params) => createNode(params),
     tooltipValueGetter: () => {
-      return `Double click to view this ${newNodeSelectorValues.value.tooltipValue} in a separate node`
+      return `Double click to view this ${newNodeSelectorValues.value.tooltipValue} in a separate component`
     },
     cellRenderer: (params: any) => `<a href='#'> ${params.value} </a>`,
   }
@@ -657,15 +656,15 @@ onUnmounted(() => {
             v-text="limit"
           ></option>
         </select>
-        <div v-if="showRowCount">
+        <template v-if="showRowCount">
           <span
             v-if="isRowCountSelectorVisible && isTruncated"
             v-text="` of ${rowCount} rows (Sorting/Filtering disabled).`"
           ></span>
           <span v-else-if="isRowCountSelectorVisible" v-text="' rows.'"></span>
           <span v-else-if="rowCount === 1" v-text="'1 row.'"></span>
           <span v-else v-text="`${rowCount} rows.`"></span>
-        </div>
+        </template>
       </div>
       <div ref="tableNode" class="scrollable ag-theme-alpine"></div>
     </div>