@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/row-selections.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { type RowMarkerOptions } from "../../data-editor/data-editor.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="Row selections"
+                    description={
+                        <Description>
+                            You can enable row selections by setting <PropName>rowSelect</PropName> prop to{" "}
+                            <PropName>multi</PropName> for multi-selection or <PropName>single</PropName> for
+                            single-selection. The row marker behavior and appearance can be controlled via the{" "}
+                            <PropName>rowMarkers</PropName> prop.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface RowSelectionsProps {
+    rowSelect: "none" | "single" | "multi";
+    rowSelectionMode: "auto" | "multi";
+    rowMarkersKind: RowMarkerOptions["kind"];
+    rowMarkersCheckboxStyle: RowMarkerOptions["checkboxStyle"];
+}
+
+export const RowSelections: React.FC<RowSelectionsProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(30);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowSelect={p.rowSelect}
+            rowSelectionMode={p.rowSelectionMode}
+            getCellContent={getCellContent}
+            rowMarkers={{
+                kind: p.rowMarkersKind,
+                checkboxStyle: p.rowMarkersCheckboxStyle,
+            }}
+            columns={cols}
+            rows={400}
+        />
+    );
+};
+(RowSelections as any).args = {
+    rowSelect: "single",
+    rowSelectionMode: "auto",
+    rowMarkersKind: "checkbox-visible",
+    rowMarkersCheckboxStyle: "circle",
+};
+(RowSelections as any).argTypes = {
+    rowSelect: {
+        control: { type: "select" },
+        options: ["none", "single", "multi"],
+    },
+    rowSelectionMode: {
+        control: { type: "select" },
+        options: ["auto", "multi"],
+    },
+    rowMarkersKind: {
+        control: { type: "select" },
+        options: ["both", "checkbox", "number", "none", "clickable-number", "checkbox-visible"],
+    },
+    rowMarkersCheckboxStyle: {
+        control: { type: "select" },
+        options: ["square", "circle"],
+    },
+};

package/src/docs/examples/scaled-view.stories.tsx

@@ -0,0 +1,36 @@
+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="Scaled view"
+                    description={<Description>The data editor supports being scaled.</Description>}
+                    scale="0.5">
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ScaledView: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize } = useMockDataGenerator(60);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers="both"
+            rows={500}
+            onColumnResize={onColumnResize}
+        />
+    );
+};

package/src/docs/examples/scroll-offset.stories.tsx

@@ -0,0 +1,49 @@
+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 _ from "lodash";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Scroll Offset"
+                    description={
+                        <Description>
+                            The <PropName>rowGrouping</PropName> prop can be used to group and even fold rows.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ScrollOffset: React.VFC<any> = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+    const rows = 1000;
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            height="100%"
+            rowMarkers="both"
+            scrollOffsetY={400}
+            getCellContent={getCellContent}
+            columns={cols}
+            // verticalBorder={false}
+            rows={rows}
+        />
+    );
+};

package/src/docs/examples/scroll-shadows.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import type { Theme } from "../../common/styles.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, useMockDataGenerator, defaultProps } from "../../data-editor/stories/utils.js";
+import type { GridSelection } from "../../internal/data-grid/data-grid-types.js";
+import { CompactSelection } 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="Scroll Shadows"
+                    description={
+                        <>
+                            <Description>
+                                You can enable and disable the horizontal/vertical scroll shadows.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ScrollShadows: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    const [selection, setSelection] = React.useState<GridSelection>({
+        rows: CompactSelection.empty(),
+        columns: CompactSelection.empty(),
+    });
+
+    const onSelectionChange = React.useCallback((newSel: GridSelection) => {
+        let newRows = CompactSelection.empty();
+        if (newSel.current !== undefined) {
+            newRows = newRows.add([newSel.current.range.y, newSel.current.range.y + newSel.current.range.height]);
+        }
+        for (const b of newSel.current?.rangeStack ?? []) {
+            newRows = newRows.add([b.y, b.y + b.height]);
+        }
+        setSelection({
+            ...newSel,
+            rows: newRows,
+        });
+    }, []);
+
+    const theme = React.useMemo<Partial<Theme>>(
+        () => ({
+            accentLight: "#b1f6ff",
+            horizontalBorderColor: "transparent",
+            headerBottomBorderColor: "rgba(115, 116, 131, 0.16)",
+        }),
+        []
+    );
+
+    const getRowThemeOverride = React.useCallback((row: number) => (row % 2 === 0 ? undefined : { bgCell: "#f5f5f6" }), []);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers={"number"}
+            gridSelection={selection}
+            onGridSelectionChange={onSelectionChange}
+            fixedShadowX={false}
+            headerHeight={26}
+            drawFocusRing={false}
+            rowHeight={22}
+            fixedShadowY={false}
+            getRowThemeOverride={getRowThemeOverride}
+            verticalBorder={false}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={1000}
+            theme={theme}
+        />
+    );
+};

package/src/docs/examples/search-as-filter.stories.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { useEventListener } from "../../common/utils.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, defaultProps, useAllMockedKinds } from "../../data-editor/stories/utils.js";
+import type { GridSelection } from "../../internal/data-grid/data-grid-types.js";
+import { CompactSelection } 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="Filtering down to search results"
+                    description={
+                        <>
+                            <Description>You can update your grid however you want based on search inputs.</Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const SearchAsFilter: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const [showSearch, setShowSearch] = React.useState(false);
+
+    const [selection, setSelection] = React.useState<GridSelection>({
+        rows: CompactSelection.empty(),
+        columns: CompactSelection.empty(),
+    });
+
+    useEventListener(
+        "keydown",
+        React.useCallback(event => {
+            if ((event.ctrlKey || event.metaKey) && event.code === "KeyF") {
+                setShowSearch(cv => !cv);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        }, []),
+        window,
+        false,
+        true
+    );
+
+    const [searchValue, setSearchValue] = React.useState("");
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            searchResults={[]}
+            getCellContent={getCellContent}
+            getCellsForSelection={true}
+            gridSelection={selection}
+            onGridSelectionChange={setSelection}
+            columns={cols}
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            searchValue={searchValue}
+            onSearchValueChange={setSearchValue}
+            showSearch={showSearch}
+            onSearchClose={() => {
+                setShowSearch(false);
+                setSearchValue("");
+            }}
+            rows={searchValue.length === 0 ? 10_000 : searchValue.length}
+        />
+    );
+};

package/src/docs/examples/selection-serialization.stories.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { BeautifulWrapper, Description, PropName, useMockDataGenerator } from "../../data-editor/stories/utils.js";
+import type { GridSelection, CompactSelectionRanges } from "../../internal/data-grid/data-grid-types.js";
+import { CompactSelection } 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>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const SelectionSerialization: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(30, true, true);
+
+    // Load selection from localStorage on mount
+    const [selection, setSelection] = React.useState<GridSelection>(() => {
+        try {
+            const saved = localStorage.getItem("grid-selection-demo");
+            if (saved !== null) {
+                const parsed = JSON.parse(saved) as { columns?: any[]; rows?: any[]; current?: any };
+                return {
+                    columns: CompactSelection.create(Array.isArray(parsed.columns) ? parsed.columns : []),
+                    rows: CompactSelection.create(Array.isArray(parsed.rows) ? parsed.rows : []),
+                    current: parsed.current,
+                };
+            }
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error("Failed to restore selection", error);
+        }
+        return {
+            columns: CompactSelection.empty(),
+            rows: CompactSelection.empty(),
+        };
+    });
+
+    // Save selection to localStorage whenever it changes
+    React.useEffect(() => {
+        const toSave = {
+            columns: selection.columns.items,
+            rows: selection.rows.items,
+            current: selection.current,
+        };
+        localStorage.setItem("grid-selection-demo", JSON.stringify(toSave));
+    }, [selection]);
+
+    const clearSelection = () => {
+        setSelection({
+            columns: CompactSelection.empty(),
+            rows: CompactSelection.empty(),
+            current: undefined,
+        });
+    };
+
+    const createExampleSelection = () => {
+        setSelection({
+            columns: CompactSelection.create([
+                [2, 5],
+                [8, 10],
+            ]),
+            rows: CompactSelection.create([
+                [1, 4],
+                [10, 15],
+                [20, 23],
+            ]),
+            current: {
+                cell: [3, 5],
+                range: { x: 3, y: 5, width: 1, height: 1 },
+                rangeStack: [],
+            },
+        });
+    };
+
+    return (
+        <BeautifulWrapper
+            title="Selection Serialization"
+            description={
+                <Description>
+                    This example demonstrates how to serialize and persist grid selections using the new{" "}
+                    <PropName>CompactSelection.create()</PropName> and <PropName>.items</PropName> APIs. The selection
+                    is automatically saved to localStorage and restored when the page refreshes.
+                    <br />
+                    <br />
+                    <button onClick={createExampleSelection} style={{ marginRight: 8 }}>
+                        Create Example Selection
+                    </button>
+                    <button onClick={clearSelection}>Clear Selection</button>
+                    <br />
+                    <br />
+                    <strong>Current selection:</strong> {selection.rows.length} rows, {selection.columns.length} columns
+                    <br />
+                    <strong>Persisted data:</strong>{" "}
+                    <code>{JSON.stringify({ columns: selection.columns.items, rows: selection.rows.items })}</code>
+                </Description>
+            }>
+            <DataEditor
+                {...useMockDataGenerator(30, false)}
+                columns={cols}
+                getCellContent={getCellContent}
+                rows={10_000}
+                gridSelection={selection}
+                onGridSelectionChange={setSelection}
+                rowMarkers="both"
+                columnSelect="multi"
+            />
+        </BeautifulWrapper>
+    );
+};
+
+export const SelectionRoundTrip: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(30, true, true);
+
+    const [originalSelection, setOriginalSelection] = React.useState<GridSelection>({
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    const [restoredSelection, setRestoredSelection] = React.useState<GridSelection>({
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    const performRoundTrip = () => {
+        // Serialize the selection
+        const serialized = {
+            columns: originalSelection.columns.items,
+            rows: originalSelection.rows.items,
+            current: originalSelection.current,
+        };
+
+        // Simulate persistence (e.g., sending to server, storing in database)
+        const jsonString = JSON.stringify(serialized);
+        // eslint-disable-next-line no-console
+        console.log("Serialized selection:", jsonString);
+
+        // Deserialize and restore
+        const parsed = JSON.parse(jsonString) as {
+            columns: CompactSelectionRanges;
+            rows: CompactSelectionRanges;
+            current?: any;
+        };
+        const restored = {
+            columns: CompactSelection.create(parsed.columns),
+            rows: CompactSelection.create(parsed.rows),
+            current: parsed.current,
+        };
+
+        setRestoredSelection(restored);
+    };
+
+    return (
+        <BeautifulWrapper
+            title="Selection Round Trip"
+            description={
+                <Description>
+                    This example demonstrates a complete round trip: create a selection, serialize it to JSON, then
+                    deserialize it back to a <PropName>CompactSelection</PropName> using the new APIs.
+                    <br />
+                    <br />
+                    <button onClick={performRoundTrip}>Perform Round Trip</button>
+                    <br />
+                    <br />
+                    <strong>Original equals restored:</strong>{" "}
+                    {originalSelection.columns.equals(restoredSelection.columns) &&
+                    originalSelection.rows.equals(restoredSelection.rows)
+                        ? "✅ Yes"
+                        : "❌ No"}
+                </Description>
+            }>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, height: 600 }}>
+                <div>
+                    <h3>Original Selection</h3>
+                    <DataEditor
+                        {...useMockDataGenerator(30, false)}
+                        columns={cols}
+                        getCellContent={getCellContent}
+                        rows={1000}
+                        gridSelection={originalSelection}
+                        onGridSelectionChange={setOriginalSelection}
+                        rowMarkers="both"
+                        columnSelect="multi"
+                    />
+                </div>
+                <div>
+                    <h3>Restored Selection</h3>
+                    <DataEditor
+                        {...useMockDataGenerator(30, false)}
+                        columns={cols}
+                        getCellContent={getCellContent}
+                        rows={1000}
+                        gridSelection={restoredSelection}
+                        onGridSelectionChange={setRestoredSelection}
+                        rowMarkers="both"
+                        columnSelect="multi"
+                    />
+                </div>
+            </div>
+        </BeautifulWrapper>
+    );
+};