infotable 0.1.0

data/app/models/infotable/application_record.rb

@@ -0,0 +1,5 @@
+module Infotable
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/infotable/tables/_column_visibility.html.erb

@@ -0,0 +1,100 @@
+<%# Column Visibility Panel %>
+<div class="px-4 py-4">
+  <div class="mb-3">
+    <p class="text-sm text-gray-600"><%= t('infotable.columns.instructions') %></p>
+  </div>
+
+  <form id="column-visibility-form-<%= table_name %>"
+        data-table-name="<%= table_name %>"
+        data-infotable--drawer-target="columnList"
+        data-columns-schema="<%= table_class.columns.map { |c| { name: c[:name], pinned: c[:pinned] } }.to_json %>"
+        class="space-y-2">
+
+    <% table_class.columns.each do |column| %>
+      <div class="column-item group p-3 bg-white rounded-lg border border-gray-100 hover:border-indigo-200 transition-all duration-150"
+           data-column-name="<%= column[:name] %>"
+           data-default-visible="<%= column[:visible] %>"
+           data-default-pinned="<%= column[:pinned] %>">
+        <div class="flex items-center gap-3">
+          <%# Drag Handle %>
+          <div class="drag-handle cursor-move flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
+            </svg>
+          </div>
+
+          <%# Checkbox and Label %>
+          <label class="flex items-center gap-3 cursor-pointer flex-1">
+            <input type="checkbox"
+                   name="visible_columns[]"
+                   value="<%= column[:name] %>"
+                   data-column-name="<%= column[:name] %>"
+                   data-default-visible="<%= column[:visible] %>"
+                   data-action="change->infotable--drawer#updateColumnVisibility"
+                   <%= 'checked' if column[:visible] %>
+                   class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 focus:ring-1 transition-colors">
+            <div class="flex-1">
+              <span class="text-sm font-medium text-gray-700"><%= column[:label] %></span>
+              <% if column[:type] %>
+                <span class="ml-2 text-xs text-gray-400">(<%= column[:type] %>)</span>
+              <% end %>
+            </div>
+          </label>
+
+          <%# Pin Controls %>
+          <div class="flex gap-1 flex-shrink-0">
+            <%# Pin Left %>
+            <button type="button"
+                    data-action="click->infotable--drawer#pinColumn"
+                    data-column-name="<%= column[:name] %>"
+                    data-pin-direction="left"
+                    title="<%= t('infotable.columns.pin.left') %>"
+                    class="pin-btn pin-left w-7 h-7 rounded flex items-center justify-center <%= column[:pinned] == :left ? 'bg-indigo-100 text-indigo-600' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600' %> transition-colors">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+              </svg>
+            </button>
+            <%# Pin Right %>
+            <button type="button"
+                    data-action="click->infotable--drawer#pinColumn"
+                    data-column-name="<%= column[:name] %>"
+                    data-pin-direction="right"
+                    title="<%= t('infotable.columns.pin.right') %>"
+                    class="pin-btn pin-right w-7 h-7 rounded flex items-center justify-center <%= column[:pinned] == :right ? 'bg-indigo-100 text-indigo-600' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600' %> transition-colors">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+  </form>
+
+  <%# Footer Actions %>
+  <div class="mt-4 pt-4 border-t border-gray-100 space-y-2">
+    <div class="flex gap-2">
+      <button type="button"
+              data-action="click->infotable--drawer#selectAllColumns"
+              data-table-name="<%= table_name %>"
+              class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 transition-all">
+        <%= t('infotable.columns.actions.select_all') %>
+      </button>
+      <button type="button"
+              data-action="click->infotable--drawer#deselectAllColumns"
+              data-table-name="<%= table_name %>"
+              class="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 transition-all">
+        <%= t('infotable.columns.actions.deselect_all') %>
+      </button>
+    </div>
+
+    <%# Reset to Defaults Button %>
+    <button type="button"
+            data-action="click->infotable--drawer#resetToDefaults"
+            data-table-name="<%= table_name %>"
+            class="w-full px-3 py-2 border border-red-200 rounded-lg text-sm font-medium text-red-700 bg-red-50 hover:bg-red-100 hover:border-red-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-red-500 transition-all">
+      <%= t('infotable.columns.actions.reset_to_defaults') %>
+    </button>
+  </div>
+</div>

data/app/views/infotable/tables/_filter_drawer.html.erb

@@ -0,0 +1,65 @@
+<%# Filter Drawer - Right side sliding panel %>
+<% autofilter = if config&.autofilter.nil?
+      Infotable.configuration.autofilter
+    else
+      config.autofilter
+    end %>
+<div class="flex flex-col h-full">
+  <%# Drawer Content - Scrollable %>
+  <div class="flex-1 overflow-y-auto px-4 py-4">
+    <form id="filter-form-<%= table_name %>"
+          action="<%= infotable_table_data_path(table_name: table_name) %>"
+          method="get"
+          data-table-frame="<%= table_name %>_content"
+          data-action="submit->infotable--drawer#submitFilters"
+          data-autofilter="<%= autofilter.to_s %>"
+          class="space-y-4">
+
+      <%# Preserve sort and per_page params %>
+      <% if params[:sort].is_a?(String) && params[:sort].present? %>
+        <input type="hidden" name="sort" value="<%= params[:sort] %>">
+      <% end %>
+      <% if params[:sort_column].present? %>
+        <input type="hidden" name="sort_column" value="<%= params[:sort_column] %>">
+        <input type="hidden" name="sort_direction" value="<%= params[:sort_direction] %>">
+      <% end %>
+      <% if params[:per_page].present? %>
+        <input type="hidden" name="per_page" value="<%= params[:per_page] %>">
+      <% end %>
+
+      <%# Render filter for each filterable column %>
+      <% table_class.filterable_columns.each do |column| %>
+        <div class="group p-4 bg-white rounded-lg border border-gray-100 hover:border-indigo-200 transition-all duration-150">
+          <label class="block text-sm font-semibold text-gray-700 mb-3">
+            <%= column[:label] %>
+          </label>
+
+          <%= render "infotable/tables/filters/#{filter_type_for_column(column)}",
+                     column: column,
+                     table_name: table_name,
+                     table_class: table_class %>
+        </div>
+      <% end %>
+
+    </form>
+  </div>
+
+  <%# Drawer Footer with actions %>
+  <div class="px-4 py-3 border-t border-gray-100 bg-white">
+    <div class="flex gap-2">
+      <button type="button"
+              data-action="click->infotable--drawer#clearFilters"
+              data-table-name="<%= table_name %>"
+              class="<%= autofilter ? 'w-full' : 'flex-1' %> px-4 py-2 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 transition-all">
+        <%= t('infotable.filters.actions.clear_all') %>
+      </button>
+      <% unless autofilter %>
+        <button type="submit"
+                form="filter-form-<%= table_name %>"
+                class="flex-1 px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500 transition-all">
+          <%= t('infotable.filters.actions.apply_filters') %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/infotable/tables/_next_page_frame.html.erb

@@ -0,0 +1,39 @@
+<%# Next page frame for infinite scroll - lazy loads when visible %>
+<%# Frame src points to turbo_stream URL - Turbo handles it automatically %>
+<% if @pagy.next %>
+  <%= turbo_frame_tag(
+    "#{params[:table_name]}_pagination",
+    loading: :lazy,
+    src: infotable_table_data_path(
+      table_url_params(page: @pagy.next, format: :turbo_stream)
+    )
+  ) do %>
+    <%# Loading placeholder - modern spinner design %>
+    <div class="flex items-center justify-center py-12 border-t border-gray-100 bg-gradient-to-b from-white/[0.98] to-gray-50/[0.98] backdrop-blur-sm">
+      <div class="text-center space-y-3">
+        <div class="mx-auto animate-spin">
+          <div class="relative">
+            <svg class="h-10 w-10 text-indigo-500 drop-shadow-[0_4px_12px_rgba(99,102,241,0.2)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <div class="absolute inset-0 flex items-center justify-center">
+              <div class="h-4 w-4 bg-indigo-500 rounded-full animate-pulse"></div>
+            </div>
+          </div>
+        </div>
+        <p class="text-sm font-medium text-gray-600 tracking-wide animate-pulse"><%= t('infotable.table.loading.more_items') %></p>
+      </div>
+    </div>
+  <% end %>
+<% else %>
+  <%# No more pages - show end indicator %>
+  <div class="border-t border-gray-100 bg-gradient-to-b from-gray-50/60 to-white/60 px-6 py-8 text-center">
+    <div class="inline-flex items-center gap-2 text-sm text-gray-500">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+      </svg>
+      <span class="font-medium"><%= t('infotable.table.loading.all_loaded') %></span>
+    </div>
+  </div>
+<% end %>

data/app/views/infotable/tables/_pagination.html.erb

@@ -0,0 +1,101 @@
+<%# Modern pagination using Pagy %>
+<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
+  <%# Results info and per-page selector %>
+  <div class="flex-1 flex items-center gap-4">
+    <p class="text-sm text-gray-700">
+      <%= t('infotable.pagination.showing') %>
+      <span class="font-semibold text-gray-900"><%= pagy.from %></span>
+      <%= t('infotable.pagination.to') %>
+      <span class="font-semibold text-gray-900"><%= pagy.to %></span>
+      <% if pagy.count %>
+        <%= t('infotable.pagination.of') %>
+        <span class="font-semibold text-gray-900"><%= pagy.count %></span>
+        <%= t('infotable.pagination.results') %>
+      <% end %>
+    </p>
+
+    <%# Per-page selector %>
+    <div class="flex items-center gap-2">
+      <label for="per_page_<%= table_name %>" class="text-sm text-gray-700">
+        <%= t('infotable.pagination.rows_per_page') %>
+      </label>
+      <select id="per_page_<%= table_name %>"
+              class="text-sm border border-gray-300 rounded-lg px-2 py-1 bg-white hover:border-gray-400 transition-colors cursor-pointer"
+              data-action="change->infotable--table#changePerPage"
+              data-table-name="<%= table_name %>"
+              data-current-query="<%= table_url_params.except(:table_name).to_query %>">
+        <% per_page_choices(@table_class, pagy.limit).each do |size| %>
+          <option value="<%= size %>" <%= 'selected' if pagy.limit == size %>>
+            <%= size %>
+          </option>
+        <% end %>
+      </select>
+    </div>
+  </div>
+
+  <%# Pagination controls %>
+  <div class="flex items-center gap-2">
+    <%# Previous button %>
+    <% if pagy.previous %>
+      <%= link_to infotable_table_data_path(table_url_params(page: pagy.previous, per_page: pagy.limit)),
+          class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-all",
+          data: { turbo_frame: "#{table_name}_content" } do %>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+        </svg>
+        <span class="hidden sm:inline"><%= t('infotable.pagination.previous') %></span>
+      <% end %>
+    <% else %>
+      <span class="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+        </svg>
+        <span class="hidden sm:inline"><%= t('infotable.pagination.previous') %></span>
+      </span>
+    <% end %>
+
+    <%# Page numbers - Show in ascending order with current page gray/disabled %>
+    <div class="flex items-center gap-1">
+      <% 
+        # Get all pages from series, ensure current page is included, and sort numerically
+        pages = pagy.count ? infotable_page_window(pagy) : []
+        pages << pagy.page unless pages.include?(pagy.page)
+        pages = pages.uniq.sort
+      %>
+      
+      <% pages.each do |page_num| %>
+        <% if page_num == pagy.page %>
+          <%# Current page - disabled/not clickable (gray) %>
+          <span aria-current="page" class="inline-flex items-center justify-center w-10 h-10 text-sm font-semibold rounded-lg bg-gray-200 text-gray-600 border border-gray-300 cursor-not-allowed">
+            <%= page_num %>
+          </span>
+        <% else %>
+          <%# Other pages - clickable %>
+          <%= link_to page_num,
+              infotable_table_data_path(table_url_params(page: page_num, per_page: pagy.limit)),
+              class: "inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-lg transition-all text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 hover:border-gray-400",
+              data: { turbo_frame: "#{table_name}_content" } %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%# Next button %>
+    <% if pagy.next %>
+      <%= link_to infotable_table_data_path(table_url_params(page: pagy.next, per_page: pagy.limit)),
+          class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-all",
+          data: { turbo_frame: "#{table_name}_content" } do %>
+        <span class="hidden sm:inline"><%= t('infotable.pagination.next') %></span>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+      <% end %>
+    <% else %>
+      <span class="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-200 rounded-lg cursor-not-allowed">
+        <span class="hidden sm:inline"><%= t('infotable.pagination.next') %></span>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+      </span>
+    <% end %>
+  </div>
+</div>

data/app/views/infotable/tables/_side_panel.html.erb

@@ -0,0 +1,63 @@
+<%# Side Panel with Tabs for Filters and Columns %>
+<div class="flex flex-col h-full bg-white">
+  <%# Panel Header %>
+  <div class="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
+    <div class="flex items-center gap-2.5">
+      <div class="p-2 bg-indigo-50 rounded-lg">
+        <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+      </div>
+      <h3 class="text-base font-semibold text-gray-900" data-infotable--drawer-target="panelTitle" data-columns-title="<%= t('infotable.drawer.panel_title.customize_columns') %>" data-filters-title="<%= t('infotable.drawer.panel_title.filters') %>"><%= table_class.filterable_columns.any? ? t('infotable.drawer.panel_title.filters') : t('infotable.drawer.panel_title.customize_columns') %></h3>
+    </div>
+    <button type="button"
+            data-action="click->infotable--drawer#close"
+            class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-50 rounded-md transition-colors">
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+
+  <%# Tabs Navigation %>
+  <div class="flex border-b border-gray-100 bg-white px-4">
+    <% if table_class.filterable_columns.any? %>
+      <button type="button"
+              data-action="click->infotable--drawer#switchTab"
+              data-tab="filters"
+              data-infotable--drawer-target="tabButton"
+              class="flex-1 px-3 py-2.5 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 transition-colors">
+        <%= t('infotable.drawer.tabs.filters') %>
+      </button>
+    <% end %>
+    <button type="button"
+            data-action="click->infotable--drawer#switchTab"
+            data-tab="columns"
+            data-infotable--drawer-target="tabButton"
+            data-table-name="<%= table_name %>"
+            class="flex-1 px-3 py-2.5 text-sm font-medium <%= table_class.filterable_columns.any? ? 'text-gray-500 border-b-2 border-transparent hover:text-gray-700' : 'text-indigo-600 border-b-2 border-indigo-600' %> transition-colors flex items-center justify-center gap-2">
+      <span><%= t('infotable.drawer.tabs.columns') %></span>
+      <span data-infotable--drawer-target="columnBadge"
+            data-badge-table-name="<%= table_name %>"
+            class="px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-700 rounded-full">
+        <%= table_class.columns.count { |c| c[:visible] } %> / <%= table_class.columns.count %>
+      </span>
+    </button>
+  </div>
+
+  <%# Tab Content - Filters (shown by default when available) %>
+  <% if table_class.filterable_columns.any? %>
+    <div data-infotable--drawer-target="tabContent"
+         data-tab="filters"
+         class="flex-1 overflow-y-auto">
+      <%= render "infotable/tables/filter_drawer", table_name: table_name, table_class: table_class, config: config %>
+    </div>
+  <% end %>
+
+  <%# Tab Content - Columns (shown by default when filters are not available) %>
+  <div data-infotable--drawer-target="tabContent"
+       data-tab="columns"
+       class="<%= table_class.filterable_columns.any? ? 'hidden' : '' %> flex-1 overflow-y-auto">
+    <%= render "infotable/tables/column_visibility", table_name: table_name, table_class: table_class %>
+  </div>
+</div>

data/app/views/infotable/tables/_table.html.erb

@@ -0,0 +1,135 @@
+<%# Main table wrapper %>
+<%# Build config object if not provided (when partial is called directly) %>
+<% if local_assigns.key?(:config) && !local_assigns[:config].nil? %>
+  <%# Config provided - use it, but allow autofilter override %>
+  <% config = local_assigns[:config] %>
+  <% if local_assigns.key?(:autofilter) %>
+    <% config.autofilter = local_assigns[:autofilter] %>
+  <% end %>
+<% else %>
+  <%# No config provided or config is nil - build it from local_assigns or defaults %>
+  <% config = ActiveSupport::OrderedOptions.new.merge!({
+    autofilter: local_assigns.fetch(:autofilter, Infotable.configuration.autofilter),
+    per_page: table_class.pagination_settings[:per_page],
+    per_page_options: table_class.pagination_settings[:per_page_options],
+    drawer_position: Infotable.configuration.drawer_position,
+    drawer_width: Infotable.configuration.drawer_width,
+    theme: Infotable.configuration.theme
+  }) %>
+<% end %>
+<%# Set title and subtitle with priority: local_assigns > table_class settings > defaults %>
+<% title = local_assigns.fetch(:title, table_class.title || table_class.name.demodulize.titleize) %>
+<% subtitle = local_assigns.fetch(:subtitle, table_class.subtitle) %>
+<% initial_state = table_class.url_state? ? infotable_initial_state(table_name) : {} %>
+<div class="w-full relative overflow-hidden" data-controller="infotable--table infotable--drawer" data-infotable--table-name-value="<%= table_name %>" data-infotable--table-url-state-value="<%= table_class.url_state? %>">
+  <div class="bg-white rounded-xl shadow-sm border border-gray-200 relative" style="overflow: hidden;">
+    <%# Header section with controls %>
+    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
+      <div class="flex justify-between items-center">
+        <div>
+          <h2 class="text-xl font-semibold text-gray-900"><%= title %></h2>
+          <% if subtitle.present? %>
+            <p class="mt-1 text-sm text-gray-500"><%= subtitle %></p>
+          <% end %>
+        </div>
+        <div class="flex gap-3">
+          <%# Global search over `searchable: true` columns %>
+          <% if table_class.searchable_columns.any? %>
+            <input type="search"
+                   name="search"
+                   value="<%= initial_state[:search] %>"
+                   placeholder="<%= t('infotable.search.placeholder') %>"
+                   aria-label="<%= t('infotable.search.label') %>"
+                   data-action="input->infotable--table#search"
+                   class="w-56 px-3 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
+          <% end %>
+          <%# Export CSV button %>
+          <%
+            export_params = {
+              table_name: table_name,
+              sort_column: initial_state[:sort_column],
+              sort_direction: initial_state[:sort_direction],
+              sort: initial_state[:sort],
+              visible_columns: table_class.visible_columns.map { |c| c[:name].to_s }.join(',')
+            }
+            export_params[:filters] = initial_state[:filters] if initial_state[:filters].present?
+            export_params[:search] = initial_state[:search] if initial_state[:search].present?
+            export_url = Infotable::Engine.routes.url_helpers.table_export_path(export_params.compact)
+          %>
+          <a href="<%= export_url %>"
+             data-action="click->infotable--table#exportCsv"
+             data-infotable--table-target="exportButton"
+             data-exporting-text="<%= t('infotable.table.buttons.exporting') %>"
+             data-turbo="false"
+             download
+             class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
+            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
+            <span data-infotable--table-target="exportButtonText"><%= t('infotable.table.buttons.export_csv') %></span>
+          </a>
+          <%# Drawer toggle button - conditionally shown %>
+          <% if table_class.filters_button_visible? %>
+            <button type="button"
+                    data-action="click->infotable--drawer#open"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
+              <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+              </svg>
+              <%= t('infotable.table.buttons.filters') %>
+            </button>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <%# Batch action bar: shown while rows are selected %>
+    <% if table_class.batch_action_list.any? %>
+      <div class="hidden items-center justify-between gap-3 px-6 py-3 border-b border-indigo-100 bg-indigo-50"
+           data-infotable--table-target="batchBar">
+        <div class="flex items-center gap-3 text-sm text-indigo-900">
+          <span data-infotable--table-target="batchCount"
+                data-template="<%= t('infotable.batch.selected', count: '__COUNT__') %>"></span>
+          <button type="button" data-action="click->infotable--table#clearSelection"
+                  class="text-indigo-600 hover:text-indigo-800 underline"><%= t('infotable.batch.clear') %></button>
+        </div>
+        <div class="flex gap-2">
+          <% table_class.batch_action_list.each do |action| %>
+            <button type="button"
+                    data-action="click->infotable--table#runBatchAction"
+                    data-batch-name="<%= action[:name] %>"
+                    data-batch-url="<%= action[:url] %>"
+                    data-batch-method="<%= action[:method] %>"
+                    data-batch-confirm="<%= action[:confirm] %>"
+                    class="<%= infotable_batch_button_classes(action[:color]) %>"><%= action[:label] %></button>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%# Main content frame %>
+    <turbo-frame id="<%= table_name %>_content"
+                 src="<%= infotable_table_path(initial_state.merge(table_name: table_name)) %>"
+                 data-action="turbo:frame-load->infotable--table#handleFrameLoad">
+      <%# Loading state %>
+      <div class="flex items-center justify-center py-16">
+        <div class="text-center">
+          <svg class="animate-spin h-8 w-8 text-indigo-600 mx-auto mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <p class="text-sm text-gray-500"><%= t('infotable.table.loading.initial') %></p>
+        </div>
+      </div>
+    </turbo-frame>
+  </div>
+
+    <%# Side panel drawer - always available for column visibility, filters if available %>
+      <%# Drawer - positioned within table bounds, starts completely hidden off-screen %>
+      <div <%= tag.attributes(infotable_drawer_attributes(config)) %>>
+        <div data-infotable--drawer-target="content" class="h-full flex flex-col overflow-hidden">
+          <%= render "infotable/tables/side_panel", table_name: table_name, table_class: table_class, config: config %>
+        </div>
+      </div>
+  </div>
+</div>

data/app/views/infotable/tables/_table_rows.html.erb

@@ -0,0 +1,38 @@
+<% records.each do |record| %>
+  <%
+    row_link_enabled = table_class.row_link_enabled?
+    row_url = row_link_enabled ? table_class.row_link_url(record) : nil
+    row_size = table_class.row_size_value
+    cell_padding = case row_size
+      when :slim then "px-2 py-1"
+      when :mid then "px-4 py-2.5"
+      else "px-6 py-4" # default
+    end
+    text_size = case row_size
+      when :slim then "text-xs"
+      when :mid then "text-sm"
+      else "text-sm" # default
+    end
+  %>
+  <tr class="infotable-row relative border-t border-gray-50 first:border-t-0 hover:shadow-sm hover:translate-x-px transition-all duration-200 ease-out <%= 'cursor-pointer' if row_link_enabled %>"
+      <%= tag.attributes(data: { row_link: row_url, action: "click->infotable--table#handleRowClick" }) if row_link_enabled && row_url %>>
+    <% if table_class.checkbox_enabled? %>
+      <td class="<%= cell_padding %> w-10">
+        <input type="checkbox"
+               value="<%= table_class.checkbox_value(record) %>"
+               aria-label="<%= t('infotable.batch.select_row') %>"
+               data-infotable--table-target="rowCheckbox"
+               data-action="change->infotable--table#toggleRow"
+               class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
+      </td>
+    <% end %>
+    <% table_class.columns.each do |column| %>
+      <td data-column-name="<%= column[:name] %>"
+          data-default-visible="<%= column[:visible] %>"
+          style="width: <%= column[:width] %>; max-width: <%= column[:width] %>; overflow: hidden; text-overflow: ellipsis;"
+          class="<%= cell_padding %> whitespace-nowrap <%= text_size %> text-gray-700">
+        <%= format_cell_value(record, column, table_class) %>
+      </td>
+    <% end %>
+  </tr>
+<% end %>

data/app/views/infotable/tables/filters/_boolean.html.erb

@@ -0,0 +1,22 @@
+<%# Boolean filter - true/false/empty/not empty %>
+<div class="relative">
+  <select name="filters[<%= column[:name] %>][value]"
+          id="<%= infotable_filter_id(table_name, column, 'value') %>"
+          class="block w-full appearance-none rounded-lg border-0 bg-white pr-10 pl-3 py-2 text-base sm:text-sm text-neutral-900 shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-600 focus:ring-offset-0 transition-all [box-shadow:inset_0_0_0_1px_rgb(212_212_212)] focus:[box-shadow:inset_0_0_0_2px_rgb(82_82_82)] cursor-pointer disabled:cursor-not-allowed disabled:bg-neutral-100 disabled:opacity-75 bg-[url('data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20fill=%27none%27%20viewBox=%270%200%2020%2020%27%3e%3cpath%20stroke=%27%23737373%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%20stroke-width=%271.5%27%20d=%27M6%208l4%204%204-4%27/%3e%3c/svg%3e')] bg-[right_0.75rem_center] bg-no-repeat bg-[length:1.25em_1.25em]">
+    <option value=""><%= t('infotable.filters.all') %></option>
+    <option value="true"><%= t('infotable.filters.boolean.true') %></option>
+    <option value="false"><%= t('infotable.filters.boolean.false') %></option>
+    <option value="is_empty"><%= t('infotable.filters.boolean.empty') %></option>
+    <option value="is_not_empty"><%= t('infotable.filters.boolean.not_empty') %></option>
+  </select>
+  <button type="button"
+          class="absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+          data-action="click->infotable--drawer#clearSingleFilter"
+          data-filter-name="<%= column[:name] %>"
+          data-filter-type="boolean"
+          title="<%= t('infotable.filters.clear_filter') %>">
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  </button>
+</div>

data/app/views/infotable/tables/filters/_date.html.erb

@@ -0,0 +1,30 @@
+<%# Date filter - from/to range with date pickers %>
+<div class="grid grid-cols-2 gap-2">
+  <%# From date %>
+  <div class="relative">
+    <input type="date"
+           name="filters[<%= column[:name] %>][from]"
+           id="<%= infotable_filter_id(table_name, column, 'from') %>"
+           placeholder="<%= t('infotable.filters.from') %>"
+           class="block w-full rounded-lg border-0 bg-white pr-8 pl-3 py-2 text-base sm:text-sm text-neutral-900 placeholder:text-neutral-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-600 focus:ring-offset-0 transition-all [box-shadow:inset_0_0_0_1px_rgb(212_212_212)] focus:[box-shadow:inset_0_0_0_2px_rgb(82_82_82)] disabled:cursor-not-allowed disabled:bg-neutral-100">
+    <button type="button"
+            class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+            data-action="click->infotable--drawer#clearSingleFilter"
+            data-filter-name="<%= column[:name] %>"
+            data-filter-type="date"
+            title="<%= t('infotable.filters.clear_filter') %>">
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+  </div>
+
+  <%# To date %>
+  <div class="relative">
+    <input type="date"
+           name="filters[<%= column[:name] %>][to]"
+           id="<%= infotable_filter_id(table_name, column, 'to') %>"
+           placeholder="<%= t('infotable.filters.to') %>"
+           class="block w-full rounded-lg border-0 bg-white pr-3 pl-3 py-2 text-base sm:text-sm text-neutral-900 placeholder:text-neutral-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-600 focus:ring-offset-0 transition-all [box-shadow:inset_0_0_0_1px_rgb(212_212_212)] focus:[box-shadow:inset_0_0_0_2px_rgb(82_82_82)] disabled:cursor-not-allowed disabled:bg-neutral-100">
+  </div>
+</div>