@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/05-copy-paste.stories.tsx.tsx

@@ -0,0 +1,279 @@
+import * as React from "react";
+
+import {
+    type EditableGridCell,
+    type GridCell,
+    GridCellKind,
+    type GridColumn,
+    type Item,
+} from "../internal/data-grid/data-grid-types.js";
+import { DataEditorAll as DataEditor } from "../data-editor-all.js";
+import { SimpleThemeWrapper } from "../stories/story-utils.js";
+import { DocWrapper, Highlight, Marked, Wrapper } from "./doc-wrapper.js";
+
+export default {
+    title: "Glide-Data-Grid/Docs",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface DummyItem {
+    name: string;
+    company: string;
+    phone: string;
+    email: string;
+}
+
+export const CopyPaste: React.VFC = () => {
+    const dataRef = React.useRef([
+        {
+            name: "Deidre Morris",
+            company: "GONKLE",
+            email: "deidremorris@gonkle.com",
+            phone: "+1 (867) 507-3332",
+        },
+        {
+            name: "Sheryl Craig",
+            company: "EVENTAGE",
+            email: "sherylcraig@eventage.com",
+            phone: "+1 (869) 520-2227",
+        },
+        {
+            name: "Lidia Bowers",
+            company: "ANOCHA",
+            email: "lidiabowers@anocha.com",
+            phone: "+1 (808) 414-3826",
+        },
+        {
+            name: "Jones Norton",
+            company: "REPETWIRE",
+            email: "jonesnorton@repetwire.com",
+            phone: "+1 (875) 582-3320",
+        },
+        {
+            name: "Lula Bruce",
+            company: "COMDOM",
+            email: "lulabruce@comdom.com",
+            phone: "+1 (873) 452-2472",
+        },
+        {
+            name: "Larsen Montgomery",
+            company: "SQUISH",
+            email: "larsenmontgomery@squish.com",
+            phone: "+1 (893) 482-3651",
+        },
+        {
+            name: "Becky Bright",
+            company: "COMCUR",
+            email: "beckybright@comcur.com",
+            phone: "+1 (879) 494-2331",
+        },
+        {
+            name: "Charlotte Rowland",
+            company: "FROLIX",
+            email: "charlotterowland@frolix.com",
+            phone: "+1 (861) 439-2134",
+        },
+        {
+            name: "Sonya Hensley",
+            company: "GEEKETRON",
+            email: "sonyahensley@geeketron.com",
+            phone: "+1 (802) 553-2194",
+        },
+        {
+            name: "Stephenson Guthrie",
+            company: "EXOSWITCH",
+            email: "stephensonguthrie@exoswitch.com",
+            phone: "+1 (903) 449-3271",
+        },
+        {
+            name: "Mcmillan Cline",
+            company: "TURNLING",
+            email: "mcmillancline@turnling.com",
+            phone: "+1 (982) 496-2454",
+        },
+        {
+            name: "Kemp Davis",
+            company: "TETRATREX",
+            email: "kempdavis@tetratrex.com",
+            phone: "+1 (859) 594-2982",
+        },
+        {
+            name: "Matilda Levy",
+            company: "SLOFAST",
+            email: "matildalevy@slofast.com",
+            phone: "+1 (841) 521-2444",
+        },
+        {
+            name: "Hattie Simpson",
+            company: "COMTRAK",
+            email: "hattiesimpson@comtrak.com",
+            phone: "+1 (962) 587-3805",
+        },
+        {
+            name: "Kinney Munoz",
+            company: "IDETICA",
+            email: "kinneymunoz@idetica.com",
+            phone: "+1 (921) 513-2012",
+        },
+        {
+            name: "Lambert Raymond",
+            company: "TURNABOUT",
+            email: "lambertraymond@turnabout.com",
+            phone: "+1 (919) 519-2442",
+        },
+        {
+            name: "Bryant Dunlap",
+            company: "BYTREX",
+            email: "bryantdunlap@bytrex.com",
+            phone: "+1 (872) 583-2883",
+        },
+    ]);
+
+    const getContent = React.useCallback((cell: Item): GridCell => {
+        const [col, row] = cell;
+        const dataRow = dataRef.current[row];
+        const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
+        const d = dataRow[indexes[col]];
+        return {
+            kind: GridCellKind.Text,
+            allowOverlay: true,
+            displayData: d as string,
+            data: d as string,
+        };
+    }, []);
+
+    const columns = React.useMemo<GridColumn[]>(() => {
+        return [
+            {
+                title: "Name",
+                id: "name",
+            },
+            {
+                title: "Company",
+                id: "company",
+            },
+            {
+                title: "Email",
+                id: "email",
+            },
+            {
+                title: "Phone",
+                id: "phone",
+            },
+        ];
+    }, []);
+
+    const onCellEdited = React.useCallback((cell: Item, newValue: EditableGridCell) => {
+        if (newValue.kind !== GridCellKind.Text) {
+            // we only have text cells, might as well just die here.
+            return;
+        }
+
+        const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
+        const [col, row] = cell;
+        const key = indexes[col];
+        dataRef.current[row][key] = newValue.data;
+    }, []);
+
+    return (
+        <DocWrapper>
+            <Marked>
+                {`
+# Copy Paste
+
+Copy and Paste support is built in to Glide Data Grid. It is not enabled by default to ensure developers are expecting its behavior.
+
+## Copy
+
+By default copy is not enabled, to enabled copy implement the \`getCellsForSelection\` callback. The callback returns results as row-major ordering.
+
+> \`getCellsForSelection\` is used instead of \`getCellContent\` to allow optimization when fetching large amounts of data outside of the visible region.
+
+This example uses the built in generic function which simply calls \`getContent\`, which is inefficient but fine for a local data source.`}
+            </Marked>
+            <Highlight>
+                {`
+return <DataEditor {...rest} getCellsForSelection={true} />
+`}
+            </Highlight>
+            <Wrapper height={200}>
+                <DataEditor
+                    getCellContent={getContent}
+                    getCellsForSelection={true}
+                    columns={columns}
+                    rows={dataRef.current.length}
+                />
+            </Wrapper>
+            <textarea
+                style={{ padding: 12, width: "100%", height: "200px", borderRadius: 9 }}
+                placeholder="Highlight some stuff up there and paste it here"
+            />
+            <Marked>
+                {`
+Implementations may wish to use far more efficient mechanisms for fetching data.
+
+## Paste
+
+The easiest way to enable paste is to set \`onPaste\` to true when \`onCellEdited\` is already working. The Glide Data Grid will automatically parse the paste buffer and send cell update events.`}
+            </Marked>
+            <Highlight>
+                {`
+return <DataEditor {...rest} onCellEdited={onCellEdited} onPaste={true} />
+`}
+            </Highlight>
+            <Wrapper height={200}>
+                <DataEditor
+                    getCellContent={getContent}
+                    onCellEdited={onCellEdited}
+                    getCellsForSelection={true}
+                    onPaste={true}
+                    columns={columns}
+                    rows={dataRef.current.length}
+                />
+            </Wrapper>
+            <Marked>{`Try copying this.`}</Marked>
+            <textarea
+                style={{ padding: 12, width: "100%", height: "80px", borderRadius: 9 }}
+                value="Sheryl Craig	EVENTAGE	sherylcraig@eventage.com
+Lidia Bowers	ANOCHA	lidiabowers@anocha.com
+Jones Norton	REPETWIRE	jonesnorton@repetwire.com"
+            />
+            <Marked>
+                {`
+If desired paste events can be handled manually. Passing a callback to \`onPaste\` will instead receive a parsed verison of the pasted data. Returning \`true\` from the callback will cause the paste event to be handled the same as before, emitting \`onCellEdited\`. Returning \`false\` will prevent the edit callback from being emitted.`}
+            </Marked>
+            <Highlight>
+                {`
+return <DataEditor
+    {...rest}
+    onCellEdited={onCellEdited}
+    onPaste={(target, value) => {
+        window.alert(JSON.stringify({ target, value }));
+        return false;
+    }}
+/>
+`}
+            </Highlight>
+            <Wrapper height={200}>
+                <DataEditor
+                    getCellContent={getContent}
+                    onCellEdited={onCellEdited}
+                    getCellsForSelection={true}
+                    columns={columns}
+                    onPaste={(target, value) => {
+                        window.alert(JSON.stringify({ target, value }));
+                        return false;
+                    }}
+                    rows={dataRef.current.length}
+                />
+            </Wrapper>
+        </DocWrapper>
+    );
+};
+(CopyPaste as any).storyName = "05. Copy/Paste Support";

package/src/docs/06-search.stories.tsx

@@ -0,0 +1,219 @@
+import * as React from "react";
+
+import { type GridCell, GridCellKind, type GridColumn, type Item } from "../internal/data-grid/data-grid-types.js";
+import { DataEditorAll as DataEditor } from "../data-editor-all.js";
+import { SimpleThemeWrapper } from "../stories/story-utils.js";
+import { DocWrapper, Highlight, Marked, Wrapper } from "./doc-wrapper.js";
+
+export default {
+    title: "Glide-Data-Grid/Docs",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface DummyItem {
+    name: string;
+    company: string;
+    phone: string;
+    email: string;
+}
+
+const data: DummyItem[] = [
+    {
+        name: "Deidre Morris",
+        company: "GONKLE",
+        email: "deidremorris@gonkle.com",
+        phone: "+1 (867) 507-3332",
+    },
+    {
+        name: "Sheryl Craig",
+        company: "EVENTAGE",
+        email: "sherylcraig@eventage.com",
+        phone: "+1 (869) 520-2227",
+    },
+    {
+        name: "Lidia Bowers",
+        company: "ANOCHA",
+        email: "lidiabowers@anocha.com",
+        phone: "+1 (808) 414-3826",
+    },
+    {
+        name: "Jones Norton",
+        company: "REPETWIRE",
+        email: "jonesnorton@repetwire.com",
+        phone: "+1 (875) 582-3320",
+    },
+    {
+        name: "Lula Bruce",
+        company: "COMDOM",
+        email: "lulabruce@comdom.com",
+        phone: "+1 (873) 452-2472",
+    },
+    {
+        name: "Larsen Montgomery",
+        company: "SQUISH",
+        email: "larsenmontgomery@squish.com",
+        phone: "+1 (893) 482-3651",
+    },
+    {
+        name: "Becky Bright",
+        company: "COMCUR",
+        email: "beckybright@comcur.com",
+        phone: "+1 (879) 494-2331",
+    },
+    {
+        name: "Charlotte Rowland",
+        company: "FROLIX",
+        email: "charlotterowland@frolix.com",
+        phone: "+1 (861) 439-2134",
+    },
+    {
+        name: "Sonya Hensley",
+        company: "GEEKETRON",
+        email: "sonyahensley@geeketron.com",
+        phone: "+1 (802) 553-2194",
+    },
+    {
+        name: "Stephenson Guthrie",
+        company: "EXOSWITCH",
+        email: "stephensonguthrie@exoswitch.com",
+        phone: "+1 (903) 449-3271",
+    },
+    {
+        name: "Mcmillan Cline",
+        company: "TURNLING",
+        email: "mcmillancline@turnling.com",
+        phone: "+1 (982) 496-2454",
+    },
+    {
+        name: "Kemp Davis",
+        company: "TETRATREX",
+        email: "kempdavis@tetratrex.com",
+        phone: "+1 (859) 594-2982",
+    },
+    {
+        name: "Matilda Levy",
+        company: "SLOFAST",
+        email: "matildalevy@slofast.com",
+        phone: "+1 (841) 521-2444",
+    },
+    {
+        name: "Hattie Simpson",
+        company: "COMTRAK",
+        email: "hattiesimpson@comtrak.com",
+        phone: "+1 (962) 587-3805",
+    },
+    {
+        name: "Kinney Munoz",
+        company: "IDETICA",
+        email: "kinneymunoz@idetica.com",
+        phone: "+1 (921) 513-2012",
+    },
+    {
+        name: "Lambert Raymond",
+        company: "TURNABOUT",
+        email: "lambertraymond@turnabout.com",
+        phone: "+1 (919) 519-2442",
+    },
+    {
+        name: "Bryant Dunlap",
+        company: "BYTREX",
+        email: "bryantdunlap@bytrex.com",
+        phone: "+1 (872) 583-2883",
+    },
+];
+
+export const Search: React.VFC = () => {
+    const getContent = React.useCallback((cell: Item): GridCell => {
+        const [col, row] = cell;
+        const dataRow = data[row];
+        const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
+        const d = dataRow[indexes[col]];
+        return {
+            kind: GridCellKind.Text,
+            allowOverlay: true,
+            displayData: d,
+            data: d,
+        };
+    }, []);
+
+    const columns = React.useMemo<GridColumn[]>(() => {
+        return [
+            {
+                title: "Name",
+                id: "name",
+            },
+            {
+                title: "Company",
+                id: "company",
+            },
+            {
+                title: "Email",
+                id: "email",
+            },
+            {
+                title: "Phone",
+                id: "phone",
+            },
+        ];
+    }, []);
+
+    const [showSearch, setShowSearch] = React.useState(false);
+    const onSearchClose = React.useCallback(() => setShowSearch(false), []);
+
+    return (
+        <DocWrapper>
+            <Marked>
+                {`
+# Search
+
+Search is a controlled property in Glide Data Grid. Triggering the search interface is up to the application but once triggered search is handled interally on the data grid. Search always depends on a properly implemented \`getCellsForSelection\`.`}
+            </Marked>
+            <Highlight>
+                {`
+const [showSearch, setShowSearch] = React.useState(false);
+const onSearchClose = React.useCallback(() => setShowSearch(false), []);
+
+return <DataEditor {...rest} showSearch={showSearch} getCellsForSelection={true} onSearchClose={onSearchClose}  />
+`}
+            </Highlight>
+            <button onClick={() => setShowSearch(prev => !prev)}>Show Search</button>
+            <Wrapper height={200}>
+                <DataEditor
+                    showSearch={showSearch}
+                    onSearchClose={onSearchClose}
+                    getCellContent={getContent}
+                    getCellsForSelection={true}
+                    columns={columns}
+                    rows={data.length}
+                />
+            </Wrapper>
+            <Marked>
+                {`
+# Automatic Search
+
+Search can also be handled by the data grid automatically if you enable the search keybinding.`}
+            </Marked>
+            <Highlight>
+                {`
+return <DataEditor {...rest} keybindings={{search: true}} getCellsForSelection={true}  />
+`}
+            </Highlight>
+            <Wrapper height={200}>
+                <DataEditor
+                    keybindings={{ search: true }}
+                    getCellContent={getContent}
+                    getCellsForSelection={true}
+                    columns={columns}
+                    rows={data.length}
+                />
+            </Wrapper>
+        </DocWrapper>
+    );
+};
+(Search as any).storyName = "06. Search";

package/src/docs/07-column-grouping.stories.tsx

@@ -0,0 +1,212 @@
+import * as React from "react";
+
+import { type GridCell, GridCellKind, type GridColumn, type Item } from "../internal/data-grid/data-grid-types.js";
+import { DataEditorAll as DataEditor } from "../data-editor-all.js";
+import { SimpleThemeWrapper } from "../stories/story-utils.js";
+import { DocWrapper, Highlight, Marked, Wrapper } from "./doc-wrapper.js";
+
+export default {
+    title: "Glide-Data-Grid/Docs",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface DummyItem {
+    name: string;
+    company: string;
+    phone: string;
+    email: string;
+}
+
+const data: DummyItem[] = [
+    {
+        name: "Deidre Morris",
+        company: "GONKLE",
+        email: "deidremorris@gonkle.com",
+        phone: "+1 (867) 507-3332",
+    },
+    {
+        name: "Sheryl Craig",
+        company: "EVENTAGE",
+        email: "sherylcraig@eventage.com",
+        phone: "+1 (869) 520-2227",
+    },
+    {
+        name: "Lidia Bowers",
+        company: "ANOCHA",
+        email: "lidiabowers@anocha.com",
+        phone: "+1 (808) 414-3826",
+    },
+    {
+        name: "Jones Norton",
+        company: "REPETWIRE",
+        email: "jonesnorton@repetwire.com",
+        phone: "+1 (875) 582-3320",
+    },
+    {
+        name: "Lula Bruce",
+        company: "COMDOM",
+        email: "lulabruce@comdom.com",
+        phone: "+1 (873) 452-2472",
+    },
+    {
+        name: "Larsen Montgomery",
+        company: "SQUISH",
+        email: "larsenmontgomery@squish.com",
+        phone: "+1 (893) 482-3651",
+    },
+    {
+        name: "Becky Bright",
+        company: "COMCUR",
+        email: "beckybright@comcur.com",
+        phone: "+1 (879) 494-2331",
+    },
+    {
+        name: "Charlotte Rowland",
+        company: "FROLIX",
+        email: "charlotterowland@frolix.com",
+        phone: "+1 (861) 439-2134",
+    },
+    {
+        name: "Sonya Hensley",
+        company: "GEEKETRON",
+        email: "sonyahensley@geeketron.com",
+        phone: "+1 (802) 553-2194",
+    },
+    {
+        name: "Stephenson Guthrie",
+        company: "EXOSWITCH",
+        email: "stephensonguthrie@exoswitch.com",
+        phone: "+1 (903) 449-3271",
+    },
+    {
+        name: "Mcmillan Cline",
+        company: "TURNLING",
+        email: "mcmillancline@turnling.com",
+        phone: "+1 (982) 496-2454",
+    },
+    {
+        name: "Kemp Davis",
+        company: "TETRATREX",
+        email: "kempdavis@tetratrex.com",
+        phone: "+1 (859) 594-2982",
+    },
+    {
+        name: "Matilda Levy",
+        company: "SLOFAST",
+        email: "matildalevy@slofast.com",
+        phone: "+1 (841) 521-2444",
+    },
+    {
+        name: "Hattie Simpson",
+        company: "COMTRAK",
+        email: "hattiesimpson@comtrak.com",
+        phone: "+1 (962) 587-3805",
+    },
+    {
+        name: "Kinney Munoz",
+        company: "IDETICA",
+        email: "kinneymunoz@idetica.com",
+        phone: "+1 (921) 513-2012",
+    },
+    {
+        name: "Lambert Raymond",
+        company: "TURNABOUT",
+        email: "lambertraymond@turnabout.com",
+        phone: "+1 (919) 519-2442",
+    },
+    {
+        name: "Bryant Dunlap",
+        company: "BYTREX",
+        email: "bryantdunlap@bytrex.com",
+        phone: "+1 (872) 583-2883",
+    },
+];
+
+export const ColumnGrouping: React.VFC = () => {
+    const getContent = React.useCallback((cell: Item): GridCell => {
+        const [col, row] = cell;
+        const dataRow = data[row];
+        const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
+        const d = dataRow[indexes[col]];
+        return {
+            kind: GridCellKind.Text,
+            allowOverlay: true,
+            displayData: d,
+            data: d,
+        };
+    }, []);
+
+    const columns = React.useMemo<GridColumn[]>(() => {
+        return [
+            {
+                title: "Name",
+                id: "name",
+                group: "Core",
+            },
+            {
+                title: "Company",
+                id: "company",
+                group: "Core",
+            },
+            {
+                title: "Email",
+                id: "email",
+                group: "Extra",
+            },
+            {
+                title: "Phone",
+                id: "phone",
+                group: "Extra",
+            },
+        ];
+    }, []);
+
+    return (
+        <DocWrapper>
+            <Marked>
+                {`
+# Column Grouping
+
+Columns can be grouped by assinging them a group. Easy peasy.`}
+            </Marked>
+            <Highlight>
+                {`
+const columns = React.useMemo<GridColumn[]>(() => {
+    return [
+        {
+            title: "Name",
+            id: "name",
+            group: "Core",
+        },
+        {
+            title: "Company",
+            id: "company",
+            group: "Core",
+        },
+        {
+            title: "Email",
+            id: "email",
+            group: "Extra",
+        },
+        {
+            title: "Phone",
+            id: "phone",
+            group: "Extra",
+        },
+    ];
+}, []);
+`}
+            </Highlight>
+            <Wrapper height={500}>
+                <DataEditor getCellContent={getContent} columns={columns} rows={data.length} />
+            </Wrapper>
+        </DocWrapper>
+    );
+};
+(ColumnGrouping as any).storyName = "07. Column Grouping";