@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/reorder-rows.stories.tsx

@@ -0,0 +1,83 @@
+import { range } from "lodash";
+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, defaultProps } from "../../data-editor/stories/utils.js";
+import type { GridColumn } 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";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Reorder Rows"
+                    description={
+                        <>
+                            <Description>
+                                Rows can be re-arranged by using the <PropName>onRowMoved</PropName> callback. When set
+                                the first row can be used to drag and drop.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ReorderRows: React.VFC = () => {
+    const cols = React.useMemo<GridColumn[]>(
+        () => [
+            {
+                title: "Col A",
+                width: 150,
+            },
+            {
+                title: "Col B",
+                width: 150,
+            },
+        ],
+        []
+    );
+
+    const [rowData, setRowData] = React.useState(() => {
+        return range(0, 50).map(x => [`A: ${x}`, `B: ${x}`]);
+    });
+
+    const getCellContent = React.useCallback<DataEditorProps["getCellContent"]>(
+        ([col, row]) => {
+            return {
+                kind: GridCellKind.Text,
+                allowOverlay: false,
+                data: rowData[row][col],
+                displayData: rowData[row][col],
+            };
+        },
+        [rowData]
+    );
+
+    const reorderRows = React.useCallback((from: number, to: number) => {
+        setRowData(cv => {
+            const d = [...cv];
+            const removed = d.splice(from, 1);
+            d.splice(to, 0, ...removed);
+            return d;
+        });
+    }, []);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers={"both"}
+            onRowMoved={reorderRows}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={50}
+        />
+    );
+};

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

@@ -0,0 +1,67 @@
+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="Resizable columns"
+                    description={
+                        <>
+                            <Description>
+                                You can resize columns by dragging their edges, as long as you respond to the{" "}
+                                <PropName>onColumnResize</PropName> prop.
+                            </Description>
+                            <MoreInfo>
+                                By setting the <PropName>overscrollX</PropName> property extra space can be allocated at
+                                the end of the grid to allow for easier resizing of the final column. You can highlight
+                                multiple columns to resize them all at once.
+                            </MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const ResizableColumns: React.VFC = () => {
+    const { cols, getCellContent, onColumnResize } = useMockDataGenerator(60);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={cols}
+            rowMarkers="both"
+            overscrollX={200}
+            overscrollY={200}
+            maxColumnAutoWidth={500}
+            maxColumnWidth={2000}
+            rows={50}
+            scaleToRem={true}
+            theme={React.useMemo(
+                () => ({
+                    baseFontStyle: "0.8125rem",
+                    headerFontStyle: "600 0.8125rem",
+                    editorFontSize: "0.8125rem",
+                }),
+                []
+            )}
+            onColumnResize={onColumnResize}
+        />
+    );
+};

package/src/docs/examples/right-element.stories.tsx

@@ -0,0 +1,87 @@
+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="Right Element"
+                    description={
+                        <Description>
+                            A DOM element may be added as a trailer to the grid by using the{" "}
+                            <PropName>rightElement</PropName> prop.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const RightElement: React.VFC = () => {
+    const { cols, getCellContent, setCellValue } = useMockDataGenerator(8, false);
+
+    const columns = React.useMemo(() => cols.map(c => ({ ...c, grow: 1 })), [cols]);
+
+    const [numRows, setNumRows] = React.useState(300);
+
+    const onRowAppended = React.useCallback(() => {
+        const newRow = numRows;
+        setNumRows(cv => cv + 1);
+        for (let c = 0; c < 6; c++) {
+            setCellValue([c, newRow], {
+                displayData: "",
+                data: "",
+            } as any);
+        }
+    }, [numRows, setCellValue]);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            columns={columns}
+            rowMarkers={"both"}
+            onCellEdited={setCellValue}
+            trailingRowOptions={{
+                hint: "New row...",
+                sticky: true,
+                tint: true,
+            }}
+            rows={numRows}
+            onRowAppended={onRowAppended}
+            rightElementProps={{ sticky: true }}
+            rightElement={
+                <div
+                    style={{
+                        height: "100%",
+                        padding: "20px 20px 40px 20px",
+                        width: 200,
+                        color: "black",
+                        whiteSpace: "pre-wrap",
+                        backgroundColor: "rgba(240, 240, 250, 0.2)",
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        boxShadow: "0 0 10px rgba(0, 0, 0, 0.15)",
+                        backdropFilter: "blur(12px)",
+                    }}>
+                    This is a real DOM element. You can put whatever you want here. You can also size it as big as you
+                    want. {"\n\n"}It also does not have to be sticky.
+                </div>
+            }
+        />
+    );
+};

package/src/docs/examples/right-to-left.stories.tsx

@@ -0,0 +1,73 @@
+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 { GridCellKind } 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="Right to Left support"
+                    description={
+                        <>
+                            <Description>
+                                The data editor automatically detects RTL in text cells and respects it.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const RightToLeft: React.VFC = () => {
+    const { cols, getCellContent, setCellValue, onColumnResize } = useMockDataGenerator(60, false);
+
+    const realCols = React.useMemo(() => {
+        const result = [...cols];
+
+        result[0] = {
+            ...result[0],
+            title: "גלייד",
+            hasMenu: true,
+        };
+
+        return result;
+    }, [cols]);
+
+    const getCellContentMangled = React.useCallback<typeof getCellContent>(
+        item => {
+            const [col, _row] = item;
+            if (col !== 0) return getCellContent(item);
+            return {
+                kind: GridCellKind.Text,
+                allowOverlay: true,
+                data: "אני גדעון, מומחה לאפליקציות גלייד.",
+                displayData: "אני גדעון, מומחה לאפליקציות גלייד.",
+                allowWrapping: true,
+            };
+        },
+        [getCellContent]
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContentMangled}
+            columns={realCols}
+            onColumnResize={onColumnResize}
+            getCellsForSelection={true}
+            rowMarkers={"both"}
+            onHeaderMenuClick={() => alert("menu click")}
+            onPaste={true}
+            onCellEdited={setCellValue}
+            rows={1000}
+        />
+    );
+};

package/src/docs/examples/row-and-header-sizes.stories.tsx

@@ -0,0 +1,75 @@
+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="Row and Header sizes"
+                    description={
+                        <>
+                            <Description>
+                                The row size can be controlled with <PropName>rowHeight</PropName> and the header size
+                                with <PropName>headerHeight</PropName>.
+                            </Description>
+                            <MoreInfo>Use the story&apos;s controls to resize them</MoreInfo>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface RowAndHeaderSizesProps {
+    rowHeight: number;
+    headerHeight: number;
+}
+export const RowAndHeaderSizes: React.VFC<RowAndHeaderSizesProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(6);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowHeight={p.rowHeight}
+            headerHeight={p.headerHeight}
+            rowMarkers={"number"}
+            getCellContent={getCellContent}
+            columns={cols}
+            rows={1000}
+        />
+    );
+};
+(RowAndHeaderSizes as any).args = {
+    rowHeight: 34,
+    headerHeight: 34,
+};
+(RowAndHeaderSizes as any).argTypes = {
+    rowHeight: {
+        control: {
+            type: "range",
+            min: 20,
+            max: 200,
+        },
+    },
+    headerHeight: {
+        control: {
+            type: "range",
+            min: 20,
+            max: 200,
+        },
+    },
+};

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

@@ -0,0 +1,142 @@
+import React from "react";
+import { DataEditorAll as DataEditor, type DataEditorAllProps } 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 { GridCellKind, type Item } from "../../internal/data-grid/data-grid-types.js";
+import { type RowGroupingOptions } from "../../data-editor/row-grouping.js";
+import { useRowGrouping } from "../../data-editor/row-grouping-api.js";
+import _ from "lodash";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Row Grouping"
+                    description={
+                        <Description>
+                            The <PropName>rowGrouping</PropName> prop can be used to group and even fold rows.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const RowGrouping: React.VFC<any> = (p: { freezeColumns: number }) => {
+    const { cols, getCellContent } = useMockDataGenerator(100);
+    const rows = 100_000;
+
+    const [rowGrouping, setRowGrouping] = React.useState<RowGroupingOptions>(() => ({
+        groups: [
+            {
+                headerIndex: 10,
+                isCollapsed: true,
+                subGroups: [
+                    {
+                        headerIndex: 15,
+                        isCollapsed: false,
+                    },
+                    {
+                        headerIndex: 20,
+                        isCollapsed: false,
+                    },
+                ],
+            },
+            {
+                headerIndex: 30,
+                isCollapsed: false,
+            },
+            ...Array.from({ length: 100 }, (_value, i): RowGroupingOptions["groups"][number] => {
+                return {
+                    headerIndex: (rows / 100) * i,
+                    isCollapsed: false,
+                };
+            }),
+        ],
+        height: 55,
+        navigationBehavior: "block",
+        selectionBehavior: "block-spanning",
+        themeOverride: {
+            bgCell: "rgba(0, 100, 255, 0.1)",
+        },
+    }));
+
+    const { mapper, getRowGroupingForPath, updateRowGroupingByPath } = useRowGrouping(rowGrouping, rows);
+
+    const onCellClicked = React.useCallback(
+        (item: Item) => {
+            const { path, isGroupHeader } = mapper(item);
+
+            if (isGroupHeader && item[0] === 0) {
+                const group = getRowGroupingForPath(rowGrouping.groups, path);
+
+                setRowGrouping(prev => {
+                    const result: RowGroupingOptions = {
+                        ...prev,
+                        groups: updateRowGroupingByPath(prev.groups, path, { isCollapsed: !group.isCollapsed }),
+                    };
+
+                    return result;
+                });
+            }
+        },
+        [getRowGroupingForPath, mapper, rowGrouping.groups, updateRowGroupingByPath]
+    );
+
+    const getCellContentMangled = React.useCallback<DataEditorAllProps["getCellContent"]>(
+        item => {
+            const { path, isGroupHeader, originalIndex } = mapper(item);
+            if (item[0] === 0) {
+                return {
+                    kind: GridCellKind.Text,
+                    data: `Row ${JSON.stringify(path)}`,
+                    displayData: `Row ${JSON.stringify(path)}`,
+                    allowOverlay: false,
+                };
+            } else if (isGroupHeader) {
+                return {
+                    kind: GridCellKind.Loading,
+                    allowOverlay: false,
+                    // span: [1, cols.length - 1],
+                };
+            }
+
+            return getCellContent(originalIndex);
+        },
+        [getCellContent, mapper]
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowGrouping={rowGrouping}
+            height="100%"
+            rowMarkers="both"
+            freezeColumns={p.freezeColumns}
+            getRowThemeOverride={(_row, groupRow, _contentRow) => {
+                if (groupRow % 2 === 0) {
+                    return {
+                        bgCell: "rgba(0, 0, 0, 0.1)",
+                    };
+                }
+                return undefined;
+            }}
+            onCellClicked={onCellClicked}
+            getCellContent={getCellContentMangled}
+            columns={cols}
+            // verticalBorder={false}
+            rows={rows}
+        />
+    );
+};

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

@@ -0,0 +1,67 @@
+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 type { GetRowThemeCallback } from "../../internal/data-grid/render/data-grid-render.cells.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import type { GridMouseEventArgs } from "../../internal/data-grid/event-args.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Row Hover Effect"
+                    description={
+                        <Description>
+                            Through careful usage of the <PropName>onItemHovered</PropName> callback it is possible to
+                            easily create a row hover effect.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const RowHover: React.VFC = () => {
+    const { cols, getCellContent } = useAllMockedKinds();
+
+    const [hoverRow, setHoverRow] = React.useState<number | undefined>(undefined);
+
+    const onItemHovered = React.useCallback((args: GridMouseEventArgs) => {
+        const [_, row] = args.location;
+        setHoverRow(args.kind !== "cell" ? undefined : row);
+    }, []);
+
+    const getRowThemeOverride = React.useCallback<GetRowThemeCallback>(
+        row => {
+            if (row !== hoverRow) return undefined;
+            return {
+                bgCell: "#f7f7f7",
+                bgCellMedium: "#f0f0f0",
+            };
+        },
+        [hoverRow]
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowMarkers="both"
+            onItemHovered={onItemHovered}
+            getCellContent={getCellContent}
+            getRowThemeOverride={getRowThemeOverride}
+            columns={cols}
+            rows={300}
+        />
+    );
+};

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { type RowMarkerOptions } 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 { SimpleThemeWrapper } from "../../stories/story-utils.js";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Row markers"
+                    description={
+                        <>
+                            <Description>
+                                Row Markers can be controlled by setting the <PropName>rowMarkers</PropName> prop.
+                            </Description>
+                        </>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+interface RowMarkersProps {
+    markers: RowMarkerOptions["kind"];
+    headerDisabled: boolean;
+}
+
+export const RowMarkers: React.VFC<RowMarkersProps> = p => {
+    const { cols, getCellContent } = useMockDataGenerator(10, false);
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            getCellContent={getCellContent}
+            verticalBorder={false}
+            rowMarkers={{
+                kind: p.markers,
+                checkboxStyle: "square",
+                headerAlwaysVisible: true,
+                headerDisabled: p.headerDisabled,
+                headerTheme: {
+                    textMedium: "rgba(51, 51, 51, 0.50)",
+                },
+            }}
+            columns={cols}
+            rows={400}
+        />
+    );
+};
+(RowMarkers as any).args = {
+    markers: "both",
+    headerDisabled: false,
+};
+(RowMarkers as any).argTypes = {
+    markers: {
+        control: { type: "select" },
+        options: ["both", "checkbox", "number", "none", "clickable-number", "checkbox-visible"],
+    },
+    headerDisabled: {
+        control: { type: "boolean" },
+    },
+};