add _sqlite_id to the table component

closes #538 (reply in thread)
sqlpage · Aug 15, 2024 · f46ccf5 · f46ccf5
1 parent b3c8d69
commit f46ccf5
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
  - Fixed multiple small display issues in the chart component.
 - Better error handling: Stop processing the SQL file after the first error is encountered.
  - The previous behavior was to try paresing a new statement after a syntax error, leading to a cascade of irrelevant error messages after a syntax error.
+- Allow giving an id to HTML rows in the table component. This allows making links to specific rows in the table using anchor links. (`my-table.sql#myid`)
 
 ## 0.26.0 (2024-08-06)
 ### Components

diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -691,7 +691,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('empty_description', 'Text to display if the table does not contain any row. Defaults to "no data".', '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)
+    ('_sqlpage_color', 'Sets the background color of the row. Added in v0.8.0.', 'TEXT', FALSE, TRUE),
+    ('_sqlpage_id', 'Sets the id of the html tabler row element. Allows you to make links targeting a specific row in a table.', 'TEXT', FALSE, TRUE)
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES

diff --git a/sqlpage/templates/table.handlebars b/sqlpage/templates/table.handlebars
@@ -34,7 +34,7 @@
                     <tbody class="table-tbody list">{{#delay}}</tbody>{{/delay}}
                     {{/if}}
 
-                    <tr class="{{_sqlpage_css_class}} {{#if _sqlpage_color}}bg-{{_sqlpage_color}}-lt{{/if}}">
+                    <tr class="{{_sqlpage_css_class}} {{#if _sqlpage_color}}bg-{{_sqlpage_color}}-lt{{/if}}" {{#if _sqlpage_id}}id="{{_sqlpage_id}}"{{/if}}>
                         {{~#each this~}}
                             {{~#if (not (starts_with @key '_sqlpage_'))~}}
                             <td class="