From c73ff58fc3092e25270da4d135eee742fa8b8d7d Mon Sep 17 00:00:00 2001
From: lovasoa <contact@ophir.dev>
Date: Fri, 6 Dec 2024 07:30:21 +0100
Subject: [PATCH] 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                                   |  3 ++-
 .../sqlpage/migrations/01_documentation.sql    |  4 ++--
 sqlpage/sqlpage.js                             | 18 ++++++++++--------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 309c5284..1fffa398 100644
--- a/CHANGELOG.md
+++ b/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)
 
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
index aa766876..561613a1 100644
--- a/examples/official-site/sqlpage/migrations/01_documentation.sql
+++ b/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"},
diff --git a/sqlpage/sqlpage.js b/sqlpage/sqlpage.js
index f1bd0521..0f0a07fa 100644
--- a/sqlpage/sqlpage.js
+++ b/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()