infotable 1.0.1 → 1.3.0

data/app/assets/javascripts/infotable/controllers/table_controller.js

@@ -4,15 +4,18 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static values = {
     name: String,
-    urlState: Boolean
+    urlState: Boolean,
+    resizable: { type: Boolean, default: true },
+    idsUrl: String
   }
 
-  static targets = ["exportButton", "exportButtonText", "selectAll", "rowCheckbox", "batchBar", "batchCount"]
+  static targets = ["filterCount", "exportButton", "exportButtonText", "selectAll", "rowCheckbox", "batchBar", "batchCount", "selectAllMatching", "batchNote"]
 
   // Target callbacks (rowCheckboxTargetConnected) can fire before connect(), so state lives here
   initialize() {
     this.selected = new Set()
     this.selectionScope = null
+    this.totalCount = null
   }
 
   connect() {
@@ -22,6 +25,9 @@ export default class extends Controller {
     // Apply column visibility from localStorage when table loads
     this.applyColumnVisibility()
 
+    // Remembered column widths and the drag handles
+    this.applyColumnWidths()
+
     // Apply column pinning (sticky positioning)
     this.applyColumnPinning()
 
@@ -52,6 +58,7 @@ export default class extends Controller {
   applyOrderAndVisibility() {
     this.applyColumnOrder()
     this.applyColumnVisibility()
+    this.applyColumnWidths()
     this.applyColumnPinning()
   }
 
@@ -66,10 +73,34 @@ export default class extends Controller {
 
   // Handle turbo frame load
   handleFrameLoad(event) {
+    this.updateFilterCount(event.target)
+    // rows matching the current filters, when the server knows it (not with countless pagination)
+    const total = parseInt(event.target.querySelector("[data-total-count]")?.dataset.totalCount, 10)
+    this.totalCount = Number.isFinite(total) ? total : null
     this.syncSelectionScope(event.target)
     if (this.urlStateValue && event.target.id === `${this.nameValue}_content`) this.syncUrl(event.target)
   }
 
+  // Reload the current page of rows (rail toolbar's refresh button)
+  refresh() {
+    document.getElementById(`${this.nameValue}_content`)?.reload()
+  }
+
+  // Badge on the rail's filter button: number of columns with an active filter
+  updateFilterCount(frame) {
+    if (!this.hasFilterCountTarget || !frame?.src) return
+
+    const params = new URL(frame.src, window.location.href).searchParams
+    const columns = new Set()
+    for (const [key, value] of params) {
+      const match = key.match(/^filters\[([^\]]+)\]/)
+      if (match && value !== "") columns.add(match[1])
+    }
+
+    this.filterCountTarget.textContent = columns.size
+    this.filterCountTarget.classList.toggle("hidden", columns.size === 0)
+  }
+
   // ---- Table state in the address bar ---------------------------------------
   // The frame URL (`/infotable/tables/users_table/data?filters[..]&sort=..&page=2`) is mirrored in the
   // page URL as `?users_table[filters][..]=..&users_table[page]=2`, one namespace per table. The
@@ -202,6 +233,7 @@ export default class extends Controller {
 
   clearSelection() {
     this.selected.clear()
+    this.hideBatchNote()
     this.rowCheckboxTargets.forEach(checkbox => { checkbox.checked = false })
     this.renderSelection()
   }
@@ -216,19 +248,67 @@ export default class extends Controller {
     if (this.hasBatchCountTarget) {
       this.batchCountTarget.textContent = this.batchCountTarget.dataset.template.replace("__COUNT__", count)
     }
+    let allOnPageChecked = false
     if (this.hasSelectAllTarget) {
       const boxes = this.rowCheckboxTargets
       const checkedOnPage = boxes.filter(box => box.checked).length
-      this.selectAllTarget.checked = boxes.length > 0 && checkedOnPage === boxes.length
+      allOnPageChecked = boxes.length > 0 && checkedOnPage === boxes.length
+      this.selectAllTarget.checked = allOnPageChecked
       this.selectAllTarget.indeterminate = checkedOnPage > 0 && checkedOnPage < boxes.length
     }
 
+    // Offer "select all N matching" once every loaded row is ticked and more rows match
+    if (this.hasSelectAllMatchingTarget) {
+      const offer = this.idsUrlValue !== "" && allOnPageChecked && this.totalCount !== null && this.totalCount > count
+      this.selectAllMatchingTarget.hidden = !offer
+      if (offer) {
+        this.selectAllMatchingTarget.textContent = this.selectAllMatchingTarget.dataset.template.replace("__COUNT__", this.totalCount)
+      }
+    }
+
     this.element.dispatchEvent(new CustomEvent("infotable:selection-changed", {
       bubbles: true,
       detail: { table: this.nameValue, ids: Array.from(this.selected) }
     }))
   }
 
+  // Fetches the ids of every row matching the current filters and search (not just the loaded
+  // pages) and adds them to the selection. The server caps the list (max_select_all).
+  async selectAllMatching(event) {
+    const button = event.currentTarget
+    const frame = document.getElementById(`${this.nameValue}_content`)
+    if (!frame || !this.idsUrlValue) return
+
+    const params = new URL(frame.src || frame.getAttribute("src"), window.location.href).searchParams
+    ;["page", "per_page", "sort", "sort_column", "sort_direction", "format"].forEach(key => params.delete(key))
+
+    button.disabled = true
+    try {
+      const response = await fetch(`${this.idsUrlValue}?${params}`, { headers: { Accept: "application/json" }, credentials: "same-origin" })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const { ids, truncated } = await response.json()
+
+      ids.forEach(id => this.selected.add(String(id)))
+      this.rowCheckboxTargets.forEach(box => { box.checked = this.selected.has(box.value) })
+      this.renderSelection()
+      if (truncated) this.showBatchNote(ids.length)
+    } catch (e) {
+      console.warn("Could not select all matching rows", e)
+    } finally {
+      button.disabled = false
+    }
+  }
+
+  showBatchNote(max) {
+    if (!this.hasBatchNoteTarget) return
+    this.batchNoteTarget.textContent = this.batchNoteTarget.dataset.template.replace("__MAX__", max)
+    this.batchNoteTarget.hidden = false
+  }
+
+  hideBatchNote() {
+    if (this.hasBatchNoteTarget) this.batchNoteTarget.hidden = true
+  }
+
   // Sends the selected ids as ids[] to the action's URL. GET navigates; other verbs
   // submit a form (with Rails' _method override and the CSRF token).
   runBatchAction(event) {
@@ -318,22 +398,51 @@ export default class extends Controller {
     clearTimeout(this.searchTimeout)
     const value = event.currentTarget.value.trim()
 
-    this.searchTimeout = setTimeout(() => {
-      const frame = document.getElementById(`${this.nameValue}_content`)
-      if (!frame) return
+    this.searchTimeout = setTimeout(() => this.applySearch(value), 300)
+  }
 
-      const url = new URL(frame.src || frame.getAttribute("src"), window.location.href)
-      if (value) {
-        url.searchParams.set("search", value)
-      } else {
-        url.searchParams.delete("search")
-      }
-      url.searchParams.set("page", "1")
-      frame.src = url.toString()
+  applySearch(value) {
+    const frame = document.getElementById(`${this.nameValue}_content`)
+    if (!frame) return
+
+    const url = new URL(frame.src || frame.getAttribute("src"), window.location.href)
+    if (value) {
+      url.searchParams.set("search", value)
+    } else {
+      url.searchParams.delete("search")
+    }
+    url.searchParams.set("page", "1")
+    frame.src = url.toString()
+
+    // Export link follows the frame's params
+    frame.addEventListener("turbo:frame-load", () => this.updateExportLink(), { once: true })
+  }
+
+  // The "x" on the search chip
+  clearSearch() {
+    clearTimeout(this.searchTimeout)
+    const input = this.element.querySelector('input[name="search"]')
+    if (input) input.value = ""
+    this.applySearch("")
+  }
+
+  // "Clear all filters" (chips bar and empty state): search and every filter, sort and per-page stay
+  clearAllFilters() {
+    clearTimeout(this.searchTimeout)
+    const input = this.element.querySelector('input[name="search"]')
+    if (input) input.value = ""
+    this.application.getControllerForElementAndIdentifier(this.element, "infotable--drawer")?.resetFilterInputs()
+
+    const frame = document.getElementById(`${this.nameValue}_content`)
+    if (!frame) return
 
-      // Export link follows the frame's params
-      frame.addEventListener("turbo:frame-load", () => this.updateExportLink(), { once: true })
-    }, 300)
+    const url = new URL(frame.src || frame.getAttribute("src"), window.location.href)
+    Array.from(url.searchParams.keys()).forEach(key => {
+      if (key === "search" || key.startsWith("filters[")) url.searchParams.delete(key)
+    })
+    url.searchParams.set("page", "1")
+    frame.src = url.toString()
+    frame.addEventListener("turbo:frame-load", () => this.updateExportLink(), { once: true })
   }
 
   // Handle per-page change
@@ -676,6 +785,150 @@ export default class extends Controller {
     }
   }
 
+  // ---- Column widths ----------------------------------------------------------
+  // Every header gets a drag handle on its right edge (pointer drag, or arrow keys while it is
+  // focused). The width is written to the header and each cell of the column and remembered in
+  // localStorage as { columnName: px }. Double-click on a handle goes back to the table's width.
+
+  static MIN_COLUMN_WIDTH = 60
+  static MAX_COLUMN_WIDTH = 800
+
+  loadColumnWidths() {
+    try {
+      const stored = JSON.parse(localStorage.getItem(`infotable_column_widths_${this.nameValue}`) || "{}")
+      return stored && typeof stored === "object" ? stored : {}
+    } catch (e) {
+      return {}
+    }
+  }
+
+  saveColumnWidths(widths) {
+    try {
+      const key = `infotable_column_widths_${this.nameValue}`
+      Object.keys(widths).length ? localStorage.setItem(key, JSON.stringify(widths)) : localStorage.removeItem(key)
+    } catch (e) {
+      // storage unavailable (private window): the width still applies until the next load
+    }
+  }
+
+  columnTable() {
+    return this.element.querySelector("table") || document.getElementById(`${this.nameValue}_content`)?.querySelector("table")
+  }
+
+  // Writes one column's width to its header and cells. null restores the width the table was rendered with.
+  setColumnWidth(table, columnName, width) {
+    const escaped = CSS.escape(columnName)
+    const cells = table.querySelectorAll(`th[data-column-name="${escaped}"], td[data-column-name="${escaped}"]`)
+
+    cells.forEach(cell => {
+      if (cell.dataset.defaultWidth === undefined) cell.dataset.defaultWidth = cell.style.width
+      const value = width === null ? cell.dataset.defaultWidth : `${width}px`
+      cell.style.width = value
+      cell.style.maxWidth = value
+      cell.style.minWidth = width === null ? "" : value
+    })
+  }
+
+  applyColumnWidths() {
+    const table = this.columnTable()
+    if (!table) return
+
+    const widths = this.loadColumnWidths()
+    Object.entries(widths).forEach(([name, width]) => {
+      if (Number.isFinite(width)) this.setColumnWidth(table, name, width)
+    })
+
+    if (this.resizableValue) this.addResizeHandles(table)
+  }
+
+  addResizeHandles(table) {
+    table.querySelectorAll("thead th[data-column-name]").forEach(header => {
+      if (header.querySelector("[data-resize-handle]")) return
+
+      const handle = document.createElement("div")
+      handle.setAttribute("data-resize-handle", "")
+      handle.setAttribute("role", "separator")
+      handle.setAttribute("aria-orientation", "vertical")
+      handle.setAttribute("aria-label", `${header.textContent.trim()}: ${this.resizeLabel()}`)
+      handle.tabIndex = 0
+      handle.className = "absolute top-0 bottom-0 right-0 w-2 cursor-col-resize touch-none select-none hover:bg-indigo-400/40 focus:bg-indigo-400/60 focus:outline-none"
+
+      handle.addEventListener("pointerdown", event => this.startResize(event, header, handle))
+      handle.addEventListener("keydown", event => this.resizeWithKeys(event, header))
+      handle.addEventListener("dblclick", event => { event.stopPropagation(); this.resetColumnWidth(header) })
+      handle.addEventListener("click", event => { event.preventDefault(); event.stopPropagation() })
+
+      header.appendChild(handle)
+    })
+  }
+
+  resizeLabel() {
+    return this.element.dataset.resizeLabel || "resize column"
+  }
+
+  startResize(event, header, handle) {
+    if (event.button !== undefined && event.button !== 0) return
+    event.preventDefault()
+    event.stopPropagation()
+
+    const table = header.closest("table")
+    const name = header.dataset.columnName
+    const startX = event.clientX
+    const startWidth = header.getBoundingClientRect().width
+    let width = startWidth
+
+    handle.setPointerCapture?.(event.pointerId)
+
+    const move = moveEvent => {
+      width = this.clampColumnWidth(startWidth + (moveEvent.clientX - startX))
+      this.setColumnWidth(table, name, width)
+    }
+    const stop = () => {
+      handle.removeEventListener("pointermove", move)
+      handle.removeEventListener("pointerup", stop)
+      handle.removeEventListener("pointercancel", stop)
+      this.commitColumnWidth(name, width)
+    }
+
+    handle.addEventListener("pointermove", move)
+    handle.addEventListener("pointerup", stop)
+    handle.addEventListener("pointercancel", stop)
+  }
+
+  resizeWithKeys(event, header) {
+    const step = event.shiftKey ? 50 : 10
+    const delta = { ArrowLeft: -step, ArrowRight: step }[event.key]
+    if (delta === undefined) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    const width = this.clampColumnWidth(header.getBoundingClientRect().width + delta)
+    this.setColumnWidth(header.closest("table"), header.dataset.columnName, width)
+    this.commitColumnWidth(header.dataset.columnName, width)
+  }
+
+  resetColumnWidth(header) {
+    const name = header.dataset.columnName
+    this.setColumnWidth(header.closest("table"), name, null)
+    const widths = this.loadColumnWidths()
+    delete widths[name]
+    this.saveColumnWidths(widths)
+    this.applyColumnPinning()
+    this.updateExportLink()
+  }
+
+  clampColumnWidth(width) {
+    return Math.round(Math.min(this.constructor.MAX_COLUMN_WIDTH, Math.max(this.constructor.MIN_COLUMN_WIDTH, width)))
+  }
+
+  commitColumnWidth(name, width) {
+    const widths = this.loadColumnWidths()
+    widths[name] = width
+    this.saveColumnWidths(widths)
+    // pinned columns are positioned from the widths of the columns before them
+    this.applyColumnPinning()
+  }
+
   // Apply column pinning (sticky positioning) from localStorage
   applyColumnPinning() {
     const tableName = this.nameValue
@@ -735,7 +988,7 @@ export default class extends Controller {
         header.style.removeProperty('opacity')
         header.style.backgroundClip = ''
         header.style.boxShadow = ''
-        header.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-gray-50', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
+        header.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
       })
 
       rows.forEach(row => {
@@ -755,7 +1008,7 @@ export default class extends Controller {
           cell.style.removeProperty('opacity')
           cell.style.backgroundClip = ''
           cell.style.boxShadow = ''
-          cell.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-white', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
+          cell.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
         })
       })
 
@@ -804,7 +1057,7 @@ export default class extends Controller {
 
           // Set all styles at once via setAttribute (most aggressive method)
           header.setAttribute('style', newStyles)
-          header.classList.add('infotable-pinned-left', '!bg-gray-50')
+          header.classList.add('infotable-pinned-left', '!bg-gray-50', 'dark:!bg-gray-800')
 
           // Mark last left-pinned column
           if (columnName === lastLeftPinned) {
@@ -837,7 +1090,7 @@ export default class extends Controller {
               `.replace(/\s+/g, ' ').trim()
 
               cell.setAttribute('style', newStyles)
-              cell.classList.add('infotable-pinned-left', '!bg-white')
+              cell.classList.add('infotable-pinned-left', '!bg-white', 'dark:!bg-gray-900')
 
               if (columnName === lastLeftPinned) {
                 cell.classList.add("after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]")
@@ -870,7 +1123,7 @@ export default class extends Controller {
           `.replace(/\s+/g, ' ').trim()
 
           header.setAttribute('style', newStyles)
-          header.classList.add('infotable-pinned-right', '!bg-gray-50')
+          header.classList.add('infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800')
 
           // Mark first right-pinned column
           if (columnName === firstRightPinned) {
@@ -903,7 +1156,7 @@ export default class extends Controller {
               `.replace(/\s+/g, ' ').trim()
 
               cell.setAttribute('style', newStyles)
-              cell.classList.add('infotable-pinned-right', '!bg-white')
+              cell.classList.add('infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900')
 
               if (columnName === firstRightPinned) {
                 cell.classList.add("before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")

data/app/controllers/infotable/tables_controller.rb

@@ -57,19 +57,29 @@ module Infotable
       end
     end
 
+    # Ids of every row matching the current filters and search, for "select all matching".
+    # Same authorization and query as the table; capped by Infotable.configuration.max_select_all.
+    def ids
+      return head :not_found unless @table_class.checkbox_enabled?
+
+      cap = Infotable.configuration.max_select_all
+      ids = @table_class.checkbox_ids(build_query, cap && cap + 1)
+      truncated = cap && ids.size > cap
+      ids = ids.first(cap) if truncated
+
+      render json: { ids: ids.map(&:to_s), truncated: truncated ? true : false }
+    end
+
     def export
       require "csv"
 
       # Process the same query as show/data but without pagination
       @query = build_query
 
-      # Get visible columns from params or use all visible columns
-      visible_column_names = if params[:visible_columns].present?
-        params[:visible_columns].split(",").map(&:strip)
-      else
-        @table_class.visible_columns.map { |c| c[:name].to_s }
-      end
-      visible_columns = @table_class.columns.select { |col| visible_column_names.include?(col[:name].to_s) }
+      # The browser sends the user's visible columns in their on-screen order; the table decides
+      # what may be exported (see Base.columns_for_export)
+      requested = scalar_param(:visible_columns).to_s.split(",").map(&:strip)
+      visible_columns = @table_class.columns_for_export(requested)
 
       # Set CSV headers for streaming download
       headers["Content-Type"] = "text/csv; charset=utf-8"

data/app/helpers/infotable/tables_helper.rb

@@ -258,7 +258,7 @@ module Infotable
 
       {
         style: "#{side}: 0; width: #{width}; max-width: 90%; transform: translateX(#{hidden});",
-        class: "absolute top-0 bottom-0 bg-white #{side == 'left' ? 'border-r rounded-l-xl' : 'border-l rounded-r-xl'} border-indigo-200 shadow-2xl transition-all duration-300 ease-in-out z-50",
+        class: "absolute top-0 bottom-0 bg-white dark:bg-gray-900 #{side == 'left' ? 'border-r rounded-l-xl' : 'border-l rounded-r-xl'} border-indigo-200 dark:border-indigo-800 shadow-2xl 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 },
@@ -267,13 +267,75 @@ module Infotable
     end
 
     BATCH_BUTTON_COLORS = {
-      default: "border-gray-300 bg-white text-gray-700 hover:bg-gray-50",
+      default: "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",
       primary: "border-indigo-600 bg-indigo-600 text-white hover:bg-indigo-700",
       success: "border-green-600 bg-green-600 text-white hover:bg-green-700",
       warning: "border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-600",
       danger: "border-red-600 bg-red-600 text-white hover:bg-red-700"
     }.freeze
 
+    NUMBER_OP_SYMBOLS = { "eq" => "=", "neq" => "\u2260", "gt" => ">", "gte" => "\u2265", "lt" => "<", "lte" => "\u2264" }.freeze
+
+    # The filters and search that are narrowing the table right now, as chips:
+    #   [{ name: "age", type: "number", label: "Age", text: "\u2265 45" }, { search: true, text: "..." }]
+    # Only filterable columns with something to apply are listed; blank inputs are not active.
+    def infotable_active_filters(table_class, filters, search = nil)
+      filters = filters.to_unsafe_h if filters.respond_to?(:to_unsafe_h)
+      filters = {} unless filters.is_a?(Hash)
+      filters = filters.with_indifferent_access
+
+      chips = table_class.filterable_columns.filter_map do |column|
+        params = filters[column[:name]]
+        type = filter_type_for_column(column)
+        text = infotable_filter_chip_text(type, params)
+        next if text.blank?
+
+        { name: column[:name].to_s, type: type, label: column[:label].to_s, text: text }
+      end
+
+      chips.unshift(search: true, text: t("infotable.filters.active.search", query: search)) if search.present?
+      chips
+    end
+
+    def infotable_filter_chip_text(type, params)
+      case type
+      when "select", "boolean"
+        raw = params.is_a?(Hash) ? params[:value] : params
+        values = Array(raw).flatten.reject { |v| v.is_a?(Hash) || v.blank? }.map(&:to_s)
+        return if values.empty?
+
+        values.map { |v| type == "boolean" ? infotable_boolean_chip_text(v) : v }.join(", ")
+      else
+        return unless params.is_a?(Hash)
+
+        op = params[:op].to_s
+        return t("infotable.filters.text_ops.#{op}") if %w[is_empty is_not_empty].include?(op)
+
+        value = params[:value].is_a?(String) ? params[:value].strip : nil
+        from = params[:from].is_a?(String) ? params[:from].strip : nil
+        to = params[:to].is_a?(String) ? params[:to].strip : nil
+
+        if type == "text"
+          return if value.blank?
+
+          "#{t("infotable.filters.text_ops.#{op.presence_in(%w[contains exact not_contain starts_with ends_with]) || 'contains'}")} \u201c#{value}\u201d"
+        elsif op.present? && op != "between" && value.present?
+          type == "number" ? "#{NUMBER_OP_SYMBOLS.fetch(op, op)} #{value}" : "#{t("infotable.filters.date_ops.#{op}", default: op)} #{value}"
+        elsif from.present? && to.present?
+          "#{from} \u2013 #{to}"
+        elsif from.present?
+          "\u2265 #{from}"
+        elsif to.present?
+          "\u2264 #{to}"
+        end
+      end
+    end
+
+    def infotable_boolean_chip_text(value)
+      key = { "true" => "true", "false" => "false", "is_empty" => "empty", "is_not_empty" => "not_empty" }[value]
+      key ? t("infotable.filters.boolean.#{key}") : value
+    end
+
     def infotable_batch_button_classes(color)
       "inline-flex items-center px-3 py-1.5 border text-sm font-medium rounded-lg transition-colors #{BATCH_BUTTON_COLORS.fetch(color, BATCH_BUTTON_COLORS[:default])}"
     end

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

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

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

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