@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/add-data-to-top.stories.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    useMockDataGenerator,
+    defaultProps,
+    clearCell,
+} 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="Add data"
+                    description={
+                        <>
+                            <Description>
+                                You can return a different location to have the new row append take place.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const AddDataToTop: React.VFC = () => {
+    const { cols, getCellContent, setCellValueRaw, setCellValue } = useMockDataGenerator(60, false);
+
+    const [numRows, setNumRows] = React.useState(50);
+
+    const onRowAppended = React.useCallback(async () => {
+        // shift all of the existing cells down
+        for (let y = numRows; y > 0; y--) {
+            for (let x = 0; x < 6; x++) {
+                setCellValueRaw([x, y], getCellContent([x, y - 1]));
+            }
+        }
+        for (let c = 0; c < 6; c++) {
+            const cell = getCellContent([c, 0]);
+            setCellValueRaw([c, 0], clearCell(cell));
+        }
+        setNumRows(cv => cv + 1);
+        return "top" as const;
+    }, [getCellContent, numRows, setCellValueRaw]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers={"both"}
+            onCellEdited={setCellValue}
+            trailingRowOptions={{
+                hint: "New row...",
+                sticky: true,
+                tint: true,
+            }}
+            rows={numRows}
+            onRowAppended={onRowAppended}
+        />
+    );
+};

package/src/docs/examples/add-data.stories.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    useMockDataGenerator,
+    KeyName,
+    defaultProps,
+    clearCell,
+} 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="Add data"
+                    description={
+                        <>
+                            <Description>Data can be added by clicking on the trailing row.</Description>
+                            <MoreInfo>
+                                Keyboard is also supported, just navigate past the last row and press{" "}
+                                <KeyName>Enter</KeyName>
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const AddData: React.VFC = () => {
+    const { cols, getCellContent, setCellValueRaw, setCellValue } = useMockDataGenerator(60, false);
+
+    const [numRows, setNumRows] = React.useState(50);
+
+    const onRowAppended = React.useCallback(() => {
+        const newRow = numRows;
+        // our data source is a mock source that pre-fills data, so we are just clearing this here. You should not
+        // need to do this.
+        for (let c = 0; c < cols.length; c++) {
+            const cell = getCellContent([c, newRow]);
+            setCellValueRaw([c, newRow], clearCell(cell));
+        }
+        // Tell the data grid there is another row
+        setNumRows(cv => cv + 1);
+    }, [cols.length, getCellContent, numRows, setCellValueRaw]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rangeSelectionColumnSpanning={false}
+            rowMarkers={"both"}
+            onPaste={true} // we want to allow paste to just call onCellEdited
+            onCellEdited={setCellValue} // Sets the mock cell content
+            trailingRowOptions={{
+                // How to get the trailing row to look right
+                sticky: false,
+                tint: true,
+                hint: "New row...",
+            }}
+            rows={numRows}
+            onRowAppended={onRowAppended}
+        />
+    );
+};

package/src/docs/examples/all-cell-kinds.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    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>
+                <BeautifulWrapper
+                    title="Lotsa cell kinds"
+                    description={
+                        <Description>
+                            Data grid supports plenty cell kinds. Anything under <PropName>GridCellKind</PropName>.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const AllCellKinds: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            onCellEdited={setCellValue}
+            onPaste={true}
+            rowHeight={44}
+            onColumnResize={onColumnResize}
+            highlightRegions={[
+                {
+                    color: "#ff00ff33",
+                    range: {
+                        x: 1,
+                        y: 1,
+                        width: 3,
+                        height: 3,
+                    },
+                },
+            ]}
+            cellActivationBehavior="single-click"
+            editorBloom={[-4, -4]}
+            drawFocusRing={false}
+            rows={1000}
+        />
+    );
+};

package/src/docs/examples/append-row-handle.stories.tsx

@@ -0,0 +1,79 @@
+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,
+    useMockDataGenerator,
+    KeyName,
+    defaultProps,
+    clearCell,
+} 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>
+        ),
+    ],
+};
+
+export const AppendRowHandle: React.VFC = () => {
+    const { cols, getCellContent, setCellValueRaw, setCellValue } = useMockDataGenerator(60, false);
+
+    const [numRows, setNumRows] = React.useState(50);
+
+    const ref = React.useRef<DataEditorRef>(null);
+
+    const onClick = React.useCallback(() => {
+        void ref.current?.appendRow(3, false);
+    }, [ref]);
+
+    const onRowAppended = React.useCallback(() => {
+        const newRow = numRows;
+        for (let c = 0; c < 6; c++) {
+            const cell = getCellContent([c, newRow]);
+            setCellValueRaw([c, newRow], clearCell(cell));
+        }
+        setNumRows(cv => cv + 1);
+    }, [getCellContent, numRows, setCellValueRaw]);
+
+    return (
+        <BeautifulWrapper
+            title="appendRow Ref"
+            description={
+                <>
+                    <Description>
+                        Adding data can also be triggered from outside of <PropName>DataEditor</PropName>
+                    </Description>
+                    <MoreInfo>
+                        By calling <PropName>appendRow</PropName> on a <PropName>ref</PropName> to your grid, you can
+                        trigger the append elsewhere, like this <KeyName onClick={onClick}>Append</KeyName> button
+                    </MoreInfo>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                ref={ref}
+                getCellContent={getCellContent}
+                columns={cols}
+                rowMarkers={"both"}
+                onCellEdited={setCellValue}
+                trailingRowOptions={{
+                    hint: "New row...",
+                    sticky: true,
+                    tint: true,
+                }}
+                rows={numRows}
+                onRowAppended={onRowAppended}
+            />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/automatic-row-markers.stories.tsx

@@ -0,0 +1,57 @@
+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>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const AutomaticRowMarkers: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    const dataEditor = (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers={"checkbox-visible"}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={1000}
+        />
+    );
+
+    return (
+        <BeautifulWrapper
+            title="Automatic Row Markers"
+            description={
+                <>
+                    <Description>
+                        You can enable row markers with rich selection behavior using the{" "}
+                        <PropName>rowMarkers</PropName> prop.
+                    </Description>
+                    <MoreInfo>
+                        Use <KeyName>⇧</KeyName> + click to make range selections, and <KeyName>Ctrl</KeyName> (
+                        <KeyName>⌘</KeyName> on Mac) + click to add/remove individual rows.
+                    </MoreInfo>
+                </>
+            }>
+            {dataEditor}
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/built-in-search.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { useEventListener } from "../../common/utils.js";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    KeyName,
+    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="Search is easy"
+                    description={
+                        <>
+                            <Description>
+                                Search for any data in your grid by setting <PropName>showSearch</PropName>.
+                            </Description>
+                            <MoreInfo>
+                                In this story, <KeyName>Ctrl</KeyName> (<KeyName>⌘</KeyName> on Mac) +{" "}
+                                <KeyName>f</KeyName> toggles the search bar. Make sure you&apos;re focused on the Data
+                                Grid!
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const BuiltInSearch: 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
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            getCellsForSelection={true}
+            gridSelection={selection}
+            onGridSelectionChange={setSelection}
+            columns={cols}
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            showSearch={showSearch}
+            onSearchClose={() => setShowSearch(false)}
+            rows={10_000}
+        />
+    );
+};

package/src/docs/examples/cell-activated-event.stories.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    PropName,
+    KeyName,
+    defaultProps,
+    useAllMockedKinds,
+} from "../../data-editor/stories/utils.js";
+import type { GridCell, Item } from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import type { DataEditorCoreProps } from "../../index.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const CellActivatedEvent: React.VFC<Pick<DataEditorCoreProps, "cellActivationBehavior">> = p => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
+
+    const getCellContentMangled = React.useCallback(
+        (item: Item): GridCell => {
+            const result = getCellContent(item);
+            if (item[0] === 3) {
+                return {
+                    ...result,
+                    activationBehaviorOverride: "single-click",
+                    hoverEffect: true,
+                } as any;
+            }
+            return result;
+        },
+        [getCellContent]
+    );
+
+    const [lastActivated, setLastActivated] = React.useState<Item | undefined>(undefined);
+
+    const onCellActivated = React.useCallback((cell: Item) => {
+        setLastActivated(cell);
+    }, []);
+
+    return (
+        <BeautifulWrapper
+            title="Cell Activated event"
+            description={
+                <>
+                    <Description>
+                        When you tap <KeyName>Enter</KeyName>, <KeyName>Space</KeyName>, start typing, or double click a cell,
+                        that cell is activated. You can track this with <PropName>onCellActivated</PropName>.
+                    </Description>
+                    <MoreInfo>
+                        Last activated cell:{" "}
+                        {lastActivated === undefined ? "none" : `(${lastActivated[0]}, ${lastActivated[1]})`}
+                    </MoreInfo>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                // editorBloom={[-1, -4]}
+                cellActivationBehavior={p.cellActivationBehavior}
+                getCellContent={getCellContentMangled}
+                //initialSize={[849, 967]}
+                //scrollOffsetY={10_000}
+                getCellsForSelection={true}
+                columns={cols}
+                onCellEdited={setCellValue}
+                onColumnResize={onColumnResize}
+                onCellActivated={onCellActivated}
+                rows={10_000}
+            />
+        </BeautifulWrapper>
+    );
+};
+(CellActivatedEvent as any).argTypes = {
+    cellActivationBehavior: {
+        control: { type: "select" },
+        options: ["double-click", "single-click", "second-click"],
+    },
+};
+(CellActivatedEvent as any).args = {
+    cellActivationBehavior: "second-click",
+};

package/src/docs/examples/column-group-collapse.stories.tsx

@@ -0,0 +1,105 @@
+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 type { GridColumn } 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";
+import type { GroupHeaderClickedEventArgs } from "../../internal/data-grid/event-args.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Group collapse"
+                    description={
+                        <>
+                            <Description>
+                                Through clever usage of <PropName>onGroupHeaderClicked</PropName> you can implement
+                                group collapsing. This is a very basic version however it is possible to go much
+                                further.
+                            </Description>
+                            <MoreInfo>
+                                Cells under a certain size will not attempt to render to save some frames.
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+function useCollapsableColumnGroups(cols: readonly GridColumn[]) {
+    const [collapsed, setCollapsed] = React.useState<readonly string[]>([]);
+
+    const onGroupHeaderClicked = React.useCallback(
+        (colIndex: number, args: GroupHeaderClickedEventArgs) => {
+            const group = cols[colIndex].group ?? "";
+            setCollapsed(cv => {
+                const groupStr = Array.isArray(group) ? group[0] ?? "" : group;
+                return (cv.includes(groupStr) ? cv.filter(g => g !== groupStr) : [...cv, groupStr]) as readonly string[];
+            });
+            args.preventDefault();
+        },
+        [cols]
+    );
+
+    const [selectedColumns, setSelectedColumns] = React.useState<CompactSelection>(CompactSelection.empty());
+
+    const setCols = React.useCallback((newVal: CompactSelection, trigger: string) => {
+        if (trigger === "group") return;
+
+        setSelectedColumns(newVal);
+    }, []);
+
+    const columns = React.useMemo(() => {
+        return cols.map(c => {
+            const groupStr = Array.isArray(c.group) ? c.group[0] ?? "" : (c.group ?? "");
+            if (!collapsed.includes(groupStr))
+                return {
+                    ...c,
+                    hasMenu: true,
+                };
+            return {
+                ...c,
+                width: 8,
+                hasMenu: true,
+            };
+        });
+    }, [collapsed, cols]);
+
+    return {
+        columns,
+        onGroupHeaderClicked,
+        selectedColumns,
+        onSelectedColumnsChange: setCols,
+    };
+}
+
+export const ColumnGroupCollapse: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100, true, true);
+
+    const groupHeaderArgs = useCollapsableColumnGroups(cols);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            {...groupHeaderArgs}
+            getCellContent={getCellContent}
+            groupHeaderHeight={24}
+            rows={1000}
+            rowMarkers="both"
+        />
+    );
+};

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

@@ -0,0 +1,51 @@
+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="Column Grouping"
+                    description={
+                        <Description>
+                            Columns in the data grid may be grouped by setting their <PropName>group</PropName>{" "}
+                            property.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ColumnGroups: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(20, true, true);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            onGroupHeaderRenamed={(x, y) => window.alert(`Please rename group ${x} to ${y}`)}
+            columns={cols}
+            rows={1000}
+            getGroupDetails={g => ({
+                name: g,
+                icon: g === "" ? undefined : GridColumnIcon.HeaderCode,
+            })}
+            rowMarkers="both"
+        />
+    );
+};