[Feature] Add DataTable docs and interactive demo (#463)

* [Feature] Add DataTable and NativeSelect component docs

Add documentation pages for the new DataTable component family
(v1.2.0) with interactive demo featuring search, sort, pagination,
column visibility, row selection, and bulk actions.

Also copies NativeSelect component (DataTable dependency) and
updates layout/preview for better table rendering.

* Update Gemfile.lock to match current Gemfile

* Fix test to only GET docs routes, skip POST bulk actions

Author: djalmaaraujo

Gemfile.lock

@@ -14,15 +14,15 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 856136f40bc4d5be942e39506e56fb08348afc93
+  revision: a3e5c8488b11a4c15caf2f2391181f8f057a589f
   branch: main
   specs:
-    ruby_ui (1.1.0)
+    ruby_ui (1.2.0)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    action_text-trix (2.1.18)
+    action_text-trix (2.1.15)
       railties
     actioncable (8.1.3)
       actionpack (= 8.1.3)
@@ -100,9 +100,9 @@ GEM
       public_suffix (>= 2.0.2, < 7.0)
     ast (2.4.3)
     base64 (0.3.0)
-    bigdecimal (4.1.2)
+    bigdecimal (3.3.1)
     bindex (0.8.1)
-    bootsnap (1.23.0)
+    bootsnap (1.19.0)
       msgpack (~> 1.2)
     builder (3.3.0)
     capybara (3.40.0)
@@ -115,35 +115,34 @@ GEM
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
     coderay (1.1.3)
-    concurrent-ruby (1.3.6)
-    connection_pool (3.0.2)
+    concurrent-ruby (1.3.5)
+    connection_pool (2.5.4)
     crass (1.0.6)
     cssbundling-rails (1.4.3)
       railties (>= 6.0.0)
-    date (3.5.1)
-    debug (1.11.1)
+    date (3.5.0)
+    debug (1.11.0)
       irb (~> 1.10)
       reline (>= 0.3.8)
     drb (2.2.3)
-    erb (6.0.2)
+    erb (6.0.0)
     erubi (1.13.1)
     globalid (1.3.0)
       activesupport (>= 6.1)
-    i18n (1.14.8)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    io-console (0.8.2)
-    irb (1.17.0)
+    io-console (0.8.1)
+    irb (1.15.3)
       pp (>= 0.6.0)
-      prism (>= 1.3.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
     jsbundling-rails (1.3.1)
       railties (>= 6.0.0)
-    json (2.19.4)
+    json (2.15.1)
     language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
     logger (1.7.0)
-    loofah (2.25.1)
+    loofah (2.24.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     lucide-rails (0.7.4)
@@ -159,11 +158,9 @@ GEM
     method_source (1.1.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.9)
-    minitest (6.0.4)
-      drb (~> 2.0)
-      prism (~> 1.5)
+    minitest (5.26.2)
     msgpack (1.8.0)
-    net-imap (0.6.3)
+    net-imap (0.5.12)
       date
       net-protocol
     net-pop (0.1.2)
@@ -173,19 +170,19 @@ GEM
     net-smtp (0.5.1)
       net-protocol
     nio4r (2.7.5)
-    nokogiri (1.19.2)
+    nokogiri (1.18.10)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.19.2-x86_64-linux-gnu)
+    nokogiri (1.18.10-x86_64-linux-gnu)
       racc (~> 1.4)
     parallel (1.27.0)
-    parser (3.3.10.1)
+    parser (3.3.9.0)
       ast (~> 2.4.1)
       racc
     pp (0.6.3)
       prettyprint
     prettyprint (0.2.0)
-    prism (1.9.0)
+    prism (1.6.0)
     propshaft (1.3.2)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
@@ -194,20 +191,20 @@ GEM
       coderay (~> 1.1)
       method_source (~> 1.0)
       reline (>= 0.6.0)
-    psych (5.3.1)
+    psych (5.2.6)
       date
       stringio
     public_suffix (6.0.1)
     puma (7.2.0)
       nio4r (~> 2.0)
     racc (1.8.1)
-    rack (3.2.6)
-    rack-session (2.1.2)
+    rack (3.2.4)
+    rack-session (2.1.1)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
     rack-test (2.2.0)
       rack (>= 1.3)
-    rackup (2.3.1)
+    rackup (2.2.1)
       rack (>= 3)
     rails (8.1.3)
       actioncable (= 8.1.3)
@@ -227,8 +224,8 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.7.0)
-      loofah (~> 2.25)
+    rails-html-sanitizer (1.6.2)
+      loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     railties (8.1.3)
       actionpack (= 8.1.3)
@@ -241,39 +238,39 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.3.1)
-    rdoc (7.2.0)
+    rdoc (6.15.1)
       erb
       psych (>= 4.0.0)
       tsort
-    regexp_parser (2.11.3)
+    regexp_parser (2.11.2)
     reline (0.6.3)
       io-console (~> 0.5)
     rexml (3.4.4)
     rouge (4.7.0)
     rss (0.3.2)
       rexml
-    rubocop (1.84.2)
+    rubocop (1.81.7)
       json (~> 2.3)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.49.0, < 2.0)
+      rubocop-ast (>= 1.47.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.49.0)
+    rubocop-ast (1.48.0)
       parser (>= 3.3.7.2)
-      prism (~> 1.7)
-    rubocop-performance (1.26.1)
+      prism (~> 1.4)
+    rubocop-performance (1.25.0)
       lint_roller (~> 1.1)
       rubocop (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.47.1, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
     ruby-progressbar (1.13.0)
     rubyzip (3.2.2)
     securerandom (0.4.1)
-    selenium-webdriver (4.43.0)
+    selenium-webdriver (4.38.0)
       base64 (~> 0.2)
       logger (~> 1.4)
       rexml (~> 3.2, >= 3.2.5)
@@ -283,25 +280,25 @@ GEM
     sqlite3 (2.9.3)
       mini_portile2 (~> 2.8.0)
     sqlite3 (2.9.3-x86_64-linux-gnu)
-    standard (1.54.0)
+    standard (1.52.0)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.0)
-      rubocop (~> 1.84.0)
+      rubocop (~> 1.81.7)
       standard-custom (~> 1.0.0)
       standard-performance (~> 1.8)
     standard-custom (1.0.2)
       lint_roller (~> 1.0)
       rubocop (~> 1.50)
-    standard-performance (1.9.0)
+    standard-performance (1.8.0)
       lint_roller (~> 1.1)
-      rubocop-performance (~> 1.26.0)
+      rubocop-performance (~> 1.25.0)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
-    stringio (3.2.0)
+    stringio (3.1.8)
     tailwind_merge (1.4.0)
       sin_lru_redux (~> 2.5)
-    thor (1.5.0)
-    timeout (0.6.1)
+    thor (1.4.0)
+    timeout (0.4.4)
     tsort (0.2.0)
     turbo-rails (2.0.23)
       actionpack (>= 7.1.0)
@@ -310,21 +307,22 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (3.2.0)
       unicode-emoji (~> 4.1)
-    unicode-emoji (4.2.0)
+    unicode-emoji (4.1.0)
     uri (1.1.1)
     useragent (0.16.11)
-    web-console (4.3.0)
-      actionview (>= 8.0.0)
+    web-console (4.2.1)
+      actionview (>= 6.0.0)
+      activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
-      railties (>= 8.0.0)
+      railties (>= 6.0.0)
     websocket (1.2.11)
     websocket-driver (0.8.0)
       base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.7.5)
+    zeitwerk (2.7.3)
 
 PLATFORMS
   ruby
@@ -359,4 +357,4 @@ RUBY VERSION
    ruby 3.4.7p58
 
 BUNDLED WITH
-   2.6.4
+   2.6.9

app/components/docs/visual_code_example.rb

@@ -78,16 +78,16 @@ def render_preview_tab(&block)
       end
 
       def iframe_preview
-        div(class: "relative aspect-[4/2.5] w-full overflow-hidden rounded-md border", data: {controller: "iframe-theme"}) do
-          div(class: "absolute inset-0 hidden w-[1600px] bg-background md:block") do
+        div(class: "relative min-h-[500px] w-full overflow-hidden rounded-md border", data: {controller: "iframe-theme"}) do
+          div(class: "absolute inset-0 hidden w-full bg-background md:block") do
             iframe(src: @src, class: "size-full", data: {iframe_theme_target: "iframe"})
           end
         end
       end
 
       def raw_preview
         div(class: "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border") do
-          div(class: "preview flex min-h-[350px] w-full justify-center p-10 items-center") do
+          div(class: "preview min-h-[350px] w-full p-6") do
             decoded_code = CGI.unescapeHTML(@display_code)
             @context.instance_eval(decoded_code)
           end

app/components/ruby_ui/data_table/data_table.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTable < Base
+    register_element :turbo_frame, tag: "turbo-frame"
+
+    def initialize(id:, **attrs)
+      @id = id
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      turbo_frame(id: @id, target: "_top") do
+        div(**attrs) do
+          yield if block
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full space-y-4",
+        data: {controller: "ruby-ui--data-table"}
+      }
+    end
+  end
+end

app/components/ruby_ui/data_table/data_table_bulk_actions.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableBulkActions < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden items-center gap-2",
+        data: {"ruby-ui--data-table-target": "bulkActions"}
+      }
+    end
+  end
+end

app/components/ruby_ui/data_table/data_table_column_toggle.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableColumnToggle < Base
+    def initialize(columns:, **attrs)
+      @columns = columns
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        render RubyUI::DropdownMenu.new do
+          render RubyUI::DropdownMenuTrigger.new do
+            render RubyUI::Button.new(variant: :outline, size: :sm) do
+              plain "Columns"
+              # inline chevron-down SVG (lucide 24px, 1px stroke)
+              svg(
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                stroke_width: "2",
+                stroke_linecap: "round",
+                stroke_linejoin: "round",
+                class: "w-4 h-4 ml-1"
+              ) do |s|
+                s.polyline(points: "6 9 12 15 18 9")
+              end
+            end
+          end
+          render RubyUI::DropdownMenuContent.new do
+            @columns.each do |col|
+              label(class: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent") do
+                input(
+                  type: "checkbox",
+                  checked: true,
+                  class: "h-4 w-4 rounded border border-input accent-primary cursor-pointer",
+                  data: {
+                    column_key: col[:key].to_s,
+                    action: "change->ruby-ui--data-table-column-visibility#toggle"
+                  }
+                )
+                span { plain col[:label] }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative",
+        data: {controller: "ruby-ui--data-table-column-visibility"}
+      }
+    end
+  end
+end