infotable 1.0.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c5a1b907c771796e4046d0c74dabfdb403255e7cc4eec0d9f6cda1464f2f61fb
-  data.tar.gz: 352b469bb54ba80c3db5c05bfe9236be554575169af9354ff003d335e81131e4
+  metadata.gz: 171498a1e00eac672d386484ac90f7c98b51a7b05f627dd7da55c9ed6d384733
+  data.tar.gz: 3f6e330f094aec5c4d05ea11c46fe51cc0491bc6ebe80c88be42f0289c0f0716
 SHA512:
-  metadata.gz: 5df9ceb7142c4db38807616045f6ff3dd2946fd0719031c661870e7fe6f5fced31a7de71a4e8ab3cf922ee70d51c1182faa1e9da1bbaa486385ae64d481007e5
-  data.tar.gz: 1c40aa535af8a5b44fa1c3583cd09e4dbd3347a6cc4380e64e9fabc8fdda70dec9463a3b5cec22a10480810c05c50cbc6e91b14ca52ae590ab3eaefcbe81cfb7
+  metadata.gz: e5bc91b7d123b62cf9db4a4814a98b389ac12d3082a913da6f6d6593cf07f545e5ece6373d408407a3503fb1697d977a523b48cff194ae488bac8c76bb7e5322
+  data.tar.gz: 502b8de5cd278b4f5c3ebfb184984eabb82e1260fcb048c236fb0e799f9f41ea1bedede69cc811101a4626b39b915634603c96a2b61c983905f8747096bf1908

data/README.md

@@ -2,6 +2,8 @@
 
 Modern, flexible datatable engine for Rails 8+ with Hotwire. Build beautiful, interactive tables with server-side filtering, sorting, searching, and pagination—without page reloads.
 
+**[Live demo](https://infotable.infovation.eu/)** · [Changelog](CHANGELOG.md) · [Contributing](CONTRIBUTING.md)
+
 ## Features
 
 - ✨ **Server-side operations** - Filtering, sorting, searching, pagination all on the backend
@@ -350,6 +352,8 @@ Click a header to sort; **Shift+click** adds up to three sort columns (`?sort=na
 
 Mark columns `searchable: true` to get a search box. Every word (up to 5) must match at least one searchable column, case-insensitively.
 
+The box sits in the header bar. With `toolbar :rail` there is no header, so it moves to the top of the drawer: open it with the rail's filters or columns button. It works the same there (debounced, kept across sorting, filters and CSV export, restored from the URL) and is shown only when at least one column is `searchable`.
+
 #### Filters
 
 Filter types are inferred from the column type or set with `filter_type:`.
@@ -357,7 +361,7 @@ Filter types are inferred from the column type or set with `filter_type:`.
 | Type | Operators |
 |------|-----------|
 | text | contains, equals, starts with, ends with, not contains, is empty, is not empty |
-| number | `eq` `neq` `gt` `gte` `lt` `lte` `between` `is_empty` `is_not_empty` (plain `from`/`to` still work) |
+| number | `eq` `neq` `gt` `gte` `lt` `lte` `between` `is_empty` `is_not_empty` (plain `from`/`to` still work; the drawer shows them as "Between") |
 | date | `on` `before` `after` `between` `is_empty` `is_not_empty` (plain `from`/`to` still work) |
 | boolean | any, yes, no |
 | select | one value, or several with `filter_multi_select: true` |
@@ -446,6 +450,14 @@ row_size :default
 - **Mid**: Moderate padding, normal text - balanced appearance
 - **Default**: Generous padding, normal text - comfortable reading
 
+#### Toolbar
+
+```ruby
+toolbar :rail   # :header (default) or :rail
+```
+
+`:rail` hides the header bar and puts filters (with a badge of active filters), columns, CSV export and refresh on a slim vertical rail at the table's right edge. Search moves to the top of the drawer.
+
 #### Filters Button Visibility
 
 Show or hide the filters button:
@@ -1034,7 +1046,7 @@ end
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/jcieslar/infotable.
+Bug reports and pull requests are welcome on GitHub at https://github.com/jcieslar/infotable. See [CONTRIBUTING.md](CONTRIBUTING.md) for the setup and the checks a change has to pass, and [SECURITY.md](SECURITY.md) for reporting vulnerabilities.
 
 ---
 

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

@@ -310,29 +310,34 @@ export default class extends Controller {
   // Clear all filters
   clearFilters(event) {
     event.preventDefault()
+    if (this.resetFilterInputs()) {
+      // Submit immediately (no debounce for clear)
+      this.submitFilters(null)
+    }
+  }
+
+  // Empties every filter input in the drawer without reloading the table. False when there is no form.
+  resetFilterInputs() {
     const form = this.contentTarget.querySelector("form")
-    if (form) {
-      // Clear debounce timer
-      if (this.debounceTimer) {
-        clearTimeout(this.debounceTimer)
-        this.debounceTimer = null
-      }
+    if (!form) return false
 
-      // Reset all inputs except hidden ones (sort, per_page)
-      const inputs = form.querySelectorAll('input:not([type="hidden"]), select, textarea')
-      inputs.forEach(input => {
-        if (input.type === 'checkbox' || input.type === 'radio') {
-          input.checked = false
-        } else {
-          input.value = ''
-        }
-      })
+    // Clear debounce timer
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer)
+      this.debounceTimer = null
+    }
 
-      this.syncFilterOps()
+    // Reset all inputs except hidden ones (sort, per_page)
+    form.querySelectorAll('input:not([type="hidden"]), select, textarea').forEach(input => {
+      if (input.type === 'checkbox' || input.type === 'radio') {
+        input.checked = false
+      } else {
+        input.value = ''
+      }
+    })
 
-      // Submit immediately (no debounce for clear)
-      this.submitFilters(null)
-    }
+    this.syncFilterOps()
+    return true
   }
 
   // Clear a single filter
@@ -368,11 +373,13 @@ export default class extends Controller {
 
       case 'number':
       case 'date':
-        // Clear both from and to fields
-        const fromInput = field('from')
-        const toInput = field('to')
-        if (fromInput) fromInput.value = ''
-        if (toInput) toInput.value = ''
+        // Back to the plain from/to range
+        ;['from', 'to', 'value'].forEach(suffix => {
+          const input = field(suffix)
+          if (input) input.value = ''
+        })
+        const rangeOp = field('op')
+        if (rangeOp) rangeOp.value = ''
         break
 
       case 'select':
@@ -411,6 +418,7 @@ export default class extends Controller {
 
   // Hide the value input for operators that take none (is_empty / is_not_empty)
   syncFilterOps() {
+    this.syncRangeOps()
     this.element.querySelectorAll("select[data-filter-op]").forEach(select => {
       const container = select.closest("[data-filter-container]")
       const wrapper = container?.querySelector("[data-filter-value-wrapper]")
@@ -423,6 +431,24 @@ export default class extends Controller {
     })
   }
 
+  // Number and date filters: the operator decides between from/to inputs, one value input, or none
+  syncRangeOps() {
+    this.element.querySelectorAll("select[data-range-op]").forEach(select => {
+      const container = select.closest("[data-range-container]")
+      if (!container) return
+
+      const op = select.value
+      const mode = op === "" ? "range" : (op === "is_empty" || op === "is_not_empty") ? "none" : "single"
+
+      container.querySelectorAll("[data-range-fields]").forEach(group => {
+        const visible = group.dataset.rangeFields === mode
+        group.style.display = visible ? "" : "none"
+        // inputs that are not shown must not leak into the request
+        if (!visible) group.querySelectorAll("input").forEach(input => { input.value = "" })
+      })
+    })
+  }
+
   // Tab switching
   switchTab(event) {
     event.preventDefault()
@@ -435,11 +461,11 @@ export default class extends Controller {
     this.tabButtonTargets.forEach(button => {
       const isActive = button.dataset.tab === tab
       if (isActive) {
-        button.classList.add("text-indigo-600", "border-indigo-600")
-        button.classList.remove("text-gray-500", "border-transparent")
+        button.classList.add("text-indigo-600", "dark:text-indigo-400", "border-indigo-600")
+        button.classList.remove("text-gray-500", "dark:text-gray-400", "border-transparent")
       } else {
-        button.classList.remove("text-indigo-600", "border-indigo-600")
-        button.classList.add("text-gray-500", "border-transparent")
+        button.classList.remove("text-indigo-600", "dark:text-indigo-400", "border-indigo-600")
+        button.classList.add("text-gray-500", "dark:text-gray-400", "border-transparent")
       }
     })
 
@@ -878,21 +904,21 @@ export default class extends Controller {
 
     if (leftBtn) {
       if (pinned === 'left') {
-        leftBtn.classList.add('bg-indigo-100', 'text-indigo-600')
-        leftBtn.classList.remove('text-gray-400', 'hover:bg-gray-100', 'hover:text-gray-600')
+        leftBtn.classList.add('bg-indigo-100', 'dark:bg-indigo-900/40', 'text-indigo-600')
+        leftBtn.classList.remove('text-gray-400', 'hover:bg-gray-100', 'dark:hover:bg-gray-700', 'hover:text-gray-600')
       } else {
-        leftBtn.classList.remove('bg-indigo-100', 'text-indigo-600')
-        leftBtn.classList.add('text-gray-400', 'hover:bg-gray-100', 'hover:text-gray-600')
+        leftBtn.classList.remove('bg-indigo-100', 'dark:bg-indigo-900/40', 'text-indigo-600')
+        leftBtn.classList.add('text-gray-400', 'hover:bg-gray-100', 'dark:hover:bg-gray-700', 'hover:text-gray-600')
       }
     }
 
     if (rightBtn) {
       if (pinned === 'right') {
-        rightBtn.classList.add('bg-indigo-100', 'text-indigo-600')
-        rightBtn.classList.remove('text-gray-400', 'hover:bg-gray-100', 'hover:text-gray-600')
+        rightBtn.classList.add('bg-indigo-100', 'dark:bg-indigo-900/40', 'text-indigo-600')
+        rightBtn.classList.remove('text-gray-400', 'hover:bg-gray-100', 'dark:hover:bg-gray-700', 'hover:text-gray-600')
       } else {
-        rightBtn.classList.remove('bg-indigo-100', 'text-indigo-600')
-        rightBtn.classList.add('text-gray-400', 'hover:bg-gray-100', 'hover:text-gray-600')
+        rightBtn.classList.remove('bg-indigo-100', 'dark:bg-indigo-900/40', 'text-indigo-600')
+        rightBtn.classList.add('text-gray-400', 'hover:bg-gray-100', 'dark:hover:bg-gray-700', 'hover:text-gray-600')
       }
     }
   }
@@ -965,7 +991,7 @@ export default class extends Controller {
       header.style.removeProperty('background-color')
       header.style.removeProperty('background-image')
       header.style.removeProperty('opacity')
-      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 => {
@@ -978,7 +1004,7 @@ export default class extends Controller {
         cell.style.removeProperty('background-color')
         cell.style.removeProperty('background-image')
         cell.style.removeProperty('opacity')
-        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]")
       })
     })
 
@@ -1024,7 +1050,7 @@ export default class extends Controller {
 
         // Set all styles at once via setAttribute
         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) {
@@ -1055,7 +1081,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]")
@@ -1085,7 +1111,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) {
@@ -1116,7 +1142,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/assets/javascripts/infotable/controllers/table_controller.js

@@ -4,15 +4,17 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static values = {
     name: String,
-    urlState: Boolean
+    urlState: Boolean,
+    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() {
@@ -66,10 +68,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 +228,7 @@ export default class extends Controller {
 
   clearSelection() {
     this.selected.clear()
+    this.hideBatchNote()
     this.rowCheckboxTargets.forEach(checkbox => { checkbox.checked = false })
     this.renderSelection()
   }
@@ -216,19 +243,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 +393,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()
 
-      // Export link follows the frame's params
-      frame.addEventListener("turbo:frame-load", () => this.updateExportLink(), { once: true })
-    }, 300)
+    const frame = document.getElementById(`${this.nameValue}_content`)
+    if (!frame) return
+
+    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
@@ -735,7 +839,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 +859,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 +908,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 +941,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 +974,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 +1007,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