fix(data_table): apply initial column visibility on connect in DataTableColumnToggle

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: pierry01

docs/app/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js

@@ -2,9 +2,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
+  connect() {
+    this.element
+      .querySelectorAll("input[type=checkbox][data-column-key]")
+      .forEach((checkbox) =>
+        this._apply(checkbox.dataset.columnKey, checkbox.checked)
+      );
+  }
+
   toggle(event) {
-    const key = event.target.dataset.columnKey;
-    const visible = event.target.checked;
+    this._apply(event.target.dataset.columnKey, event.target.checked);
+  }
+
+  _apply(key, visible) {
     const root = this.element.closest('[data-controller~="ruby-ui--data-table"]');
     if (!root) return;
     root

gem/lib/ruby_ui/data_table/data_table_column_visibility_controller.js

@@ -2,9 +2,19 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
+  connect() {
+    this.element
+      .querySelectorAll("input[type=checkbox][data-column-key]")
+      .forEach((checkbox) =>
+        this._apply(checkbox.dataset.columnKey, checkbox.checked)
+      );
+  }
+
   toggle(event) {
-    const key = event.target.dataset.columnKey;
-    const visible = event.target.checked;
+    this._apply(event.target.dataset.columnKey, event.target.checked);
+  }
+
+  _apply(key, visible) {
     const root = this.element.closest('[data-controller~="ruby-ui--data-table"]');
     if (!root) return;
     root

mcp/data/registry.json

@@ -1186,7 +1186,7 @@
         },
         {
           "path": "data_table_column_visibility_controller.js",
-          "content": "// app/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js\nimport { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n  toggle(event) {\n    const key = event.target.dataset.columnKey;\n    const visible = event.target.checked;\n    const root = this.element.closest('[data-controller~=\"ruby-ui--data-table\"]');\n    if (!root) return;\n    root\n      .querySelectorAll(`[data-column=\"${key}\"]`)\n      .forEach((el) => el.classList.toggle(\"hidden\", !visible));\n  }\n}\n"
+          "content": "// app/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js\nimport { Controller } from \"@hotwired/stimulus\";\n\nexport default class extends Controller {\n  connect() {\n    this.element\n      .querySelectorAll(\"input[type=checkbox][data-column-key]\")\n      .forEach((checkbox) =>\n        this._apply(checkbox.dataset.columnKey, checkbox.checked)\n      );\n  }\n\n  toggle(event) {\n    this._apply(event.target.dataset.columnKey, event.target.checked);\n  }\n\n  _apply(key, visible) {\n    const root = this.element.closest('[data-controller~=\"ruby-ui--data-table\"]');\n    if (!root) return;\n    root\n      .querySelectorAll(`[data-column=\"${key}\"]`)\n      .forEach((el) => el.classList.toggle(\"hidden\", !visible));\n  }\n}\n"
         },
         {
           "path": "data_table_controller.js",