diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
index 8b48034df..cd2b8654f 100644
--- a/browser/CHANGELOG.md
+++ b/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
diff --git a/browser/data-browser/src/views/TablePage/EditorCells/FloatCell.tsx b/browser/data-browser/src/views/TablePage/EditorCells/FloatCell.tsx
index 612e03449..73d0c4431 100644
--- a/browser/data-browser/src/views/TablePage/EditorCells/FloatCell.tsx
+++ b/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 (
diff --git a/browser/data-browser/src/views/TablePage/EditorCells/IntegerCell.tsx b/browser/data-browser/src/views/TablePage/EditorCells/IntegerCell.tsx
index a0471d1b1..43dfd56ea 100644
--- a/browser/data-browser/src/views/TablePage/EditorCells/IntegerCell.tsx
+++ b/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 (
<>
- {value && `${value}${suffix}`}
+
+ {formatNumber(value as number | undefined, 0, numberFormatting)}
+
{isPercentage && }
>
);
diff --git a/browser/data-browser/src/views/TablePage/helpers/formatNumber.ts b/browser/data-browser/src/views/TablePage/helpers/formatNumber.ts
new file mode 100644
index 000000000..e3d5f75c5
--- /dev/null
+++ b/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);
+}