new align_right attribute in the table component

fixes #115

Author: lovasoa

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 0.15.0
 
+ - Add a new `align_right` attribute to the [table](https://sql.ophir.dev/documentation.sql?component=table#component) component to align a column to the right.
  - Fix display of long titles in the shell component.
  - New [`sqlpage.variables`](https://sql.ophir.dev/functions.sql?function=variables#function) function for easy handling of complex forms
     - `sqlpage.variables('get')` returns a json object containing all url parameters. Inside `/my_page.sql?x=1&y=2`, it returns the string `'{"x":"1","y":"2"}'`

examples/official-site/documentation.sql

@@ -116,22 +116,22 @@ select
                                             WHEN 'false' THEN 'FALSE'
                                             WHEN 'null' THEN 'NULL'
                                             ELSE quote(t.value)
-                                        END as key,
+                                        END as val,
                                         CASE parent.fullkey
                                             WHEN '$' THEN t.key
                                             ELSE parent.key
-                                        END as val
+                                        END as key
                                     from t inner join t parent on parent.id = t.parent
                                     where t.atom is not null
                                 ),
                                 key_val_padding as (select
-                                    key,
+                                    CASE WHEN key LIKE '% %' THEN format('"%s"', replace(key, '"', '""')) ELSE key END as key,
                                     val,
-                                    1 + max(0, max(case when length(key) < 30 then length(key) else 0 end) over () - length(key)) as padding
+                                    1 + max(0, max(case when length(val) < 30 then length(val) else 0 end) over () - length(val)) as padding
                                     from key_val
                                 )
                                 select group_concat(
-                                    format('    %s%.*cas %s', key, padding, ' ', val),
+                                    format('    %s%.*cas %s', val, padding, ' ', key),
                                      ',' || char(10)
                                 ) from key_val_padding
                             ) || ';',

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

@@ -406,6 +406,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('search', 'Add a search bar at the top of the table, letting users easily filter table rows by value.', 'BOOLEAN', TRUE, TRUE),
     ('markdown', 'Set this to the name of a column whose content should be interpreted as markdown . Used to display rich text with links in the table. This argument can be repeated multiple times to intepret multiple columns as markdown.', 'TEXT', TRUE, TRUE),
     ('icon', 'Set this to the name of a column whose content should be interpreted as a tabler icon name. Used to display icons in the table. This argument can be repeated multiple times to intepret multiple columns as icons. Introduced in v0.8.0.', 'TEXT', TRUE, TRUE),
+    ('align_right', 'Name of a column the contents of which should be right-aligned. This argument can be repeated multiple times to align multiple columns to the right. Introduced in v0.15.0.', 'TEXT', TRUE, TRUE),
     -- row level
     ('_sqlpage_css_class', 'For advanced users. Sets a css class on the table row. Added in v0.8.0.', 'TEXT', FALSE, TRUE),
     ('_sqlpage_color', 'Sets the background color of the row. Added in v0.8.0.', 'TEXT', FALSE, TRUE)
@@ -425,12 +426,12 @@ INSERT INTO example(component, description, properties) VALUES
         ]')),
     (
     'table',
-    'A table with dashes',
+    'A table with numbers',
     json(
-        '[{"component":"table", "search": true, "sort": true}, ' ||
-         '{"id": 31456, "part_no": "MIC-ROCC-F-23-206-C"},
-          {"id": 996, "part_no": "MIC-ROCC-F-24-206-A"},
-          {"id": 131456, "part_no": "KIB-ROCC-F-13-205-B"}
+        '[{"component":"table", "search": true, "sort": true, "align_right": ["Price ($)", "Amount in stock"]}, ' ||
+         '{"id": 31456, "part_no": "MIC-ROCC-F-23-206-C", "Price ($)": 12, "Amount in stock": 5},
+          {"id": 996, "part_no": "MIC-ROCC-F-24-206-A", "Price ($)": 1, "Amount in stock": 15},
+          {"id": 131456, "part_no": "KIB-ROCC-F-13-205-B", "Price ($)": 127, "Amount in stock": 9}
         ]'
     )
     );

sqlpage/templates/table.handlebars

@@ -13,9 +13,11 @@
                         <tr>
                             {{#each this}}
                                 {{#if (not (starts_with @key '_sqlpage_'))}}
-                                <th>
+                                <th class="
+                                    {{~#if (array_contains ../../align_right @key)}} text-end {{/if~}}
+                                ">
                                     {{~#if ../../sort~}}
-                                        <button class="table-sort sort" data-sort="{{@key}}">{{@key}}</button>
+                                        <button class="table-sort sort d-inline" data-sort="{{@key}}">{{@key}}</button>
                                     {{~else~}}
                                         {{~@key~}}
                                     {{~/if~}}
@@ -30,7 +32,11 @@
                     <tr class="{{_sqlpage_css_class}} {{#if _sqlpage_color}}bg-{{_sqlpage_color}}-lt{{/if}}">
                         {{~#each this~}}
                             {{~#if (not (starts_with @key '_sqlpage_'))~}}
-                            <td class="{{@key}} align-middle">
+                            <td class="
+                                {{~@key~}}
+                                {{~#if (array_contains ../../align_right @key)
+                                }} text-end {{
+                                /if}} align-middle">
                                 {{~#if (array_contains ../../markdown @key)~}}
                                     {{{markdown this}}}
                                 {{~else~}}