Add support for thousand and decimal separators in number cell (#638)

glideapps · Feb 10, 2023 · c9e1f3d · c9e1f3d
1 parent cc463a9
commit c9e1f3d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/core/src/data-grid-overlay-editor/private/number-overlay-editor.tsx b/packages/core/src/data-grid-overlay-editor/private/number-overlay-editor.tsx
@@ -12,6 +12,8 @@ interface Props {
     readonly validatedSelection?: SelectionRange;
     readonly fixedDecimals?: number;
     readonly allowNegative?: boolean;
+    readonly thousandSeparator?: boolean | string;
+    readonly decimalSeparator?: string;
 }
 
 function getDecimalSeparator() {
@@ -28,7 +30,7 @@ function getThousandSeprator() {
 }
 
 const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
-    const { value, onChange, disabled, highlight, validatedSelection, fixedDecimals, allowNegative } = p;
+    const { value, onChange, disabled, highlight, validatedSelection, fixedDecimals, allowNegative, thousandSeparator, decimalSeparator } = p;
 
     const inputRef = React.useRef<HTMLInputElement>();
 
@@ -51,8 +53,8 @@ const NumberOverlayEditor: React.FunctionComponent<Props> = p => {
                 disabled={disabled === true}
                 decimalScale={fixedDecimals}
                 allowNegative={allowNegative}
-                thousandSeparator={getThousandSeprator()}
-                decimalSeparator={getDecimalSeparator()}
+                thousandSeparator={thousandSeparator ?? getThousandSeprator()}
+                decimalSeparator={decimalSeparator ?? getDecimalSeparator()}
                 value={Object.is(value, -0) ? "-" : value ?? ""}
                 // decimalScale={3}
                 // prefix={"$"}

diff --git a/packages/core/src/data-grid/cells/number-cell.tsx b/packages/core/src/data-grid/cells/number-cell.tsx
@@ -31,6 +31,8 @@ export const numberCellRenderer: InternalCellRenderer<NumberCell> = {
                     value={value.data}
                     fixedDecimals={value.fixedDecimals}
                     allowNegative={value.allowNegative}
+                    thousandSeparator={value.thousandSeparator}
+                    decimalSeparator={value.decimalSeparator}
                     validatedSelection={validatedSelection}
                     onChange={x =>
                         onChange({

diff --git a/packages/core/src/data-grid/data-grid-types.ts b/packages/core/src/data-grid/data-grid-types.ts
@@ -442,6 +442,8 @@ export interface NumberCell extends BaseGridCell {
     readonly readonly?: boolean;
     readonly fixedDecimals?: number;
     readonly allowNegative?: boolean;
+    readonly thousandSeparator?: boolean | string;
+    readonly decimalSeparator?: string;
 }
 
 /** @category Cells */