infotable 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 171498a1e00eac672d386484ac90f7c98b51a7b05f627dd7da55c9ed6d384733
-  data.tar.gz: 3f6e330f094aec5c4d05ea11c46fe51cc0491bc6ebe80c88be42f0289c0f0716
+  metadata.gz: f5df1bcdf9da714e75a1f5b2f39681f69de99243954eefa1a936e1895d93370b
+  data.tar.gz: 8e0d96b405da00978ceaa3090a30dd310a1d6edc5ae1591ac50e96bede219bd7
 SHA512:
-  metadata.gz: e5bc91b7d123b62cf9db4a4814a98b389ac12d3082a913da6f6d6593cf07f545e5ece6373d408407a3503fb1697d977a523b48cff194ae488bac8c76bb7e5322
-  data.tar.gz: 502b8de5cd278b4f5c3ebfb184984eabb82e1260fcb048c236fb0e799f9f41ea1bedede69cc811101a4626b39b915634603c96a2b61c983905f8747096bf1908
+  metadata.gz: ca2f4b93b865921e6d8b8d62d8fabd3d935cd6db93600e3ecd2934df6d58e17930cb22bbf1f4bddeaa78c28dbedba7a3e6a4ff205320f144488dcffd432c950a
+  data.tar.gz: 2d86610f937536dca157b8d99ee9265f77e652ea0772ef3c96fc0306dd7a3f3b3d2712bd8524b427e548f600b63f5694efbc636f818ba1afd4e737b54cc34332

data/README.md

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

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

@@ -5,6 +5,7 @@ export default class extends Controller {
   static values = {
     name: String,
     urlState: Boolean,
+    resizable: { type: Boolean, default: true },
     idsUrl: String
   }
 
@@ -24,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()
 
@@ -54,6 +58,7 @@ export default class extends Controller {
   applyOrderAndVisibility() {
     this.applyColumnOrder()
     this.applyColumnVisibility()
+    this.applyColumnWidths()
     this.applyColumnPinning()
   }
 
@@ -780,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

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

@@ -1,6 +1,6 @@
 <%# 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-6 py-2" data-active-filters>
+  <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]}" %>

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

@@ -34,20 +34,20 @@
   export_params[:search] = initial_state[:search] if initial_state[:search].present?
   export_url = Infotable::Engine.routes.url_helpers.table_export_path(export_params.compact)
 %>
-<div class="w-full relative overflow-hidden dark:[color-scheme:dark]" data-controller="infotable--table infotable--drawer" data-infotable--table-name-value="<%= table_name %>" data-infotable--table-url-state-value="<%= table_class.url_state? %>"<% if table_class.checkbox_enabled? %> data-infotable--table-ids-url-value="<%= Infotable::Engine.routes.url_helpers.table_ids_path(table_name: table_name) %>"<% end %>>
+<div class="w-full relative overflow-hidden dark:[color-scheme:dark]" data-controller="infotable--table infotable--drawer" data-infotable--table-name-value="<%= table_name %>" data-infotable--table-url-state-value="<%= table_class.url_state? %>" data-infotable--table-resizable-value="<%= table_class.resizable_columns? %>" data-resize-label="<%= t('infotable.table.resize_column') %>"<% if table_class.checkbox_enabled? %> data-infotable--table-ids-url-value="<%= Infotable::Engine.routes.url_helpers.table_ids_path(table_name: table_name) %>"<% end %>>
   <div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 relative<%= " flex" if rail %>" style="overflow: hidden;">
    <div class="<%= rail ? "flex-1 min-w-0" : "w-full" %>">
     <%# Header section with controls (hidden with `toolbar :rail`) %>
     <% unless rail %>
-    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
-      <div class="flex justify-between items-center">
+    <div class="px-4 sm:px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
+      <div class="flex flex-col gap-3 sm:flex-row sm:justify-between sm:items-center">
         <div>
           <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100"><%= title %></h2>
           <% if subtitle.present? %>
             <p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= subtitle %></p>
           <% end %>
         </div>
-        <div class="flex gap-3">
+        <div class="flex flex-wrap items-center gap-3">
           <%# Global search over `searchable: true` columns %>
           <% if table_class.searchable_columns.any? %>
             <input type="search"
@@ -56,7 +56,7 @@
                    placeholder="<%= t('infotable.search.placeholder') %>"
                    aria-label="<%= t('infotable.search.label') %>"
                    data-action="input->infotable--table#search"
-                   class="w-56 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                   class="w-full sm:w-56 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
           <% end %>
           <%# Export CSV button %>
           <a href="<%= export_url %>"
@@ -89,7 +89,7 @@
 
     <%# Batch action bar: shown while rows are selected %>
     <% if table_class.batch_action_list.any? %>
-      <div class="hidden items-center justify-between gap-3 px-6 py-3 border-b border-indigo-100 dark:border-indigo-900 bg-indigo-50 dark:bg-indigo-950"
+      <div class="hidden flex-wrap items-center justify-between gap-3 px-4 sm:px-6 py-3 border-b border-indigo-100 dark:border-indigo-900 bg-indigo-50 dark:bg-indigo-950"
            data-infotable--table-target="batchBar">
         <div class="flex items-center gap-3 text-sm text-indigo-900 dark:text-indigo-100">
           <span data-infotable--table-target="batchCount"

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

@@ -114,7 +114,7 @@
 
   <%# Pagination - Only visible when infinite scroll is disabled %>
   <% unless @infinite_scroll_enabled %>
-    <div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-6 py-4">
+    <div class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 px-4 sm:px-6 py-4">
       <%= render "infotable/tables/pagination", pagy: @pagy, table_name: params[:table_name] %>
     </div>
   <% end %>

data/config/locales/en.yml

@@ -12,6 +12,7 @@ en:
         initial: "Loading data..."
         more_items: "Loading more items..."
         all_loaded: "All items loaded"
+      resize_column: "resize column"
       empty_state:
         title: "No data found"
         description: "Get started by adding some records to see them here."

data/config/locales/pl.yml

@@ -12,6 +12,7 @@ pl:
         initial: "Ładowanie danych..."
         more_items: "Ładowanie kolejnych elementów..."
         all_loaded: "Wszystkie elementy załadowane"
+      resize_column: "zmień szerokość kolumny"
       empty_state:
         title: "Nie znaleziono danych"
         description: "Rozpocznij od dodania rekordów, aby zobaczyć je tutaj."

data/lib/infotable/base.rb

@@ -1,7 +1,7 @@
 module Infotable
   class Base
     class << self
-      attr_accessor :table_columns, :table_query, :table_query_sql, :pagination_settings, :sort_settings, :height_settings, :infinite_scroll_settings, :row_link_settings, :slim_rows_settings, :row_size_settings, :filters_button_settings, :display_settings, :nil_value_settings, :empty_value_settings, :table_authorize, :checkbox_settings, :batch_action_list, :countless_setting, :url_state_setting
+      attr_accessor :table_columns, :table_query, :table_query_sql, :pagination_settings, :sort_settings, :height_settings, :infinite_scroll_settings, :row_link_settings, :slim_rows_settings, :row_size_settings, :filters_button_settings, :display_settings, :nil_value_settings, :empty_value_settings, :table_authorize, :checkbox_settings, :batch_action_list, :countless_setting, :url_state_setting, :resizable_columns_setting
 
       def inherited(subclass)
         super
@@ -45,6 +45,7 @@ module Infotable
         subclass.batch_action_list = []
         subclass.countless_setting = false
         subclass.url_state_setting = nil
+        subclass.resizable_columns_setting = nil
 
         inherit_from_parent(subclass)
       end
@@ -62,6 +63,7 @@ module Infotable
         subclass.batch_action_list = parent.batch_action_list.map(&:dup)
         subclass.countless_setting = parent.countless_setting
         subclass.url_state_setting = parent.url_state_setting
+        subclass.resizable_columns_setting = parent.resizable_columns_setting
         %i[pagination_settings sort_settings height_settings infinite_scroll_settings row_link_settings
            slim_rows_settings row_size_settings filters_button_settings display_settings
            nil_value_settings empty_value_settings].each do |attr|
@@ -88,6 +90,17 @@ module Infotable
         @url_state_setting = enabled
       end
 
+      # Drag handles on the column headers (and arrow keys on the focused handle) to change
+      # column widths; widths are remembered per browser. Double-click resets one column.
+      #   resizable_columns false
+      def resizable_columns(enabled = true)
+        @resizable_columns_setting = enabled
+      end
+
+      def resizable_columns?
+        @resizable_columns_setting.nil? ? true : @resizable_columns_setting ? true : false
+      end
+
       def url_state?
         @url_state_setting.nil? ? Infotable.configuration.url_state : @url_state_setting ? true : false
       end

data/lib/infotable/version.rb

@@ -1,3 +1,3 @@
 module Infotable
-  VERSION = "1.2.0"
+  VERSION = "1.3.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: infotable
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Jakub Cieślar