Merge pull request #14821 from Budibase/number-locale-strings

Display numbers using locale format in tables

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}
+/>

packages/frontend-core/src/components/grid/cells/TextCell.svelte

@@ -7,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)
@@ -52,7 +54,7 @@
 {:else}
   <div class="text-cell" class:number={type === "number"}>
     <div class="value">
-      {value ?? ""}
+      {displayValue}
     </div>
   </div>
 {/if}