infotable 1.5.0 → 1.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1a84d197b721ed57ad46be7d91a870d0f7d0d3c6a7bc471e4e1c306aefa9e1f
-  data.tar.gz: 19c3fd871c6e5bee6908266fe877774786b8b2e7d7fa289117b05e65684016e2
+  metadata.gz: 31096b54bd71fb8799c287dbd43f91c2e05a3a5d5c8a652bd89f84e97c9fa5ed
+  data.tar.gz: 4cec84bed5d53f7599753fa30183e667833278aa4ebd89484cc2495ace2b7262
 SHA512:
-  metadata.gz: b8bcbd636497943daa6fb58cec7a8550f4258c14a7a65a771d10c1f4e2776bed51fe6b8ad2137126131b353fedd91076e6d017697b0f405b3694d257bd436098
-  data.tar.gz: c6a4f20ebe7642c1d8d686be6e8fee8226f1076ee93b2daa5de79f0b7a630f17d264eb64cc067d164fb1de5033f1c08c059ca1e46a7b9d5b7666298f7d5b5a47
+  metadata.gz: fa78ae7189b9c5ed8363ecd04c9abe444ed51ba3fcf231644fb14b624d5f7aa776811335efafc8ba521b99cfb9d8724ceccec647e3f3398e27377f5bc0ebaec6
+  data.tar.gz: 6bdaf90359935c4a3a1bad5575748b0dd40c47ce01ebd2fc7f8c10c6604d3b7720f9edde5fa387cd5e16868ce48165cc24183d6eeba1474b01b337621bd3829b

data/README.md

@@ -12,7 +12,7 @@ Modern, flexible datatable engine for Rails 8+ with Hotwire. Build beautiful, in
 - 🔧 **Highly customizable** - Easy to override defaults and add custom formatters
 - 📦 **Works with any bundler** - Importmap, esbuild, webpack, vite—we support them all
 - 🚀 **Rails 8+ ready** - Built for modern Rails applications
-- 🌍 **i18n Support** - English and Polish translations included
+- 🌍 **i18n Support** - English, Polish, German, French, Spanish, Greek and Italian translations included
 - 🎯 **Advanced Features** - Infinite scroll, column pinning, drag-to-reorder, row links, and more
 
 ## Quick Start
@@ -165,6 +165,8 @@ Generate a starting point from a model's columns:
 ```bash
 rails generate infotable:table User
 rails generate infotable:table Admin::Order --only=id number status   # or --skip=notes
+rails generate infotable:table Order --per-page=50 --sort=placed_at:desc --toolbar=rail --checkbox \
+  --authorize="controller.current_user&.admin?"   # also --row-click --infinite-scroll --countless
 ```
 
 It writes `app/infotable/users_table.rb` with a column per attribute (types and filters inferred, enums become select filters, passwords/tokens and foreign keys are left out, `belongs_to` associations come as commented hints).
@@ -600,6 +602,100 @@ column :actions,
 
 `method:` and `confirm:` use Turbo (`data-turbo-method`, `data-turbo-confirm`). Labels are HTML-escaped.
 
+#### 6. Link Formatter (`:link`)
+
+```ruby
+column :website, formatter: :link, formatter_options: { external: true }   # the value is the URL
+
+column :email,
+  formatter: :link,
+  formatter_options: { url: ->(record) { "mailto:#{record.email}" } }       # email / phone: mailto: and tel:
+
+column :name,
+  formatter: :link,
+  formatter_options: { url: ->(record) { user_path(record) } }              # Proc (run in the view), Symbol or String
+```
+
+Only relative URLs, `http(s)`, `mailto` and `tel` are linked (`javascript:` and friends render as plain text). Options: `url`, `label`, `external` (`target="_blank"` + `rel="noopener noreferrer"`), `class`.
+
+#### 7. Avatar Formatter (`:avatar`)
+
+```ruby
+column :avatar_url,
+  formatter: :avatar,
+  formatter_options: { name: ->(record) { record.name }, size: :md }   # :sm, :md, :lg
+```
+
+The value is the image URL; without one, the initials of `name` are shown on a coloured disc. `label: false` hides the name next to the picture.
+
+#### 8. Percent Formatter (`:percent`)
+
+```ruby
+column :completion, formatter: :percent, formatter_options: { precision: 1, bar: true }
+```
+
+Options: `precision` (default 0), `scale: :percent` (0-100, default) or `:ratio` (0-1), `bar` (small progress bar).
+
+#### 9. Number Formatter (`:number`)
+
+```ruby
+column :views_count, formatter: :number, formatter_options: { compact: true }          # 1.5k, 3.4M
+column :latency,     formatter: :number, formatter_options: { unit: "ms", precision: 1 }
+column :stock,       formatter: :number, formatter_options: { zero: "-" }
+```
+
+Options: `precision`, `delimiter` (`","`), `separator` (`"."`), `unit` (appended), `compact`, `zero` (shown instead of 0).
+
+#### 10. Tags Formatter (`:tags`, alias `:list`)
+
+```ruby
+column :roles,
+  formatter: :tags,
+  formatter_options: { limit: 3, colors: { "admin" => "red" } }
+
+# several values in a cell that is not an attribute: use `value:`
+column :labels, value: ->(post) { post.tags.map(&:name) }, formatter: :tags, formatter_options: { limit: 2 }
+```
+
+The value is an Array, a relation or a comma separated string; each item is a small badge. `limit` shows N items and "+M" (the rest is in its tooltip), `label: ->(item) { item.name }` picks the text, `colors` maps item to badge colour (as in `:badge`), `separator: ", "` renders plain text instead of badges. The CSV export joins the items with `", "`.
+
+#### 11. Truncate Formatter (`:truncate`)
+
+```ruby
+column :description, formatter: :truncate, formatter_options: { length: 80 }
+```
+
+Long text is cut to `length` (default 60, `omission` default `"…"`); the full text is in the cell's tooltip.
+
+#### 12. Image Formatter (`:image`)
+
+```ruby
+column :photo_url,
+  formatter: :image,
+  formatter_options: { size: :md, alt: ->(record) { record.name }, link: true }   # :sm (32px), :md (48px), :lg (64px)
+```
+
+A square thumbnail (use `:avatar` for round pictures). Only http(s) and relative URLs are rendered. `link: true` opens the full image in a new tab.
+
+#### 13. Filesize Formatter (`:filesize`)
+
+```ruby
+column :byte_size, formatter: :filesize        # 1536 => "1.5 KB"
+```
+
+`precision` is the number of significant digits (default 2).
+
+#### 14. Duration Formatter (`:duration`)
+
+```ruby
+column :duration_seconds, formatter: :duration                                        # 3900 => "1h 05m"
+column :duration_seconds, formatter: :duration, formatter_options: { format: :long }  # "1 hour 5 minutes"
+```
+
+The value is in seconds. `parts` limits how many units are shown (default 2). Translated through `infotable.formatters.duration` (Polish plural forms work out of the box).
+
+The Date formatter's `format: :relative` keeps the exact time in a tooltip, and the Currency formatter takes `unit`, `precision`, `delimiter` and `separator` from your locale (`number.currency.format`) for whatever you do not pass.
+
 ### Custom Formatters
 
 #### Lambda/Proc Formatter
@@ -747,7 +843,7 @@ config.autofilter = false # Require "Apply Filters" button click
 
 ## Internationalization (i18n)
 
-InfoTable includes English and Polish translations.
+InfoTable includes English, Polish, German, French, Spanish, Greek and Italian translations. Any key can be overridden in your app.
 
 ### Set Locale
 
@@ -769,7 +865,7 @@ end
 ### Available Languages
 
 - English (`:en`) - Default
-- Polish (`:pl`)
+- Polish (`:pl`), German (`:de`), French (`:fr`), Spanish (`:es`), Greek (`:el`), Italian (`:it`)
 
 ### Customize Translations
 
@@ -784,11 +880,11 @@ en:
         export_csv: "Download CSV"
 ```
 
-### Add New Language
+### Add Another Language
 
 ```yaml
-# config/locales/infotable.es.yml
-es:
+# config/locales/infotable.pt.yml
+pt:
   infotable:
     table:
       buttons:
@@ -838,6 +934,48 @@ Built-in CSV export with:
 
 ---
 
+## MCP Server (AI assistants)
+
+The gem ships an [MCP](https://modelcontextprotocol.io) server, so an AI assistant (Claude Code, Cursor, ...) can create tables in your app: it reads your models, asks you how the table should look, generates `app/infotable/*_table.rb` and checks that it works. It talks to your app over stdio on your machine, no port is opened.
+
+Add the `mcp` gem to the app (it is not a dependency of infotable):
+
+```ruby
+# Gemfile
+gem "mcp", group: :development
+```
+
+Register the server in the client, from the app's root. For Claude Code:
+
+```bash
+claude mcp add infotable -- bundle exec infotable-mcp
+```
+
+or commit a `.mcp.json` (Cursor: `.cursor/mcp.json`):
+
+```json
+{
+  "mcpServers": {
+    "infotable": { "command": "bundle", "args": ["exec", "infotable-mcp"] }
+  }
+}
+```
+
+Then ask: *"create an InfoTable table for Order"*. Or use the `new_table` prompt, which makes the assistant ask for the settings first.
+
+| Tool | What it does |
+|------|--------------|
+| `list_models` | Models with column types, enums and associations |
+| `list_tables` | Tables that already exist, with their settings (the house style) |
+| `describe_dsl` | Column options, types, filters, formatters and settings of the installed version |
+| `table_options` | Questions about a new table (columns, sort, per page, toolbar, selection, authorization...) with defaults proposed from the model |
+| `generate_table` | Renders the table with the `infotable:table` generator. Only shows the code; `write: true` saves it, an existing file is replaced only with `overwrite: true` |
+| `validate_table` | Loads a table by name or from source and reports missing columns, a bad `default_sort`, a failing query or a missing `authorize`; `preview: 5` returns the first rows |
+
+The full README is available to the assistant as the `infotable://readme` resource.
+
+Notes: the server boots your app (development environment unless `RAILS_ENV` is set) and reads the development database; it writes only to `app/infotable/`. Tables are generated without `authorize` unless you give one, and `validate_table` warns about that (see [Security](#security)).
+
 ## Examples
 
 ### Basic Table
@@ -1080,10 +1218,6 @@ end
 ## Roadmap
 
 - [ ] Server-side persistence of column settings
-- [ ] Table state in the URL
-- [ ] More formatters (link, avatar, percent)
-- [ ] `infotable:table` generator
-- [ ] Tailwind v3 support
 
 ---
 

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

@@ -976,7 +976,7 @@ export default class extends Controller {
         ghostClass: 'opacity-50',
         dragClass: 'shadow-lg',
         onEnd: (evt) => {
-          this.handleColumnReorder(tableName, list)
+          this.handleColumnReorder(tableName, list, evt.item)
         }
       })
 
@@ -988,27 +988,28 @@ export default class extends Controller {
     })
   }
 
-  // Handle column reorder after drag and drop
-  handleColumnReorder(tableName, list) {
-    // Get new order from DOM
-    const columnItems = list.querySelectorAll('.column-item')
-    const newOrder = Array.from(columnItems).map(item => item.dataset.columnName)
+  // Handle column reorder after drag and drop.
+  // Pins survive a reorder; only the dragged column can change: dropped among the left pins it pins
+  // left, among the right pins it pins right, anywhere else it is unpinned.
+  handleColumnReorder(tableName, list, dragged) {
+    const items = Array.from(list.querySelectorAll('.column-item'))
+    const pinnedData = this.getAllColumnsPinned(tableName)
 
-    // Unpin all columns when manually reordering
-    const pinnedKey = `infotable_column_pinned_${tableName}`
-    const unpinned = {}
-    columnItems.forEach(item => { unpinned[item.dataset.columnName] = null })
-    this.storeSet(pinnedKey, JSON.stringify(unpinned))
+    if (dragged) {
+      const at = items.indexOf(dragged)
+      const nextPin = pinnedData[items[at + 1]?.dataset.columnName]
+      const prevPin = pinnedData[items[at - 1]?.dataset.columnName]
+      const pinned = nextPin === 'left' ? 'left' : (prevPin === 'right' ? 'right' : null)
 
-    // Update pin button styling for all items
-    columnItems.forEach(item => {
-      this.updatePinButtons(item, null)
-    })
+      this.saveColumnPinned(tableName, dragged.dataset.columnName, pinned)
+      this.updatePinButtons(dragged, pinned)
+    }
 
-    // Save to localStorage
-    this.saveColumnOrder(tableName, newOrder)
+    // Keep the list as left pins, the rest, right pins (this also saves the order)
+    this.reorderColumnsWithPinning(tableName)
+    const newOrder = Array.from(list.querySelectorAll('.column-item')).map(item => item.dataset.columnName)
 
-    // Apply order to the table; nothing is pinned any more
+    // Apply order and pins to the table
     this.applyToTable(tableName, newOrder)
 
     // Dispatch event for export link update

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

@@ -1,5 +1,10 @@
 import { Controller } from "@hotwired/stimulus"
 
+// Innermost pinned column on each side: an inset 1px line. A border would stay behind when the
+// cell sticks (collapsed borders belong to the table), a box-shadow moves with the cell
+const LEFT_EDGE = 'inset -1px 0 0 0 rgba(128, 128, 128, 0.45)'
+const RIGHT_EDGE = 'inset 1px 0 0 0 rgba(128, 128, 128, 0.45)'
+
 // Main table controller that coordinates table interactions
 export default class extends Controller {
   static values = {
@@ -989,7 +994,7 @@ export default class extends Controller {
         return
       }
 
-      const headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
+      let headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
 
       // Columns the user never pinned/unpinned fall back to the table's `pinned:` default
       headers.forEach(header => {
@@ -1000,6 +1005,32 @@ export default class extends Controller {
       })
       const rows = table.querySelectorAll("tbody tr")
 
+      // Pinned columns jump to their edge, keeping their relative order, so they sit side by side
+      // with no gap; unpinning restores the base order (stored order, else the server's)
+      const names = headers.map(h => h.dataset.columnName)
+      headers.forEach((h, i) => { if (h.dataset.pinBase === undefined) h.dataset.pinBase = String(i) })
+      const storedOrder = this.loadColumnOrder(tableName)
+      const base = storedOrder && this.isSchemaValid(storedOrder, names)
+        ? storedOrder
+        : [...headers].sort((a, b) => a.dataset.pinBase - b.dataset.pinBase).map(h => h.dataset.columnName)
+      const leftNames = base.filter(n => pinnedData[n] === 'left')
+      const rightNames = base.filter(n => pinnedData[n] === 'right')
+      const pinOrder = [...leftNames, ...base.filter(n => !leftNames.includes(n) && !rightNames.includes(n)), ...rightNames]
+      // Re-appending a node drops its focus, so only touch rows that are out of order
+      const inOrder = els => els.every((el, i) => el.dataset.columnName === pinOrder[i])
+      const headerRow = headers[0]?.parentElement
+      if (headerRow && !inOrder(headers)) {
+        const byName = new Map(headers.map(h => [h.dataset.columnName, h]))
+        pinOrder.forEach(n => byName.has(n) && headerRow.appendChild(byName.get(n)))
+        headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
+      }
+      rows.forEach(row => {
+        const cells = Array.from(row.querySelectorAll("td[data-column-name]"))
+        if (inOrder(cells)) return
+        const cellByName = new Map(cells.map(c => [c.dataset.columnName, c]))
+        pinOrder.forEach(n => cellByName.has(n) && row.appendChild(cellByName.get(n)))
+      })
+
 
       // Calculate positions for pinned columns
       let leftOffset = 0
@@ -1023,7 +1054,7 @@ export default class extends Controller {
         header.style.backgroundClip = ''
         header.style.boxShadow = ''
         header.querySelectorAll('[data-pin-icon]').forEach(icon => icon.remove())
-        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]")
+        header.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800')
       })
 
       rows.forEach(row => {
@@ -1043,7 +1074,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', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!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]")
+          cell.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!bg-gray-800')
         })
       })
 
@@ -1062,8 +1093,10 @@ export default class extends Controller {
         }
       })
 
-      // Apply sticky positioning for pinned columns
-      headers.forEach(header => {
+      // Apply sticky positioning for pinned columns (right ones from the outer edge inwards)
+      const rightPinnedHeaders = headers.filter(h => pinnedData[h.dataset.columnName] === 'right')
+      const applyOrder = [...headers.filter(h => pinnedData[h.dataset.columnName] === 'left'), ...rightPinnedHeaders.reverse()]
+      applyOrder.forEach(header => {
         const columnName = header.dataset.columnName
         const pinned = pinnedData[columnName]
 
@@ -1079,7 +1112,7 @@ export default class extends Controller {
             z-index: 30 !important;
             opacity: 1 !important;
             background-clip: padding-box !important;
-            box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+            box-shadow: ${columnName === lastLeftPinned ? LEFT_EDGE : 'none'} !important;
             ${existingStyles}
           `.replace(/\s+/g, ' ').trim()
 
@@ -1088,10 +1121,6 @@ export default class extends Controller {
           header.classList.add('infotable-pinned-left', '!bg-gray-50', 'dark:!bg-gray-800')
           this.addPinIcon(header, 'left')
 
-          // Mark last left-pinned column
-          if (columnName === lastLeftPinned) {
-            header.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]")
-          }
 
           // Apply to cells in all rows
           rows.forEach(row => {
@@ -1107,16 +1136,13 @@ export default class extends Controller {
                 z-index: 15 !important;
                 opacity: 1 !important;
                 background-clip: padding-box !important;
-                box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+                box-shadow: ${columnName === lastLeftPinned ? LEFT_EDGE : 'none'} !important;
                 ${existingStyles}
               `.replace(/\s+/g, ' ').trim()
 
               cell.setAttribute('style', newStyles)
               cell.classList.add('infotable-pinned-left', '!bg-white', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!bg-gray-800')
 
-              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]")
-              }
             }
           })
 
@@ -1133,7 +1159,7 @@ export default class extends Controller {
             z-index: 30 !important;
             opacity: 1 !important;
             background-clip: padding-box !important;
-            box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+            box-shadow: ${columnName === firstRightPinned ? RIGHT_EDGE : 'none'} !important;
             ${existingStyles}
           `.replace(/\s+/g, ' ').trim()
 
@@ -1141,10 +1167,6 @@ export default class extends Controller {
           header.classList.add('infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800')
           this.addPinIcon(header, 'right')
 
-          // Mark first right-pinned column
-          if (columnName === firstRightPinned) {
-            header.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]")
-          }
 
           // Apply to cells in all rows
           rows.forEach(row => {
@@ -1160,16 +1182,13 @@ export default class extends Controller {
                 z-index: 15 !important;
                 opacity: 1 !important;
                 background-clip: padding-box !important;
-                box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1) !important;
+                box-shadow: ${columnName === firstRightPinned ? RIGHT_EDGE : 'none'} !important;
                 ${existingStyles}
               `.replace(/\s+/g, ' ').trim()
 
               cell.setAttribute('style', newStyles)
               cell.classList.add('infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', 'group-hover:!bg-gray-50', 'dark:group-hover:!bg-gray-800')
 
-              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

@@ -313,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

@@ -120,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
@@ -239,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/_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/_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/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) %>