Add support for freeze_columns and freeze_headers in the table component

fixes #683

Author: lovasoa

CHANGELOG.md

@@ -30,6 +30,7 @@
   - Adds support for the `LIMIT max_rows, offset` syntax in SQLite. https://www.sqlite.org/lang_select.html#limitoffset
   - Adds support for `ANY`, `ALL`, and `SOME` subqueries, like `SELECT * FROM t WHERE a = ANY (SELECT b FROM t2)` 
 - Add support for `change_percent` without `description` in the big_number component to display the percentage change of a value.
+- Add support for `freeze_columns` and `freeze_headers` in the table component to freeze columns and headers.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

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

@@ -694,6 +694,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('small', 'Whether to use compact table.', 'BOOLEAN', TRUE, TRUE),
     ('description','Description of the table content and helps users with screen readers to find a table and understand what it’s.','TEXT',TRUE,TRUE),
     ('empty_description', 'Text to display if the table does not contain any row. Defaults to "no data".', 'TEXT', TRUE, TRUE),
+    ('freeze_columns', 'Whether to freeze the leftmost column of the table.', 'BOOLEAN', TRUE, TRUE),
+    ('freeze_headers', 'Whether to freeze the top row of the table.', 'BOOLEAN', 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.', 'COLOR', FALSE, TRUE),
@@ -739,6 +741,68 @@ INSERT INTO example(component, description, properties) VALUES
     'table',
     'An empty table with a friendly message',
     json('[{"component":"table", "empty_description": "Nothing to see here at the moment."}]')
+    ),
+    (
+    'table',
+    'A large table with many rows and columns, with frozen columns on the left and headers on top. This allows users to browse large datasets without loosing track of their position.',
+    json('[
+    {"component": "table", "freeze_columns": true, "freeze_headers": true},
+    {
+        "feature": "SQL Execution",
+        "description": "Fully compatible with existing databases SQL dialects, executes any SQL query.",
+        "benefits": "Short learning curve, easy to use, interoperable with existing tools."
+    },
+    {
+        "feature": "Data Visualization",
+        "description": "Automatic visualizations of query results: graphs, plots, pie charts, heatmaps, etc.",
+        "benefits": "Quickly analyze data trends, attractive and easy to understand, no external visualization tools or languages to learn."
+    },
+    {
+        "feature": "User Authentication",
+        "description": "Supports user sessions, from basic auth to single sign-on.",
+        "benefits": "Secure, enforces access control policies, and provides a customizable security layer."
+    },
+    {
+        "feature": "APIs",
+        "description": "Allows building JSON REST APIs and integrating with external APIs.",
+        "benefits": "Enables automation and integration with other platforms, facilitates data exchange."
+    },
+    {
+        "feature": "Files",
+        "description": "File uploads, downloads and processing. Supports local filesystem and database storage.",
+        "benefits": "Convenient file management, secure data handling, flexible storage options, integrates with existing systems."
+    },
+    {
+        "feature": "Maps",
+        "description": "Supports GeoJSON and is compatible with GIS data for map visualization.",
+        "benefits": "Geospatial data representation, integrates with geographic information systems."
+    },
+    {
+        "feature": "Custom Components",
+        "description": "Build advanced features using HTML, JavaScript, and CSS.",
+        "benefits": "Tailor-made user experiences, easy to implement custom UI requirements."
+    },
+    {
+        "feature": "Forms",
+        "description": "Insert and update data in databases based on user input.",
+        "benefits": "Simplified data input and management, efficient user interactions with databases."
+    },
+    {
+        "feature": "DB Compatibility",
+        "description": "Works with MySQL, PostgreSQL, SQLite, Microsoft SQL Server and compatible databases.",
+        "benefits": "Broad compatibility with popular database systems, ensures seamless integration."
+    },
+    {
+        "feature": "Security",
+        "description": "Built-in protection against common web vulnerabilities: no SQL injection, no XSS.",
+        "benefits": "Passes audits and security reviews, reduces the risk of data breaches."
+    },
+    {
+        "feature": "Performance",
+        "description": "Designed for performance, with a focus on efficient data processing and minimal overhead.",
+        "benefits": "Quickly processes large datasets, handles high volumes of requests, and minimizes server load."
+    }
+]')
     ),
     (
     'table',

sqlpage/sqlpage.css

@@ -63,3 +63,27 @@ code {
   fill: var(--tblr-body-color) !important;
   font-weight: var(--tblr-body-font-weight);
 }
+
+/** table **/
+.table-freeze-headers thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.table-freeze-headers {
+  max-height: 50vh;
+}
+
+.table-freeze-columns th:first-child {
+  position: sticky;
+  left:0;
+  z-index: 2;
+}
+
+.table-freeze-columns td:first-child{
+  position: sticky;
+  left:0;
+  background: var(--tblr-bg-surface-secondary);
+  box-shadow: 3px 0 3px var(--tblr-border-color);
+}

sqlpage/templates/table.handlebars

@@ -11,11 +11,17 @@
             >
         </div>
         {{/if}}
-        <div class="table-responsive">
-            <table class="table {{#if striped_rows}}table-striped {{/if}}{{#if
-            striped_columns}}table-striped-columns {{/if}}{{#if
-            hover}}table-hover {{/if}}{{#if border}}table-bordered {{/if}}
-            {{#if small}}table-sm {{/if}}">
+        <div class="table-responsive
+            {{~#if freeze_columns}} table-freeze-columns text-nowrap {{/if~}}
+            {{~#if freeze_headers}} table-freeze-headers text-nowrap {{/if~}}
+        ">
+            <table class="table
+            {{~#if striped_rows}} table-striped {{/if~}}
+            {{~#if striped_columns}} table-striped-columns {{/if~}}
+            {{~#if hover}} table-hover {{/if~}}
+            {{~#if border}} table-bordered {{/if~}}
+            {{~#if small}} table-sm {{/if~}}
+            ">
             {{#if description}}<caption>{{description}}</caption>{{/if}}
                 {{#each_row}}
                     {{#if (eq @row_index 0)}}