From 1109e27b04f18a1a9e0b7da00b8fadb10dfaad25 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 18 Oct 2024 09:56:35 +0100
Subject: [PATCH 1/3] Display numbers using the locale format in tables

---
 .../frontend-core/src/components/grid/cells/TextCell.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
index 0cf0ab2004..1f6415598f 100644
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -52,7 +52,11 @@
 {:else}
   <div class="text-cell" class:number={type === "number"}>
     <div class="value">
-      {value ?? ""}
+      {#if type === "number"}
+        {(value ?? "").toLocaleString()}
+      {:else}
+        {value ?? ""}
+      {/if}
     </div>
   </div>
 {/if}

From 1509d7d650928bba8ff92e4207afbb9f1894259a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 18 Oct 2024 10:44:36 +0100
Subject: [PATCH 2/3] Use single number formatter for more performant locale
 string conversions

---
 .../frontend-core/src/components/grid/cells/TextCell.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
index 1f6415598f..b6b6756068 100644
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -1,3 +1,7 @@
+<script context="module">
+  const NumberFormatter = Intl.NumberFormat()
+</script>
+
 <script>
   import { onMount } from "svelte"
 
@@ -53,7 +57,7 @@
   <div class="text-cell" class:number={type === "number"}>
     <div class="value">
       {#if type === "number"}
-        {(value ?? "").toLocaleString()}
+        {NumberFormatter.format(value ?? "")}
       {:else}
         {value ?? ""}
       {/if}

From a3371974027175231980ccf6af8d43f7dc6f670e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 18 Oct 2024 11:01:15 +0100
Subject: [PATCH 3/3] Improve number formatting to handle additional edge cases

---
 .../components/grid/cells/NumberCell.svelte   | 24 ++++++++++++++++++-
 .../src/components/grid/cells/TextCell.svelte | 12 +++-------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/NumberCell.svelte b/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
index 2acec7d11e..c8ae96ef21 100644
--- a/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
@@ -1,3 +1,7 @@
+<script context="module">
+  const NumberFormatter = Intl.NumberFormat()
+</script>
+
 <script>
   import TextCell from "./TextCell.svelte"
 
@@ -9,6 +13,24 @@
     const newValue = isNaN(float) ? null : float
     onChange(newValue)
   }
+
+  const formatNumber = value => {
+    const type = typeof value
+    if (type !== "string" && type !== "number") {
+      return ""
+    }
+    if (type === "string" && !value.trim().length) {
+      return ""
+    }
+    const res = NumberFormatter.format(value)
+    return res === "NaN" ? value : res
+  }
 </script>
 
-<TextCell {...$$props} onChange={numberOnChange} bind:api type="number" />
+<TextCell
+  {...$$props}
+  onChange={numberOnChange}
+  bind:api
+  type="number"
+  format={formatNumber}
+/>
diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
index b6b6756068..9275bca3c6 100644
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -1,7 +1,3 @@
-<script context="module">
-  const NumberFormatter = Intl.NumberFormat()
-</script>
-
 <script>
   import { onMount } from "svelte"
 
@@ -11,11 +7,13 @@
   export let type = "text"
   export let readonly = false
   export let api
+  export let format = null
 
   let input
   let active = false
 
   $: editable = focused && !readonly
+  $: displayValue = format?.(value) ?? value ?? ""
 
   const handleChange = e => {
     onChange(e.target.value)
@@ -56,11 +54,7 @@
 {:else}
   <div class="text-cell" class:number={type === "number"}>
     <div class="value">
-      {#if type === "number"}
-        {NumberFormatter.format(value ?? "")}
-      {:else}
-        {value ?? ""}
-      {/if}
+      {displayValue}
     </div>
   </div>
 {/if}