[WIP] Add bigint support in number cell

packages/core/src/cells/number-cell.tsx

@@ -23,33 +23,42 @@ export const numberCellRenderer: InternalCellRenderer<NumberCell> = {
     }),
     provideEditor: () => p => {
         const { isHighlighted, onChange, value, validatedSelection } = p;
+        const isBigInt = typeof value.data === "bigint";
+
         return (
             <React.Suspense fallback={null}>
                 <NumberOverlayEditor
                     highlight={isHighlighted}
                     disabled={value.readonly === true}
                     value={value.data}
-                    fixedDecimals={value.fixedDecimals}
+                    fixedDecimals={isBigInt ? 0 : value.fixedDecimals}
                     allowNegative={value.allowNegative}
                     thousandSeparator={value.thousandSeparator}
                     decimalSeparator={value.decimalSeparator}
                     validatedSelection={validatedSelection}
                     onChange={x =>
                         onChange({
                             ...value,
-                            data: Number.isNaN(x.floatValue ?? 0) ? 0 : x.floatValue,
+                            data: isBigInt ? BigInt(x.value ?? 0) : Number.isNaN(x.floatValue ?? 0) ? 0 : x.floatValue,
                         })
                     }
                 />
             </React.Suspense>
         );
     },
     onPaste: (toPaste, cell, details) => {
-        const newNumber =
-            typeof details.rawValue === "number"
+        const isBigInt = typeof cell.data === "bigint";
+
+        try {
+            const newNumber = isBigInt
+                ? BigInt(typeof details.rawValue === "string" ? details.rawValue : toPaste)
+                : typeof details.rawValue === "number"
                 ? details.rawValue
                 : Number.parseFloat(typeof details.rawValue === "string" ? details.rawValue : toPaste);
-        if (Number.isNaN(newNumber) || cell.data === newNumber) return undefined;
-        return { ...cell, data: newNumber, displayData: details.formattedString ?? cell.displayData };
+            if (Number.isNaN(newNumber) || cell.data === newNumber) return undefined;
+            return { ...cell, data: newNumber, displayData: details.formattedString ?? cell.displayData };
+        } catch {
+            return undefined;
+        }
     },
 };

packages/core/src/internal/data-grid-overlay-editor/private/number-overlay-editor.tsx

@@ -5,7 +5,7 @@ import type { SelectionRange } from "../../data-grid/data-grid-types.js";
 import type { NumberFormatValues } from "react-number-format/types/types.js";
 
 interface Props {
-    readonly value: number | undefined;
+    readonly value: number | BigInt | undefined;
     readonly disabled?: boolean;
     readonly onChange: (values: NumberFormatValues) => void;
     readonly highlight: boolean;
@@ -25,7 +25,7 @@ function getDecimalSeparator() {
     return result ?? ".";
 }
 
-function getThousandSeprator() {
+function getThousandSeparator() {
     return getDecimalSeparator() === "." ? "," : ".";
 }
 
@@ -63,10 +63,10 @@ const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
                 disabled={disabled === true}
                 decimalScale={fixedDecimals}
                 allowNegative={allowNegative}
-                thousandSeparator={thousandSeparator ?? getThousandSeprator()}
+                thousandSeparator={thousandSeparator ?? getThousandSeparator()}
                 decimalSeparator={decimalSeparator ?? getDecimalSeparator()}
-                value={Object.is(value, -0) ? "-" : value ?? ""}
-                // decimalScale={3}
+                value={Object.is(value, -0) ? "-" : value?.toString() ?? ""}
+                valueIsNumericString={true}
                 // prefix={"$"}
                 onValueChange={onChange}
             />

packages/core/src/internal/data-grid/data-grid-types.ts

@@ -336,7 +336,7 @@ export interface TextCell extends BaseGridCell {
 export interface NumberCell extends BaseGridCell {
     readonly kind: GridCellKind.Number;
     readonly displayData: string;
-    readonly data: number | undefined;
+    readonly data: number | BigInt | undefined;
     readonly readonly?: boolean;
     readonly fixedDecimals?: number;
     readonly allowNegative?: boolean;