infotable 1.0.0 → 1.2.0

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

@@ -0,0 +1,24 @@
+<%# Chips for the filters and search narrowing the table; each one removes itself. Locals: chips, table_name %>
+<% if chips.any? %>
+  <div class="flex flex-wrap items-center gap-2 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 px-6 py-2" data-active-filters>
+    <% chips.each do |chip| %>
+      <% remove_action = chip[:search] ? "click->infotable--table#clearSearch" : "click->infotable--drawer#clearSingleFilter" %>
+      <% chip_label = chip[:search] ? chip[:text] : "#{chip[:label]}: #{chip[:text]}" %>
+      <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 dark:bg-indigo-950 py-1 pl-3 pr-1 text-xs font-medium text-indigo-700 dark:text-indigo-300" data-active-filter="<%= chip[:search] ? 'search' : chip[:name] %>">
+        <% unless chip[:search] %><span class="text-indigo-500 dark:text-indigo-400"><%= chip[:label] %>:</span><% end %>
+        <span><%= chip[:text] %></span>
+        <button type="button"
+                class="ml-0.5 inline-flex h-4 w-4 items-center justify-center rounded-full text-indigo-500 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900 hover:text-indigo-800 dark:hover:text-indigo-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                aria-label="<%= t('infotable.filters.active.remove', filter: chip_label) %>"
+                data-action="<%= remove_action %>"
+                <% unless chip[:search] %>data-filter-name="<%= chip[:name] %>" data-filter-type="<%= chip[:type] %>"<% end %>>
+          <svg class="h-3 w-3" 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>
+      </span>
+    <% end %>
+    <% if chips.size > 1 %>
+      <button type="button" data-action="click->infotable--table#clearAllFilters" data-clear-all-filters
+              class="text-xs font-medium text-gray-600 dark:text-gray-400 underline hover:text-gray-900 dark:hover:text-gray-100"><%= t('infotable.filters.active.clear_all') %></button>
+    <% end %>
+  </div>
+<% end %>

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

@@ -1,7 +1,7 @@
 <%# 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>
+    <p class="text-sm text-gray-600 dark:text-gray-400"><%= t('infotable.columns.instructions') %></p>
   </div>
 
   <form id="column-visibility-form-<%= table_name %>"
@@ -11,13 +11,13 @@
         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"
+      <div class="column-item group p-3 bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 hover:border-indigo-200 dark:hover:border-indigo-700 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">
+          <div class="drag-handle cursor-move flex-shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 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>
@@ -32,9 +32,9 @@
                    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">
+                   class="w-4 h-4 text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-600 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>
+              <span class="text-sm font-medium text-gray-700 dark:text-gray-300"><%= column[:label] %></span>
               <% if column[:type] %>
                 <span class="ml-2 text-xs text-gray-400">(<%= column[:type] %>)</span>
               <% end %>
@@ -49,7 +49,7 @@
                     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">
+                    class="pin-btn pin-left w-7 h-7 rounded flex items-center justify-center <%= column[:pinned] == :left ? 'bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400' : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300' %> 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>
@@ -60,7 +60,7 @@
                     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">
+                    class="pin-btn pin-right w-7 h-7 rounded flex items-center justify-center <%= column[:pinned] == :right ? 'bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400' : 'text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300' %> 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>
@@ -73,18 +73,18 @@
   </form>
 
   <%# Footer Actions %>
-  <div class="mt-4 pt-4 border-t border-gray-100 space-y-2">
+  <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800 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">
+              class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 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">
+              class="flex-1 px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 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>
@@ -93,7 +93,7 @@
     <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">
+            class="w-full px-3 py-2 border border-red-200 rounded-lg text-sm font-medium text-red-700 dark:text-red-300 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>

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

@@ -29,8 +29,8 @@
 
       <%# 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">
+        <div class="group p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-100 dark:border-gray-800 hover:border-indigo-200 dark:hover:border-indigo-700 transition-all duration-150">
+          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
             <%= column[:label] %>
           </label>
 
@@ -45,12 +45,12 @@
   </div>
 
   <%# Drawer Footer with actions %>
-  <div class="px-4 py-3 border-t border-gray-100 bg-white">
+  <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
     <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">
+              class="<%= autofilter ? 'w-full' : 'flex-1' %> px-4 py-2 border border-gray-200 dark:border-gray-700 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 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 %>

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

@@ -9,11 +9,11 @@
     )
   ) 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="flex items-center justify-center py-12 border-t border-gray-100 dark:border-gray-800 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">
+            <svg class="h-10 w-10 text-indigo-500 dark:text-indigo-400 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>
@@ -22,14 +22,14 @@
             </div>
           </div>
         </div>
-        <p class="text-sm font-medium text-gray-600 tracking-wide animate-pulse"><%= t('infotable.table.loading.more_items') %></p>
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-400 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">
+  <div class="border-t border-gray-100 dark:border-gray-800 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 dark:text-gray-400">
       <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>

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

@@ -2,25 +2,25 @@
 <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">
+    <p class="text-sm text-gray-700 dark:text-gray-300">
       <%= t('infotable.pagination.showing') %>
-      <span class="font-semibold text-gray-900"><%= pagy.from %></span>
+      <span class="font-semibold text-gray-900 dark:text-gray-100"><%= pagy.from %></span>
       <%= t('infotable.pagination.to') %>
-      <span class="font-semibold text-gray-900"><%= pagy.to %></span>
+      <span class="font-semibold text-gray-900 dark:text-gray-100"><%= pagy.to %></span>
       <% if pagy.count %>
         <%= t('infotable.pagination.of') %>
-        <span class="font-semibold text-gray-900"><%= pagy.count %></span>
+        <span class="font-semibold text-gray-900 dark:text-gray-100"><%= 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">
+      <label for="per_page_<%= table_name %>" class="text-sm text-gray-700 dark:text-gray-300">
         <%= 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"
+              class="text-sm text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 rounded-lg px-2 py-1 bg-white dark:bg-gray-900 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 %>">
@@ -38,7 +38,7 @@
     <%# 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",
+          class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 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"/>
@@ -46,7 +46,7 @@
         <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">
+      <span class="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-400 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 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>
@@ -66,14 +66,14 @@
       <% 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">
+          <span aria-current="page" class="inline-flex items-center justify-center w-10 h-10 text-sm font-semibold rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 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",
+              class: "inline-flex items-center justify-center w-10 h-10 text-sm font-medium rounded-lg transition-all text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-400",
               data: { turbo_frame: "#{table_name}_content" } %>
         <% end %>
       <% end %>
@@ -82,7 +82,7 @@
     <%# 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",
+          class: "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 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">
@@ -90,7 +90,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="inline-flex items-center gap-1 px-3 py-2 text-sm font-medium text-gray-400 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 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"/>

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

@@ -0,0 +1,56 @@
+<%# Vertical rail with the table controls (`toolbar :rail`) %>
+<% button = "relative flex items-center justify-center w-10 h-10 rounded-lg text-gray-500 dark:text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors" %>
+<% icon = "w-5 h-5" %>
+<% filter_count = initial_state[:filters].respond_to?(:keys) ? initial_state[:filters].keys.size : 0 %>
+<aside class="flex flex-col items-center shrink-0 w-14 py-3 gap-1 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" aria-label="<%= t('infotable.drawer.label') %>">
+  <% if table_class.filterable_columns.any? && table_class.filters_button_visible? %>
+    <button type="button"
+            data-action="click->infotable--drawer#openFilters"
+            title="<%= t('infotable.table.buttons.filters') %>"
+            aria-label="<%= t('infotable.table.buttons.filters') %>"
+            class="<%= button %>">
+      <svg class="<%= icon %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+      </svg>
+      <span data-infotable--table-target="filterCount"
+            class="<%= 'hidden ' if filter_count.zero? %>absolute -top-1 -right-1 min-w-5 h-5 px-1 flex items-center justify-center text-xs font-medium text-white bg-indigo-600 rounded-full"><%= filter_count %></span>
+    </button>
+  <% end %>
+
+  <button type="button"
+          data-action="click->infotable--drawer#openColumns"
+          title="<%= t('infotable.table.buttons.columns') %>"
+          aria-label="<%= t('infotable.table.buttons.columns') %>"
+          class="<%= button %>">
+    <svg class="<%= icon %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  </button>
+
+  <div class="mt-auto flex flex-col items-center gap-1 pt-3 w-10 border-t border-gray-100 dark:border-gray-800">
+    <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
+       title="<%= t('infotable.table.buttons.export_csv') %>"
+       class="<%= button %>">
+      <svg class="<%= icon %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+      </svg>
+      <span class="sr-only" data-infotable--table-target="exportButtonText"><%= t('infotable.table.buttons.export_csv') %></span>
+    </a>
+
+    <button type="button"
+            data-action="click->infotable--table#refresh"
+            title="<%= t('infotable.table.buttons.refresh') %>"
+            aria-label="<%= t('infotable.table.buttons.refresh') %>"
+            class="<%= button %>">
+      <svg class="<%= icon %>" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+      </svg>
+    </button>
+  </div>
+</aside>

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

@@ -1,32 +1,44 @@
 <%# Side Panel with Tabs for Filters and Columns %>
-<div class="flex flex-col h-full bg-white">
+<div class="flex flex-col h-full bg-white dark:bg-gray-900">
   <%# 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 justify-between px-4 py-3 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
     <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">
+      <div class="p-2 bg-indigo-50 dark:bg-indigo-950 rounded-lg">
+        <svg class="w-4 h-4 text-indigo-600 dark:text-indigo-400" 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>
+      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100" 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">
+            class="p-1.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 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>
 
+  <%# With `toolbar :rail` the header (and its search box) is hidden: search lives here %>
+  <% if table_class.rail_toolbar? && table_class.searchable_columns.any? %>
+    <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800">
+      <input type="search"
+             name="search"
+             placeholder="<%= t('infotable.search.placeholder') %>"
+             aria-label="<%= t('infotable.search.label') %>"
+             data-action="input->infotable--table#search"
+             class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+    </div>
+  <% end %>
+
   <%# Tabs Navigation %>
-  <div class="flex border-b border-gray-100 bg-white px-4">
+  <div class="flex border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 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">
+              class="flex-1 px-3 py-2.5 text-sm font-medium text-indigo-600 dark:text-indigo-400 border-b-2 border-indigo-600 transition-colors">
         <%= t('infotable.drawer.tabs.filters') %>
       </button>
     <% end %>
@@ -35,11 +47,11 @@
             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">
+            class="flex-1 px-3 py-2.5 text-sm font-medium <%= table_class.filterable_columns.any? ? 'text-gray-500 dark:text-gray-400 border-b-2 border-transparent hover:text-gray-700 dark:hover:text-gray-200' : 'text-indigo-600 dark:text-indigo-400 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">
+            class="px-2 py-0.5 text-xs font-medium bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 rounded-full">
         <%= table_class.columns.count { |c| c[:visible] } %> / <%= table_class.columns.count %>
       </span>
     </button>

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

@@ -21,15 +21,30 @@
 <% 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">
+<% rail = table_class.rail_toolbar? %>
+<%
+  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)
+%>
+<div class="w-full relative overflow-hidden dark:[color-scheme:dark]" data-controller="infotable--table infotable--drawer" data-infotable--table-name-value="<%= table_name %>" data-infotable--table-url-state-value="<%= table_class.url_state? %>"<% if table_class.checkbox_enabled? %> data-infotable--table-ids-url-value="<%= Infotable::Engine.routes.url_helpers.table_ids_path(table_name: table_name) %>"<% end %>>
+  <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 relative<%= " flex" if rail %>" style="overflow: hidden;">
+   <div class="<%= rail ? "flex-1 min-w-0" : "w-full" %>">
+    <%# Header section with controls (hidden with `toolbar :rail`) %>
+    <% unless rail %>
+    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
       <div class="flex justify-between items-center">
         <div>
-          <h2 class="text-xl font-semibold text-gray-900"><%= title %></h2>
+          <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100"><%= title %></h2>
           <% if subtitle.present? %>
-            <p class="mt-1 text-sm text-gray-500"><%= subtitle %></p>
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= subtitle %></p>
           <% end %>
         </div>
         <div class="flex gap-3">
@@ -41,28 +56,16 @@
                    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">
+                   class="w-56 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 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">
+             class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 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>
@@ -72,7 +75,7 @@
           <% 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">
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 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>
@@ -82,16 +85,25 @@
         </div>
       </div>
     </div>
+    <% end %>
 
     <%# 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"
+      <div class="hidden items-center justify-between gap-3 px-6 py-3 border-b border-indigo-100 dark:border-indigo-900 bg-indigo-50 dark:bg-indigo-950"
            data-infotable--table-target="batchBar">
-        <div class="flex items-center gap-3 text-sm text-indigo-900">
+        <div class="flex items-center gap-3 text-sm text-indigo-900 dark:text-indigo-100">
           <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>
+                  class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 underline"><%= t('infotable.batch.clear') %></button>
+          <button type="button" hidden
+                  data-infotable--table-target="selectAllMatching"
+                  data-action="click->infotable--table#selectAllMatching"
+                  data-template="<%= t('infotable.batch.select_all_matching', count: '__COUNT__') %>"
+                  class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 underline font-medium"></button>
+          <span hidden data-infotable--table-target="batchNote"
+                data-template="<%= t('infotable.batch.truncated', max: '__MAX__') %>"
+                class="text-amber-700"></span>
         </div>
         <div class="flex gap-2">
           <% table_class.batch_action_list.each do |action| %>
@@ -114,14 +126,19 @@
       <%# 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">
+          <svg class="animate-spin h-8 w-8 text-indigo-600 dark:text-indigo-400 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>
+          <p class="text-sm text-gray-500 dark:text-gray-400"><%= t('infotable.table.loading.initial') %></p>
         </div>
       </div>
     </turbo-frame>
+   </div>
+    <%# Vertical rail with the controls (`toolbar :rail`) %>
+    <% if rail %>
+      <%= render "infotable/tables/rail", table_name: table_name, table_class: table_class, export_url: export_url, initial_state: initial_state %>
+    <% end %>
   </div>
 
     <%# Side panel drawer - always available for column visibility, filters if available %>

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

@@ -14,7 +14,7 @@
       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 %>"
+  <tr class="infotable-row relative border-t border-gray-50 dark:border-gray-800 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">
@@ -23,14 +23,14 @@
                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">
+               class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-indigo-600 dark:text-indigo-400 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">
+          class="<%= cell_padding %> whitespace-nowrap <%= text_size %> text-gray-700 dark:text-gray-300">
         <%= format_cell_value(record, column, table_class) %>
       </td>
     <% end %>

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

@@ -2,7 +2,7 @@
 <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]">
+          class="block w-full appearance-none rounded-lg border-0 bg-white dark:bg-gray-900 pr-10 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 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)] dark:[box-shadow:inset_0_0_0_1px_rgb(82_82_82)] focus:[box-shadow:inset_0_0_0_2px_rgb(82_82_82)] dark:focus:[box-shadow:inset_0_0_0_2px_rgb(163_163_163)] 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>
@@ -10,7 +10,7 @@
     <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"
+          class="absolute right-8 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
           data-action="click->infotable--drawer#clearSingleFilter"
           data-filter-name="<%= column[:name] %>"
           data-filter-type="boolean"

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

@@ -1,30 +1,2 @@
-<%# 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>
+<%# Date filter: range or comparison, see _range %>
+<%= render "infotable/tables/filters/range", column: column, table_name: table_name, kind: :date %>