7855 cb add setting use the users os formatting for numbersdates

webapp/common-typescript/@dbeaver/js-helpers/src/index.ts

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -13,3 +13,4 @@ export * from './isNotNullDefined.js';
 export * from './memoizeLast.js';
 export * from './mutex.js';
 export * from './reorderArray.js';
+export * from './getLocalizedDisplayName.js';

webapp/packages/plugin-data-spreadsheet-new/package.json

@@ -38,6 +38,7 @@
     "@cloudbeaver/plugin-data-grid": "workspace:*",
     "@cloudbeaver/plugin-data-viewer": "workspace:*",
     "@cloudbeaver/plugin-data-viewer-conditional-formatting": "workspace:*",
+    "@dbeaver/js-helpers": "workspace:*",
     "@dbeaver/result-set-api": "workspace:*",
     "@dbeaver/ui-kit": "workspace:*",
     "mobx": "^6",

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

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -49,8 +49,10 @@
 import { useGridSelectionContext } from './DataGridSelection/useGridSelectionContext.js';
 import './DataGridTable.css';
 import { CellFormatter } from './Formatters/CellFormatter.js';
+import { FormattingContext } from './FormattingContext.js';
 import { TableDataContext } from './TableDataContext.js';
 import { useGridDragging } from './useGridDragging.js';
+import { useFormatting } from './useFormatting.js';
 import { useGridSelectedCellsCopy } from './useGridSelectedCellsCopy.js';
 import { useTableData } from './useTableData.js';
 import { TableColumnHeader } from './TableColumnHeader/TableColumnHeader.js';
@@ -67,7 +69,7 @@
   resultIndex,
   simple,
   className,
   dataFormat,
   ...rest
 }) {
   const translate = useTranslate();
@@ -81,6 +83,7 @@
   const viewAction = model.source.getAction(resultIndex, IDatabaseDataViewAction, GridViewAction);
 
   const tableData = useTableData(model as unknown as IDatabaseDataModel<ResultSetDataSource>, resultIndex, dataGridDivRef);
+  const formatting = useFormatting(tableData);
   const getHeaderOrder = useCallback(() => (dataGridRef.current?.getColumnsOrdered() ?? []).map(col => col.key), [dataGridRef]);
   const gridSelectionContext = useGridSelectionContext(tableData, selectionAction, getHeaderOrder);
 
@@ -497,43 +500,45 @@
     <DataGridContext.Provider value={gridContext}>
       <DataGridSelectionContext.Provider value={gridSelectionContext}>
         <TableDataContext.Provider value={tableData}>
-          <div
-            ref={setContainersRef}
-            tabIndex={-1}
-            {...rest}
-            className={clsx('data-grid__container', 'theme-typography--caption', className)}
-            onMouseDown={onMouseDownHandler}
-            onMouseMove={onMouseMoveHandler}
-          >
-            <DataGrid
-              ref={dataGridRef}
-              className={clsx('data-grid__grid', className)}
-              cell={cell}
-              cellText={cellText}
-              cellElement={cellElement}
-              rowElement={rowElement}
-              getCellEditable={isCellEditable}
-              headerElement={headerElement}
-              getHeaderHeight={() => headerHeight}
-              getHeaderWidth={getHeaderWidth}
-              getHeaderPinned={getHeaderPinned}
-              getHeaderResizable={getHeaderResizable}
-              getRowHeight={() => ROW_HEIGHT}
-              getColumnKey={getColumnKey}
-              columnCount={columnsCount}
-              rowCount={rowsCount}
-              columnSortable={columnSortable}
-              columnSortingState={columnSortingState}
-              getRowId={rowIdx => (tableData.rows[rowIdx] ? GridDataKeysUtils.serialize(tableData.rows[rowIdx]) : '')}
-              columnSortingMultiple
-              onFocus={handleFocusChange}
-              onScrollToBottom={handleScrollToBottom}
-              onColumnSort={handleSort}
-              onCellChange={handleCellChange}
-              onCellKeyDown={handleCellKeyDown}
-              onHeaderKeyDown={gridSelectedCellCopy.onKeydownHandler}
-            />
-          </div>
+          <FormattingContext.Provider value={formatting}>
+            <div
+              ref={setContainersRef}
+              tabIndex={-1}
+              {...rest}
+              className={clsx('data-grid__container', 'theme-typography--caption', className)}
+              onMouseDown={onMouseDownHandler}
+              onMouseMove={onMouseMoveHandler}
+            >
+              <DataGrid
+                ref={dataGridRef}
+                className={clsx('data-grid__grid', className)}
+                cell={cell}
+                cellText={cellText}
+                cellElement={cellElement}
+                rowElement={rowElement}
+                getCellEditable={isCellEditable}
+                headerElement={headerElement}
+                getHeaderHeight={() => headerHeight}
+                getHeaderWidth={getHeaderWidth}
+                getHeaderPinned={getHeaderPinned}
+                getHeaderResizable={getHeaderResizable}
+                getRowHeight={() => ROW_HEIGHT}
+                getColumnKey={getColumnKey}
+                columnCount={columnsCount}
+                rowCount={rowsCount}
+                columnSortable={columnSortable}
+                columnSortingState={columnSortingState}
+                getRowId={rowIdx => (tableData.rows[rowIdx] ? GridDataKeysUtils.serialize(tableData.rows[rowIdx]) : '')}
+                columnSortingMultiple
+                onFocus={handleFocusChange}
+                onScrollToBottom={handleScrollToBottom}
+                onColumnSort={handleSort}
+                onCellChange={handleCellChange}
+                onCellKeyDown={handleCellKeyDown}
+                onHeaderKeyDown={gridSelectedCellCopy.onKeydownHandler}
+              />
+            </div>
+          </FormattingContext.Provider>
         </TableDataContext.Provider>
       </DataGridSelectionContext.Provider>
     </DataGridContext.Provider>

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

@@ -1,42 +1,86 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2025 DBeaver Corp and others
+ * Copyright (C) 2020-2026 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 { observer } from 'mobx-react-lite';
 import { useContext, useRef } from 'react';
 
-import { isBooleanValuePresentationAvailable } from '@cloudbeaver/plugin-data-viewer';
+import { isBooleanValuePresentationAvailable, type IGridDataKey } from '@cloudbeaver/plugin-data-viewer';
 
 import { CellContext } from '../CellRenderer/CellContext.js';
-import { TableDataContext } from '../TableDataContext.js';
+import { FormattingContext } from '../FormattingContext.js';
+import { TableDataContext, type ITableData } from '../TableDataContext.js';
 import { BlobFormatter } from './CellFormatters/BlobFormatter.js';
 import { BooleanFormatter } from './CellFormatters/BooleanFormatter.js';
 import { TextFormatter } from './CellFormatters/TextFormatter.js';
 import type { ICellFormatterProps } from './ICellFormatterProps.js';
 import { IndexFormatter } from './IndexFormatter.js';
+import { DateTimeFormatter } from './CellFormatters/DateTimeFormatter.js';
+import { NumberFormatter } from './CellFormatters/NumberFormatter.js';
+
+interface IFormatterContext {
+  tableDataContext: ITableData;
+  hasFormatters: boolean;
+}
+
+type FormatterSelector = (context: IFormatterContext, cell: IGridDataKey) => React.FC<ICellFormatterProps> | null;
+
+const formatterSelectors: FormatterSelector[] = [
+  // Binary
+  (context, cell) => {
+    const holder = context.tableDataContext.getCellHolder(cell);
+    return context.tableDataContext.format.isBinary(holder) ? BlobFormatter : null;
+  },
+
+  // Boolean
+  (context, cell) => {
+    const holder = context.tableDataContext.getCellHolder(cell);
+    const resultColumn = context.tableDataContext.getColumnInfo(cell.column);
+    return resultColumn && isBooleanValuePresentationAvailable(holder.value, resultColumn) ? BooleanFormatter : null;
+  },
+
+  // DateTime
+  (context, cell) => {
+    if (!context.hasFormatters) {
+      return null;
+    }
+    const resultColumn = context.tableDataContext.getColumnInfo(cell.column);
+    return resultColumn?.dataKind?.toUpperCase() === 'DATETIME' ? DateTimeFormatter : null;
+  },
+
+  // Numeric
+  (context, cell) => {
+    if (!context.hasFormatters) {
+      return null;
+    }
+    const resultColumn = context.tableDataContext.getColumnInfo(cell.column);
+    return resultColumn?.dataKind?.toUpperCase() === 'NUMERIC' ? NumberFormatter : null;
+  },
+];
 
 export const CellFormatterFactory = observer<ICellFormatterProps>(function CellFormatterFactory(props) {
   const formatterRef = useRef<React.FC<ICellFormatterProps> | null>(null);
   const tableDataContext = useContext(TableDataContext);
+  const formattingContext = useContext(FormattingContext);
   const cellContext = useContext(CellContext);
 
   if (formatterRef.current === null) {
     formatterRef.current = TextFormatter;
 
     if (cellContext.cell) {
-      const holder = tableDataContext.getCellHolder(cellContext.cell);
-      const isBlob = tableDataContext.format.isBinary(holder);
-
-      if (isBlob) {
-        formatterRef.current = BlobFormatter;
-      } else {
-        const resultColumn = tableDataContext.getColumnInfo(cellContext.cell.column);
+      const context: IFormatterContext = {
+        tableDataContext,
+        hasFormatters: formattingContext.formatters !== null,
+      };
 
-        if (resultColumn && isBooleanValuePresentationAvailable(holder.value, resultColumn)) {
-          formatterRef.current = BooleanFormatter;
+      for (const selector of formatterSelectors) {
+        const formatter = selector(context, cellContext.cell);
+        if (formatter) {
+          formatterRef.current = formatter;
+          break;
         }
       }
     } else {

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/DateTimeFormatter.tsx

@@ -0,0 +1,61 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2026 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 { observer } from 'mobx-react-lite';
+import { useContext } from 'react';
+
+import { getComputed } from '@cloudbeaver/core-blocks';
+import { NullFormatter as GridNullFormatter } from '@cloudbeaver/plugin-data-grid';
+
+import { CellContext } from '../../CellRenderer/CellContext.js';
+import { DateTimeKind, FormattingContext } from '../../FormattingContext.js';
+import { TableDataContext } from '../../TableDataContext.js';
+import type { ICellFormatterProps } from '../ICellFormatterProps.js';
+
+export const DateTimeFormatter = observer<ICellFormatterProps>(function DateTimeFormatter() {
+  const tableDataContext = useContext(TableDataContext);
+  const formattingContext = useContext(FormattingContext);
+  const cellContext = useContext(CellContext);
+
+  if (!cellContext.cell) {
+    return null;
+  }
+
+  const formatter = tableDataContext.format;
+  const valueHolder = getComputed(() => formatter.get(cellContext.cell!));
+  const nullValue = getComputed(() => formatter.isNull(valueHolder));
+  const displayValue = getComputed(() => formatter.getDisplayString(valueHolder));
+
+  if (nullValue) {
+    return <GridNullFormatter />;
+  }
+
+  let value = displayValue;
+
+  if (formattingContext.formatters) {
+    const extendedDateKind = formattingContext.getExtendedDateKind(cellContext.cell.column);
+
+    let dateFormatter;
+    switch (extendedDateKind) {
+      case DateTimeKind.DateTime:
+      case DateTimeKind.TimeOnly:
+        dateFormatter = formattingContext.formatters.dateTime;
+        break;
+      case DateTimeKind.DateOnly:
+        dateFormatter = formattingContext.formatters.dateOnly;
+        break;
+    }
+    const date = new Date(displayValue);
+    value = dateFormatter!.format(date);
+  }
+
+  return (
+    <div className="tw:flex tw:items-center tw:overflow-hidden">
+      <div className="tw:overflow-hidden tw:text-ellipsis">{value}</div>
+    </div>
+  );
+});

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatters/NumberFormatter.tsx

@@ -0,0 +1,52 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2026 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 { observer } from 'mobx-react-lite';
+import { useContext } from 'react';
+
+import { getComputed } from '@cloudbeaver/core-blocks';
+import { NullFormatter as GridNullFormatter } from '@cloudbeaver/plugin-data-grid';
+
+import { CellContext } from '../../CellRenderer/CellContext.js';
+import { FormattingContext } from '../../FormattingContext.js';
+import { TableDataContext } from '../../TableDataContext.js';
+import type { ICellFormatterProps } from '../ICellFormatterProps.js';
+
+export const NumberFormatter = observer<ICellFormatterProps>(function NumberFormatter() {
+  const tableDataContext = useContext(TableDataContext);
+  const formattingContext = useContext(FormattingContext);
+  const cellContext = useContext(CellContext);
+
+  if (!cellContext.cell) {
+    return null;
+  }
+
+  const formatter = tableDataContext.format;
+  const valueHolder = getComputed(() => formatter.get(cellContext.cell!));
+  const nullValue = getComputed(() => formatter.isNull(valueHolder));
+  const displayValue = getComputed(() => formatter.getDisplayString(valueHolder));
+
+  if (nullValue) {
+    return <GridNullFormatter />;
+  }
+
+  let value = displayValue;
+
+  if (formattingContext.formatters) {
+    const numberValue = Number(displayValue);
+
+    if (!isNaN(numberValue) && displayValue.trim() !== '') {
+      value = formattingContext.formatters.number.format(numberValue);
+    }
+  }
+
+  return (
+    <div className="tw:flex tw:items-center tw:overflow-hidden">
+      <div className="tw:overflow-hidden tw:text-ellipsis">{value}</div>
+    </div>
+  );
+});

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/FormattingContext.ts

@@ -0,0 +1,30 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2026 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 { IGridColumnKey } from '@cloudbeaver/plugin-data-viewer';
+
+export enum DateTimeKind {
+  DateTime = 'DATETIME',
+  DateOnly = 'DATE',
+  TimeOnly = 'TIME',
+}
+
+export interface IDataGridFormatters {
+  locale: string;
+  dateTime: Intl.DateTimeFormat;
+  dateOnly: Intl.DateTimeFormat;
+  number: Intl.NumberFormat;
+}
+
+export interface IFormattingContext {
+  formatters: IDataGridFormatters | null;
+  getExtendedDateKind: (columnKey: IGridColumnKey) => DateTimeKind;
+}
+
+export const FormattingContext = createContext<IFormattingContext>(undefined as any);