infotable 1.0.0 → 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/generators/infotable/install/install_generator.rb

@@ -96,25 +96,6 @@ module Infotable
         template "initializer.rb", "config/initializers/infotable.rb"
       end
 
-      def add_to_gitignore
-        gitignore_entry = "# InfoTable - Generated from ERB template, do not commit\napp/assets/stylesheets/infotable.css\napp/assets/tailwind/infotable.css\n"
-
-        if File.exist?(".gitignore")
-          content = File.read(".gitignore")
-          unless content.include?("infotable.css")
-            append_to_file ".gitignore", "\n#{gitignore_entry}"
-            say "   ✅ Added generated infotable.css to .gitignore", :green
-          else
-            say "   ℹ️  infotable.css already in .gitignore", :blue
-          end
-        else
-          create_file ".gitignore", gitignore_entry
-          say "   ✅ Created .gitignore with infotable.css", :green
-        end
-
-        say "   📝 Commit infotable.css.erb (the template), not infotable.css (generated)", :cyan
-      end
-
       def show_post_install_message
         say "\n" + "=" * 60, :green
         say "✅ InfoTable installation complete!", :green
@@ -144,9 +125,7 @@ module Infotable
         say "💡 Important Notes:", :cyan
         say "=" * 60, :cyan
         say "• InfoTable requires the tailwindcss-rails gem", :green
-        say "• infotable.css.erb is processed by Rake task before Tailwind builds", :green
-        say "• Gem paths resolve dynamically for each environment (dev/production)", :green
-        say "• Commit infotable.css.erb (template), gitignore infotable.css (generated)", :cyan
+        say "• Tailwind scans the gem through @import \"../builds/tailwind/infotable\" in your Tailwind entry file", :green
 
         say "\n📖 Documentation: https://github.com/jcieslar/infotable", :cyan
       end
@@ -496,61 +475,28 @@ import InfoTableDrawerController from "infotable/controllers/drawer_controller"
           return
         end
 
-        # Create separate infotable.css file with resolved gem paths
-        create_infotable_css_file
-
-        # Tailwind only scans the gem's views if the main CSS imports the generated file
+        # tailwindcss-rails writes app/assets/builds/tailwind/infotable.css (it imports the gem's
+        # app/assets/tailwind/infotable/engine.css) on every build; Tailwind only scans the gem's
+        # views if the main CSS imports it.
+        import = %(@import "../builds/tailwind/infotable";)
         content = File.read(tailwind_file)
-        if content.match?(/@import\s+["']\.?\/?infotable["']/)
+        if content.include?(import)
           say "   ℹ️  InfoTable import already exists in #{File.basename(tailwind_file)}", :blue
         else
-          if content.include?("@import \"tailwindcss\"")
+          if content.match?(/@import\s+["']tailwindcss["'];?\s*\n/)
             inject_into_file tailwind_file, after: /@import\s+["']tailwindcss["'];?\s*\n/ do
-              "\n/* InfoTable - Requires tailwindcss-rails gem */\n@import './infotable';\n"
+              "#{import}\n"
             end
           else
-            prepend_to_file tailwind_file, "/* InfoTable - Requires tailwindcss-rails gem */\n@import './infotable';\n\n"
+            prepend_to_file tailwind_file, "#{import}\n"
           end
 
-          say "   ✅ Added @import './infotable' to #{File.basename(tailwind_file)}", :green
+          say "   ✅ Added #{import} to #{File.basename(tailwind_file)}", :green
         end
 
         say "   📝 Run: rails tailwindcss:build", :cyan
       end
 
-      def create_infotable_css_file
-        # Determine the stylesheets directory
-        stylesheets_dir = if File.exist?("app/assets/stylesheets")
-          "app/assets/stylesheets"
-        elsif File.exist?("app/assets/tailwind")
-          "app/assets/tailwind"
-        else
-          "app/assets/stylesheets"
-        end
-
-        infotable_css_path = File.join(stylesheets_dir, "infotable.css.erb")
-
-        # Create ERB file that dynamically resolves gem paths
-        css_content = <<~CSS
-          /* InfoTable Tailwind Sources - ERB Template */
-          /* Requires: tailwindcss-rails gem (https://github.com/rails/tailwindcss-rails) */
-          /* Paths are resolved dynamically via ERB from Infotable module */
-
-          /* Local table definitions in your Rails app */
-          @source "../../app/infotable";
-
-          /* InfoTable gem paths (resolved via ERB at build time) */
-          @source "<%= Infotable.views_path %>";
-          @source "<%= Infotable.formatters_path %>";
-        CSS
-
-        create_file infotable_css_path, css_content
-
-        say "   ✅ Created #{infotable_css_path} with ERB templates", :green
-        say "   📝 Gem paths resolve dynamically via Infotable module", :cyan
-        say "   📝 Works in all environments automatically", :green
-      end
-
       def package_json_has?(package)
         return false unless File.exist?("package.json")
 

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/engine.rb

@@ -39,13 +39,5 @@ module Infotable
     initializer "infotable.i18n" do |app|
       config.i18n.load_path += Dir[root.join("config/locales/**/*.yml")]
     end
-
-    # Expose gem paths via ENV variables for Tailwind CSS v4 @source directives
-    # This allows Tailwind to scan the gem's views/formatters at build time
-    # Works in development, production, Docker, CI - everywhere!
-    initializer "infotable.tailwind", before: :load_config_initializers do
-      ENV["INFOTABLE_VIEWS_PATH"] = root.join("app/views/infotable").to_s
-      ENV["INFOTABLE_FORMATTERS_PATH"] = root.join("lib/infotable/formatters").to_s
-    end
   end
 end