infotable 1.0.1 → 1.2.0

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

@@ -1,32 +1,2 @@
-<%# Number filter - from/to range %>
-<div class="grid grid-cols-2 gap-2">
-  <%# From input %>
-  <div class="relative">
-    <input type="number"
-           name="filters[<%= column[:name] %>][from]"
-           id="<%= infotable_filter_id(table_name, column, 'from') %>"
-           placeholder="<%= t('infotable.filters.min') %>"
-           step="any"
-           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="number"
-            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 input %>
-  <div class="relative">
-    <input type="number"
-           name="filters[<%= column[:name] %>][to]"
-           id="<%= infotable_filter_id(table_name, column, 'to') %>"
-           placeholder="<%= t('infotable.filters.max') %>"
-           step="any"
-           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>
+<%# Number filter: range or comparison, see _range %>
+<%= render "infotable/tables/filters/range", column: column, table_name: table_name, kind: :number %>

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

@@ -0,0 +1,66 @@
+<%# Shared by the number and date filters.
+    Locals: column, table_name, kind (:number or :date)
+    The operator select picks the shape of the filter:
+      ""            from/to inputs (either may stay blank)
+      single ops    one :value input
+      empty ops     no input %>
+<%
+  kind = kind.to_sym
+  input_type = kind == :date ? "date" : "number"
+  ops = kind == :date ? %w[on before after] : %w[eq neq gt gte lt lte]
+  input_class = "block w-full rounded-lg border-0 bg-white dark:bg-gray-900 pr-3 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 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)] 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)] disabled:cursor-not-allowed disabled:bg-neutral-100"
+  select_class = "#{input_class} appearance-none pr-10 cursor-pointer 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]"
+  step = kind == :number ? "any" : nil
+%>
+<div class="space-y-2" data-range-container id="<%= infotable_filter_id(table_name, column, 'container') %>">
+  <div class="flex items-center gap-2">
+    <select name="filters[<%= column[:name] %>][op]"
+            data-range-op
+            data-action="change->infotable--drawer#syncFilterOps"
+            id="<%= infotable_filter_id(table_name, column, 'op') %>"
+            class="<%= select_class %>">
+      <option value=""><%= t("infotable.filters.range_ops.between") %></option>
+      <% ops.each do |op| %>
+        <option value="<%= op %>"><%= t("infotable.filters.#{kind}_ops.#{op}") %></option>
+      <% end %>
+      <option value="is_empty"><%= t("infotable.filters.text_ops.is_empty") %></option>
+      <option value="is_not_empty"><%= t("infotable.filters.text_ops.is_not_empty") %></option>
+    </select>
+    <button type="button"
+            class="shrink-0 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="<%= kind %>"
+            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>
+
+  <div class="grid grid-cols-2 gap-2" data-range-fields="range">
+    <input type="<%= input_type %>"
+           name="filters[<%= column[:name] %>][from]"
+           id="<%= infotable_filter_id(table_name, column, 'from') %>"
+           placeholder="<%= t(kind == :date ? 'infotable.filters.from' : 'infotable.filters.min') %>"
+           aria-label="<%= t('infotable.filters.from') %>"
+           <% if step %>step="<%= step %>"<% end %>
+           class="<%= input_class %>">
+    <input type="<%= input_type %>"
+           name="filters[<%= column[:name] %>][to]"
+           id="<%= infotable_filter_id(table_name, column, 'to') %>"
+           placeholder="<%= t(kind == :date ? 'infotable.filters.to' : 'infotable.filters.max') %>"
+           aria-label="<%= t('infotable.filters.to') %>"
+           <% if step %>step="<%= step %>"<% end %>
+           class="<%= input_class %>">
+  </div>
+
+  <div data-range-fields="single" style="display: none">
+    <input type="<%= input_type %>"
+           name="filters[<%= column[:name] %>][value]"
+           id="<%= infotable_filter_id(table_name, column, 'value') %>"
+           placeholder="<%= t('infotable.filters.enter_value') %>"
+           <% if step %>step="<%= step %>"<% end %>
+           class="<%= input_class %>">
+  </div>
+</div>

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

@@ -14,7 +14,7 @@
             id="<%= infotable_filter_id(table_name, column, 'value') %>"
             multiple
             size="6"
-            class="block w-full appearance-none rounded-lg border-0 bg-white pl-3 py-2 pr-8 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"
+            class="block w-full appearance-none rounded-lg border-0 bg-white dark:bg-gray-900 pl-3 py-2 pr-8 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"
             style="min-height: 120px;">
       <% options.each do |option| %>
         <% if option.is_a?(Array) %>
@@ -25,7 +25,7 @@
       <% end %>
     </select>
     <button type="button"
-            class="absolute right-2 top-2 text-gray-400 hover:text-gray-600 transition-colors"
+            class="absolute right-2 top-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="select"
@@ -41,7 +41,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>
       <% options.each do |option| %>
         <% if option.is_a?(Array) %>
@@ -52,7 +52,7 @@
       <% end %>
     </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="select"

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

@@ -6,7 +6,7 @@
             data-filter-op
             data-action="change->infotable--drawer#syncFilterOps"
             id="<%= infotable_filter_id(table_name, column, 'op') %>"
-            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="contains"><%= t('infotable.filters.text_ops.contains') %></option>
       <option value="exact"><%= t('infotable.filters.text_ops.exact') %></option>
       <option value="not_contain"><%= t('infotable.filters.text_ops.not_contain') %></option>
@@ -23,9 +23,9 @@
            name="filters[<%= column[:name] %>][value]"
            id="<%= infotable_filter_id(table_name, column, 'value') %>"
            placeholder="<%= t('infotable.filters.enter_value') %>"
-           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">
+           class="block w-full rounded-lg border-0 bg-white dark:bg-gray-900 pr-8 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 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)] 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)] 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"
+            class="absolute right-2 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="text"

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

@@ -1,13 +1,15 @@
 <%# This view renders inside the turbo frame %>
 <%# Turbo requires the frame element to be present in the response %>
 <turbo-frame id="<%= params[:table_name] %>_content">
-  <div class="relative overflow-y-auto overflow-x-auto scroll-smooth [scrollbar-width:thin] [scrollbar-color:#cbd5e1_#f1f5f9] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-slate-100 [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar-thumb]:rounded [&::-webkit-scrollbar-thumb:hover]:bg-slate-400"
+  <% active_filters = infotable_active_filters(@table_class, @filters, @search) %>
+  <%= render "infotable/tables/active_filters", chips: active_filters, table_name: params[:table_name] %>
+  <div<% if @pagy && !@table_class.countless? %> data-total-count="<%= @pagy.count %>"<% end %> class="relative overflow-y-auto overflow-x-auto scroll-smooth [scrollbar-width:thin] [scrollbar-color:#cbd5e1_#f1f5f9] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-slate-100 [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar-thumb]:rounded [&::-webkit-scrollbar-thumb:hover]:bg-slate-400 dark:[scrollbar-color:#475569_#1e293b] dark:[&::-webkit-scrollbar-track]:bg-slate-800 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600"
        style="min-height: <%= @table_class.min_height %>; max-height: <%= @table_class.max_height %>;">
 
     <% if @records.any? %>
       <%# Table %>
-      <table class="min-w-full divide-y divide-gray-200">
-          <thead class="bg-gray-50 border-b-2 border-gray-200">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+          <thead class="bg-gray-50 dark:bg-gray-800 border-b-2 border-gray-200 dark:border-gray-700">
             <tr>
               <%
                 row_size = @table_class.row_size_value
@@ -18,12 +20,12 @@
                 end
               %>
               <% if @table_class.checkbox_enabled? %>
-                <th scope="col" class="<%= header_padding %> w-10 bg-gray-50 sticky top-0 z-20">
+                <th scope="col" class="<%= header_padding %> w-10 bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
                   <input type="checkbox"
                          aria-label="<%= t('infotable.batch.select_all') %>"
                          data-infotable--table-target="selectAll"
                          data-action="change->infotable--table#toggleAll"
-                         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">
                 </th>
               <% end %>
               <% @table_class.columns.each do |column| %>
@@ -32,7 +34,7 @@
                     data-default-visible="<%= column[:visible] %>"
                     <%= tag.attributes(data: { default_pinned: column[:pinned] }) if column[:pinned] %>
                     style="width: <%= column[:width] %>; max-width: <%= column[:width] %>; overflow: hidden;"
-                    class="<%= header_padding %> text-left text-xs font-semibold text-gray-900 tracking-wider select-none bg-gray-50 sticky top-0 z-20">
+                    class="<%= header_padding %> text-left text-xs font-semibold text-gray-900 dark:text-gray-100 tracking-wider select-none bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
                   <% if column[:sortable] %>
                     <% sort_index = current_sorts.index { |name, _| name == column[:name].to_s } %>
                     <% sort_dir = sort_index ? current_sorts[sort_index].last : nil %>
@@ -56,16 +58,16 @@
                       <span class="flex-none rounded">
                         <% if sort_index %>
                           <% if sort_dir == 'asc' %>
-                            <svg class="h-4 w-4 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
+                            <svg class="h-4 w-4 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20">
                               <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
                             </svg>
                           <% else %>
-                            <svg class="h-4 w-4 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
+                            <svg class="h-4 w-4 text-indigo-600 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20">
                               <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
                             </svg>
                           <% end %>
                           <% if current_sorts.size > 1 %>
-                            <span class="text-[10px] font-bold text-indigo-600"><%= sort_index + 1 %></span>
+                            <span class="text-[10px] font-bold text-indigo-600 dark:text-indigo-400"><%= sort_index + 1 %></span>
                           <% end %>
                         <% else %>
                           <svg class="h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="currentColor" viewBox="0 0 20 20">
@@ -81,7 +83,7 @@
               <% end %>
             </tr>
           </thead>
-          <tbody id="<%= params[:table_name] %>_tbody" class="bg-white">
+          <tbody id="<%= params[:table_name] %>_tbody" class="bg-white dark:bg-gray-900">
             <%= render partial: "infotable/tables/table_rows", locals: { records: @records, table_class: @table_class } %>
           </tbody>
         </table>
@@ -96,8 +98,15 @@
         <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
         </svg>
-        <h3 class="mt-4 text-lg font-medium text-gray-900"><%= t('infotable.table.empty_state.title') %></h3>
-        <p class="mt-2 text-sm text-gray-500"><%= t('infotable.table.empty_state.description') %></p>
+        <% if active_filters.any? %>
+          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100"><%= t('infotable.table.empty_state.filtered_title') %></h3>
+          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400"><%= t('infotable.table.empty_state.filtered_description') %></p>
+          <button type="button" data-action="click->infotable--table#clearAllFilters" data-empty-clear-filters
+                  class="mt-4 inline-flex items-center rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500"><%= t('infotable.filters.active.clear_all') %></button>
+        <% else %>
+          <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100"><%= t('infotable.table.empty_state.title') %></h3>
+          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400"><%= t('infotable.table.empty_state.description') %></p>
+        <% end %>
       </div>
     <% end %>
 
@@ -105,7 +114,7 @@
 
   <%# Pagination - Only visible when infinite scroll is disabled %>
   <% unless @infinite_scroll_enabled %>
-    <div class="border-t border-gray-200 bg-white px-6 py-4">
+    <div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-4">
       <%= render "infotable/tables/pagination", pagy: @pagy, table_name: params[:table_name] %>
     </div>
   <% end %>

data/config/locales/en.yml

@@ -5,6 +5,8 @@ en:
         export_csv: "Export CSV"
         filters: "Filters"
         exporting: "Exporting..."
+        refresh: "Refresh"
+        columns: "Columns"
       sort_hint: "Click to sort, Shift+click to add a column to the sort"
       loading:
         initial: "Loading data..."
@@ -13,6 +15,8 @@ en:
       empty_state:
         title: "No data found"
         description: "Get started by adding some records to see them here."
+        filtered_title: "No rows match your filters"
+        filtered_description: "Remove a filter or search for something else."
 
     drawer:
       label: "Filters and columns"
@@ -39,6 +43,10 @@ en:
         clear_all: "Clear All"
         apply_filters: "Apply Filters"
       clear_filter: "Clear this filter"
+      active:
+        search: "Search: \u201c%{query}\u201d"
+        remove: "Remove filter %{filter}"
+        clear_all: "Clear all filters"
       from: "From"
       to: "To"
       min: "Min"
@@ -60,6 +68,19 @@ en:
         ends_with: "Ends with"
         is_empty: "Is empty"
         is_not_empty: "Is not empty"
+      range_ops:
+        between: "Between"
+      number_ops:
+        eq: "Equals"
+        neq: "Does not equal"
+        gt: "Greater than"
+        gte: "Greater than or equal"
+        lt: "Less than"
+        lte: "Less than or equal"
+      date_ops:
+        "on": "On"
+        before: "Before"
+        after: "After"
 
     formatters:
       ago: "%{time} ago"
@@ -73,6 +94,8 @@ en:
       clear: "Clear selection"
       select_all: "Select all rows"
       select_row: "Select row"
+      select_all_matching: "Select all %{count} matching"
+      truncated: "Only the first %{max} rows are selected"
 
     search:
       placeholder: "Search..."

data/config/locales/pl.yml

@@ -5,6 +5,8 @@ pl:
         export_csv: "Eksportuj CSV"
         filters: "Filtry"
         exporting: "Eksportowanie..."
+        refresh: "Odśwież"
+        columns: "Kolumny"
       sort_hint: "Kliknij, aby sortować; Shift+klik dodaje kolumnę do sortowania"
       loading:
         initial: "Ładowanie danych..."
@@ -13,6 +15,8 @@ pl:
       empty_state:
         title: "Nie znaleziono danych"
         description: "Rozpocznij od dodania rekordów, aby zobaczyć je tutaj."
+        filtered_title: "Żaden wiersz nie pasuje do filtrów"
+        filtered_description: "Usuń filtr lub wyszukaj coś innego."
 
     drawer:
       label: "Filtry i kolumny"
@@ -39,6 +43,10 @@ pl:
         clear_all: "Wyczyść wszystkie"
         apply_filters: "Zastosuj filtry"
       clear_filter: "Wyczyść ten filtr"
+      active:
+        search: "Szukaj: \u201e%{query}\u201d"
+        remove: "Usuń filtr %{filter}"
+        clear_all: "Wyczyść wszystkie filtry"
       from: "Od"
       to: "Do"
       min: "Min"
@@ -60,6 +68,19 @@ pl:
         ends_with: "Kończy się na"
         is_empty: "Jest puste"
         is_not_empty: "Nie jest puste"
+      range_ops:
+        between: "Pomiędzy"
+      number_ops:
+        eq: "Równa się"
+        neq: "Różne od"
+        gt: "Większe niż"
+        gte: "Większe lub równe"
+        lt: "Mniejsze niż"
+        lte: "Mniejsze lub równe"
+      date_ops:
+        "on": "W dniu"
+        before: "Przed"
+        after: "Po"
 
     formatters:
       ago: "%{time} temu"
@@ -72,6 +93,8 @@ pl:
       selected: "Zaznaczono: %{count}"
       clear: "Wyczyść zaznaczenie"
       select_all: "Zaznacz wszystkie wiersze"
+      select_all_matching: "Zaznacz wszystkie pasujące (%{count})"
+      truncated: "Zaznaczono tylko pierwsze %{max} wierszy"
       select_row: "Zaznacz wiersz"
 
     search:

data/config/routes.rb

@@ -3,4 +3,5 @@ Infotable::Engine.routes.draw do
   get "tables/:table_name", to: "tables#show", as: :table
   get "tables/:table_name/data", to: "tables#data", as: :table_data
   get "tables/:table_name/export", to: "tables#export", as: :table_export
+  get "tables/:table_name/ids", to: "tables#ids", as: :table_ids
 end

data/lib/infotable/base.rb

@@ -116,6 +116,21 @@ module Infotable
         record.public_send(@checkbox_settings[:id_method])
       end
 
+      # Ids of every row the query matches (the "select all matching" button), at most `limit`.
+      # Plucks when the id method is a plain column of an ungrouped query, loads records otherwise.
+      def checkbox_ids(query, limit = nil)
+        method = @checkbox_settings[:id_method]
+        scope = query.reorder(nil)
+        scope = scope.limit(limit) if limit
+        model = query.model
+
+        if model.column_names.include?(method.to_s) && scope.group_values.empty? && scope.having_clause.empty?
+          scope.pluck(model.arel_table[method])
+        else
+          scope.map { |record| checkbox_value(record) }
+        end
+      end
+
       # Per-table access check. Block receives the controller; falsy => 403.
       #   authorize { |controller| controller.current_user&.admin? }
       def authorize(&block)
@@ -157,6 +172,7 @@ module Infotable
           searchable: options.fetch(:searchable, false),
           filterable: options.fetch(:filterable, false),
           visible: options.fetch(:visible, true),
+          exportable: options.fetch(:exportable, !%i[action actions].include?(type)), # false keeps the column out of CSV exports
           pinned: options[:pinned], # :left, :right, or nil
           virtual: options.fetch(:virtual, false), # Virtual/computed columns (aggregates, subqueries)
           virtual_sql: options[:virtual_sql], # SQL expression for aggregate columns (used in HAVING clause)
@@ -322,6 +338,26 @@ module Infotable
         @filters_button_settings[:visible] = visible
       end
 
+      # Where the controls live. :header (default) is the bar above the table with title, search,
+      # export and filters buttons. :rail hides that bar and puts filters, columns, export and
+      # refresh on a slim vertical rail at the table's right edge; search moves into the drawer.
+      # @example
+      #   toolbar :rail
+      def toolbar(mode)
+        unless [ :header, :rail ].include?(mode)
+          raise ArgumentError, "Invalid toolbar: #{mode}. Must be one of header, rail"
+        end
+        @toolbar_setting = mode
+      end
+
+      def toolbar_mode
+        @toolbar_setting || :header
+      end
+
+      def rail_toolbar?
+        toolbar_mode == :rail
+      end
+
       # Check if filters button is visible
       def filters_button_visible?
         @filters_button_settings ||= { visible: true }
@@ -444,6 +480,36 @@ module Infotable
         columns.select { |col| col[:visible] }
       end
 
+      # Columns a CSV export may contain (action columns and `exportable: false` are left out)
+      def exportable_columns
+        columns.select { |col| col[:exportable] }
+      end
+
+      # Which columns the CSV export contains and in which order, when the user has not chosen:
+      #   export_columns :name, :email, :created_at
+      # Without it the export uses the visible, exportable columns in table order. With it, the
+      # list is also the pool the user can pick from (visible_columns can only narrow and reorder it).
+      def export_columns(*names)
+        @export_column_names = names.flatten.map(&:to_sym)
+      end
+
+      def export_column_names
+        @export_column_names
+      end
+
+      # The columns to export, as column definitions in export order. `requested` is the list of
+      # names the browser sends (the user's visible columns in their on-screen order).
+      def columns_for_export(requested = nil)
+        pool = exportable_columns
+        pool = export_column_names.map { |name| pool.find { |col| col[:name] == name } || raise(ArgumentError, "export_columns: unknown or non-exportable column #{name.inspect} in #{self.name}") } if export_column_names
+
+        by_name = pool.index_by { |col| col[:name].to_s }
+        picked = Array(requested).map { |name| by_name[name.to_s] }.compact.uniq
+        return picked if picked.any?
+
+        export_column_names ? pool : pool.select { |col| col[:visible] }
+      end
+
       # Get sortable columns
       def sortable_columns
         columns.select { |col| col[:sortable] }

data/lib/infotable/configuration.rb

@@ -14,7 +14,8 @@ module Infotable
                   :empty_value,
                   :parent_controller,
                   :max_filter_options,
-                  :url_state
+                  :url_state,
+                  :max_select_all
 
     def initialize
       @default_per_page = 25
@@ -30,6 +31,7 @@ module Infotable
       @nil_value = "-" # Default placeholder for nil values
       @empty_value = "-" # Default placeholder for empty strings
       @url_state = true # mirror table state in the address bar
+      @max_select_all = 10_000 # "select all matching" collects at most this many ids (nil = no limit)
       @max_filter_options = 500 # select filters render at most this many <option>s (nil = no limit)
       @parent_controller = "ActionController::Base" # Set to "ApplicationController" to inherit host auth/filters
     end

data/lib/infotable/formatters/action_formatter.rb

@@ -72,7 +72,7 @@ module Infotable
           action[:label] || action[:icon] || view_context.t("infotable.formatters.action"),
           resolve_url(action[:url], record),
           role: "menuitem",
-          class: "block px-3 py-1.5 text-sm whitespace-nowrap #{link_classes(action[:color])} hover:bg-gray-50",
+          class: "block px-3 py-1.5 text-sm whitespace-nowrap #{link_classes(action[:color])} hover:bg-gray-50 dark:hover:bg-gray-800",
           data: link_data(action[:data] || {}, action[:method] || :get, action[:confirm])
         )
       end
@@ -81,10 +81,10 @@ module Infotable
         # <details> gives open/close and keyboard support without JS
         content_tag(:details, class: "relative inline-block text-left") do
           summary = content_tag(:summary, "\u22EF".html_safe,
-            class: "list-none cursor-pointer inline-flex items-center px-2 py-1 rounded-md border border-gray-300 bg-white text-gray-600 hover:bg-gray-50",
+            class: "list-none cursor-pointer inline-flex items-center px-2 py-1 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800",
             "aria-label": view_context.t("infotable.formatters.action"), "aria-haspopup": "menu")
           menu = content_tag(:div, role: "menu",
-            class: "absolute right-0 z-30 mt-1 min-w-36 rounded-md border border-gray-200 bg-white py-1 shadow-lg") do
+            class: "absolute right-0 z-30 mt-1 min-w-36 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 py-1 shadow-lg") do
             safe_join(actions.map { |action| render_menu_item(action, record) })
           end
           summary + menu
@@ -110,7 +110,7 @@ module Infotable
         when "success"
           "border-green-600 bg-green-600 text-white hover:bg-green-700"
         else
-          "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"
+          "border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800"
         end
 
         "#{base} #{color_classes}"
@@ -119,11 +119,11 @@ module Infotable
       def link_classes(color = nil)
         case color&.to_s
         when "danger"
-          "text-red-600 hover:text-red-900"
+          "text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300"
         when "success"
-          "text-green-600 hover:text-green-900"
+          "text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300"
         else
-          "text-indigo-600 hover:text-indigo-900"
+          "text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-200"
         end
       end
 

data/lib/infotable/formatters/avatar_formatter.rb

@@ -10,8 +10,8 @@ module Infotable
     class AvatarFormatter < BaseFormatter
       SIZES = { sm: "h-6 w-6 text-xs", md: "h-8 w-8 text-sm", lg: "h-10 w-10 text-base" }.freeze
       COLORS = [
-        "bg-indigo-100 text-indigo-700", "bg-green-100 text-green-700", "bg-yellow-100 text-yellow-700",
-        "bg-pink-100 text-pink-700", "bg-blue-100 text-blue-700", "bg-purple-100 text-purple-700"
+        "bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300", "bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300", "bg-yellow-100 dark:bg-yellow-900/40 text-yellow-700 dark:text-yellow-300",
+        "bg-pink-100 dark:bg-pink-900/40 text-pink-700 dark:text-pink-300", "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300", "bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300"
       ].freeze
 
       def format(value, record, options = {})

data/lib/infotable/formatters/badge_formatter.rb

@@ -54,23 +54,23 @@ module Infotable
 
         color_classes = case color.to_s
         when "green"
-          "bg-green-100 text-green-800"
+          "bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300"
         when "red"
-          "bg-red-100 text-red-800"
+          "bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300"
         when "yellow"
-          "bg-yellow-100 text-yellow-800"
+          "bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300"
         when "blue"
-          "bg-blue-100 text-blue-800"
+          "bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300"
         when "indigo"
-          "bg-indigo-100 text-indigo-800"
+          "bg-indigo-100 dark:bg-indigo-900/40 text-indigo-800 dark:text-indigo-300"
         when "purple"
-          "bg-purple-100 text-purple-800"
+          "bg-purple-100 dark:bg-purple-900/40 text-purple-800 dark:text-purple-300"
         when "pink"
-          "bg-pink-100 text-pink-800"
+          "bg-pink-100 dark:bg-pink-900/40 text-pink-800 dark:text-pink-300"
         when "cyan"
-          "bg-cyan-100 text-cyan-800"
+          "bg-cyan-100 dark:bg-cyan-900/40 text-cyan-800 dark:text-cyan-300"
         else # gray
-          "bg-gray-100 text-gray-800"
+          "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200"
         end
 
         "#{base} #{size_classes} #{color_classes}"

data/lib/infotable/formatters/boolean_formatter.rb

@@ -20,9 +20,9 @@ module Infotable
 
       def format_as_badge(value, true_text, false_text)
         if value
-          content_tag(:span, true_text, class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800")
+          content_tag(:span, true_text, class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300")
         else
-          content_tag(:span, false_text, class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800")
+          content_tag(:span, false_text, class: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200")
         end
       end
 

data/lib/infotable/formatters/link_formatter.rb

@@ -10,7 +10,7 @@ module Infotable
     # Without url: the value itself is the URL (handy for website columns); mailto:/tel: work too.
     class LinkFormatter < BaseFormatter
       ALLOWED_SCHEMES = %w[http https mailto tel].freeze
-      DEFAULT_CLASSES = "text-indigo-600 hover:text-indigo-800 hover:underline".freeze
+      DEFAULT_CLASSES = "text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 hover:underline".freeze
 
       def format(value, record, options = {})
         label = resolve(options[:label], record) || value

data/lib/infotable/formatters/percent_formatter.rb

@@ -19,7 +19,7 @@ module Infotable
 
         width = number.clamp(0, 100).round
         bar = content_tag(:div, content_tag(:div, "", class: "h-full rounded-full bg-indigo-500", style: "width: #{width}%"),
-                          class: "h-1.5 w-16 rounded-full bg-gray-200 flex-none", role: "presentation")
+                          class: "h-1.5 w-16 rounded-full bg-gray-200 dark:bg-gray-700 flex-none", role: "presentation")
         content_tag(:div, safe_join([ content_tag(:span, text, class: "tabular-nums"), bar ]), class: "flex items-center gap-2")
       end
     end

data/lib/infotable/version.rb

@@ -1,3 +1,3 @@
 module Infotable
-  VERSION = "1.0.1"
+  VERSION = "1.2.0"
 end