@firecms/core 3.0.1 → 3.1.0-canary.9e89e98

package/src/components/VirtualTable/VirtualTable.tsx

@@ -21,6 +21,16 @@ import { VirtualTableRow } from "./VirtualTableRow";
 import { VirtualTableCell } from "./VirtualTableCell";
 import { AssignmentIcon, CenteredView, cls, Typography } from "@firecms/ui";
 import { useDebounceCallback } from "../common/useDebouncedCallback";
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    DragStartEvent,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
@@ -56,7 +66,7 @@ const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
                                         minHeight: "100%",
                                         position: "relative"
                                     }}>
-                                    <VirtualTableHeaderRow {...virtualTableProps}/>
+                                    <VirtualTableHeaderRow {...virtualTableProps} />
                                     {!customView && children}
                                 </div>
 
@@ -115,6 +125,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              endAdornment,
                                                              AddColumnComponent,
                                                              initialScroll = 0,
+                                                             onColumnsOrderChange,
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -127,6 +138,44 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const debouncedScroll = useDebounceCallback(onScrollProp, 200);
 
+        // Drag and drop state
+        const [draggingColumnId, setDraggingColumnId] = useState<string | null>(null);
+
+        const sensors = useSensors(
+            useSensor(PointerSensor, {
+                activationConstraint: {
+                    distance: 5,
+                },
+            })
+        );
+
+        const handleDragStart = useCallback((event: DragStartEvent) => {
+            setDraggingColumnId(event.active.id as string);
+        }, []);
+
+        const handleDragEnd = useCallback((event: DragEndEvent) => {
+            const {
+                active,
+                over
+            } = event;
+            setDraggingColumnId(null);
+
+            if (over && active.id !== over.id && onColumnsOrderChange) {
+                const oldIndex = columns.findIndex((col) => col.key === active.id);
+                const newIndex = columns.findIndex((col) => col.key === over.id);
+
+                if (oldIndex !== -1 && newIndex !== -1) {
+                    const newColumns = arrayMove(columns, oldIndex, newIndex);
+                    setColumns(newColumns);
+                    onColumnsOrderChange(newColumns);
+                }
+            }
+        }, [columns, onColumnsOrderChange]);
+
+        const handleDragCancel = useCallback(() => {
+            setDraggingColumnId(null);
+        }, []);
+
         // Set initial scroll position
         useEffect(() => {
             if (tableRef.current && initialScroll) {
@@ -315,14 +364,28 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             createFilterField,
             rowClassName,
             endAdornment,
-            AddColumnComponent
-        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent]);
-
-        return (
+            AddColumnComponent,
+            onColumnsOrderChange: onColumnsOrderChange ? (newColumns: VirtualTableColumn[]) => {
+                setColumns(newColumns);
+                onColumnsOrderChange(newColumns);
+            } : undefined,
+            draggingColumnId
+        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId]);
+
+        // Get sortable column keys (excluding frozen columns)
+        const sortableColumnKeys = columns
+            .filter(col => !col.frozen)
+            .map(col => col.key);
+
+        const tableContent = (
             <div
                 ref={measureRef}
                 style={style}
-                className={cls("h-full w-full", className)}>
+                className={cls(
+                    "h-full w-full",
+                    className,
+                    draggingColumnId && "overflow-hidden"
+                )}>
                 <VirtualListContext.Provider
                     value={virtualListController}>
 
@@ -332,16 +395,89 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         width={bounds.width}
                         height={bounds.height}
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
-                        onScroll={onScroll}
+                        onScroll={draggingColumnId ? undefined : onScroll}
                         includeAddColumn={Boolean(AddColumnComponent)}
                         itemSize={rowHeight}/>
 
                 </VirtualListContext.Provider>
             </div>
         );
+
+        // Wrap with DndContext if column reorder is enabled
+        if (onColumnsOrderChange) {
+            return (
+                <DndContext
+                    sensors={sensors}
+                    collisionDetection={closestCenter}
+                    onDragStart={handleDragStart}
+                    onDragEnd={handleDragEnd}
+                    onDragCancel={handleDragCancel}
+                >
+                    <SortableContext
+                        items={sortableColumnKeys}
+                        strategy={horizontalListSortingStrategy}
+                    >
+                        {tableContent}
+                    </SortableContext>
+                </DndContext>
+            );
+        }
+
+        return tableContent;
     },
     equal
 );
+// Wrapper that applies sortable transforms to cells
+const SortableCellWrapper = ({
+                                 columnKey,
+                                 width,
+                                 isDragging,
+                                 isDraggable,
+                                 frozen,
+                                 children
+                             }: {
+    columnKey: string;
+    width: number;
+    isDragging: boolean;
+    isDraggable: boolean;
+    frozen?: boolean;
+    children: React.ReactNode;
+}) => {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({
+        id: columnKey,
+        disabled: !isDraggable || frozen
+    });
+
+    const style = {
+        // Only use translate, ignore any scale transforms
+        transform: transform ? `translateX(${transform.x}px)` : undefined,
+        // Don't transition the dragged item - only other items should animate
+        transition: isDragging ? undefined : transition,
+        minWidth: width,
+        maxWidth: width,
+        width: width,
+    };
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            className={cls(
+                "flex-shrink-0",
+                frozen && "sticky left-0 z-10 bg-white dark:bg-surface-950"
+            )}
+            {...attributes}
+        >
+            {children}
+        </div>
+    );
+};
 
 function MemoizedList({
                           outerRef,
@@ -356,7 +492,7 @@ function MemoizedList({
     width: number;
     height: number;
     itemCount: number;
-    onScroll: (params: {
+    onScroll?: (params: {
         scrollDirection: "forward" | "backward",
         scrollOffset: number,
         scrollUpdateWasRequested: boolean;
@@ -378,7 +514,9 @@ function MemoizedList({
                   cellRenderer,
                   hoverRow,
                   rowClassName,
-                  endAdornment
+                  endAdornment,
+                  draggingColumnId,
+                  onColumnsOrderChange
               }) => {
 
                 if (endAdornment && index === (data ?? []).length) {
@@ -411,16 +549,29 @@ function MemoizedList({
 
                         {columns.map((column: VirtualTableColumn, columnIndex: number) => {
                             const cellData = rowData && rowData[column.key];
-                            return <VirtualTableCell
-                                key={`cell_${column.key}`}
-                                dataKey={column.key}
-                                cellRenderer={cellRenderer}
-                                column={column}
-                                columns={columns}
-                                rowData={rowData}
-                                cellData={cellData}
-                                rowIndex={index}
-                                columnIndex={columnIndex}/>;
+                            const isDragging = draggingColumnId === column.key;
+                            const isDraggable = !column.frozen && !!onColumnsOrderChange;
+
+                            return (
+                                <SortableCellWrapper
+                                    key={`cell_wrapper_${column.key}`}
+                                    columnKey={column.key}
+                                    width={column.width}
+                                    isDragging={isDragging}
+                                    isDraggable={isDraggable}
+                                    frozen={column.frozen}
+                                >
+                                    <VirtualTableCell
+                                        dataKey={column.key}
+                                        cellRenderer={cellRenderer}
+                                        column={column}
+                                        columns={columns}
+                                        rowData={rowData}
+                                        cellData={cellData}
+                                        rowIndex={index}
+                                        columnIndex={columnIndex}/>
+                                </SortableCellWrapper>
+                            );
                         })}
 
                         {includeAddColumn && <div className={"w-20"}/>}

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -13,6 +13,13 @@ type VirtualTableCellProps<T extends any> = {
     rowIndex: any;
     columnIndex: number;
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
+    // Sortable props
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 };
 
 export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
@@ -27,7 +34,13 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
                 column: props.column,
                 columns: props.columns,
                 columnIndex: props.columnIndex,
-                width: props.column.width
+                width: props.column.width,
+                sortableNodeRef: props.sortableNodeRef,
+                sortableStyle: props.sortableStyle,
+                sortableAttributes: props.sortableAttributes,
+                isDragging: props.isDragging,
+                isDraggable: props.isDraggable,
+                frozen: props.frozen
             } as CellRendererParams<T>
         );
     },
@@ -37,6 +50,9 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
             equal(a.cellData, b.cellData) &&
             equal(a.rowIndex, b.rowIndex) &&
             equal(a.cellRenderer, b.cellRenderer) &&
-            equal(a.columnIndex, b.columnIndex)
+            equal(a.columnIndex, b.columnIndex) &&
+            a.isDragging === b.isDragging &&
+            a.isDraggable === b.isDraggable &&
+            a.frozen === b.frozen
     }
 );

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -45,6 +45,8 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
+    isDragging?: boolean;
+    isDraggable?: boolean;
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -59,7 +61,9 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                                                    column,
                                                                    onClickResizeColumn,
                                                                    createFilterField,
-                                                                   AdditionalHeaderWidget
+                                                                   AdditionalHeaderWidget,
+                                                                   isDragging,
+                                                                   isDraggable
                                                                }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -85,14 +89,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center",
+                        isDragging
+                            ? "bg-primary-bg dark:bg-primary-bg-dark"
+                            : "bg-surface-50 dark:bg-surface-900",
                         "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
-                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
-                        column.frozen ? "sticky left-0 z-10" : "relative z-0"
+                        !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50",
+                        column.frozen ? "sticky left-0 z-10" : "relative z-0",
+                        isDraggable && "cursor-grab"
                     )}
                     style={{
-                        // transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        // fontSize: "0.750rem",
                         left: column.frozen ? 0 : undefined,
                         minWidth: column.width,
                         maxWidth: column.width
@@ -179,11 +185,17 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.resizable && <div
                         ref={resizeHandleRef}
+                        data-no-dnd="true"
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
                             hovered && "bg-surface-300 dark:bg-surface-700"
                         )}
-                        onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
+                        onPointerDown={(e) => {
+                            e.stopPropagation();
+                            if (onClickResizeColumn) {
+                                onClickResizeColumn(columnIndex, column);
+                            }
+                        }}
                     />}
                 </div>
 
@@ -243,7 +255,7 @@ function FilterForm<M>({
                 className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
             </div>
-            {filterField && <div className="m-4">
+            {filterField && <div className="m-4 w-[400px]">
                 {filterField}
             </div>}
             <div className="flex justify-end m-4">
@@ -251,13 +263,10 @@ function FilterForm<M>({
                     className="mr-4"
                     disabled={!filterIsSet}
                     variant={"text"}
-                    color="primary"
                     type="reset"
                     aria-label="filter clear"
                     onClick={reset}>Clear</Button>
                 <Button
-                    variant="outlined"
-                    color="primary"
                     type="submit">Filter</Button>
             </div>
         </form>

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -1,25 +1,132 @@
-import React, { createRef, useCallback, useEffect, useState } from "react";
+import React, { createRef, useCallback, useEffect, useMemo, useState } from "react";
 
 import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { VirtualTableHeader } from "./VirtualTableHeader";
 import { VirtualTableContextProps } from "./types";
 import { cls, defaultBorderMixin } from "@firecms/ui";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// Sortable column header wrapper
+const SortableColumnHeader = ({
+    column,
+    columnIndex,
+    columnRefs,
+    isResizing,
+    onFilterUpdate,
+    filter,
+    sortByProperty,
+    currentSort,
+    onColumnSort,
+    onClickResizeColumn,
+    createFilterField,
+    isDragging,
+    isDraggable
+}: {
+    column: VirtualTableColumn;
+    columnIndex: number;
+    columnRefs: React.RefObject<HTMLDivElement>[];
+    isResizing: number;
+    onFilterUpdate: any;
+    filter: [VirtualTableWhereFilterOp, any] | undefined;
+    sortByProperty: string | undefined;
+    currentSort: "asc" | "desc" | undefined;
+    onColumnSort: any;
+    onClickResizeColumn: (index: number) => void;
+    createFilterField: any;
+    isDragging: boolean;
+    isDraggable: boolean;
+}) => {
+    const [isPressing, setIsPressing] = useState(false);
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({
+        id: column.key,
+        disabled: !isDraggable || column.frozen
+    });
+
+    const style = {
+        // Only use translate, ignore any scale transforms
+        transform: transform ? `translateX(${transform.x}px)` : undefined,
+        // Don't transition the dragged item - only other items should animate
+        transition: isDragging ? undefined : transition,
+        minWidth: column.width,
+        maxWidth: column.width,
+        width: column.width,
+    };
+
+    // Combine our press handlers with dnd-kit listeners
+    const combinedListeners = isDraggable ? {
+        ...listeners,
+        onPointerDown: (e: React.PointerEvent) => {
+            setIsPressing(true);
+            listeners?.onPointerDown?.(e);
+        },
+        onPointerUp: () => setIsPressing(false),
+        onPointerCancel: () => setIsPressing(false),
+    } : {};
+
+    // Reset pressing state when drag ends
+    React.useEffect(() => {
+        if (!isDragging) {
+            setIsPressing(false);
+        }
+    }, [isDragging]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            className={cls(
+                "flex-shrink-0 h-full",
+                column.frozen && "sticky left-0 z-10"
+            )}
+            {...attributes}
+            {...combinedListeners}
+        >
+            <VirtualTableHeader
+                resizeHandleRef={columnRefs[columnIndex]}
+                columnIndex={columnIndex}
+                isResizingIndex={isResizing}
+                onFilterUpdate={onFilterUpdate}
+                filter={filter}
+                sort={sortByProperty === column.key ? currentSort : undefined}
+                onColumnSort={onColumnSort}
+                onClickResizeColumn={onClickResizeColumn}
+                column={column}
+                createFilterField={createFilterField}
+                AdditionalHeaderWidget={column.AdditionalHeaderWidget}
+                isDragging={isDragging || isPressing}
+                isDraggable={isDraggable} />
+        </div>
+    );
+};
 
 export const VirtualTableHeaderRow = ({
-                                          columns,
-                                          currentSort,
-                                          onColumnSort,
-                                          onFilterUpdate,
-                                          sortByProperty,
-                                          filter,
-                                          onColumnResize,
-                                          onColumnResizeEnd,
-                                          createFilterField,
-                                          AddColumnComponent
-                                      }: VirtualTableContextProps<any>) => {
-
-    const columnRefs = columns.map(() => createRef<HTMLDivElement>());
+    columns,
+    currentSort,
+    onColumnSort,
+    onFilterUpdate,
+    sortByProperty,
+    filter,
+    onColumnResize,
+    onColumnResizeEnd,
+    createFilterField,
+    AddColumnComponent,
+    onColumnsOrderChange,
+    data,
+    cellRenderer: CellRenderer,
+    rowHeight = 54,
+    draggingColumnId
+}: VirtualTableContextProps<any>) => {
+
+    const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
     const [isResizing, setIsResizing] = useState(-1);
 
     const adjustWidthColumn = useCallback((index: number, width: number, end: boolean) => {
@@ -99,33 +206,42 @@ export const VirtualTableHeaderRow = ({
     }, [setCursorDocument]);
 
     return (
-        <div
-            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
-            {columns.map((c, columnIndex) => {
-                const column = columns[columnIndex];
-
-                const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
-                    column && filter && filter[column.key]
-                        ? filter[column.key]
-                        : undefined;
-                return <ErrorBoundary key={"header_" + column.key}>
-                    <VirtualTableHeader
-                        resizeHandleRef={columnRefs[columnIndex]}
-                        columnIndex={columnIndex}
-                        isResizingIndex={isResizing}
-                        onFilterUpdate={onFilterUpdate}
-                        filter={filterForThisProperty}
-                        sort={sortByProperty === column.key ? currentSort : undefined}
-                        onColumnSort={onColumnSort}
-                        onClickResizeColumn={onClickResizeColumn}
-                        column={column}
-                        createFilterField={createFilterField}
-                        AdditionalHeaderWidget={column.AdditionalHeaderWidget}/>
-                </ErrorBoundary>;
-            })}
-
-            {AddColumnComponent && <AddColumnComponent/>}
-
-        </div>
+        <>
+            <div
+                className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
+                {columns.map((column, columnIndex) => {
+                    const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
+                        column && filter && filter[column.key]
+                            ? filter[column.key]
+                            : undefined;
+
+                    const isDraggable = !column.frozen && !!onColumnsOrderChange;
+                    const isDragging = draggingColumnId === column.key;
+
+                    return (
+                        <ErrorBoundary key={"header_" + column.key}>
+                            <SortableColumnHeader
+                                column={column}
+                                columnIndex={columnIndex}
+                                columnRefs={columnRefs}
+                                isResizing={isResizing}
+                                onFilterUpdate={onFilterUpdate}
+                                filter={filterForThisProperty}
+                                sortByProperty={sortByProperty}
+                                currentSort={currentSort}
+                                onColumnSort={onColumnSort}
+                                onClickResizeColumn={onClickResizeColumn}
+                                createFilterField={createFilterField}
+                                isDragging={isDragging}
+                                isDraggable={isDraggable}
+                            />
+                        </ErrorBoundary>
+                    );
+                })}
+
+                {AddColumnComponent && <AddColumnComponent />}
+
+            </div>
+        </>
     );
 };

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -38,7 +38,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      * @param sortBy
      */
     checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>,
-                              sortBy?: [string, "asc" | "desc"]) => boolean;
+        sortBy?: [string, "asc" | "desc"]) => boolean;
 
     /**
      * A callback function when scrolling the table to near the end
@@ -162,6 +162,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     initialScroll?: number;
 
+    /**
+     * Callback when columns are reordered via drag-and-drop.
+     * @param columns The new column order
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -172,6 +178,13 @@ export type CellRendererParams<T = any> = {
     rowIndex: number;
     width: number;
     isScrolling?: boolean;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 };
 
 /**

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -6,6 +6,7 @@ export function VirtualTableDateField(props: {
     name: string;
     error: Error | undefined;
     mode?: "date" | "date_time";
+    timezone?: string;
     internalValue: Date | undefined | null;
     updateValue: (newValue: (Date | null)) => void;
     focused: boolean;
@@ -18,6 +19,7 @@ export function VirtualTableDateField(props: {
         disabled,
         error,
         mode,
+        timezone,
         internalValue,
         updateValue
     } = props;
@@ -31,6 +33,7 @@ export function VirtualTableDateField(props: {
             inputClassName={cls("w-full h-full", focusedDisabled)}
             className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
+            timezone={timezone}
             locale={locale}
         />
     );