Added an option to format numbers using toLocaleString() for table columns

Author: francesco-cattoglio

sqlpage/sqlpage.js

@@ -35,7 +35,22 @@ function table_search_sort(el) {
       el,
       sort_keys: sort_buttons.map((b, idx) => {
         const sort_key = cells[idx]?.textContent;
-        return { num: Number.parseFloat(sort_key), str: sort_key };
+        const num = Number.parseFloat(sort_key);
+        // if the user requested for this column to be formatted using `toLocaleString()`,
+        // we replace the cell contents
+        if (cells[idx]?.hasAttribute("number-format-locale") && !Number.isNaN(num)) {
+          const digits = cell.getAttribute("number-format-digits");
+          // The variable `digits` can be left empty or contain an integer
+          const options = digits
+            ? { minimumFractionDigits: digits, maximumFractionDigits: digits }
+            : {};
+          // Use the host default language, with the options we just defined
+          cell.innerHTML = num.toLocaleString(undefined, options);
+        }
+        return {
+          num,
+          str: sort_key,
+        };
       }),
     };
   });

sqlpage/templates/table.handlebars

@@ -53,7 +53,10 @@
                             <td class="align-middle {{@key~}}
                                 {{~#if (array_contains_case_insensitive ../../align_right @key)}} text-end {{/if~}}
                                 {{~#if (array_contains_case_insensitive ../../align_center @key)}} text-center {{/if~}}
-                            ">
+                            "
+                                {{~#if (array_contains_case_insensitive ../../number_format_locale @key)}} number-format-locale {{/if~}}
+                                number-format-digits={{ ../../number_format_digits }}
+                            >
                                 {{~#if (array_contains_case_insensitive ../../markdown @key)~}}
                                     {{{markdown this}}}
                                 {{~else~}}