@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/highlight-cells.stories.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import { type DataEditorProps } from "../../data-editor/data-editor.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    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="HighlightCells"
+                    description={
+                        <Description>
+                            The <PropName>highlightRegions</PropName> prop can be set to provide additional hinting or
+                            context for the current selection.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const HighlightCells: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+
+    const [gridSelection, setGridSelection] = React.useState<GridSelection>({
+        columns: CompactSelection.empty(),
+        rows: CompactSelection.empty(),
+    });
+
+    const highlights = React.useMemo<DataEditorProps["highlightRegions"]>(() => {
+        if (gridSelection.current === undefined) return undefined;
+        const [col, row] = gridSelection.current.cell;
+        return [
+            {
+                color: "#44BB0022",
+                range: {
+                    x: col + 2,
+                    y: row,
+                    width: 10,
+                    height: 10,
+                },
+                style: "solid",
+            },
+            {
+                color: "#b000b021",
+                range: {
+                    x: col,
+                    y: row + 2,
+                    width: 1,
+                    height: 1,
+                },
+            },
+        ];
+    }, [gridSelection]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers="both"
+            freezeColumns={1}
+            highlightRegions={highlights}
+            gridSelection={gridSelection}
+            onGridSelectionChange={setGridSelection}
+            getCellContent={getCellContent}
+            columns={cols}
+            verticalBorder={c => c > 0}
+            rows={1000}
+        />
+    );
+};

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

@@ -0,0 +1,96 @@
+import React from "react";
+import { type DataEditorRef } from "../../data-editor/data-editor.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    defaultProps,
+    useAllMockedKinds,
+} 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>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface ImperativeScrollProps {
+    paddingY: number;
+    paddingX: number;
+    vAlign?: "start" | "center" | "end";
+    hAlign?: "start" | "center" | "end";
+    behavior?: "smooth" | "instant" | "auto";
+}
+
+export const ImperativeScroll: React.VFC<ImperativeScrollProps> = p => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const ref = React.useRef<DataEditorRef>(null);
+
+    const onClick = () => {
+        ref.current?.scrollTo(4, 99, "both", p.paddingX, p.paddingY, {
+            vAlign: p.vAlign,
+            hAlign: p.hAlign,
+            behavior: p.behavior,
+        });
+    };
+
+    return (
+        <BeautifulWrapper
+            title="Imperative scrolling"
+            description={
+                <>
+                    <Description>
+                        You can imperatively scroll to a cell by calling <PropName>scrollTo</PropName> on a DataEditor
+                        ref.
+                    </Description>
+                    <MoreInfo>
+                        Click <button onClick={onClick}>Here</button> to scroll to column 4 row 100
+                    </MoreInfo>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                ref={ref}
+                rowMarkers="clickable-number"
+                getCellContent={getCellContent}
+                columns={cols}
+                onCellEdited={setCellValue}
+                onColumnResize={onColumnResize}
+                rows={10_000}
+            />
+        </BeautifulWrapper>
+    );
+};
+(ImperativeScroll as any).args = {
+    paddingY: 0,
+    paddingX: 0,
+    vAlign: "start",
+    hAlign: "start",
+    behavior: "auto",
+};
+(ImperativeScroll as any).argTypes = {
+    paddingY: 0,
+    paddingX: 0,
+    vAlign: {
+        control: { type: "select" },
+        options: ["start", "center", "end", undefined],
+    },
+    hAlign: {
+        control: { type: "select" },
+        options: ["start", "center", "end", undefined],
+    },
+    behavior: {
+        control: { type: "select" },
+        options: ["smooth", "instant", "auto", undefined],
+    },
+};

package/src/docs/examples/input-blending.stories.tsx

@@ -0,0 +1,116 @@
+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="Input blending"
+                    description={
+                        <Description>
+                            Input blending can be enabled or disable between row, column, and range selections.
+                            Multi-selections can also be enabled or disabled with the same level of granularity.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface InputBlendingGridProps {
+    rangeBlending: "mixed" | "exclusive" | "additive";
+    columnBlending: "mixed" | "exclusive" | "additive";
+    rowBlending: "mixed" | "exclusive" | "additive";
+    rangeMultiSelect: "none" | "cell" | "rect" | "multi-cell" | "multi-rect";
+    columnMultiSelect: "none" | "single" | "multi";
+    rowMultiSelect: "none" | "single" | "multi";
+    rowSelectionMode: "auto" | "multi";
+    columnSelectionMode: "auto" | "multi";
+}
+
+export const InputBlending: React.FC<InputBlendingGridProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(30);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers={p.rowMultiSelect === "none" ? "number" : "both"}
+            keybindings={{
+                clear: true,
+                copy: true,
+                downFill: true,
+                rightFill: true,
+                pageDown: true,
+                pageUp: true,
+                paste: true,
+                search: true,
+                selectAll: true,
+                selectColumn: true,
+                selectRow: true,
+            }}
+            getCellsForSelection={true}
+            rangeSelect={p.rangeMultiSelect}
+            columnSelect={p.columnMultiSelect}
+            rowSelect={p.rowMultiSelect}
+            rangeSelectionBlending={p.rangeBlending}
+            columnSelectionBlending={p.columnBlending}
+            rowSelectionBlending={p.rowBlending}
+            rowSelectionMode={p.rowSelectionMode}
+            columnSelectionMode={p.columnSelectionMode}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={10_000}
+        />
+    );
+};
+(InputBlending as any).args = {
+    rangeBlending: "mixed",
+    columnBlending: "mixed",
+    rowBlending: "mixed",
+    rangeMultiSelect: "rect",
+    columnMultiSelect: "multi",
+    rowMultiSelect: "multi",
+    rowSelectionMode: "auto",
+    columnSelectionMode: "auto",
+};
+(InputBlending as any).argTypes = {
+    rangeBlending: {
+        control: { type: "select" },
+        options: ["mixed", "exclusive", "additive"],
+    },
+    columnBlending: {
+        control: { type: "select" },
+        options: ["mixed", "exclusive", "additive"],
+    },
+    rowBlending: {
+        control: { type: "select" },
+        options: ["mixed", "exclusive", "additive"],
+    },
+    rangeMultiSelect: {
+        control: { type: "select" },
+        options: ["none", "cell", "rect", "multi-cell", "multi-rect"],
+    },
+    columnMultiSelect: {
+        control: { type: "select" },
+        options: ["none", "single", "multi"],
+    },
+    rowMultiSelect: {
+        control: { type: "select" },
+        options: ["none", "single", "multi"],
+    },
+    rowSelectionMode: {
+        control: { type: "select" },
+        options: ["auto", "multi"],
+    },
+    columnSelectionMode: {
+        control: { type: "select" },
+        options: ["auto", "multi"],
+    },
+};

package/src/docs/examples/keybindings.stories.tsx

@@ -0,0 +1,90 @@
+import React, { useState } 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";
+import { type Keybinds, type Keybind, keybindingDefaults } from "../../data-editor/data-editor-keybindings.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const CustomKeybindings: React.VFC = () => {
+    const { getCellContent, cols, setCellValue } = useMockDataGenerator(30, false);
+
+    const keybindingStyle = {
+        display: "grid",
+        gridTemplateColumns: "repeat(4, 1fr)",
+        gridColumnGap: "32px",
+        gridRowGap: "10px",
+        marginBottom: "10px",
+        marginTop: "20px",
+        font: "13px sans-serif",
+    };
+
+    const controlGroupStyle = {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+    };
+
+    const { copy, cut, paste, pageDown, pageUp, first, last, ...rest } = keybindingDefaults;
+
+    const [keybindings, setKeybindings] = useState<Partial<Keybinds>>(rest);
+
+    const handleKeybindingChange = (key: keyof Keybinds, value: Keybind) => {
+        setKeybindings(prev => ({ ...prev, [key]: value }));
+    };
+
+    return (
+        <BeautifulWrapper
+            title="Custom Keybindings"
+            description={
+                <Description>
+                    This demo showcases custom keybindings. Modify the keybindings using the controls below.
+                    <div style={keybindingStyle}>
+                        {Object.keys(rest).map(key => (
+                            <div key={key} style={controlGroupStyle}>
+                                <label>{key}: </label>
+                                <div>
+                                    <input
+                                        type="checkbox"
+                                        checked={keybindings[key as keyof Keybinds] === true}
+                                        onChange={e =>
+                                            handleKeybindingChange(
+                                                key as keyof Keybinds,
+                                                e.target.checked ? true : false
+                                            )
+                                        }
+                                    />
+                                    <input
+                                        type="text"
+                                        style={{ width: "100px" }}
+                                        value={(keybindings[key as keyof Keybinds] as string) || ""}
+                                        onChange={e => handleKeybindingChange(key as keyof Keybinds, e.target.value)}
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </Description>
+            }>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContent}
+                onCellEdited={setCellValue}
+                keybindings={keybindings}
+                columns={cols}
+                rangeSelect="multi-rect"
+                rows={100}
+                rowMarkers="both"
+            />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/layout-integration.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import { Description, useMockDataGenerator, defaultProps, BeautifulStyle } 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>
+                <BeautifulStyle>
+                    <h1>Layout Integration</h1>
+                    <Description>Trying the grid in different situations</Description>
+                    <Story />
+                </BeautifulStyle>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const LayoutIntegration: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(1000, true, true);
+
+    return (
+        <>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContent}
+                columns={cols}
+                rows={10}
+                rowMarkers="both"
+                height={200}
+            />
+            <DataEditor {...defaultProps} getCellContent={getCellContent} columns={cols} rows={10} rowMarkers="both" />
+            <div style={{ display: "flex", height: "300px" }}>
+                <DataEditor
+                    {...defaultProps}
+                    getCellContent={getCellContent}
+                    columns={cols}
+                    rows={10}
+                    rowMarkers="both"
+                />
+                <div style={{ flexShrink: 0 }}>This is some text what happens here?</div>
+            </div>
+        </>
+    );
+};

package/src/docs/examples/multi-level-column-groups.stories.tsx

@@ -0,0 +1,119 @@
+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 { GridColumnIcon } 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="Multi-Level Column Grouping"
+                    description={
+                        <Description>
+                            Columns in the data grid can now have multi-level groups by setting their{" "}
+                            <PropName>group</PropName> property to an array of strings. Each level represents a
+                            different hierarchy level.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const MultiLevelColumnGroups: React.VFC = () => {
+    // Generate 30 columns for complex grouping
+    const { cols, getCellContent } = useMockDataGenerator(30, true, true);
+
+    // Create complex multi-level groups with more than 10 different groups
+    // Structure: Year -> Quarter -> Month -> Department
+    const multiLevelCols = cols.map((col, index) => {
+        // 2024 Q1 groups
+        if (index < 3) {
+            return { ...col, group: ["2024", "Q1", "Jan", "Sales"] };
+        } else if (index < 6) {
+            return { ...col, group: ["2024", "Q1", "Jan", "Marketing"] };
+        } else if (index < 9) {
+            return { ...col, group: ["2024", "Q1", "Feb", "Sales"] };
+        } else if (index < 12) {
+            return { ...col, group: ["2024", "Q1", "Feb", "Marketing"] };
+        } else if (index < 15) {
+            return { ...col, group: ["2024", "Q1", "Mar", "Sales"] };
+        } else if (index < 18) {
+            return { ...col, group: ["2024", "Q1", "Mar", "Marketing"] };
+        }
+        // 2024 Q2 groups
+        else if (index < 21) {
+            return { ...col, group: ["2024", "Q2", "Apr", "Sales"] };
+        } else if (index < 24) {
+            return { ...col, group: ["2024", "Q2", "Apr", "Support"] };
+        } else if (index < 27) {
+            return { ...col, group: ["2024", "Q2", "May", "Sales"] };
+        } else {
+            return { ...col, group: ["2024", "Q2", "May", "Support"] };
+        }
+    });
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            onGroupHeaderRenamed={(x, y) => window.alert(`Please rename group ${x} to ${y}`)}
+            columns={multiLevelCols}
+            rows={500}
+            getGroupDetails={g => ({
+                name: g,
+                icon: g === "" ? undefined : GridColumnIcon.HeaderCode,
+            })}
+            groupHeaderHeight={[32, 28, 26, 24]} // Four different heights for four levels
+            rowMarkers="both"
+        />
+    );
+};
+
+export const ThreeLevelColumnGroups: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(24, true, true);
+
+    // Create three-level groups
+    const threeLevelCols = cols.map((col, index) => {
+        if (index < 6) {
+            // Level 1 = "2024", Level 2 = "Q1", Level 3 = "Jan"
+            return { ...col, group: ["2024", "Q1", "Jan"] };
+        } else if (index < 12) {
+            // Level 1 = "2024", Level 2 = "Q1", Level 3 = "Feb"
+            return { ...col, group: ["2024", "Q1", "Feb"] };
+        } else if (index < 18) {
+            // Level 1 = "2024", Level 2 = "Q2", Level 3 = "Apr"
+            return { ...col, group: ["2024", "Q2", "Apr"] };
+        } else {
+            // Level 1 = "2024", Level 2 = "Q2", Level 3 = "May"
+            return { ...col, group: ["2024", "Q2", "May"] };
+        }
+    });
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={threeLevelCols}
+            rows={1000}
+            getGroupDetails={g => ({
+                name: g,
+                icon: g === "" ? undefined : GridColumnIcon.HeaderCode,
+            })}
+            groupHeaderHeight={[28, 26, 24]} // Three different heights
+            rowMarkers="both"
+        />
+    );
+};

package/src/docs/examples/multi-select-columns.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    useMockDataGenerator,
+    KeyName,
+    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="Multi select columns"
+                    description={
+                        <>
+                            <Description>
+                                You can select multiple columns by using the <PropName>selectedColumns</PropName> and{" "}
+                                <PropName>onSelectedColumnsChange</PropName> props
+                            </Description>
+                            <MoreInfo>
+                                Here you can multi select columns by using <KeyName>Ctrl</KeyName> (on Windows) or{" "}
+                                <KeyName>⌘</KeyName> (on Mac)
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const MultiSelectColumns: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+
+    return (
+        <DataEditor {...defaultProps} getCellContent={getCellContent} rowMarkers="both" columns={cols} rows={100_000} />
+    );
+};

package/src/docs/examples/new-column-button.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,
+    ColumnAddButton,
+} 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="New column button"
+                    description={
+                        <Description>
+                            A new column button can be created using the <PropName>rightElement</PropName>.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const NewColumnButton: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(10, true);
+
+    const columns = React.useMemo(() => cols.map(c => ({ ...c, grow: 1 })), [cols]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={columns}
+            rightElement={
+                <ColumnAddButton>
+                    <button onClick={() => window.alert("Add a column!")}>+</button>
+                </ColumnAddButton>
+            }
+            rightElementProps={{
+                fill: false,
+                sticky: false,
+            }}
+            rows={3000}
+            rowMarkers="both"
+        />
+    );
+};