infotable 1.4.1 → 1.6.0

data/app/controllers/infotable/tables_controller.rb

@@ -27,6 +27,10 @@ module Infotable
         format.turbo_stream {
           # For infinite scroll - return turbo stream to append rows and replace pagination frame
           # Following the guide's "Frames + Streams" pattern
+          if @page_out_of_range # nothing left: appending the first page again would repeat its rows
+            return render turbo_stream: turbo_stream.replace("#{params[:table_name]}_pagination", partial: "infotable/tables/end_indicator")
+          end
+
           streams = [
             turbo_stream.append(
               "#{params[:table_name]}_tbody",
@@ -48,7 +52,7 @@ module Infotable
             # No more pages - replace with end indicator
             streams << turbo_stream.replace(
               "#{params[:table_name]}_pagination",
-              '<div class="infotable-end-indicator border-t border-gray-100 bg-white px-6 py-8 text-center"><div class="inline-flex items-center gap-2 text-sm text-gray-500"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg><span class="font-medium">All items loaded</span></div></div>'.html_safe
+              partial: "infotable/tables/end_indicator"
             )
           end
 
@@ -139,6 +143,7 @@ module Infotable
       # Apply pagination
       @pagy, @records = paginate(@page)
     rescue Pagy::RangeError # page past the end: show the first page
+      @page_out_of_range = true
       @pagy, @records = paginate(1)
     end
 
@@ -207,7 +212,7 @@ module Infotable
     def add_sort_tiebreaker(query, sort_columns)
       model = query.model
       pk = model.primary_key
-      return query if pk.blank? || sort_columns.map(&:to_s).include?(pk) || query.distinct_value
+      return query if pk.blank? || sort_columns.map(&:to_s).include?(pk) || query.distinct_value || query.group_values.any?
 
       query.order(Arel.sql("#{model.table_name}.#{pk} ASC"))
     end
@@ -228,9 +233,15 @@ module Infotable
       requested.positive? ? [ requested, MAX_PER_PAGE ].min : default
     end
 
-    # Guard against spreadsheet formula injection
+    PLAIN_NUMBER = /\A[+-]?\d+([.,]\d+)?\z/
+
+    # Guard against spreadsheet formula injection. Plain numbers ("-5", "+48123456789") are
+    # not formulas and are left alone.
     def csv_safe(value)
-      value.is_a?(String) && value.match?(/\A[=+\-@\t\r]/) ? "'#{value}" : value
+      return value unless value.is_a?(String) && value.match?(/\A[=+\-@\t\r]/)
+      return value if value.match?(PLAIN_NUMBER)
+
+      "'#{value}"
     end
 
     def render_table_frame
@@ -302,7 +313,7 @@ module Infotable
       when :boolean
         value ? "true" : "false"
       else
-        value.to_s
+        value.is_a?(Array) ? value.join(", ") : value.to_s
       end
     end
   end

data/app/helpers/infotable/tables_helper.rb

@@ -89,29 +89,6 @@ module Infotable
       end
     end
 
-    # Build export params with current filters, sort, and visible columns
-    def build_export_params(table_name, table_class)
-      params_hash = {
-        table_name: table_name,
-        sort_column: scalar_request_param(:sort_column),
-        sort_direction: scalar_request_param(:sort_direction),
-        sort: scalar_request_param(:sort)
-      }
-
-      # Add filters if present
-      if params[:filters].present?
-        params_hash[:filters] = params[:filters]
-      end
-
-      # Get visible columns from localStorage via JavaScript or use defaults
-      # For now, we'll pass all visible columns and let the controller handle it
-      # The JavaScript will need to update the link dynamically
-      visible_column_names = table_class.visible_columns.map { |c| c[:name].to_s }
-      params_hash[:visible_columns] = visible_column_names.join(",")
-
-      params_hash.compact
-    end
-
     private
 
     def resolve_table_class(table_name)
@@ -143,29 +120,11 @@ module Infotable
       formatter_name = column[:formatter]
       formatter_options = column[:formatter_options] || {}
 
-      formatter_class = case formatter_name
-      when :date, :datetime
-        Infotable::Formatters::DateFormatter
-      when :currency
-        Infotable::Formatters::CurrencyFormatter
-      when :boolean
-        Infotable::Formatters::BooleanFormatter
-      when :badge, :status
-        Infotable::Formatters::BadgeFormatter
-      when :action, :actions
-        Infotable::Formatters::ActionFormatter
-      when :link
-        Infotable::Formatters::LinkFormatter
-      when :avatar
-        Infotable::Formatters::AvatarFormatter
-      when :percent
-        Infotable::Formatters::PercentFormatter
-      else
-        # Custom formatter: :avatar => AvatarFormatter (or Namespaced::AvatarFormatter)
+      formatter_class = Infotable::Formatters.built_in[formatter_name.to_sym] ||
+        # Custom formatter: :stars => StarsFormatter (or Namespaced::StarsFormatter)
         "#{formatter_name.to_s.camelize}Formatter".safe_constantize ||
-          raise(Infotable::Error, "Unknown formatter :#{formatter_name} for column :#{column[:name]}. " \
-                                  "Built-ins: date, currency, boolean, badge, action, link, avatar, percent; custom: define #{formatter_name.to_s.camelize}Formatter.")
-      end
+        raise(Infotable::Error, "Unknown formatter :#{formatter_name} for column :#{column[:name]}. " \
+                                "Built-ins: #{Infotable::Formatters.built_in.keys.join(', ')}; custom: define #{formatter_name.to_s.camelize}Formatter.")
 
       formatter_class.new(self).format(value, record, formatter_options)
     end
@@ -262,14 +221,17 @@ module Infotable
     DEFAULT_DRAWER_WIDTH = "26rem".freeze
 
     # HTML attributes for the slide-in drawer (side and width from config)
-    def infotable_drawer_attributes(config)
+    # `rail`: the drawer sits flush against the rail, so no rounded corners or heavy shadow
+    def infotable_drawer_attributes(config, rail: false)
       side = config.drawer_position.to_s == "left" ? "left" : "right"
       width = config.drawer_width.to_s.match?(DRAWER_WIDTH_FORMAT) ? config.drawer_width.to_s : DEFAULT_DRAWER_WIDTH
       hidden = side == "left" ? "-100%" : "100%"
 
+      # With a rail the drawer must line up with the card's inner edge: inset it by the card's 1px border
+      inset = rail ? "1px" : "0"
       {
-        style: "#{side}: 0; width: #{width}; max-width: 90%; transform: translateX(#{hidden});",
-        class: "absolute top-0 bottom-0 bg-white dark:bg-gray-900 #{side == 'left' ? 'border-r rounded-r-xl' : 'border-l rounded-l-xl'} border-gray-200 dark:border-gray-700 shadow-xl transition-all duration-300 ease-in-out z-50",
+        style: "#{side}: #{inset}; #{"top: 1px; bottom: 1px; " if rail}width: #{width}; max-width: 90%; transform: translateX(#{hidden});",
+        class: "absolute top-0 bottom-0 bg-white dark:bg-gray-900 #{side == 'left' ? 'border-r' : 'border-l'}#{side == 'left' ? (rail ? ' rounded-l-[11px]' : ' rounded-r-xl') : (rail ? ' rounded-r-[11px]' : ' rounded-l-xl')} border-gray-200 dark:border-gray-700 #{rail ? 'shadow-none' : 'shadow-xl'} transition-all duration-300 ease-in-out z-50",
         role: "dialog",
         inert: true, # closed drawer is off-screen: keep it out of the tab order (JS toggles it)
         aria: { label: I18n.t("infotable.drawer.label"), hidden: true },

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

@@ -50,8 +50,8 @@
                     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 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 class="w-4 h-4 -rotate-45" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                <path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
               </svg>
             </button>
             <%# Pin Right %>
@@ -61,8 +61,8 @@
                     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 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 class="w-4 h-4 rotate-45" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                <path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"/>
               </svg>
             </button>
           </div>

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

@@ -0,0 +1,8 @@
+<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>
+    <span class="font-medium"><%= t('infotable.table.loading.all_loaded') %></span>
+  </div>
+</div>

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

@@ -6,14 +6,14 @@
     end %>
 <div class="flex flex-col h-full">
   <%# Drawer Content - Scrollable %>
-  <div class="flex-1 overflow-y-auto px-4 py-4 bg-gray-50 dark:bg-gray-950">
+  <div class="flex-1 overflow-y-auto px-5 py-1 bg-white dark:bg-gray-900">
     <form id="filter-form-<%= table_name %>"
           action="<%= infotable_table_data_path(table_name: table_name) %>"
           method="get"
           data-table-frame="<%= table_name %>_content"
           data-action="submit->infotable--drawer#submitFilters"
           data-autofilter="<%= autofilter.to_s %>"
-          class="space-y-4">
+          class="divide-y divide-gray-100 dark:divide-gray-800">
 
       <%# Preserve sort and per_page params %>
       <% if params[:sort].is_a?(String) && params[:sort].present? %>
@@ -29,8 +29,8 @@
 
       <%# Render filter for each filterable column %>
       <% table_class.filterable_columns.each do |column| %>
-        <div class="group p-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm hover:border-indigo-300 dark:hover:border-indigo-700 transition-all duration-150">
-          <label class="block text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-2">
+        <div class="py-4">
+          <label class="block text-[13px] font-medium text-gray-700 dark:text-gray-300 mb-2">
             <%= column[:label] %>
           </label>
 
@@ -45,12 +45,12 @@
   </div>
 
   <%# Drawer Footer with actions %>
-  <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
+  <div class="px-5 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 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">
+              class="<%= autofilter ? 'w-full' : 'flex-1' %> px-4 py-2 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 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

@@ -27,13 +27,5 @@
     </div>
   <% end %>
 <% else %>
-  <%# No more pages - show end indicator %>
-  <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>
-      <span class="font-medium"><%= t('infotable.table.loading.all_loaded') %></span>
-    </div>
-  </div>
+  <%= render partial: "infotable/tables/end_indicator" %>
 <% end %>

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

@@ -3,14 +3,11 @@
   <%# Results info and per-page selector %>
   <div class="flex-1 flex items-center gap-4">
     <p class="text-sm text-gray-700 dark:text-gray-300">
-      <%= t('infotable.pagination.showing') %>
-      <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 dark:text-gray-100"><%= pagy.to %></span>
+      <% bold = ->(value) { tag.span(value, class: "font-semibold text-gray-900 dark:text-gray-100") } %>
       <% if pagy.count %>
-        <%= t('infotable.pagination.of') %>
-        <span class="font-semibold text-gray-900 dark:text-gray-100"><%= pagy.count %></span>
-        <%= t('infotable.pagination.results') %>
+        <%= t('infotable.pagination.summary_html', from: bold.(pagy.from), to: bold.(pagy.to), total: bold.(pagy.count)) %>
+      <% else %>
+        <%= t('infotable.pagination.summary_no_total_html', from: bold.(pagy.from), to: bold.(pagy.to)) %>
       <% end %>
     </p>
 

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

@@ -143,7 +143,7 @@
 
     <%# Side panel drawer - always available for column visibility, filters if available %>
       <%# Drawer - positioned within table bounds, starts completely hidden off-screen %>
-      <div <%= tag.attributes(infotable_drawer_attributes(config)) %>>
+      <div <%= tag.attributes(infotable_drawer_attributes(config, rail: rail)) %>>
         <div data-infotable--drawer-target="content" class="h-full flex flex-col overflow-hidden">
           <%= render "infotable/tables/side_panel", table_name: table_name, table_class: table_class, config: config %>
         </div>

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

@@ -14,8 +14,15 @@
       else "text-sm" # default
     end
   %>
-  <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 %>>
+  <%
+    clickable = table_class.row_clickable?
+    row_dom_id = dom_id(record) if record.respond_to?(:to_key) && record.to_key.present?
+    row_data = table_class.row_data_for(record).transform_keys { |key| key.to_s.dasherize }
+    row_data["row-link"] = row_url if row_url
+    row_data["action"] = "click->infotable--table#handleRowClick" if clickable
+  %>
+  <tr <%= tag.attributes(id: row_dom_id, data: row_data) %>
+      class="infotable-row group relative border-t border-gray-100 dark:border-gray-800 first:border-t-0 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 <%= 'cursor-pointer' if clickable %> <%= table_class.row_classes_for(record) %>">
     <% if table_class.checkbox_enabled? %>
       <td class="<%= cell_padding %> w-10">
         <input type="checkbox"

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 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]">
+          class="block w-full appearance-none rounded-lg border-0 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 pr-10 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 ring-1 ring-inset ring-gray-200 dark:ring-gray-700 focus:outline-none focus:bg-white dark:focus:bg-gray-900 focus:ring-2 focus:ring-indigo-500 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-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>

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

@@ -8,7 +8,7 @@
   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"
+  input_class = "block w-full rounded-lg border-0 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 pr-3 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-500 ring-1 ring-inset ring-gray-200 dark:ring-gray-700 focus:outline-none focus:bg-white dark:focus:bg-gray-900 focus:ring-2 focus:ring-indigo-500 transition-colors disabled:cursor-not-allowed disabled:bg-gray-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
 %>

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 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"
+            class="block w-full appearance-none rounded-lg border-0 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 pl-3 py-2 pr-8 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 ring-1 ring-inset ring-gray-200 dark:ring-gray-700 focus:outline-none focus:bg-white dark:focus:bg-gray-900 focus:ring-2 focus:ring-indigo-500 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-100 disabled:opacity-75"
             style="min-height: 120px;">
       <% options.each do |option| %>
         <% if option.is_a?(Array) %>
@@ -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 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]">
+            class="block w-full appearance-none rounded-lg border-0 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 pr-10 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 ring-1 ring-inset ring-gray-200 dark:ring-gray-700 focus:outline-none focus:bg-white dark:focus:bg-gray-900 focus:ring-2 focus:ring-indigo-500 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-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) %>

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 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]">
+            class="block w-full appearance-none rounded-lg border-0 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 pr-10 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 ring-1 ring-inset ring-gray-200 dark:ring-gray-700 focus:outline-none focus:bg-white dark:focus:bg-gray-900 focus:ring-2 focus:ring-indigo-500 transition-colors cursor-pointer disabled:cursor-not-allowed disabled:bg-gray-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,7 +23,7 @@
            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 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">
+           class="block w-full rounded-lg border-0 bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 pr-8 pl-3 py-2 text-base sm:text-sm text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-500 ring-1 ring-inset ring-gray-200 dark:ring-gray-700 focus:outline-none focus:bg-white dark:focus:bg-gray-900 focus:ring-2 focus:ring-indigo-500 transition-colors disabled:cursor-not-allowed disabled:bg-gray-100">
     <button type="button"
             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/app/views/infotable/tables/show.html.erb

@@ -35,7 +35,7 @@
                     data-default-visible="<%= column[:visible] %>"
                     <%= tag.attributes(data: { default_pinned: column[:pinned] }) if column[:pinned] %>
                     style="<%= infotable_cell_width_style(column) %>"
-                    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">
+                    class="<%= header_padding %> text-left whitespace-nowrap text-xs font-medium tracking-wide text-gray-500 dark:text-gray-400 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 %>
@@ -90,7 +90,7 @@
         </table>
 
       <%# Next page frame for infinite scroll - rendered after table %>
-      <% if @infinite_scroll_enabled && params[:page].blank? %>
+      <% if @infinite_scroll_enabled %>
         <%= render partial: "infotable/tables/next_page_frame" %>
       <% end %>
     <% else %>

data/config/importmap.rb

@@ -2,5 +2,5 @@
 pin "infotable", to: "infotable/index.js"
 pin_all_from Infotable::Engine.root.join("app/assets/javascripts/infotable/controllers"), under: "controllers/infotable", to: "infotable/controllers"
 
-# External dependencies
-pin "sortablejs", to: "https://cdn.jsdelivr.net/npm/sortablejs@1.15.7/modular/sortable.esm.js"
+# External dependencies, served with the gem (no third-party CDN at runtime)
+pin "sortablejs", to: "infotable/vendor/sortable.esm.js"

data/config/locales/de.yml

@@ -0,0 +1,126 @@
+de:
+  infotable:
+    table:
+      buttons:
+        export_csv: "CSV exportieren"
+        filters: "Filter"
+        exporting: "Exportiere..."
+        refresh: "Aktualisieren"
+        columns: "Spalten"
+      sort_hint: "Klicken zum Sortieren, Shift+Klick fügt eine Spalte zur Sortierung hinzu"
+      loading:
+        initial: "Daten werden geladen..."
+        more_items: "Weitere Einträge werden geladen..."
+        all_loaded: "Alle Einträge geladen"
+      resize_column: "Spaltenbreite ändern"
+      empty_state:
+        title: "Keine Daten gefunden"
+        description: "Fügen Sie Datensätze hinzu, um sie hier zu sehen."
+        filtered_title: "Keine Zeilen entsprechen Ihren Filtern"
+        filtered_description: "Entfernen Sie einen Filter oder suchen Sie nach etwas anderem."
+
+    drawer:
+      label: "Filter und Spalten"
+      panel_title:
+        customize_columns: "Spalten anpassen"
+        filters: "Filter"
+        columns: "Spalten"
+      tabs:
+        filters: "Filter"
+        columns: "Spalten"
+
+    columns:
+      instructions: "Zum Umsortieren ziehen, Spalten anheften und ein-/ausblenden:"
+      pin:
+        left: "Links anheften"
+        right: "Rechts anheften"
+      actions:
+        select_all: "Alle auswählen"
+        deselect_all: "Alle abwählen"
+        reset_to_defaults: "🔄 Standard wiederherstellen"
+
+    filters:
+      actions:
+        clear_all: "Alle löschen"
+        apply_filters: "Filter anwenden"
+      clear_filter: "Diesen Filter löschen"
+      active:
+        search: "Suche: „%{query}“"
+        remove: "Filter %{filter} entfernen"
+        clear_all: "Alle Filter löschen"
+      from: "Von"
+      to: "Bis"
+      min: "Min"
+      max: "Max"
+      enter_value: "Wert eingeben..."
+      all: "Alle"
+      multi_select_hint: "Strg/Cmd gedrückt halten, um mehrere auszuwählen"
+      options_truncated: "Die ersten %{shown} von %{total} Optionen werden angezeigt"
+      boolean:
+        "true": "Wahr"
+        "false": "Falsch"
+        empty: "Leer"
+        not_empty: "Nicht leer"
+      text_ops:
+        contains: "Enthält"
+        exact: "Exakte Übereinstimmung"
+        not_contain: "Enthält nicht"
+        starts_with: "Beginnt mit"
+        ends_with: "Endet mit"
+        is_empty: "Ist leer"
+        is_not_empty: "Ist nicht leer"
+      range_ops:
+        between: "Zwischen"
+      number_ops:
+        eq: "Gleich"
+        neq: "Ungleich"
+        gt: "Größer als"
+        gte: "Größer oder gleich"
+        lt: "Kleiner als"
+        lte: "Kleiner oder gleich"
+      date_ops:
+        "on": "Am"
+        before: "Vor"
+        after: "Nach"
+
+    formatters:
+      ago: "vor %{time}"
+      date:
+        short: "%d. %b %Y"
+        long: "%d. %B %Y"
+        time: "%H:%M"
+        datetime: "%d. %b %Y %H:%M"
+      action: "Aktion"
+      boolean:
+        "true": "Ja"
+        "false": "Nein"
+      duration:
+        short:
+          d: "%{count} T"
+          h: "%{count} Std."
+          m: "%{count} Min."
+          s: "%{count} Sek."
+        long:
+          d: { one: "%{count} Tag", few: "%{count} Tage", many: "%{count} Tage", other: "%{count} Tage" }
+          h: { one: "%{count} Stunde", few: "%{count} Stunden", many: "%{count} Stunden", other: "%{count} Stunden" }
+          m: { one: "%{count} Minute", few: "%{count} Minuten", many: "%{count} Minuten", other: "%{count} Minuten" }
+          s: { one: "%{count} Sekunde", few: "%{count} Sekunden", many: "%{count} Sekunden", other: "%{count} Sekunden" }
+
+    batch:
+      selected: "%{count} ausgewählt"
+      clear: "Auswahl aufheben"
+      select_all: "Alle Zeilen auswählen"
+      select_row: "Zeile auswählen"
+      select_all_matching: "Alle %{count} Treffer auswählen"
+      truncated: "Nur die ersten %{max} Zeilen sind ausgewählt"
+
+    search:
+      placeholder: "Suchen..."
+      label: "Tabelle durchsuchen"
+
+    pagination:
+      summary_html: "Zeige %{from} bis %{to} von %{total} Ergebnissen"
+      summary_no_total_html: "Zeige %{from} bis %{to}"
+      rows_per_page: "Zeilen pro Seite:"
+      previous: "Zurück"
+      next: "Weiter"