add tabler table icons

Author: lovasoa

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

@@ -350,7 +350,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     -- top level
     ('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)
+    ('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.', 'TEXT', TRUE, TRUE),
 ) x;
 
 INSERT INTO example(component, description, properties) VALUES
@@ -361,9 +362,9 @@ INSERT INTO example(component, description, properties) VALUES
         '{"Forename": "Ophir", "Surname": "Lojkine", "Pseudonym": "lovasoa"},' ||
         '{"Forename": "Linus", "Surname": "Torvalds", "Pseudonym": "torvalds"}]')),
     ('table', 'A table that uses markdown to display links',
-        json('[{"component":"table", "markdown": "Documentation"}, '||
-        '{"name": "table", "description": "Displays SQL results as a searchable table.", "Documentation": "[docs](documentation.sql?component=table)"},
-        {"name": "chart", "description": "Show graphs based on numeric data.", "Documentation": "[docs](documentation.sql?component=chart)"}
+        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": "timeline", "name": "Chart", "description": "Show graphs based on numeric data.", "Documentation": "[docs](documentation.sql?component=chart)"}
         ]'));
 
 

sqlpage/sqlpage.css

@@ -1,2 +1,6 @@
 /* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler.min.css */
-/* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css */
+/* !include https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-vendors.min.css */
+
+td > p {
+    margin: 0;
+}

sqlpage/templates/table.handlebars

@@ -27,12 +27,16 @@
 
                     <tr>
                         {{~#each this~}}
-                            <td class="{{@key}}">
+                            <td class="{{@key}} align-middle">
                                 {{~#if (array_contains ../../markdown @key)~}}
                                     {{{markdown this}}}
+                                {{~else~}}
+                                {{~#if (array_contains ../../icon @key)~}}
+                                    <i class="ti ti-{{this}}"></i>
                                 {{~else~}}
                                     {{this}}
                                 {{~/if~}}
+                                {{~/if~}}
                             </td>
                         {{~/each~}}
                     </tr>