dbeaver/pro#7554 adds tooltip for multi sorting in data grid

Author: sergeyteleshev

webapp/common-react/@dbeaver/react-data-grid/src/DataGrid.tsx

@@ -72,6 +72,7 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
     getHeaderPinned,
     columnSortingState,
     getHeaderDnD,
+    orderButtonTitle,
     cell,
     cellText,
     cellElement,
@@ -187,7 +188,16 @@ export const DataGrid = forwardRef<DataGridRef, DataGridProps>(function DataGrid
       <DataGridRowContext value={{ rowElement, rowCount, onScrollToBottom }}>
         <DataGridCellContext value={{ cell, cellText, cellElement, cellTooltip, onCellChange }}>
           <DataGridCellHeaderContext
-            value={{ headerElement, headerText, getHeaderDnD, columnSortable, onColumnSort, columnSortingState, onHeaderKeyDown }}
+            value={{
+              headerElement,
+              headerText,
+              getHeaderDnD,
+              columnSortable,
+              onColumnSort,
+              columnSortingState,
+              onHeaderKeyDown,
+              orderButtonTitle,
+            }}
           >
             <DataGridBase
               ref={innerGridRef}

webapp/common-react/@dbeaver/react-data-grid/src/DataGridHeaderCellContext.ts

@@ -1,3 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
 import { createContext } from 'react';
 import type { IGridReactiveValue } from './IGridReactiveValue.js';
 
@@ -15,6 +23,7 @@ export interface IDataGridHeaderCellContext {
   columnSortable?: IGridReactiveValue<boolean, [colIdx: number]>;
   onColumnSort?: (colIdx: number, order: 'asc' | 'desc' | null, isMultiple: boolean) => void;
   onHeaderKeyDown?: (event: React.KeyboardEvent) => void;
+  orderButtonTitle?: string;
 }
 
 export const DataGridCellHeaderContext = createContext<IDataGridHeaderCellContext | null>(null);

webapp/common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx

@@ -27,6 +27,7 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
   const onColumnSort = cellHeaderContext?.onColumnSort;
   const onHeaderKeyDown = cellHeaderContext?.onHeaderKeyDown;
   const sortingState = useGridReactiveValue(cellHeaderContext?.columnSortingState, colIdx);
+  const orderButtonTitle = cellHeaderContext?.orderButtonTitle;
 
   const draggable = dndHeaderContext?.getCanDrag?.(colIdx) ?? false;
   const drag = useDrag({
@@ -63,7 +64,9 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
   });
 
   function handleSort(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
-    if (!onColumnSort) return;
+    if (!onColumnSort) {
+      return;
+    }
 
     const nextSortState = sortingState === 'asc' ? 'desc' : sortingState === 'desc' ? null : 'asc';
     onColumnSort(colIdx, nextSortState, e.ctrlKey || e.metaKey);
@@ -87,7 +90,7 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
       onKeyDown={onKeyDown}
     >
       <span className="tw:overflow-hidden tw:text-ellipsis">{headerElement ?? getHeaderText ?? ''}</span>
-      {isColumnSortable && onColumnSort && <OrderButton sortState={sortingState} onClick={handleSort} />}
+      {isColumnSortable && onColumnSort && <OrderButton sortState={sortingState} title={orderButtonTitle} onClick={handleSort} />}
     </div>
   );
 });

webapp/common-react/@dbeaver/react-data-grid/src/renderers/OrderButton.tsx

@@ -1,30 +1,40 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
 import { clsx, IconButton, Icon } from '@dbeaver/ui-kit';
 
 interface OrderButtonProps {
   sortState?: 'asc' | 'desc' | null;
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
   tabIndex?: number;
+  title?: string;
 }
 
-export function OrderButton({ sortState, onClick, tabIndex }: OrderButtonProps) {
+export function OrderButton({ sortState, onClick, tabIndex, title }: OrderButtonProps) {
   const svgSortAsc = 'sort-asc';
   const svgSortDesc = 'sort-desc';
   const svgSortUnknown = 'sort-unknown';
+  const tooltip = title || 'Sort by column';
 
   const iconSrc = sortState === 'asc' ? svgSortAsc : sortState === 'desc' ? svgSortDesc : svgSortUnknown;
 
   return (
     <IconButton
       variant="secondary"
       size="small"
-      onClick={onClick}
       tabIndex={tabIndex}
-      title="Sort by column"
-      aria-label="Sort by column"
+      title={tooltip}
+      aria-label={tooltip}
       className={clsx(
         'tw:opacity-0 tw:group-focus:opacity-100 tw:focus:opacity-100 tw:group-hover:opacity-100 tw:hover:opacity-100 tw:outline-offset-0',
         sortState && 'tw:opacity-100',
       )}
+      onClick={onClick}
     >
       <Icon name={iconSrc} />
     </IconButton>

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridTable.tsx

@@ -10,9 +10,7 @@ import { useCallback, useLayoutEffect, useMemo, useRef, type HTMLAttributes } fr
 import { reaction } from 'mobx';
 
 import { getComputed, s, TextPlaceholder, useObjectRef, useS, useTranslate } from '@cloudbeaver/core-blocks';
-// import { useService } from '@cloudbeaver/core-di';
 import { EventContext, EventStopPropagationFlag } from '@cloudbeaver/core-events';
-// import { ClipboardService } from '@cloudbeaver/core-ui';
 import { useCaptureViewContext } from '@cloudbeaver/core-view';
 import {
   DataGrid,
@@ -58,20 +56,13 @@ import { useTableData } from './useTableData.js';
 import { TableColumnHeader } from './TableColumnHeader/TableColumnHeader.js';
 import { TableIndexColumnHeader } from './TableColumnHeader/TableIndexColumnHeader.js';
 import { clsx } from '@dbeaver/ui-kit';
+import { getOS, OperatingSystem } from '@cloudbeaver/core-utils';
 
 const ROW_HEIGHT = 24;
 export const HEADER_HEIGHT = 32;
 export const HEADER_WITH_DESC_HEIGHT = 42;
 
-export const DataGridTable = observer<IDataPresentationProps>(function DataGridTable({
-  model,
-  actions,
-  resultIndex,
-  simple,
-  className,
-  dataFormat,
-  ...rest
-}) {
+export const DataGridTable = observer<IDataPresentationProps>(function DataGridTable({ model, actions, resultIndex, simple, className, ...rest }) {
   const translate = useTranslate();
   const styles = useS(classes);
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
@@ -85,6 +76,8 @@ export const DataGridTable = observer<IDataPresentationProps>(function DataGridT
 
   const tableData = useTableData(model as unknown as IDatabaseDataModel<ResultSetDataSource>, resultIndex, dataGridDivRef);
   const gridSelectionContext = useGridSelectionContext(tableData, selectionAction);
+  const multiSortModifier = getOS() === OperatingSystem.macOS ? '⌘CMD' : 'CTRL';
+  const orderButtonTitle = translate('data_grid_table_tooltip_column_header_order', undefined, { modifier: multiSortModifier });
 
   const restoreFocus = useCallback(
     function restoreFocus() {
@@ -512,6 +505,7 @@ export const DataGridTable = observer<IDataPresentationProps>(function DataGridT
               rowCount={rowsCount}
               columnSortable={columnSortable}
               columnSortingState={columnSortingState}
+              orderButtonTitle={orderButtonTitle}
               getRowId={rowIdx => (tableData.rows[rowIdx] ? GridDataKeysUtils.serialize(tableData.rows[rowIdx]) : '')}
               onFocus={handleFocusChange}
               onScrollToBottom={handleScrollToBottom}

webapp/packages/plugin-data-spreadsheet-new/src/locales/de.ts

@@ -12,7 +12,7 @@ export default [
   ['data_grid_table_disable_order', 'Deaktiviert'],
   ['data_grid_table_disable_all_orders', 'Alle deaktivieren'],
   ['data_grid_table_delete_filters_and_orders', 'Filter / Sortierung zurücksetzen'],
-  ['data_grid_table_tooltip_column_header_order', 'Sortieren nach Spalte'],
+  ['data_grid_table_tooltip_column_header_order', 'Zum Sortieren klicken. Halten Sie {arg:modifier} für Mehrfachsortierung'],
   ['data_grid_table_context_menu_filter_dialog_title', 'Wert bearbeiten'],
   ['data_grid_table_index_column_tooltip', 'Wählen ganze Tabelle aus'],
   ['data_grid_table_readonly_tooltip', 'Schreibgeschützt'],

webapp/packages/plugin-data-spreadsheet-new/src/locales/en.ts

@@ -16,7 +16,7 @@ export default [
   ['data_grid_table_disable_order', 'Disabled'],
   ['data_grid_table_disable_all_orders', 'Disable all'],
   ['data_grid_table_delete_filters_and_orders', 'Reset filters / sorting'],
-  ['data_grid_table_tooltip_column_header_order', 'Sort by column'],
+  ['data_grid_table_tooltip_column_header_order', 'Click to sort. Hold {arg:modifier} for multi-sort'],
   ['data_grid_table_context_menu_filter_dialog_title', 'Edit value'],
   ['data_grid_table_context_menu_filter_clipboard_permission', 'Give access to clipboard'],
   ['data_grid_table_context_menu_save_value_error', 'Failed to save value'],

webapp/packages/plugin-data-spreadsheet-new/src/locales/fr.ts

@@ -16,7 +16,7 @@ export default [
   ['data_grid_table_disable_order', 'Désactivé'],
   ['data_grid_table_disable_all_orders', 'Désactiver tout'],
   ['data_grid_table_delete_filters_and_orders', 'Réinitialiser les filtres / le tri'],
-  ['data_grid_table_tooltip_column_header_order', 'Trier par colonne'],
+  ['data_grid_table_tooltip_column_header_order', 'Cliquez pour trier. Maintenez {arg:modifier} pour un tri multiple'],
   ['data_grid_table_context_menu_filter_dialog_title', 'Modifier la valeur'],
   ['data_grid_table_context_menu_filter_clipboard_permission', 'Donner accès au presse-papiers'],
   ['data_grid_table_context_menu_save_value_error', 'Échec de la sauvegarde de la valeur'],

webapp/packages/plugin-data-spreadsheet-new/src/locales/it.ts

@@ -11,7 +11,7 @@ export default [
   ['data_grid_table_disable_order', 'Disabilitato'],
   ['data_grid_table_disable_all_orders', 'Disabilita tutto'],
   ['data_grid_table_delete_filters_and_orders', "Reimposta i filtri / l'ordinamento"],
-  ['data_grid_table_tooltip_column_header_order', 'Ordina per colonna'],
+  ['data_grid_table_tooltip_column_header_order', 'Fai clic per ordinare. Tieni premuto {arg:modifier} per l\'ordinamento multiplo'],
   ['data_grid_table_context_menu_filter_dialog_title', 'Modifica valore'],
   ['data_grid_table_context_menu_filter_clipboard_permission', 'Dai accesso agli appunti'],
   ['data_grid_table_context_menu_save_value_error', 'Failed to save value'],

webapp/packages/plugin-data-spreadsheet-new/src/locales/ru.ts

@@ -16,7 +16,7 @@ export default [
   ['data_grid_table_disable_order', 'Отключена'],
   ['data_grid_table_disable_all_orders', 'Отменить сортировку всех колонок'],
   ['data_grid_table_delete_filters_and_orders', 'Отменить фильтры / сортировки'],
-  ['data_grid_table_tooltip_column_header_order', 'Сортировка по колонке'],
+  ['data_grid_table_tooltip_column_header_order', 'Нажмите для сортировки. Удерживайте {arg:modifier} для множественной сортировки'],
   ['data_grid_table_context_menu_filter_dialog_title', 'Редактировать значение'],
   ['data_grid_table_context_menu_filter_clipboard_permission', 'Дать доступ к буферу обмена'],
   ['data_grid_table_context_menu_save_value_error', 'Не удалось сохранить значение'],