New initial_search_value property in the table component to pre-fill the search bar with a value. This allows to display the table rows that will initially be filtered out by the search bar.

Author: lovasoa

CHANGELOG.md

@@ -6,6 +6,7 @@
  - Add support for encrypted Microsoft SQL Server connections. This finally allows connecting to databases that refuse clear-text connections, such as those hosted on Azure.
  - Easier json handling in databases without a native json type. SQLPage now detects when you use a json function in SQLite or MariaDB to generate a column, and automatically converts the resulting string to a json object. This allows easily using components that take json parameters (like the new columns component) in MariaDB and SQLite.
  - Add a new optional `database_password` configuration option to set the password for the database connection separately from the connection string. This allows to keep the password separate from the connection string, which can be useful for security purposes, logging, and avoids having to percent-encode the password in the connection string.
+ - New `initial_search_value` property in the table component to pre-fill the search bar with a value. This allows to display the table rows that will initially be filtered out by the search bar.
 
 ## 0.29.0 (2024-09-25)
  - New columns component: `columns`. Useful to display a comparison between items, or large key figures to an user.

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

@@ -682,6 +682,7 @@ 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),
+    ('initial_search_value', 'Pre-fills the search bar used to filter the table. The user will still be able to edit the value to display table rows that will initially be filtered out.', '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. 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),
@@ -715,10 +716,10 @@ INSERT INTO example(component, description, properties) VALUES
     'table',
     'A table with numbers',
     json(
-        '[{"component":"table", "search": true, "sort": true, "align_right": ["Price ($)", "Amount in stock"]}, ' ||
+        '[{"component":"table", "initial_search_value": "F-24", "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}
+          {"id": 131456, "part_no": "KIB-ROCC-F-24-205-B", "Price ($)": 127, "Amount in stock": 9}
         ]'
     )),
     (

sqlpage/sqlpage.js

@@ -27,12 +27,16 @@ function sqlpage_card() {
 function sqlpage_table(){
     // Tables
     for (const r of document.querySelectorAll("[data-pre-init=table]")) {
-        new List(r, {
+        const list = new List(r, {
             valueNames: [...r.getElementsByTagName("th")].map(t => t.textContent),
             searchDelay: 100,
             // Hurts performance, but prevents https://github.com/lovasoa/SQLpage/issues/542
             // indexAsync: true
         });
+        const search_input = r.querySelector("input.search");
+        if (search_input && search_input.value) {
+            list.search(search_input.value);
+        }
         r.removeAttribute("data-pre-init");
     }
 }

sqlpage/templates/table.handlebars

@@ -1,9 +1,12 @@
 <div class="card my-2 {{class}}" {{#if overflow}}style="width: fit-content;"{{/if}} {{#if id}}id="{{id}}"{{/if}}>
     <div class="card-body">
         <div class="table-responsive" {{#if (or sort search)}}data-pre-init="table"{{/if}}>
-            {{#if search}}
+            {{#if (or search initial_search_value)}}
                 <div class="p-2">
-                    <input type="search" class="form-control form-control-rounded fs-6 search" placeholder="Search…">
+                    <input type="search" class="form-control form-control-rounded fs-6 search" placeholder="Search…"
+                        value="{{initial_search_value}}"
+                    {{#if initial_search_value}}autocomplete="off"{{/if}}
+                    >
                 </div>
             {{/if}}
             <table class="table {{#if striped_rows}}table-striped {{/if}}{{#if