@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.11

package/src/components/form/ScanInput/useCodeScanner.ts

@@ -9,8 +9,10 @@
 
 import { Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats } from 'html5-qrcode';
 import jsQR from 'jsqr';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { RefObject } from 'react';
 import type { CodeFormatsToSupport } from './types';
+import { decodeQrCodeWithZxingWasm } from './zxingWasmDecoder';
 
 type ScannerSize = {
   width: number;
@@ -21,8 +23,8 @@ type UseCodeScannerOptions = {
   enabled: boolean;
   elementId: string;
   formatsToSupport?: CodeFormatsToSupport;
-  scanBoxSize?: ScannerSize;
   onScannerSizeChanged?: (size: ScannerSize) => void;
+  scanViewportRef?: RefObject<HTMLElement | null>;
   onScanSuccess: (text: string) => void;
   onScanFailure?: () => void;
   onCameraStartFailure?: (error: unknown) => void;
@@ -38,7 +40,31 @@ type JsQRImageTransform = {
   threshold?: number;
 };
 
+type QrFrameCaptureLimits = {
+  maxHeight: number;
+  maxPixels: number;
+  maxWidth: number;
+};
+
+type FocusMediaTrackCapabilities = MediaTrackCapabilities & {
+  focusMode?: string[];
+};
+
+type FocusMediaTrackConstraintSet = MediaTrackConstraintSet & {
+  focusMode?: string;
+};
+
 const QR_SCAN_IMAGE_SIZES = [3200, 2400, 1600, 1000];
+const LIVE_QR_SCAN_INTERVAL = 120;
+const IOS_ZXING_SCAN_INTERVAL = 200;
+const LIVE_QR_SCAN_MAX_WIDTH = 960;
+const LIVE_QR_SCAN_MAX_HEIGHT = 540;
+const LIVE_QR_SCAN_MAX_PIXELS = LIVE_QR_SCAN_MAX_WIDTH * 420;
+const IOS_ZXING_SCAN_LIMITS: QrFrameCaptureLimits = {
+  maxHeight: 720,
+  maxPixels: 720 * 960,
+  maxWidth: 1280,
+};
 const QR_SCAN_IMAGE_TRANSFORMS: JsQRImageTransform[] = [
   {},
   { contrast: 3, threshold: 105 },
@@ -66,8 +92,170 @@ export const DEFAULT_CODE_FORMATS: CodeFormatsToSupport = [
 
 export function getCodeScanBoxSize(width: number, height: number) {
   return {
-    width: Math.floor(Math.min(width * 0.82, 520)),
-    height: Math.floor(Math.min(height * 0.32, 240)),
+    width: Math.floor(Math.min((width * 90) / 100, 1152)),
+    height: Math.floor(Math.min((height * 70) / 100, 540)),
+  };
+}
+
+export function isIOSBrowser() {
+  return (
+    /iPad|iPhone|iPod/i.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+  );
+}
+
+function getVisibleVideoFrameRegion(video: HTMLVideoElement, scanViewport: Element) {
+  const rect = video.getBoundingClientRect();
+  const viewportRect = scanViewport.getBoundingClientRect();
+  const visibleLeft = Math.max(viewportRect.left, rect.left);
+  const visibleTop = Math.max(viewportRect.top, rect.top);
+  const visibleRight = Math.min(viewportRect.right, rect.right);
+  const visibleBottom = Math.min(viewportRect.bottom, rect.bottom);
+  if (!rect.width || !rect.height || visibleRight <= visibleLeft || visibleBottom <= visibleTop) {
+    return;
+  }
+
+  const sourceX = Math.max(0, Math.floor(((visibleLeft - rect.left) / rect.width) * video.videoWidth));
+  const sourceY = Math.max(0, Math.floor(((visibleTop - rect.top) / rect.height) * video.videoHeight));
+  return {
+    x: sourceX,
+    y: sourceY,
+    width: Math.min(
+      video.videoWidth - sourceX,
+      Math.ceil(((visibleRight - visibleLeft) / rect.width) * video.videoWidth),
+    ),
+    height: Math.min(
+      video.videoHeight - sourceY,
+      Math.ceil(((visibleBottom - visibleTop) / rect.height) * video.videoHeight),
+    ),
+  };
+}
+
+export function getQrVideoFrameImageData(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport?: Element,
+  limits: QrFrameCaptureLimits = {
+    maxHeight: LIVE_QR_SCAN_MAX_HEIGHT,
+    maxPixels: LIVE_QR_SCAN_MAX_PIXELS,
+    maxWidth: LIVE_QR_SCAN_MAX_WIDTH,
+  },
+) {
+  if (!video.videoWidth || !video.videoHeight || video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA) {
+    return;
+  }
+
+  const viewfinderWidth = video.clientWidth || video.videoWidth;
+  const viewfinderHeight = video.clientHeight || video.videoHeight;
+  const scanBoxSize = getCodeScanBoxSize(viewfinderWidth, viewfinderHeight);
+  const scanBoxRegion = {
+    width: Math.min(video.videoWidth, Math.floor(scanBoxSize.width * (video.videoWidth / viewfinderWidth))),
+    height: Math.min(video.videoHeight, Math.floor(scanBoxSize.height * (video.videoHeight / viewfinderHeight))),
+  };
+  const sourceRegion = scanViewport
+    ? getVisibleVideoFrameRegion(video, scanViewport)
+    : {
+        x: Math.floor((video.videoWidth - scanBoxRegion.width) / 2),
+        y: Math.floor((video.videoHeight - scanBoxRegion.height) / 2),
+        ...scanBoxRegion,
+      };
+  if (!sourceRegion) {
+    return;
+  }
+
+  const maxWidth = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxHeight : limits.maxWidth;
+  const maxHeight = scanViewport && sourceRegion.height > sourceRegion.width ? limits.maxWidth : limits.maxHeight;
+  const pixelScale = scanViewport ? Math.sqrt(limits.maxPixels / (sourceRegion.width * sourceRegion.height)) : 1;
+  const targetScale = Math.min(1, maxWidth / sourceRegion.width, maxHeight / sourceRegion.height, pixelScale);
+  const targetWidth = Math.max(1, Math.floor(sourceRegion.width * targetScale));
+  const targetHeight = Math.max(1, Math.floor(sourceRegion.height * targetScale));
+  if (canvas.width !== targetWidth) {
+    canvas.width = targetWidth;
+  }
+  if (canvas.height !== targetHeight) {
+    canvas.height = targetHeight;
+  }
+  const context = canvas.getContext('2d', { willReadFrequently: true });
+  if (!context) {
+    return;
+  }
+
+  context.drawImage(
+    video,
+    sourceRegion.x,
+    sourceRegion.y,
+    sourceRegion.width,
+    sourceRegion.height,
+    0,
+    0,
+    targetWidth,
+    targetHeight,
+  );
+  return context.getImageData(0, 0, targetWidth, targetHeight);
+}
+
+export function scanQrVideoFrame(video: HTMLVideoElement, canvas: HTMLCanvasElement, scanViewport?: Element) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport);
+  if (!imageData) {
+    return;
+  }
+  return jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'dontInvert' })?.data;
+}
+
+export async function scanQrVideoFrameWithZxingWasm(
+  video: HTMLVideoElement,
+  canvas: HTMLCanvasElement,
+  scanViewport: Element,
+) {
+  const imageData = getQrVideoFrameImageData(video, canvas, scanViewport, IOS_ZXING_SCAN_LIMITS);
+  if (!imageData) {
+    return;
+  }
+  return decodeQrCodeWithZxingWasm(imageData);
+}
+
+function startLiveQrScan(
+  elementId: string,
+  onScanSuccess: (text: string) => void,
+  scanViewportRef?: RefObject<HTMLElement | null>,
+) {
+  const canvas = document.createElement('canvas');
+  const useVisiblePreview = isIOSBrowser();
+  let timer: number | undefined;
+  let stopped = false;
+
+  const scan = async () => {
+    if (stopped) {
+      return;
+    }
+    const video = document.getElementById(elementId)?.querySelector('video');
+    const scanViewport = useVisiblePreview ? scanViewportRef?.current : undefined;
+    if (video) {
+      let decodedText: string | undefined;
+      try {
+        decodedText =
+          useVisiblePreview && scanViewport
+            ? await scanQrVideoFrameWithZxingWasm(video, canvas, scanViewport)
+            : scanQrVideoFrame(video, canvas);
+      } catch {
+        // Keep the existing scanners active when the optional WASM decoder cannot load or decode a frame.
+      }
+      if (decodedText && !stopped) {
+        stopped = true;
+        onScanSuccess(decodedText);
+        return;
+      }
+    }
+    if (!stopped) {
+      timer = window.setTimeout(scan, useVisiblePreview ? IOS_ZXING_SCAN_INTERVAL : LIVE_QR_SCAN_INTERVAL);
+    }
+  };
+
+  timer = window.setTimeout(scan, 0);
+  return () => {
+    stopped = true;
+    if (timer !== undefined) {
+      window.clearTimeout(timer);
+    }
   };
 }
 
@@ -92,6 +280,19 @@ async function stopScanner(scanner?: Html5Qrcode, options: { clear?: boolean } =
   }
 }
 
+async function enableContinuousFocus(scanner: Html5Qrcode) {
+  try {
+    const capabilities = scanner.getRunningTrackCapabilities() as FocusMediaTrackCapabilities;
+    if (!capabilities.focusMode?.includes('continuous')) {
+      return;
+    }
+    const focusConstraints: FocusMediaTrackConstraintSet = { focusMode: 'continuous' };
+    await scanner.applyVideoConstraints({ advanced: [focusConstraints] });
+  } catch {
+    // Some browsers expose incomplete camera capability APIs. Scanning should continue without explicit focus control.
+  }
+}
+
 function isSafariBrowser() {
   const { userAgent, vendor } = navigator;
   return /Apple/i.test(vendor) && /Safari/i.test(userAgent) && !/CriOS|FxiOS|EdgiOS|Chrome/i.test(userAgent);
@@ -216,40 +417,96 @@ export function useCodeScanner({
   enabled,
   elementId,
   formatsToSupport,
-  scanBoxSize,
   onScannerSizeChanged,
+  scanViewportRef,
   onScanSuccess,
   onScanFailure,
   onCameraStartFailure,
 }: UseCodeScannerOptions) {
   const [scanner, setScanner] = useState<Html5Qrcode>();
+  const liveQrScanStopRef = useRef<() => void>();
+  const scanSucceededRef = useRef(false);
+  const scanSessionRef = useRef(0);
+
+  const stopLiveQrScan = useCallback(() => {
+    liveQrScanStopRef.current?.();
+    liveQrScanStopRef.current = undefined;
+  }, []);
+
+  const cancelActiveScan = useCallback(() => {
+    scanSessionRef.current += 1;
+    stopLiveQrScan();
+  }, [stopLiveQrScan]);
+
+  const reportScanSuccess = useCallback(
+    (text: string) => {
+      if (scanSucceededRef.current) {
+        return;
+      }
+      scanSucceededRef.current = true;
+      stopLiveQrScan();
+      onScanSuccess(text);
+    },
+    [onScanSuccess, stopLiveQrScan],
+  );
 
   const startScanCamera = useCallback(
     async (scannerInstance: Html5Qrcode) => {
-      await scannerInstance.start(
-        { facingMode: 'environment' },
-        {
-          fps: 10,
-          qrbox(width, height) {
-            onScannerSizeChanged?.({ width, height });
-            return clampCodeScanBoxSize(scanBoxSize ?? getCodeScanBoxSize(width, height), width, height);
+      cancelActiveScan();
+      const scanSession = scanSessionRef.current;
+      scanSucceededRef.current = false;
+      try {
+        await scannerInstance.start(
+          { facingMode: 'environment' },
+          {
+            fps: 8,
+            disableFlip: false,
+            videoConstraints: {
+              facingMode: { ideal: 'environment' },
+              width: { ideal: 1920 },
+              height: { ideal: 1080 },
+              frameRate: { ideal: 30 },
+            },
+            qrbox(width, height) {
+              onScannerSizeChanged?.({ width, height });
+              return clampCodeScanBoxSize(getCodeScanBoxSize(width, height), width, height);
+            },
+          },
+          (decodedText) => {
+            reportScanSuccess(decodedText);
           },
-        },
-        (decodedText) => {
-          onScanSuccess(decodedText);
-        },
-        undefined,
-      );
+          undefined,
+        );
+      } catch (error) {
+        if (scanSession !== scanSessionRef.current) {
+          return;
+        }
+        throw error;
+      }
+      if (scanSession !== scanSessionRef.current) {
+        try {
+          await stopScanner(scannerInstance, { clear: true });
+        } catch {
+          // The scanner may already have been cleared by the canceled session cleanup.
+        }
+        return;
+      }
+      if (shouldScanQrWithJsQR(formatsToSupport)) {
+        liveQrScanStopRef.current = startLiveQrScan(elementId, reportScanSuccess, scanViewportRef);
+      }
+      await enableContinuousFocus(scannerInstance);
     },
-    [onScanSuccess, onScannerSizeChanged, scanBoxSize],
+    [cancelActiveScan, elementId, formatsToSupport, onScannerSizeChanged, reportScanSuccess, scanViewportRef],
   );
 
   const startScanFile = useCallback(
     async (file: File) => {
+      cancelActiveScan();
+      scanSucceededRef.current = false;
       if (isSafariBrowser() && shouldScanQrWithJsQR(formatsToSupport)) {
         try {
           const decodedText = await scanFileWithJsQR(file, formatsToSupport);
-          onScanSuccess(decodedText);
+          reportScanSuccess(decodedText);
           return;
         } catch {
           // Fall through to html5-qrcode so barcode uploads still work in Safari.
@@ -263,13 +520,13 @@ export function useCodeScanner({
       await stopScanner(scanner);
       try {
         const result = await scanner.scanFileV2(file, false);
-        onScanSuccess(result.decodedText);
+        reportScanSuccess(result.decodedText);
       } catch {
         onScanFailure?.();
         await startScanCamera(scanner);
       }
     },
-    [formatsToSupport, onScanFailure, onScanSuccess, scanner, startScanCamera],
+    [cancelActiveScan, formatsToSupport, onScanFailure, reportScanSuccess, scanner, startScanCamera],
   );
 
   useEffect(() => {
@@ -291,9 +548,10 @@ export function useCodeScanner({
     });
 
     return () => {
+      cancelActiveScan();
       stopScanner(scannerInstance, { clear: true }).catch(() => undefined);
     };
-  }, [elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
+  }, [cancelActiveScan, elementId, enabled, formatsToSupport, onCameraStartFailure, onScanFailure, startScanCamera]);
 
   return {
     startScanFile,

package/src/components/form/ScanInput/zxingWasmDecoder.ts

@@ -0,0 +1,64 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+let decoderPromise: Promise<typeof import('zxing-wasm/reader')> | undefined;
+
+async function loadDecoder() {
+  if (!decoderPromise) {
+    decoderPromise = Promise.all([import('zxing-wasm/reader'), import('zxing-wasm/reader/zxing_reader.wasm')])
+      .then(async ([decoder, { default: wasmUrl }]) => {
+        try {
+          await decoder.prepareZXingModule({
+            fireImmediately: true,
+            overrides: { locateFile: () => wasmUrl },
+          });
+        } catch (error) {
+          decoder.purgeZXingModule();
+          throw error;
+        }
+        return decoder;
+      })
+      .catch((error: unknown) => {
+        decoderPromise = undefined;
+        throw error;
+      });
+  }
+  return decoderPromise;
+}
+
+export async function decodeQrCodeWithZxingWasm(imageData: ImageData) {
+  const decoder = await loadDecoder();
+  const results = await decoder.readBarcodes(imageData, {
+    binarizer: 'GlobalHistogram',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+  if (results[0]?.text) {
+    return results[0].text;
+  }
+
+  const fallbackResults = await decoder.readBarcodes(imageData, {
+    binarizer: 'LocalAverage',
+    downscaleThreshold: 300,
+    formats: ['QRCode'],
+    maxNumberOfSymbols: 1,
+    tryDenoise: true,
+    tryDownscale: true,
+    tryHarder: true,
+    tryInvert: true,
+    tryRotate: true,
+  });
+  return fallbackResults[0]?.text;
+}

package/src/components/form/filter/CollectionFilterItem.tsx

@@ -130,8 +130,10 @@ export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
       [operatorOptions, operator],
     );
 
-    const handleFieldChange = (next: (string | number)[]) => {
-      const path = next.map(String);
+    const handleFieldChange = (next?: (string | number)[]) => {
+      // rc-cascader emits `undefined` when its clear icon is clicked in single-select mode, despite its public type
+      // declaring an array. Treat that runtime value as an empty path so clearing the field also resets the row.
+      const path = (next ?? []).map(String);
       props.value.path = path.join('.');
       const leaf = findOptionByPath(options, path);
       props.value.operator = leaf?.operators?.[0]?.value || '';

package/src/components/form/filter/__tests__/CollectionFilterItem.test.tsx

@@ -104,6 +104,23 @@ describe('CollectionFilterItem', () => {
     });
   });
 
+  it('clears the filter row when the selected field is cleared', async () => {
+    const value = observable({ path: 'username', operator: '$eq', value: 'alice' });
+    const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);
+
+    const { container } = render(<CollectionFilterItem value={value} collection={collection} />);
+
+    const clear = container.querySelector('.ant-select-clear');
+    if (!clear) throw new Error('expected Cascader clear control to be rendered');
+    fireEvent.mouseDown(clear);
+
+    await waitFor(() => {
+      expect(value.path).toBe('');
+      expect(value.operator).toBe('');
+      expect(value.value).toBeUndefined();
+    });
+  });
+
   it('clears value when the operator changes', async () => {
     const value = observable({ path: 'username', operator: '$eq', value: 'alice' });
     const collection = buildStubCollection([{ name: 'username', title: 'Username' }]);

package/src/components/form/table/Table.tsx

@@ -9,11 +9,11 @@
 
 import { DragOverlay, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { cx } from '@emotion/css';
+import { css, cx, injectGlobal } from '@emotion/css';
 import { DndProvider } from '@nocobase/flow-engine';
 import { useMemoizedFn } from 'ahooks';
-import { Table as AntdTable, type TableProps as AntdTableProps } from 'antd';
-import type { ColumnsType, ColumnType, GetRowKey } from 'antd/es/table/interface';
+import { Table as AntdTable, theme, type TableProps as AntdTableProps } from 'antd';
+import type { ColumnsType, ColumnGroupType, ColumnType, GetRowKey } from 'antd/es/table/interface';
 import type { RenderedCell } from 'rc-table/lib/interface';
 import React, { useMemo, useState } from 'react';
 import { SortableRow, SortHandle } from './dnd/SortableRow';
@@ -24,6 +24,20 @@ import { readRowKey, snapshotSourceRow, type RowKey, type RowSnapshot } from './
 
 type RowSelectionRenderCellResult<RecordType> = React.ReactNode | RenderedCell<RecordType>;
 
+const DEFAULT_COLUMN_CONTENT_CLASS_NAME = 'nb-table-default-column-content';
+const DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY = '--nb-table-default-column-content-max-width';
+
+// Zero specificity lets caller classes remain authoritative regardless of stylesheet insertion order. The max-width
+// value itself comes from a token-derived private CSS variable set by each Table instance.
+injectGlobal`
+  :where(.${DEFAULT_COLUMN_CONTENT_CLASS_NAME}) {
+    max-width: var(${DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY});
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+`;
+
 /**
  * Default initial page size for `Table`. Exposed so consumers can seed their
  * controlled `pageSize` state with the same value the component would use if
@@ -50,6 +64,54 @@ function isRenderedCell<RecordType>(value: unknown): value is RenderedCell<Recor
   return typeof value === 'object' && value !== null && !React.isValidElement(value) && 'children' in value;
 }
 
+function isColumnGroup<RecordType>(
+  column: ColumnGroupType<RecordType> | ColumnType<RecordType>,
+): column is ColumnGroupType<RecordType> {
+  return 'children' in column && Array.isArray(column.children) && column.children.length > 0;
+}
+
+function addDefaultColumnContentClassName<RecordType>(
+  columns: ColumnsType<RecordType>,
+  defaultClassName: string,
+): ColumnsType<RecordType> {
+  return columns.map((column) => {
+    if (column === AntdTable.EXPAND_COLUMN || column === AntdTable.SELECTION_COLUMN) {
+      return column;
+    }
+
+    if (isColumnGroup(column)) {
+      return {
+        ...column,
+        children: addDefaultColumnContentClassName(column.children, defaultClassName),
+      };
+    }
+
+    if (column.width !== undefined || column.ellipsis || column.fixed) {
+      return column;
+    }
+
+    const originalOnCell = column.onCell;
+    const originalOnHeaderCell = column.onHeaderCell;
+    return {
+      ...column,
+      onCell: (record, index) => {
+        const cellProps = originalOnCell?.(record, index) ?? {};
+        return {
+          ...cellProps,
+          className: cx(defaultClassName, cellProps.className),
+        };
+      },
+      onHeaderCell: (headerColumn) => {
+        const cellProps = originalOnHeaderCell?.(headerColumn) ?? {};
+        return {
+          ...cellProps,
+          className: cx(defaultClassName, cellProps.className),
+        };
+      },
+    };
+  });
+}
+
 export interface TableProps<RecordType extends object = any> extends AntdTableProps<RecordType> {
   /**
    * Required so drag-sort, hover-swap and row identity work. Accepts the same
@@ -108,6 +170,7 @@ export interface TableProps<RecordType extends object = any> extends AntdTablePr
  * plus the index swap, so it is safe as the default table on any page.
  */
 export function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
+  const { token } = theme.useToken();
   const {
     rowKey,
     showIndex = true,
@@ -143,6 +206,17 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
   const showHandleInSelection = isDraggable && showSortHandle && !!rowSelection;
   const showStandaloneHandleColumn = isDraggable && showSortHandle && !rowSelection;
 
+  const defaultColumnContentClassName = useMemo(
+    () =>
+      cx(
+        DEFAULT_COLUMN_CONTENT_CLASS_NAME,
+        css`
+          ${DEFAULT_COLUMN_CONTENT_MAX_WIDTH_PROPERTY}: ${token.screenXS - token.paddingXL * 3 + token.padding * 2}px;
+        `,
+      ),
+    [token.padding, token.paddingXL, token.screenXS],
+  );
+
   const itemKeys = useMemo<string[]>(() => {
     if (!isDraggable || !dataSource) return [];
     return dataSource
@@ -191,15 +265,16 @@ export function Table<RecordType extends object = any>(props: TableProps<RecordT
   // selection cell — see `augmentedRowSelection` below.
   const augmentedColumns = useMemo<ColumnsType<RecordType>>(() => {
     const baseColumns: ColumnsType<RecordType> = columns ?? [];
-    if (!showStandaloneHandleColumn) return baseColumns;
+    const styledColumns = addDefaultColumnContentClassName(baseColumns, defaultColumnContentClassName);
+    if (!showStandaloneHandleColumn) return styledColumns;
     const handleColumn: ColumnType<RecordType> = {
       key: '__sort__',
       width: sortHandleColumnWidth,
       align: 'center',
       render: () => <SortHandle />,
     };
-    return [handleColumn, ...baseColumns];
-  }, [columns, showStandaloneHandleColumn, sortHandleColumnWidth]);
+    return [handleColumn, ...styledColumns];
+  }, [columns, defaultColumnContentClassName, showStandaloneHandleColumn, sortHandleColumnWidth]);
 
   const augmentedRowSelection = useMemo(() => {
     if (!rowSelection) return rowSelection;