@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/obscured-grid.stories.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable no-console */
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    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="Obscured Data Grid"
+                    description={
+                        <>
+                            <Description>The data grid should respect being obscured by other elements</Description>
+                            <MoreInfo>This is mostly a test area because its hard to test with unit tests.</MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                    <div
+                        style={{
+                            position: "absolute",
+                            top: 0,
+                            left: "50%",
+                            width: "50%",
+                            height: "100%",
+                            background: "rgba(0,0,0,0.5)",
+                            zIndex: 100,
+                        }}
+                    />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ObscuredDataGrid: React.VFC = () => {
+    const { cols, getCellContent, setCellValue } = useMockDataGenerator(60, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            onItemHovered={x => console.log("onItemHovered", x)}
+            onCellClicked={x => console.log("onCellClicked", x)}
+            onHeaderClicked={x => console.log("onHeaderClicked", x)}
+            onCellContextMenu={x => console.log("onCellContextMenu", x)}
+            onHeaderContextMenu={x => console.log("onHeaderContextMenu", x)}
+            columns={cols}
+            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: true,
+                tint: true,
+                hint: "New row...",
+            }}
+            rows={10_000}
+        />
+    );
+};

package/src/docs/examples/observe-visible-region.stories.tsx

@@ -0,0 +1,56 @@
+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 type { Rectangle } 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 ObserveVisibleRegion: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+
+    const [visibleRegion, setVisibleRegion] = React.useState<Rectangle>({ x: 0, y: 0, width: 0, height: 0 });
+
+    return (
+        <BeautifulWrapper
+            title="Observe Visible Region"
+            description={
+                <>
+                    <Description>
+                        The visible region can be observed using <PropName>onVisibleRegionChanged</PropName>
+                    </Description>
+                    <MoreInfo>
+                        Then current visible region is x:<KeyName>{visibleRegion.x}</KeyName> y:
+                        <KeyName>{visibleRegion.y}</KeyName> width:
+                        <KeyName>{visibleRegion.width}</KeyName> height:<KeyName>{visibleRegion.height}</KeyName>
+                    </MoreInfo>
+                </>
+            }>
+            <DataEditor
+                {...defaultProps}
+                getCellContent={getCellContent}
+                columns={cols}
+                rows={1000}
+                onVisibleRegionChanged={setVisibleRegion}
+            />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/one-hundred-thousand-columns.stories.tsx

@@ -0,0 +1,31 @@
+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="One Hundred Thousand Columns"
+                    description={
+                        <Description>
+                            Data grid supports way more columns than you will ever need. Also this is rendering 10
+                            million cells but that&apos;s not important.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const OneHundredThousandCols: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(100_000);
+
+    return <DataEditor {...defaultProps} getCellContent={getCellContent} columns={cols} rows={1000} />;
+};

package/src/docs/examples/one-million-rows.stories.tsx

@@ -0,0 +1,37 @@
+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="One Million Rows"
+                    description={
+                        <Description>Data grid supports over 1 million rows. Your limit is mostly RAM.</Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const OneMillionRows: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowHeight={31}
+            rows={1_000_000}
+            rowMarkers="number"
+        />
+    );
+};

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

@@ -0,0 +1,74 @@
+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="Overscroll"
+                    description={
+                        <>
+                            <Description>
+                                You can allocate extra space at the ends of the grid by setting the{" "}
+                                <PropName>overscrollX</PropName> and <PropName>overscrollY</PropName> props
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface OverscrollProps {
+    overscrollX: number;
+    overscrollY: number;
+}
+
+export const Overscroll: React.VFC<OverscrollProps> = p => {
+    const { overscrollX, overscrollY } = p;
+    const { cols, getCellContent } = useMockDataGenerator(20);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            overscrollX={overscrollX}
+            overscrollY={overscrollY}
+            rows={50}
+        />
+    );
+};
+(Overscroll as any).argTypes = {
+    overscrollX: {
+        control: {
+            type: "range",
+            min: 0,
+            max: 600,
+        },
+    },
+    overscrollY: {
+        control: {
+            type: "range",
+            min: 0,
+            max: 600,
+        },
+    },
+};
+(Overscroll as any).args = {
+    overscrollX: 200,
+    overscrollY: 200,
+};

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

@@ -0,0 +1,74 @@
+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="Padding"
+                    description={
+                        <>
+                            <Description>
+                                You can add padding at the ends of the grid by setting the{" "}
+                                <PropName>paddingRight</PropName> and <PropName>paddingBottom</PropName> props
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface PaddingProps {
+    paddingRight: number;
+    paddingBottom: number;
+}
+
+export const Padding: React.VFC<PaddingProps> = p => {
+    const { paddingRight, paddingBottom } = p;
+    const { cols, getCellContent } = useMockDataGenerator(20);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers={"both"}
+            experimental={{ paddingRight, paddingBottom }}
+            rows={50}
+        />
+    );
+};
+(Padding as any).argTypes = {
+    paddingRight: {
+        control: {
+            type: "range",
+            min: 0,
+            max: 600,
+        },
+    },
+    paddingBottom: {
+        control: {
+            type: "range",
+            min: 0,
+            max: 600,
+        },
+    },
+};
+(Padding as any).args = {
+    paddingRight: 200,
+    paddingBottom: 200,
+};

package/src/docs/examples/paste-support.stories.tsx

@@ -0,0 +1,73 @@
+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 { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Paste support"
+                    description={
+                        <>
+                            <Description>
+                                The data grid can handle paste automatically by returning true from{" "}
+                                <PropName>onPaste</PropName>. You can also return false and handle paste yourself. If
+                                paste is undefined the DataEditor will do its best to paste to the current cell.
+                            </Description>
+                            <MoreInfo>
+                                Paste supports the copy format of Google Sheets and Excel. Below is an example of data
+                                copied from excel with some escaped text.
+                            </MoreInfo>
+                            <textarea
+                                value={`Sunday	Dogs	https://google.com
+Monday	Cats	https://google.com
+Tuesday	Turtles	https://google.com
+Wednesday	Bears	https://google.com
+Thursday	"L  ions"	https://google.com
+Friday	Pigs	https://google.com
+Saturday	"Turkeys and some ""quotes"" and
+a new line char ""more quotes"" plus a tab  ."	https://google.com`}
+                                style={{
+                                    width: "100%",
+                                    marginBottom: 20,
+                                    borderRadius: 9,
+                                    minHeight: 200,
+                                    padding: 10,
+                                }}
+                            />
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const PasteSupport: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize, setCellValue } = useMockDataGenerator(50, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            rowMarkers="both"
+            columns={cols}
+            onCellEdited={setCellValue}
+            onColumnResize={onColumnResize}
+            onPaste={true}
+            rows={400}
+        />
+    );
+};

package/src/docs/examples/prevent-diagonal-scroll.stories.tsx

@@ -0,0 +1,47 @@
+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="Prevent Diagonal Scroll"
+                    description={
+                        <>
+                            <Description>
+                                Diagonal scrolling can be prevented by setting{" "}
+                                <PropName>preventDiagonalScrolling</PropName>.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const PreventDiagonalScroll: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(200);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            preventDiagonalScrolling={true}
+            rows={5000}
+        />
+    );
+};

package/src/docs/examples/rapid-updates.stories.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { type DataEditorRef } from "../../data-editor/data-editor.js";
+import {
+    BeautifulWrapper,
+    Description,
+    MoreInfo,
+    useMockDataGenerator,
+    KeyName,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import type { Item } from "../../internal/data-grid/data-grid-types.js";
+import { GridCellKind } from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import { DataEditorAll } from "../../data-editor-all.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+let num: number = 1;
+function rand(): number {
+    return (num = (num * 16_807) % 2_147_483_647);
+}
+
+export const RapidUpdates: React.VFC = () => {
+    const { cols, getCellContent, setCellValueRaw } = useMockDataGenerator(100);
+
+    const ref = React.useRef<DataEditorRef>(null);
+
+    const countRef = React.useRef(0);
+    const displayCountRef = React.useRef<HTMLElement>(null);
+
+    React.useEffect(() => {
+        let rafID = 0;
+
+        const sendUpdate = () => {
+            const cells: {
+                cell: Item;
+            }[] = [];
+            const now = performance.now();
+            for (let x = 0; x < 5000; x++) {
+                const col = Math.max(10, rand() % 100);
+                const row = rand() % 10_000;
+
+                setCellValueRaw([col, row], {
+                    kind: GridCellKind.Text,
+                    data: x.toString(),
+                    displayData: `${x}k`,
+                    themeOverride:
+                        x % 5 !== 0
+                            ? {
+                                  bgCell: "#f2fff4",
+                                  textDark: "#00d41c",
+                              }
+                            : {
+                                  bgCell: "#fff6f6",
+                                  textDark: "#d40000",
+                              },
+                    allowOverlay: true,
+                    lastUpdated: now,
+                });
+                cells.push({ cell: [col, row] });
+            }
+            countRef.current += 5000;
+            if (displayCountRef.current !== null) {
+                displayCountRef.current.textContent = `${countRef.current}`;
+            }
+
+            ref.current?.updateCells(cells);
+
+            rafID = window.requestAnimationFrame(sendUpdate);
+        };
+
+        sendUpdate();
+
+        return () => {
+            cancelAnimationFrame(rafID);
+        };
+    }, [setCellValueRaw]);
+
+    return (
+        <BeautifulWrapper
+            title="Rapid updating"
+            description={
+                <>
+                    <Description>
+                        Data grid can support many thousands of updates per seconds. The data grid can easily update
+                        data faster than a human can read it, more importantly the faster the data grid can update, the
+                        more time your code can spend doing more valuable work.
+                    </Description>
+                    <MoreInfo>
+                        Updates processed: <KeyName ref={displayCountRef} /> We could do this faster but we wrote a
+                        really crappy data store for this demo which is actually slowing down the data grid.
+                    </MoreInfo>
+                </>
+            }>
+            <DataEditorAll {...defaultProps} ref={ref} getCellContent={getCellContent} columns={cols} rows={10_000} />
+        </BeautifulWrapper>
+    );
+};

package/src/docs/examples/rearrange-columns.stories.tsx

@@ -0,0 +1,76 @@
+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 type { Item, 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="Rearrange Columns"
+                    description={
+                        <Description>
+                            Columns can be rearranged by drag and dropping, as long as you respond to the{" "}
+                            <PropName>onColumnMoved</PropName> callback.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const RearrangeColumns: React.VFC = () => {
+    const { cols, getCellContent } = useMockDataGenerator(60);
+
+    // This is a dirty hack because the mock generator doesn't really support changing this. In a real data source
+    // you should track indexes properly
+    const [sortableCols, setSortableCols] = React.useState(cols);
+
+    const onColMoved = React.useCallback((startIndex: number, endIndex: number): void => {
+        setSortableCols(old => {
+            const newCols = [...old];
+            const [toMove] = newCols.splice(startIndex, 1);
+            newCols.splice(endIndex, 0, toMove);
+            return newCols;
+        });
+    }, []);
+
+    const onColProposeMove = React.useCallback((_startIndex: number, endIndex: number): boolean => {
+        return endIndex !== 3;
+    }, []);
+
+    const getCellContentMangled = React.useCallback(
+        ([col, row]: Item): GridCell => {
+            const remappedCol = cols.findIndex(c => c.title === sortableCols[col].title);
+            return getCellContent([remappedCol, row]);
+        },
+        [cols, getCellContent, sortableCols]
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            freezeColumns={1}
+            rowMarkers="both"
+            getCellContent={getCellContentMangled}
+            onColumnProposeMove={onColProposeMove}
+            columns={sortableCols}
+            onColumnMoved={onColMoved}
+            columnSelectionBlending="mixed"
+            rangeSelectionBlending="mixed"
+            rows={1000}
+        />
+    );
+};