@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/server-side-data.stories.tsx

@@ -0,0 +1,219 @@
+import React from "react";
+import {
+    CompactSelection,
+    type EditableGridCell,
+    type GridCell,
+    GridCellKind,
+    type GridColumn,
+    type Rectangle,
+    type Item,
+    type CellArray,
+} from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import { DataEditorAll as DataEditor, type DataEditorAllProps as DataEditorProps } from "../../data-editor-all.js";
+import range from "lodash/range.js";
+import chunk from "lodash/chunk.js";
+import type { DataEditorRef } from "../../data-editor/data-editor.js";
+import { BeautifulWrapper } from "../../data-editor/stories/utils.js";
+import { Description } from "../doc-wrapper.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+type RowCallback<T> = (range: Item) => Promise<readonly T[]>;
+type RowToCell<T> = (row: T, col: number) => GridCell;
+type RowEditedCallback<T> = (cell: Item, newVal: EditableGridCell, rowData: T) => T | undefined;
+function useAsyncData<TRowType>(
+    pageSize: number,
+    maxConcurrency: number,
+    getRowData: RowCallback<TRowType>,
+    toCell: RowToCell<TRowType>,
+    onEdited: RowEditedCallback<TRowType>,
+    gridRef: React.MutableRefObject<DataEditorRef | null>
+): Pick<DataEditorProps, "getCellContent" | "onVisibleRegionChanged" | "onCellEdited" | "getCellsForSelection"> {
+    pageSize = Math.max(pageSize, 1);
+    const loadingRef = React.useRef(CompactSelection.empty());
+    const dataRef = React.useRef<TRowType[]>([]);
+
+    const [visiblePages, setVisiblePages] = React.useState<Rectangle>({ x: 0, y: 0, width: 0, height: 0 });
+    const visiblePagesRef = React.useRef(visiblePages);
+    visiblePagesRef.current = visiblePages;
+
+    const onVisibleRegionChanged: NonNullable<DataEditorProps["onVisibleRegionChanged"]> = React.useCallback(r => {
+        setVisiblePages(cv => {
+            if (r.x === cv.x && r.y === cv.y && r.width === cv.width && r.height === cv.height) return cv;
+            return r;
+        });
+    }, []);
+
+    const getCellContent = React.useCallback<DataEditorProps["getCellContent"]>(
+        cell => {
+            const [col, row] = cell;
+            const rowData: TRowType | undefined = dataRef.current[row];
+            if (rowData !== undefined) {
+                return toCell(rowData, col);
+            }
+            return {
+                kind: GridCellKind.Loading,
+                allowOverlay: false,
+            };
+        },
+        [toCell]
+    );
+
+    const loadPage = React.useCallback(
+        async (page: number) => {
+            loadingRef.current = loadingRef.current.add(page);
+            const startIndex = page * pageSize;
+            const d = await getRowData([startIndex, (page + 1) * pageSize]);
+
+            const vr = visiblePagesRef.current;
+
+            const damageList: { cell: [number, number] }[] = [];
+            const data = dataRef.current;
+            for (const [i, element] of d.entries()) {
+                data[i + startIndex] = element;
+                for (let col = vr.x; col <= vr.x + vr.width; col++) {
+                    damageList.push({
+                        cell: [col, i + startIndex],
+                    });
+                }
+            }
+            gridRef.current?.updateCells(damageList);
+        },
+        [getRowData, gridRef, pageSize]
+    );
+
+    const getCellsForSelection = React.useCallback(
+        (r: Rectangle): (() => Promise<CellArray>) => {
+            return async () => {
+                const firstPage = Math.max(0, Math.floor(r.y / pageSize));
+                const lastPage = Math.floor((r.y + r.height) / pageSize);
+
+                for (const pageChunk of chunk(
+                    range(firstPage, lastPage + 1).filter(i => !loadingRef.current.hasIndex(i)),
+                    maxConcurrency
+                )) {
+                    await Promise.allSettled(pageChunk.map(loadPage));
+                }
+
+                const result: GridCell[][] = [];
+
+                for (let y = r.y; y < r.y + r.height; y++) {
+                    const row: GridCell[] = [];
+                    for (let x = r.x; x < r.x + r.width; x++) {
+                        row.push(getCellContent([x, y]));
+                    }
+                    result.push(row);
+                }
+
+                return result;
+            };
+        },
+        [getCellContent, loadPage, maxConcurrency, pageSize]
+    );
+
+    React.useEffect(() => {
+        const r = visiblePages;
+        const firstPage = Math.max(0, Math.floor((r.y - pageSize / 2) / pageSize));
+        const lastPage = Math.floor((r.y + r.height + pageSize / 2) / pageSize);
+        for (const page of range(firstPage, lastPage + 1)) {
+            if (loadingRef.current.hasIndex(page)) continue;
+            void loadPage(page);
+        }
+    }, [loadPage, pageSize, visiblePages]);
+
+    const onCellEdited = React.useCallback(
+        (cell: Item, newVal: EditableGridCell) => {
+            const [, row] = cell;
+            const current = dataRef.current[row];
+            if (current === undefined) return;
+
+            const result = onEdited(cell, newVal, current);
+            if (result !== undefined) {
+                dataRef.current[row] = result;
+            }
+        },
+        [onEdited]
+    );
+
+    return {
+        getCellContent,
+        onVisibleRegionChanged,
+        onCellEdited,
+        getCellsForSelection,
+    };
+}
+
+export const ServerSideData: React.VFC = () => {
+    const ref = React.useRef<DataEditorRef | null>(null);
+
+    const getRowData = React.useCallback(async (r: Item) => {
+        await new Promise(res => setTimeout(res, 300));
+        return range(r[0], r[1]).map(rowIndex => [`1, ${rowIndex}`, `2, ${rowIndex}`]);
+    }, []);
+
+    const columns = React.useMemo<readonly GridColumn[]>(() => {
+        return [
+            {
+                title: "A",
+                width: 150,
+            },
+            {
+                title: "B",
+                width: 200,
+            },
+        ];
+    }, []);
+
+    const args = useAsyncData<string[]>(
+        50,
+        5,
+        getRowData,
+        React.useCallback(
+            (rowData, col) => ({
+                kind: GridCellKind.Text,
+                data: rowData[col],
+                allowOverlay: true,
+                displayData: rowData[col],
+            }),
+            []
+        ),
+        React.useCallback((cell, newVal, rowData) => {
+            const [col] = cell;
+            if (newVal.kind !== GridCellKind.Text) return undefined;
+            const newRow: string[] = [...rowData];
+            newRow[col] = newVal.data;
+            return newRow;
+        }, []),
+        ref
+    );
+
+    return (
+        <BeautifulWrapper
+            title="Server Side Data"
+            description={
+                <Description>
+                    Glide data grid is fully ready to handle your server side data needs. This example condenses the
+                    implementation into a single custom hook and loads in pages of 50. We are using 300ms sleeps, but
+                    network transactions should work the same.
+                </Description>
+            }>
+            <DataEditor ref={ref} {...args} width="100%" columns={columns} rows={3000} rowMarkers="both" />
+        </BeautifulWrapper>
+    );
+};
+(ServerSideData as any).parameters = {
+    options: {
+        showPanel: false,
+    },
+};

package/src/docs/examples/shadow-dom.stories.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import { createRoot } from "react-dom/client";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Shadow DOM"
+                    description={
+                        <Description>
+                            Columns in the data grid may be grouped by setting their <PropName>group</PropName>{" "}
+                            property.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ShadowDOM: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(20, false, false);
+
+    return (
+        <ShadowDOMWrapper
+            render={() => (
+                <DataEditor
+                    {...defaultProps}
+                    getCellContent={getCellContent}
+                    columns={cols}
+                    rows={1000}
+                    height={"100%"}
+                    rowMarkers="both"
+                />
+            )}
+        />
+    );
+};
+
+const copyStylesToShadowRoot = (shadowRoot: ShadowRoot) => {
+    const styleElement = document.createElement("style");
+    for (const sheet of document.styleSheets) {
+        try {
+            if (sheet.cssRules !== undefined) {
+                // Check if cssRules are accessible
+                const rules = [...sheet.cssRules].map(rule => rule.cssText).join("\n");
+                styleElement.append(document.createTextNode(rules));
+            }
+        } catch (error: unknown) {
+            // eslint-disable-next-line no-console
+            console.warn("Cannot access stylesheet rules due to CORS policy", error);
+        }
+    }
+    shadowRoot.append(styleElement);
+};
+
+const ShadowDOMWrapper: React.FC<{
+    className?: string;
+    render: () => React.ReactElement;
+}> = ({ className, render }) => {
+    const hostRef = React.useRef<HTMLDivElement | null>(null);
+    const didMountRef = React.useRef(true);
+
+    React.useEffect(() => {
+        if (hostRef.current === null || didMountRef.current) {
+            didMountRef.current = false;
+            return;
+        }
+
+        const host = hostRef.current;
+        const shadowRoot = host.attachShadow({ mode: "open" });
+
+        (window as any).glideShadowRoot = shadowRoot;
+
+        copyStylesToShadowRoot(shadowRoot);
+
+        // Create a div to serve as the react root container inside the shadow DOM
+        const reactRootContainer = document.createElement("div");
+        reactRootContainer.style.height = "100%";
+        shadowRoot.append(reactRootContainer);
+
+        // Create a React root and render the children inside it
+        const root = createRoot(reactRootContainer);
+        root.render(<>{render()}</>);
+
+        // Clean up when the component unmounts
+        return () => {
+            root.unmount();
+        };
+    }, [render]);
+
+    return <div ref={hostRef} className={className} style={{ height: "100%" }} />;
+};

package/src/docs/examples/silly-numbers.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, useMockDataGenerator, defaultProps } from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="100 Million Rows"
+                    description={
+                        <Description>
+                            100 million rows is silly. Once we cross about 33 million pixels in height we can no longer
+                            trust the browser to scroll accurately.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const SillyNumbers: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowHeight={31}
+            rows={100_000_000}
+            rowMarkers="number"
+        />
+    );
+};

package/src/docs/examples/small-editable-grid.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, useMockDataGenerator, defaultProps } from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Editable Grid"
+                    description={
+                        <Description>
+                            Data grid supports overlay editors for changing values. There are bespoke editors for
+                            numbers, strings, images, booleans, markdown, and uri.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const SmallEditableGrid = () => {
+    const { cols, getCellContent, setCellValue } = useMockDataGenerator(6, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={20}
+            onCellEdited={setCellValue}
+        />
+    );
+};

package/src/docs/examples/smooth-scrolling-grid.stories.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Smooth scrolling"
+                    description={
+                        <Description>
+                            You can enable smooth scrolling with the <PropName>smoothScrollX</PropName> and{" "}
+                            <PropName>smoothScrollY</PropName> props. Disabling smooth scrolling can dramatically
+                            increase performance and improve visual stability during rapid scrolling.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface SmoothScrollingGridProps {
+    smoothScrollX: boolean;
+    smoothScrollY: boolean;
+}
+
+export const SmoothScrollingGrid: React.FC<SmoothScrollingGridProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(30);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            smoothScrollX={p.smoothScrollX}
+            smoothScrollY={p.smoothScrollY}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={10_000}
+        />
+    );
+};
+(SmoothScrollingGrid as any).args = {
+    smoothScrollX: false,
+    smoothScrollY: false,
+};

package/src/docs/examples/span-cell.stories.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { GridCellKind } from "../../internal/data-grid/data-grid-types.js";
+import type { Rectangle, CellArray, GridCell } from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Spans"
+                    description={
+                        <Description>
+                            By setting the <PropName>span</PropName> of a cell you can create spans in your grid. All
+                            cells within a span must return consistent data for defined behavior.
+                            <MoreInfo>
+                                Spans will always be split if they span frozen and non-frozen columns. By default
+                                selections are always expanded to include a span. This can be disabled using the{" "}
+                                <PropName>spanRangeBehavior</PropName> prop.
+                            </MoreInfo>
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const SpanCell: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100, true, true);
+
+    const mangledGetCellContent = React.useCallback<typeof getCellContent>(
+        cell => {
+            const [col, row] = cell;
+            if (row === 6 && col >= 3 && col <= 4) {
+                return {
+                    kind: GridCellKind.Text,
+                    allowOverlay: false,
+                    data: "Span Cell that is very long and will go past the cell limits",
+                    span: [3, 4],
+                    displayData: "Span Cell that is very long and will go past the cell limits",
+                };
+            }
+            if (row === 5) {
+                return {
+                    kind: GridCellKind.Text,
+                    allowOverlay: false,
+                    data: "Span Cell that is very long and will go past the cell limits",
+                    span: [0, 99],
+                    displayData: "Span Cell that is very long and will go past the cell limits",
+                };
+            }
+            return getCellContent(cell);
+        },
+        [getCellContent]
+    );
+
+    const getCellsForSelection = React.useCallback(
+        (selection: Rectangle): CellArray => {
+            const result: GridCell[][] = [];
+
+            for (let y = selection.y; y < selection.y + selection.height; y++) {
+                const row: GridCell[] = [];
+                for (let x = selection.x; x < selection.x + selection.width; x++) {
+                    row.push(mangledGetCellContent([x, y]));
+                }
+                result.push(row);
+            }
+
+            return result;
+        },
+        [mangledGetCellContent]
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={mangledGetCellContent}
+            getCellsForSelection={getCellsForSelection}
+            columns={cols}
+            freezeColumns={2}
+            rows={300}
+            rowMarkers="both"
+        />
+    );
+};

package/src/docs/examples/stretch-column-size.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Column Grow"
+                    description={
+                        <Description>
+                            Columns in the data grid may be set to grow to fill space by setting the{" "}
+                            <PropName>grow</PropName> prop.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const StretchColumnSize: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize } = useMockDataGenerator(5, true, true);
+
+    const hasResized = React.useRef(new Set<number>());
+
+    const columns = React.useMemo(() => {
+        return cols.map((x, i) => ({ ...x, grow: hasResized.current.has(i) ? undefined : (5 + i) / 5 }));
+    }, [cols]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={columns}
+            rows={1000}
+            onColumnResize={(col, _newSize, colIndex, newSizeWithGrow) => {
+                hasResized.current.add(colIndex);
+                onColumnResize(col, newSizeWithGrow);
+            }}
+            rowMarkers="both"
+        />
+    );
+};

package/src/docs/examples/ten-million-cells.stories.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, useMockDataGenerator, defaultProps } from "../../data-editor/stories/utils.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Ten Million Cells"
+                    description={<Description>Data grid supports over 10 million cells. Go nuts with it.</Description>}>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const TenMillionCells: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers="number"
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={100_000}
+        />
+    );
+};