diff --git a/packages/core/src/cells/number-cell.tsx b/packages/core/src/cells/number-cell.tsx index f926ffa33..629c99be0 100644 --- a/packages/core/src/cells/number-cell.tsx +++ b/packages/core/src/cells/number-cell.tsx @@ -23,13 +23,15 @@ export const numberCellRenderer: InternalCellRenderer = { }), provideEditor: () => p => { const { isHighlighted, onChange, value, validatedSelection } = p; + const isBigInt = typeof value.data === "bigint"; + return ( = { 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, }) } /> @@ -45,11 +47,18 @@ export const numberCellRenderer: InternalCellRenderer = { ); }, 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; + } }, }; 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 index 4a539916f..2bd937101 100644 --- 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 @@ -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 = 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} /> diff --git a/packages/core/src/internal/data-grid/data-grid-types.ts b/packages/core/src/internal/data-grid/data-grid-types.ts index 0d4a4c69b..0c20dd46a 100644 --- a/packages/core/src/internal/data-grid/data-grid-types.ts +++ b/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;