Fix a bug where the table component would not add the right css classes to table cells

fixes #762

Author: lovasoa

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 0.33.0 (unreleased)
 
 - Add support for HTTP Basic Authentication in the [fetch](https://sql-page.com/documentation.sql?component=fetch#component) function.
+- Fix a bug where the table component would not add the right css classes to table cells.
 
 ## 0.32.1 (2025-01-03)
 

sqlpage/templates/table.handlebars

@@ -50,11 +50,10 @@
                     <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="
-                                {{~@key~}}
+                            <td class="align-middle {{@key~}}
                                 {{~#if (array_contains_case_insensitive ../../align_right @key)}} text-end {{/if~}}
                                 {{~#if (array_contains_case_insensitive ../../align_center @key)}} text-center {{/if~}}
-                                align-middle">
+                            ">
                                 {{~#if (array_contains_case_insensitive ../../markdown @key)~}}
                                     {{{markdown this}}}
                                 {{~else~}}

tests/end-to-end/official-site.spec.ts

@@ -90,7 +90,10 @@ test("table filtering", async ({ page }) => {
 
   const searchInput = tableSection.getByPlaceholder("Search…");
   await searchInput.fill("chart");
-  await expect(tableSection.getByRole("cell", { name: "Chart" })).toBeVisible();
+  const chartCell = tableSection.getByRole("cell", { name: "Chart" });
+  await expect(chartCell).toBeVisible();
+  await expect(chartCell).toHaveClass(/\bname\b/);
+  await expect(chartCell).toHaveCSS('vertical-align', 'middle');
   await expect(
     tableSection.getByRole("cell", { name: "Table" }),
   ).not.toBeVisible();