infotable 1.0.1 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c5a1b907c771796e4046d0c74dabfdb403255e7cc4eec0d9f6cda1464f2f61fb
-  data.tar.gz: 352b469bb54ba80c3db5c05bfe9236be554575169af9354ff003d335e81131e4
+  metadata.gz: f5df1bcdf9da714e75a1f5b2f39681f69de99243954eefa1a936e1895d93370b
+  data.tar.gz: 8e0d96b405da00978ceaa3090a30dd310a1d6edc5ae1591ac50e96bede219bd7
 SHA512:
-  metadata.gz: 5df9ceb7142c4db38807616045f6ff3dd2946fd0719031c661870e7fe6f5fced31a7de71a4e8ab3cf922ee70d51c1182faa1e9da1bbaa486385ae64d481007e5
-  data.tar.gz: 1c40aa535af8a5b44fa1c3583cd09e4dbd3347a6cc4380e64e9fabc8fdda70dec9463a3b5cec22a10480810c05c50cbc6e91b14ca52ae590ab3eaefcbe81cfb7
+  metadata.gz: ca2f4b93b865921e6d8b8d62d8fabd3d935cd6db93600e3ecd2934df6d58e17930cb22bbf1f4bddeaa78c28dbedba7a3e6a4ff205320f144488dcffd432c950a
+  data.tar.gz: 2d86610f937536dca157b8d99ee9265f77e652ea0772ef3c96fc0306dd7a3f3b3d2712bd8524b427e548f600b63f5694efbc636f818ba1afd4e737b54cc34332

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` |
@@ -368,6 +372,21 @@ Filters, search and sort survive pagination, per-page changes and CSV export.
 
 Search, filters, sort, page and page size are mirrored in the page's address bar, one namespace per table (`/users?users_table[search]=ann&users_table[page]=2`). Links can be shared and bookmarked, a reload keeps the table as it was, and the Back button steps through the states. Turn it off globally with `config.url_state = false` or per table with `url_state false` (e.g. tables inside modals or tabs).
 
+#### Column widths, dark mode, small screens
+
+- Every header has a drag handle on its right edge (keyboard: focus it, Left/Right, Shift for bigger steps; double-click resets). Widths are remembered in the browser. `resizable_columns false` removes the handles.
+- Dark mode follows `prefers-color-scheme`. If your app switches with a `.dark` class instead, add `@custom-variant dark (&:where(.dark, .dark *));` to your Tailwind CSS.
+- On narrow screens the toolbar stacks and the table scrolls sideways inside its own box.
+
+#### CSV export columns
+
+The export contains the columns the user sees, in the order they see them; action columns are never exported. Pin it down per table:
+
+```ruby
+export_columns :name, :email, :created_at   # default list, and the only columns that can be exported
+column :internal_note, exportable: false    # never exported
+```
+
 #### Large tables
 
 ```ruby
@@ -446,6 +465,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 +1061,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]")