infotable 1.2.0 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 171498a1e00eac672d386484ac90f7c98b51a7b05f627dd7da55c9ed6d384733
-  data.tar.gz: 3f6e330f094aec5c4d05ea11c46fe51cc0491bc6ebe80c88be42f0289c0f0716
+  metadata.gz: 61eaa702c985b223c91d6da00bf84515ba067ad2a7d8dd3b6fde0c5e9eac7603
+  data.tar.gz: edda1595d51b8ae913cecd87315a01ebf2f8788df68578ff3b45086b04c942d6
 SHA512:
-  metadata.gz: e5bc91b7d123b62cf9db4a4814a98b389ac12d3082a913da6f6d6593cf07f545e5ece6373d408407a3503fb1697d977a523b48cff194ae488bac8c76bb7e5322
-  data.tar.gz: 502b8de5cd278b4f5c3ebfb184984eabb82e1260fcb048c236fb0e799f9f41ea1bedede69cc811101a4626b39b915634603c96a2b61c983905f8747096bf1908
+  metadata.gz: 7e612ced33027a865095124cad1c1f2798abaab7238cb4c073da90625a7adbfa1068f5ca216e2e753766085ad5e43b6d1723255773ebc9e10dc3acfa63150634
+  data.tar.gz: 73c8657018df5e58536b75b27e5624ef4868c5a2fb29f72d87a7a258a8cb813c51184188d1b2b6bc9de576cf94605eab850cee545bf76e71eaf53198b0fe2a32

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
@@ -402,6 +417,11 @@ checkbox_column
 # Override global height settings for this table
 table_min_height "500px"
 table_max_height "700px"
+
+# Or size the table to the window: it grows until its bottom (with the pagination) sits
+# 16px above the bottom of the viewport, and follows window resizes. table_min_height is the floor.
+table_height :fill
+table_height :fill, offset: 32   # keep 32px free below
 ```
 
 #### Infinite Scroll

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

@@ -4,7 +4,7 @@ import Sortable from "sortablejs"
 // Drawer controller for the filter drawer and column visibility
 // Handles opening/closing the right-side drawer with smooth animations
 export default class extends Controller {
-  static targets = ["drawer", "content", "tabButton", "tabContent", "panelTitle", "columnBadge", "columnList"]
+  static targets = ["rail", "drawer", "content", "tabButton", "tabContent", "panelTitle", "columnBadge", "columnList"]
   static values = {
     open: { type: Boolean, default: false },
     currentTab: { type: String, default: "filters" }
@@ -146,12 +146,40 @@ export default class extends Controller {
 
 
 
+  // Rail buttons: open the tab, or collapse the drawer when that tab is already showing
+  toggleFilters(event) {
+    this.toggleTab(event, "filters")
+  }
+
+  toggleColumns(event) {
+    this.toggleTab(event, "columns")
+  }
+
+  // Click on the rail itself (outside its buttons): toggle the drawer on its default tab
+  toggleRail(event) {
+    if (event.target.closest("button, a")) return
+
+    const hasFiltersTab = this.tabContentTargets.some(content => content.dataset.tab === "filters")
+    this.toggleTab(event, hasFiltersTab ? "filters" : "columns")
+  }
+
+  toggleTab(event, tab) {
+    event?.preventDefault()
+    if (this.openValue && this.currentTabValue === tab) {
+      this.openValue = false
+    } else {
+      this.currentTabValue = tab
+      this.openValue = true
+    }
+  }
+
   showDrawer() {
     // Slide in drawer from its side using inline transform
     this.previouslyFocused = document.activeElement
     this.drawerTarget.inert = false
     this.drawerTarget.removeAttribute("aria-hidden")
     this.drawerTarget.style.transform = "translateX(0)"
+    this.shiftRail(true)
     this.drawerTarget.querySelector("input:not([type=hidden]), select, button")?.focus({ preventScroll: true })
   }
 
@@ -163,6 +191,15 @@ export default class extends Controller {
 
     // Slide out drawer to its side (data-drawer-side) using inline transform
     this.drawerTarget.style.transform = this.drawerTarget.dataset.drawerSide === "left" ? "translateX(-100%)" : "translateX(100%)"
+    this.shiftRail(false)
+  }
+
+  // `toolbar :rail`: the rail slides left so it stays visible next to a right-hand drawer
+  shiftRail(open) {
+    if (!this.hasRailTarget || this.drawerTarget.dataset.drawerSide === "left") return
+
+    this.railTarget.style.transform = open ? `translateX(-${this.drawerTarget.offsetWidth}px)` : ""
+    this.railTarget.classList.toggle("shadow-lg", open)
   }
 
   closeOnEscape(event) {
@@ -187,6 +224,11 @@ export default class extends Controller {
       return
     }
 
+    // The rail's buttons toggle the drawer themselves
+    if (this.hasRailTarget && this.railTarget.contains(event.target)) {
+      return
+    }
+
     // Don't close if clicking on buttons that open the drawer
     const clickedElement = event.target.closest('button[data-action*="infotable--drawer#open"]')
     if (clickedElement) {

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()
 
@@ -33,6 +37,11 @@ export default class extends Controller {
     // Fill the search box and the filter drawer from the page URL (the server already loaded the frame with it)
     if (this.urlStateValue) this.applyUrlStateToControls()
 
+    // `table_height :fill`: size the rows area to the window, now and on resize
+    this.boundFitHeight = this.fitHeight.bind(this)
+    window.addEventListener("resize", this.boundFitHeight)
+    this.fitHeight()
+
     // Listen for turbo frame loads to reapply order and visibility
     this.boundApplyOrderAndVisibility = this.applyOrderAndVisibility.bind(this)
     this.element.addEventListener("turbo:frame-load", this.boundApplyOrderAndVisibility)
@@ -47,13 +56,35 @@ export default class extends Controller {
     this.element.removeEventListener("turbo:frame-load", this.boundApplyOrderAndVisibility)
     document.removeEventListener("infotable:columns-changed", this.boundUpdateExportLink)
     document.removeEventListener("infotable:filters-changed", this.boundUpdateExportLink)
+    window.removeEventListener("resize", this.boundFitHeight)
+    cancelAnimationFrame(this.fitFrame)
     clearTimeout(this.searchTimeout)
   }
 
+  // Cap the rows area (`[data-fill-height]`) so that it, plus whatever follows it in the frame
+  // (pagination), ends `data-fill-offset` px above the bottom of the window. Measured from the
+  // top of the page, so it does not depend on the current scroll position. min-height still wins.
+  fitHeight() {
+    cancelAnimationFrame(this.fitFrame)
+    this.fitFrame = requestAnimationFrame(() => {
+      this.element.querySelectorAll("[data-fill-height]").forEach(area => {
+        let below = 0
+        for (let sibling = area.nextElementSibling; sibling; sibling = sibling.nextElementSibling) {
+          below += sibling.offsetHeight
+        }
+
+        const top = area.getBoundingClientRect().top + window.scrollY
+        const offset = parseInt(area.dataset.fillOffset, 10) || 0
+        area.style.maxHeight = `${Math.max(window.innerHeight - top - below - offset, 0)}px`
+      })
+    })
+  }
+
   // Apply both order and visibility (used for turbo frame loads)
   applyOrderAndVisibility() {
     this.applyColumnOrder()
     this.applyColumnVisibility()
+    this.applyColumnWidths()
     this.applyColumnPinning()
   }
 
@@ -68,6 +99,7 @@ export default class extends Controller {
 
   // Handle turbo frame load
   handleFrameLoad(event) {
+    this.fitHeight()
     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)
@@ -780,6 +812,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/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 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",
+        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",
         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/_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/_filter_drawer.html.erb

@@ -6,7 +6,7 @@
     end %>
 <div class="flex flex-col h-full">
   <%# Drawer Content - Scrollable %>
-  <div class="flex-1 overflow-y-auto px-4 py-4">
+  <div class="flex-1 overflow-y-auto px-4 py-4 bg-gray-50 dark:bg-gray-950">
     <form id="filter-form-<%= table_name %>"
           action="<%= infotable_table_data_path(table_name: table_name) %>"
           method="get"
@@ -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-lg border border-gray-100 dark:border-gray-800 hover:border-indigo-200 dark:hover:border-indigo-700 transition-all duration-150">
-          <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">
+        <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">
             <%= column[:label] %>
           </label>
 

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

@@ -2,10 +2,10 @@
 <% button = "relative flex items-center justify-center w-10 h-10 rounded-lg text-gray-500 dark:text-gray-400 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-950 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors" %>
 <% icon = "w-5 h-5" %>
 <% filter_count = initial_state[:filters].respond_to?(:keys) ? initial_state[:filters].keys.size : 0 %>
-<aside class="flex flex-col items-center shrink-0 w-14 py-3 gap-1 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" aria-label="<%= t('infotable.drawer.label') %>">
+<aside data-infotable--drawer-target="rail" data-action="click->infotable--drawer#toggleRail" class="cursor-pointer relative z-40 flex flex-col items-center shrink-0 w-14 py-3 gap-1 transition-all duration-300 ease-in-out border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900" aria-label="<%= t('infotable.drawer.label') %>">
   <% if table_class.filterable_columns.any? && table_class.filters_button_visible? %>
     <button type="button"
-            data-action="click->infotable--drawer#openFilters"
+            data-action="click->infotable--drawer#toggleFilters"
             title="<%= t('infotable.table.buttons.filters') %>"
             aria-label="<%= t('infotable.table.buttons.filters') %>"
             class="<%= button %>">
@@ -18,7 +18,7 @@
   <% end %>
 
   <button type="button"
-          data-action="click->infotable--drawer#openColumns"
+          data-action="click->infotable--drawer#toggleColumns"
           title="<%= t('infotable.table.buttons.columns') %>"
           aria-label="<%= t('infotable.table.buttons.columns') %>"
           class="<%= button %>">

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

@@ -4,6 +4,7 @@
   <% active_filters = infotable_active_filters(@table_class, @filters, @search) %>
   <%= render "infotable/tables/active_filters", chips: active_filters, table_name: params[:table_name] %>
   <div<% if @pagy && !@table_class.countless? %> data-total-count="<%= @pagy.count %>"<% end %> class="relative overflow-y-auto overflow-x-auto scroll-smooth [scrollbar-width:thin] [scrollbar-color:#cbd5e1_#f1f5f9] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-track]:bg-slate-100 [&::-webkit-scrollbar-thumb]:bg-slate-300 [&::-webkit-scrollbar-thumb]:rounded [&::-webkit-scrollbar-thumb:hover]:bg-slate-400 dark:[scrollbar-color:#475569_#1e293b] dark:[&::-webkit-scrollbar-track]:bg-slate-800 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600"
+       <% if @table_class.fill_height? %>data-fill-height data-fill-offset="<%= @table_class.fill_offset %>"<% end %>
        style="min-height: <%= @table_class.min_height %>; max-height: <%= @table_class.max_height %>;">
 
     <% if @records.any? %>
@@ -114,7 +115,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
@@ -13,7 +13,8 @@ module Infotable
         subclass.sort_settings = {}
         subclass.height_settings = {
           min_height: nil, # nil means use global config
-          max_height: nil  # nil means use global config
+          max_height: nil, # nil means use global config
+          fill_offset: nil # Integer when the table fills the viewport (table_height :fill)
         }
         subclass.infinite_scroll_settings = {
           enabled: false
@@ -45,6 +46,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 +64,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 +91,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
@@ -244,6 +258,30 @@ module Infotable
         @height_settings[:max_height] = value
       end
 
+      # Size the table to the viewport: the rows area grows until the bottom of the table (and its
+      # pagination) sits `offset` pixels above the bottom of the window, and follows window resizes.
+      # table_min_height still applies as a floor. :fixed (default) uses table_max_height.
+      # @example
+      #   table_height :fill
+      #   table_height :fill, offset: 32
+      def table_height(mode, offset: 16)
+        unless [ :fill, :fixed ].include?(mode)
+          raise ArgumentError, "Invalid table height: #{mode}. Must be one of fill, fixed"
+        end
+        raise ArgumentError, "offset must be a non-negative Integer" unless offset.is_a?(Integer) && offset >= 0
+
+        @height_settings[:fill_offset] = mode == :fill ? offset : nil
+      end
+
+      # Pixels to keep free below the table when it fills the viewport, nil for a fixed height
+      def fill_offset
+        @height_settings[:fill_offset]
+      end
+
+      def fill_height?
+        !fill_offset.nil?
+      end
+
       # Enable/disable infinite scroll
       def infinite_scroll(enabled)
         @infinite_scroll_settings[:enabled] = enabled

data/lib/infotable/version.rb

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

metadata

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