glideapps · vpsinghg · Oct 15, 2024
diff --git a/packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx b/packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx
@@ -65,7 +65,7 @@ const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
                 allowNegative={allowNegative}
                 thousandSeparator={thousandSeparator ?? getThousandSeprator()}
                 decimalSeparator={decimalSeparator ?? getDecimalSeparator()}
-                value={Object.is(value, -0) ? "-" : value ?? ""}
+                defaultValue={Object.is(value, -0) ? "-" : value ?? ""}
                 // decimalScale={3}
                 // prefix={"$"}
                 onValueChange={onChange}

diff --git a/test-projects/cra5-gdg/public/index.html b/test-projects/cra5-gdg/public/index.html
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="portal" />
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/test-projects/cra5-gdg/src/App.tsx b/test-projects/cra5-gdg/src/App.tsx
@@ -1,18 +1,10 @@
-import React from "react";
-import logo from "./logo.svg";
 import "./App.css";
 import Grid from "./components/Grid";
 
 function App() {
     return (
         <div className="App">
-            <header className="App-header">
-                <img src={logo} className="App-logo" alt="logo" />
-                <Grid />
-                <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-                    Learn React
-                </a>
-            </header>
+            <Grid />
         </div>
     );
 }

diff --git a/test-projects/cra5-gdg/src/components/Grid.tsx b/test-projects/cra5-gdg/src/components/Grid.tsx
@@ -1,36 +1,101 @@
-import * as React from "react";
-import DataEditor, { DataEditorProps, GridCellKind, GridColumn } from "@glideapps/glide-data-grid";
+import { useCallback, useState } from "react";
+import _ from "lodash";
 import "@glideapps/glide-data-grid/dist/index.css";
 
+import { DataEditor, GridCell, GridCellKind, GridColumn, Item } from "@glideapps/glide-data-grid";
+
+// Define the shape of the data
+interface Person {
+    firstName: string;
+    lastName: string;
+    id: number;
+}
+
+const data: Person[] = [
+    {
+        firstName: "John",
+        lastName: "Doe",
+        id: 100002,
+    },
+    {
+        firstName: "Maria",
+        lastName: "Garcia",
+        id: 100002,
+    },
+    {
+        firstName: "Nancy",
+        lastName: "Jones",
+        id: 100002,
+    },
+    {
+        firstName: "James",
+        lastName: "Smith",
+        id: 100002,
+    },
+];
+
+// Grid columns may also provide icon, overlayIcon, menu, style, and theme overrides
+const columns: GridColumn[] = [
+    { title: "First Name", width: 100, id: "firstName" },
+    { title: "Last Name", width: 100, id: "lastName" },
+    { title: "Id", width: 100, id: "id" },
+];
+
 export default function Grid() {
-    const getData = React.useCallback<DataEditorProps["getCellContent"]>(
-        cell => ({
-            kind: GridCellKind.Text,
-            allowOverlay: true,
-            readonly: true,
-            data: `${cell[0]},${cell[1]}`,
-            displayData: `${cell[0]},${cell[1]}`,
-        }),
-        []
+    const [rows, setRows] = useState<Person[]>(data);
+
+    const onCellEdited = useCallback(
+        (cell: readonly [number, number], newValue: GridCell) => {
+            const [col_id, row_id] = cell;
+            const column = _.get(columns, col_id, {}) as GridColumn; // Type assertion here
+            // Check if newValue is of type GridCell and has a data property
+            if (newValue.kind === GridCellKind.Text || newValue.kind === GridCellKind.Number) {
+                const value = newValue.data;
+
+                if (column.id && value !== undefined) {
+                    const key = column.id as keyof Person; // Type assertion
+                    rows[row_id][key] = value as never; // Use `as never` to bypass assignment restrictions
+                    setRows([...rows]);
+                }
+            }
+        },
+        [rows]
     );
 
-    const cols = React.useMemo<GridColumn[]>(
-        () => [
-            {
-                width: 100,
-                title: "A",
-            },
-            {
-                width: 100,
-                title: "B",
-            },
-            {
-                width: 100,
-                title: "C",
-            },
-        ],
-        []
+    const onCellData = useCallback(
+        function getData([col, row]: Item): GridCell {
+            const person = rows[row];
+
+            if (col === 0) {
+                return {
+                    kind: GridCellKind.Text,
+                    data: person.firstName,
+                    allowOverlay: false,
+                    readonly: false,
+                    displayData: person.firstName,
+                };
+            } else if (col === 1) {
+                return {
+                    kind: GridCellKind.Text,
+                    data: person.lastName,
+                    allowOverlay: false,
+                    displayData: person.lastName,
+                    readonly: true,
+                };
+            } else if (col === 2) {
+                return {
+                    kind: GridCellKind.Number,
+                    data: person.id,
+                    allowOverlay: true,
+                    displayData: person.id.toString(),
+                    readonly: false,
+                };
+            } else {
+                throw new Error("Invalid column index");
+            }
+        },
+        [rows]
     );
 
-    return <DataEditor width={800} height={500} getCellContent={getData} columns={cols} rows={100} />;
+    return <DataEditor columns={columns} onCellEdited={onCellEdited} getCellContent={onCellData} rows={rows.length} />;
 }