feat: onRowAppended and onColumnAppended (#1062)

* feat: onRowAppended and onColumnAppended

* fix onRowAppended spelling

* fix: fallback to updateSelectedCell if onRowAppended or onColumnAppended not defined

* fix spelling in changelog

* docs: appendColumn and onColumnAppended

Author: BrianHung

packages/core/API.md

@@ -467,7 +467,7 @@ Want to add more vertical space to the vertical scrolling area? Simply set the d
 
 ### **Arbitrary insertion into Grid**
 
-The `onRowAppeneded` callback has been augmented to allow returning the index of the blank row that has been inserted into the data model. This allows for more varied insertion stories. Shout out to @pzcfg!
+The `onRowAppended` callback has been augmented to allow returning the index of the blank row that has been inserted into the data model. This allows for more varied insertion stories. Shout out to @pzcfg!
 
 ### **ScrollTo now supported**
 

packages/core/CHANGELOG.md

@@ -218,6 +218,10 @@ export interface DataEditorProps extends Props, Pick<DataGridSearchProps, "image
      * @group Editing
      */
     readonly onRowAppended?: () => Promise<"top" | "bottom" | number | undefined> | void;
+    /** Emitted whenever a column append operation is requested. Append location can be set in callback.
+     * @group Editing
+     */
+    readonly onColumnAppended?: () => Promise<"left" | "right" | number | undefined> | void;
     /** Emitted when a column header should show a context menu. Usually right click.
      * @group Events
      */
@@ -705,6 +709,12 @@ export interface DataEditorRef {
      * @returns A promise which waits for the append to complete.
      */
     appendRow: (col: number, openOverlay?: boolean, behavior?: ScrollBehavior) => Promise<void>;
+    /**
+     * Programatically appends a column.
+     * @param row The row index to focus in the new column.
+     * @returns A promise which waits for the append to complete.
+     */
+    appendColumn: (row: number, openOverlay?: boolean) => Promise<void>;
     /**
      * Triggers cells to redraw.
      */
@@ -744,7 +754,7 @@ const loadingCell: GridCell = {
     allowOverlay: false,
 };
 
-const emptyGridSelection: GridSelection = {
+export const emptyGridSelection: GridSelection = {
     columns: CompactSelection.empty(),
     rows: CompactSelection.empty(),
     current: undefined,
@@ -808,6 +818,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         keybindings: keybindingsIn,
         editOnType = true,
         onRowAppended,
+        onColumnAppended,
         onColumnMoved,
         validateCell: validateCellIn,
         highlightRegions: highlightRegionsIn,
@@ -929,7 +940,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const rowMarkerWidth = rowMarkerWidthRaw ?? (rowsIn > 10_000 ? 48 : rowsIn > 1000 ? 44 : rowsIn > 100 ? 36 : 32);
     const hasRowMarkers = rowMarkers !== "none";
     const rowMarkerOffset = hasRowMarkers ? 1 : 0;
-    const showTrailingBlankRow = onRowAppended !== undefined;
+    const showTrailingBlankRow = trailingRowOptions !== undefined;
     const lastRowSticky = trailingRowOptions?.sticky === true;
 
     const [showSearchInner, setShowSearchInner] = React.useState(false);
@@ -1649,10 +1660,16 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
 
     const focusCallback = React.useRef(focusOnRowFromTrailingBlankRow);
     const getCellContentRef = React.useRef(getCellContent);
-    const rowsRef = React.useRef(rows);
+
     focusCallback.current = focusOnRowFromTrailingBlankRow;
     getCellContentRef.current = getCellContent;
+
+    const rowsRef = React.useRef(rows);
     rowsRef.current = rows;
+
+    const colsRef = React.useRef(mangledCols.length);
+    colsRef.current = mangledCols.length;
+
     const appendRow = React.useCallback(
         async (col: number, openOverlay: boolean = true, behavior?: ScrollBehavior): Promise<void> => {
             const c = mangledCols[col];
@@ -1710,6 +1727,57 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         [mangledCols, onRowAppended, rowMarkerOffset, rows, setCurrent]
     );
 
+    const appendColumn = React.useCallback(
+        async (row: number, openOverlay: boolean = true): Promise<void> => {
+            const appendResult = onColumnAppended?.();
+
+            let r: "left" | "right" | number | undefined = undefined;
+            let right = true;
+            if (appendResult !== undefined) {
+                r = await appendResult;
+                if (r === "left") right = false;
+                if (typeof r === "number") right = false;
+            }
+
+            let backoff = 0;
+            const doFocus = () => {
+                if (colsRef.current <= mangledCols.length) {
+                    if (backoff < 500) {
+                        window.setTimeout(doFocus, backoff);
+                    }
+                    backoff = 50 + backoff * 2;
+                    return;
+                }
+
+                const col = typeof r === "number" ? r : right ? mangledCols.length : 0;
+                scrollTo(col - rowMarkerOffset, row);
+                setCurrent(
+                    {
+                        cell: [col, row],
+                        range: {
+                            x: col,
+                            y: row,
+                            width: 1,
+                            height: 1,
+                        },
+                    },
+                    false,
+                    false,
+                    "edit"
+                );
+
+                const cell = getCellContentRef.current([col - rowMarkerOffset, row]);
+                if (cell.allowOverlay && isReadWriteCell(cell) && cell.readonly !== true && openOverlay) {
+                    window.setTimeout(() => {
+                        focusCallback.current(col, row);
+                    }, 0);
+                }
+            };
+            doFocus();
+        },
+        [mangledCols, onColumnAppended, rowMarkerOffset, scrollTo, setCurrent]
+    );
+
     const getCustomNewRowTargetColumn = React.useCallback(
         (col: number): number | undefined => {
             const customTargetColumn =
@@ -2991,14 +3059,29 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
 
             const [movX, movY] = movement;
             if (gridSelection.current !== undefined && (movX !== 0 || movY !== 0)) {
-                const isEditingTrailingRow =
-                    gridSelection.current.cell[1] === mangledRows - 1 && newValue !== undefined;
-                updateSelectedCell(
-                    clamp(gridSelection.current.cell[0] + movX, 0, mangledCols.length - 1),
-                    clamp(gridSelection.current.cell[1] + movY, 0, mangledRows - 1),
-                    isEditingTrailingRow,
-                    false
-                );
+                const isEditingLastRow = gridSelection.current.cell[1] === mangledRows - 1 && newValue !== undefined;
+                const isEditingLastCol =
+                    gridSelection.current.cell[0] === mangledCols.length - 1 && newValue !== undefined;
+                let updateSelected = true;
+                if (isEditingLastRow && movY === 1 && onRowAppended !== undefined) {
+                    updateSelected = false;
+                    const col = gridSelection.current.cell[0] + movX;
+                    const customTargetColumn = getCustomNewRowTargetColumn(col);
+                    void appendRow(customTargetColumn ?? col, false);
+                }
+                if (isEditingLastCol && movX === 1 && onColumnAppended !== undefined) {
+                    updateSelected = false;
+                    const row = gridSelection.current.cell[1] + movY;
+                    void appendColumn(row, false);
+                }
+                if (updateSelected) {
+                    updateSelectedCell(
+                        clamp(gridSelection.current.cell[0] + movX, 0, mangledCols.length - 1),
+                        clamp(gridSelection.current.cell[1] + movY, 0, mangledRows - 1),
+                        isEditingLastRow,
+                        false
+                    );
+                }
             }
             onFinishedEditing?.(newValue, movement);
         },
@@ -3011,6 +3094,11 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
             mangledRows,
             updateSelectedCell,
             mangledCols.length,
+            appendRow,
+            appendColumn,
+            onRowAppended,
+            onColumnAppended,
+            getCustomNewRowTargetColumn,
         ]
     );
 
@@ -3862,6 +3950,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
         forwardedRef,
         () => ({
             appendRow: (col: number, openOverlay?: boolean) => appendRow(col + rowMarkerOffset, openOverlay),
+            appendColumn: (row: number, openOverlay?: boolean) => appendColumn(row, openOverlay),
             updateCells: damageList => {
                 if (rowMarkerOffset !== 0) {
                     damageList = damageList.map(x => ({ cell: [x.cell[0] + rowMarkerOffset, x.cell[1]] }));
@@ -3971,7 +4060,17 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                 };
             },
         }),
-        [appendRow, normalSizeColumn, scrollRef, onCopy, onKeyDown, onPasteInternal, rowMarkerOffset, scrollTo]
+        [
+            appendRow,
+            appendColumn,
+            normalSizeColumn,
+            scrollRef,
+            onCopy,
+            onKeyDown,
+            onPasteInternal,
+            rowMarkerOffset,
+            scrollTo,
+        ]
     );
 
     const [selCol, selRow] = currentCell ?? [];

packages/core/src/data-editor/data-editor.tsx

@@ -45,6 +45,7 @@ export { useColumnSizer } from "./data-editor/use-column-sizer.js";
 export type { DataEditorRef } from "./data-editor/data-editor.js";
 export { DataEditorAll as DataEditor } from "./data-editor-all.js";
 export type { DataEditorAllProps as DataEditorProps } from "./data-editor-all.js";
+export { emptyGridSelection } from "./data-editor/data-editor.js";
 
 export { DataEditor as DataEditorCore } from "./data-editor/data-editor.js";
 export type { DataEditorProps as DataEditorCoreProps } from "./data-editor/data-editor.js";

packages/core/src/index.ts

@@ -199,7 +199,7 @@ const EventedDataEditor = React.forwardRef<DataEditorRef, DataEditorProps>((p, r
         [p]
     );
 
-    const onRowAppened = React.useCallback(() => {
+    const onRowAppended = React.useCallback(() => {
         setExtraRows(cv => cv + 1);
         void p.onRowAppended?.();
     }, [p]);
@@ -211,7 +211,7 @@ const EventedDataEditor = React.forwardRef<DataEditorRef, DataEditorProps>((p, r
             gridSelection={sel}
             onGridSelectionChange={onGridSelectionChange}
             rows={p.rows + extraRows}
-            onRowAppended={p.onRowAppended === undefined ? undefined : onRowAppened}
+            onRowAppended={p.onRowAppended === undefined ? undefined : onRowAppended}
         />
     );
 });

packages/core/test/data-editor-input.test.tsx

@@ -2962,6 +2962,42 @@ describe("data-editor", () => {
         expect(Element.prototype.scrollTo).toHaveBeenCalled();
     });
 
+    test("appendRow ref without trailing row", async () => {
+        const spy = vi.fn();
+        const ref = React.createRef<DataEditorRef>();
+        vi.useFakeTimers();
+        render(
+            <EventedDataEditor {...basicProps} onRowAppended={spy} ref={ref} trailingRowOptions={undefined} />,
+            {
+                wrapper: Context,
+            }
+        );
+        prep();
+
+        await act(async () => {
+            await ref.current?.appendRow(1, false);
+        });
+
+        expect(spy).toHaveBeenCalled();
+    });
+
+    test("appendColumn ref", async () => {
+        const spy = vi.fn();
+        const ref = React.createRef<DataEditorRef>();
+        vi.useFakeTimers();
+        render(
+            <EventedDataEditor {...basicProps} onColumnAppended={spy} ref={ref} trailingRowOptions={undefined} />,
+            { wrapper: Context }
+        );
+        prep();
+
+        await act(async () => {
+            await ref.current?.appendColumn(0, false);
+        });
+
+        expect(spy).toHaveBeenCalled();
+    });
+
     test("Click row marker", async () => {
         const spy = vi.fn();
         vi.useFakeTimers();

packages/core/test/data-editor.test.tsx

@@ -251,6 +251,7 @@ export const Context: React.FC = p => {
 export const EventedDataEditor = React.forwardRef<DataEditorRef, DataEditorProps>((p, ref) => {
     const [sel, setSel] = React.useState<GridSelection | undefined>(p.gridSelection);
     const [extraRows, setExtraRows] = React.useState(0);
+    const [extraCols, setExtraCols] = React.useState(0);
 
     const onGridSelectionChange = React.useCallback(
         (s: GridSelection) => {
@@ -260,19 +261,40 @@ export const EventedDataEditor = React.forwardRef<DataEditorRef, DataEditorProps
         [p]
     );
 
-    const onRowAppened = React.useCallback(() => {
+    const onRowAppended = React.useCallback(() => {
         setExtraRows(cv => cv + 1);
         void p.onRowAppended?.();
     }, [p]);
 
+    const onColumnAppended = React.useCallback(() => {
+        setExtraCols(cv => cv + 1);
+        void p.onColumnAppended?.();
+    }, [p]);
+
+    const columns = React.useMemo(() => p.columns.concat(Array.from({ length: extraCols }, (_, i) => ({ title: `Z${i}`, width: 50 }))), [p.columns, extraCols]);
+
+    const getCellContent = React.useCallback(
+        (cell: Item): GridCell => {
+            const [c] = cell;
+            if (c >= p.columns.length) {
+                return { kind: GridCellKind.Text, allowOverlay: true, data: "", displayData: "" };
+            }
+            return p.getCellContent(cell);
+        },
+        [p, p.getCellContent]
+    );
+
     return (
         <DataEditor
             {...p}
+            columns={columns}
+            getCellContent={getCellContent}
             ref={ref}
             gridSelection={sel}
             onGridSelectionChange={onGridSelectionChange}
             rows={p.rows + extraRows}
-            onRowAppended={p.onRowAppended === undefined ? undefined : onRowAppened}
+            onRowAppended={p.onRowAppended === undefined ? undefined : onRowAppended}
+            onColumnAppended={p.onColumnAppended === undefined ? undefined : onColumnAppended}
         />
     );
 });