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); +}