custom background colors in tables

Closes #25

Author: lovasoa

CHANGELOG.md

@@ -12,6 +12,7 @@
  - Add a new `icon` attribute to the [table](https://sql.ophir.dev/documentation.sql?component=table#component) component to display icons in the table.
  - Fix `textarea` fields in the [form](https://sql.ophir.dev/documentation.sql?component=table#component) component to display the provided `value` attribute. Thanks Frank for the contribution !
  - SQLPage now guarantees that a single web request will be handled by a single database connection. Previously, connections were repeatedly taken and put back to the connection pool between each statement, preventing the use of temporary tables, transactions, and other connection-specific features such as [`last_insert_rowid`](https://www.sqlite.org/lang_corefunc.html#last_insert_rowid). This makes it much easier to keep state between SQL statements in a single `.sql` file. Please report any performance regression you might encounter. See [the many-to-many relationship example](./examples/modeling%20a%20many%20to%20many%20relationship%20with%20a%20form/).
+  - The [table](https://sql.ophir.dev/documentation.sql?component=table#component) component now supports setting a custom background color, and a custom CSS class on a given table line.
 
 ## 0.7.2 (2023-07-10)
 

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

@@ -351,7 +351,10 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('sort', 'Make the columns clickable to let the user sort by the value contained in the column.', 'BOOLEAN', TRUE, TRUE),
     ('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)
+    ('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),
+    -- row level
+    ('_sqlpage_css_class', 'For advanced users. Sets a css class on the table row.', 'TEXT', FALSE, TRUE),
+    ('_sqlpage_color', 'Sets the background color of the row.', 'TEXT', FALSE, TRUE)
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES
@@ -363,7 +366,7 @@ INSERT INTO example(component, description, properties) VALUES
         '{"Forename": "Linus", "Surname": "Torvalds", "Pseudonym": "torvalds"}]')),
     ('table', 'A table that uses markdown to display links',
         json('[{"component":"table", "markdown": "Documentation", "icon": "icon"}, '||
-        '{"icon": "table", "name": "Table", "description": "Displays SQL results as a searchable table.", "Documentation": "[docs](documentation.sql?component=table)"},
+        '{"icon": "table", "name": "Table", "description": "Displays SQL results as a searchable table.", "Documentation": "[docs](documentation.sql?component=table)", "_sqlpage_color": "red"},
         {"icon": "timeline", "name": "Chart", "description": "Show graphs based on numeric data.", "Documentation": "[docs](documentation.sql?component=chart)"}
         ]'));
 

sqlpage/templates/table.handlebars

@@ -12,21 +12,24 @@
                         <thead>
                         <tr>
                             {{#each this}}
+                                {{~#if (not (starts_with @key '_sqlpage_'))~}}
                                 <th>
                                     {{#if ../../sort}}
                                         <button class="table-sort sort" data-sort="{{@key}}">{{@key}}</button>
                                     {{else}}
                                         {{@key}}
                                     {{/if}}
                                 </th>
+                                {{~/if~}}
                             {{/each}}
                         </tr>
                         </thead>
                     <tbody class="table-tbody list">{{#delay}}</tbody>{{/delay}}
                     {{/if}}
 
-                    <tr>
+                    <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">
                                 {{~#if (array_contains ../../markdown @key)~}}
                                     {{{markdown this}}}
@@ -38,6 +41,7 @@
                                 {{~/if~}}
                                 {{~/if~}}
                             </td>
+                            {{~/if~}}
                         {{~/each~}}
                     </tr>
                 {{~/each_row~}}

src/templates.rs

@@ -203,6 +203,9 @@ impl AllTemplates {
 
         handlebars.register_helper("sum", Box::new(sum_helper));
 
+        handlebars_helper!(starts_with: |s: str, prefix:str| s.starts_with(prefix));
+        handlebars.register_helper("starts_with", Box::new(starts_with));
+
         // to_array: convert a value to a single-element array. If the value is already an array, return it as-is.
         handlebars_helper!(to_array: |x: Json| match x {
             JsonValue::Array(arr) => arr.clone(),