Fix a bug where the table component would not sort columns that contained a space in their name

Fixes https://github.com/sqlpage/SQLPage/issues/724

CHANGELOG.md

@@ -10,7 +10,7 @@
       CREATE TEMPORARY TABLE t (x int) ON COMMIT DROP; -- postgres syntax
       -- do something with t
       -- previously, if an error occurred, the transaction would be left open, and the connection returned to the pool.
-      -- the next request could get a connection where the table `t` still exists, leading to a new error.
+      -- the next request could get a connection where the table `t` still exists, leading to a new hard to debug error.
       COMMIT;
       ```
     - This will now automatically rollback the transaction, even if an error occurs in the middle of it.
@@ -24,6 +24,7 @@
 - Add a new optional `sqlpage/on_reset.sql` file that can be used to execute some SQL code after the end of each page execution.
    - Useful to reset a connection to the database after each request.
 - Fix a bug where the `sqlpage.header` function would not work with headers containing uppercase letters.
+- Fix a bug where the table component would not sort columns that contained a space in their name.
 
 ## 0.31.0 (2024-11-24)
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -736,8 +736,8 @@ INSERT INTO example(component, description, properties) VALUES
         json('[{"component":"table"}, {"a": 1, "b": 2}, {"a": 3, "b": 4}]')),
     ('table', 'A table of users with filtering and sorting.',
         json('[{"component":"table", "sort":true, "search":true}, '||
-        '{"Forename": "Ophir", "Surname": "Lojkine", "Pseudonym": "lovasoa"},' ||
-        '{"Forename": "Linus", "Surname": "Torvalds", "Pseudonym": "torvalds"}]')),
+        '{"First Name": "Ophir", "Last Name": "Lojkine", "Pseudonym": "lovasoa"},' ||
+        '{"First Name": "Linus", "Last Name": "Torvalds", "Pseudonym": "torvalds"}]')),
     ('table', 'A table that uses markdown to display links',
         json('[{"component":"table", "markdown": "Name", "icon": "icon", "search": true}, '||
         '{"icon": "table", "name": "[Table](?component=table)", "description": "Displays SQL results as a searchable table.", "_sqlpage_color": "red"},

sqlpage/sqlpage.js

@@ -27,14 +27,16 @@ function table_search_sort(el) {
   const search_input = el.querySelector("input.search");
   const sort_buttons = [...el.querySelectorAll("button.sort[data-sort]")];
   const item_parent = el.querySelector("tbody");
-  const items = [...item_parent.querySelectorAll("tr")].map((el) => ({
-    el,
-    sort_keys: sort_buttons.map((b) => {
-      const sort_key = el.getElementsByClassName(b.dataset.sort)[0]
-        ?.textContent;
-      return { num: Number.parseFloat(sort_key), str: sort_key };
-    }),
-  }));
+  const items = [...item_parent.querySelectorAll("tr")].map((el) => {
+    const cells = el.getElementsByTagName("td");
+    return {
+      el,
+      sort_keys: sort_buttons.map((b, idx) => {
+        const sort_key = cells[idx]?.textContent;
+        return { num: Number.parseFloat(sort_key), str: sort_key };
+      }),
+    };
+  });
   function onSearch() {
     const lower_search = search_input.value
       .toLowerCase()