Tables number formatting respects user locale

Author: Polleps

browser/CHANGELOG.md

@@ -14,6 +14,8 @@ This changelog covers all three packages, as they are (for now) updated as a who
 ### Atomic Browser
 
 - Added persistent scrollbar to table
+- Improved table header UX
+- Numbers in tables now respect user locale
 
 ### @tomic/lib
 

browser/data-browser/src/views/TablePage/EditorCells/FloatCell.tsx

@@ -10,23 +10,10 @@ import { styled } from 'styled-components';
 import { InputBase } from './InputBase';
 import { ProgressBar } from './ProgressBar';
 import { CellContainer, DisplayCellProps, EditCellProps } from './Type';
+import { formatNumber } from '../helpers/formatNumber';
 
 const { numberFormats } = urls.instances;
 
-function formatValue(
-  value: number | undefined,
-  numberFormatting: string | undefined,
-  decimalPlaces: number | undefined,
-) {
-  const isPercentage = numberFormatting === numberFormats.percentage;
-  const suffix = isPercentage ? ' %' : '';
-
-  const formattedValue =
-    decimalPlaces !== undefined ? value?.toFixed(decimalPlaces) : value;
-
-  return `${formattedValue}${suffix}`;
-}
-
 function FloatCellEdit({
   value,
   onChange,
@@ -65,10 +52,10 @@ function FloatCellDisplay({
 
   const isPercentage = numberFormatting === numberFormats.percentage;
 
-  const formattedValue = formatValue(
+  const formattedValue = formatNumber(
     value as number | undefined,
+    decimalPlaces ?? 2,
     numberFormatting,
-    decimalPlaces,
   );
 
   return (

browser/data-browser/src/views/TablePage/EditorCells/IntegerCell.tsx

@@ -4,6 +4,7 @@ import { styled } from 'styled-components';
 import { InputBase } from './InputBase';
 import { ProgressBar } from './ProgressBar';
 import { CellContainer, DisplayCellProps, EditCellProps } from './Type';
+import { formatNumber } from '../helpers/formatNumber';
 
 const { numberFormats } = urls.instances;
 
@@ -40,11 +41,12 @@ function IntegerCellDisplay({
   );
 
   const isPercentage = numberFormatting === numberFormats.percentage;
-  const suffix = isPercentage ? ' %' : '';
 
   return (
     <>
-      <Aligned>{value && `${value}${suffix}`}</Aligned>
+      <Aligned>
+        {formatNumber(value as number | undefined, 0, numberFormatting)}
+      </Aligned>
       {isPercentage && <ProgressBar percentage={value as number} />}
     </>
   );

browser/data-browser/src/views/TablePage/helpers/formatNumber.ts

@@ -0,0 +1,27 @@
+import { urls } from '@tomic/react';
+
+export function formatNumber(
+  value: number | undefined,
+  numberOfDecimalPlaces: number,
+  formatting?: string,
+): string {
+  if (value === undefined) {
+    return '';
+  }
+
+  if (formatting === urls.instances.numberFormats.percentage) {
+    const formatter = new Intl.NumberFormat('default', {
+      style: 'percent',
+      minimumFractionDigits: numberOfDecimalPlaces,
+    });
+
+    return formatter.format(value);
+  }
+
+  const formatter = new Intl.NumberFormat('default', {
+    style: 'decimal',
+    minimumFractionDigits: numberOfDecimalPlaces,
+  });
+
+  return formatter.format(value);
+}