infotable 1.3.0 → 1.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f5df1bcdf9da714e75a1f5b2f39681f69de99243954eefa1a936e1895d93370b
-  data.tar.gz: 8e0d96b405da00978ceaa3090a30dd310a1d6edc5ae1591ac50e96bede219bd7
+  metadata.gz: f00cd7591b4bc03f8f7443771dc1be2abc2e022602a2a2b14a61090d6eea76aa
+  data.tar.gz: 1c48ace8adb272674a1b0138b7aa1744dfe5154695b87ea5e1773cc918d912fc
 SHA512:
-  metadata.gz: ca2f4b93b865921e6d8b8d62d8fabd3d935cd6db93600e3ecd2934df6d58e17930cb22bbf1f4bddeaa78c28dbedba7a3e6a4ff205320f144488dcffd432c950a
-  data.tar.gz: 2d86610f937536dca157b8d99ee9265f77e652ea0772ef3c96fc0306dd7a3f3b3d2712bd8524b427e548f600b63f5694efbc636f818ba1afd4e737b54cc34332
+  metadata.gz: 9ed45ecaf4c41b844dd6a7df34e35bcecefe593fa146fbe352ec9c6e4b20501f7661464a383f6a6ae386190e13d6a4cb395765c6ea4450f1d2637f442256c148
+  data.tar.gz: 79fae3ddc36f3c98c826eb18fcb9856f810e5d8fd2681eb9244ba3577efa7a397b384eb8bb170c791cd1668c5c5f5e444f546553d55cffb0cd099813555366bd

data/README.md

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

@@ -37,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)
@@ -51,9 +56,30 @@ 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()
@@ -73,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)
@@ -821,11 +848,20 @@ export default class extends Controller {
     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
+      // Remember how the server rendered the cell (action columns have width/min-width but no max-width)
+      if (cell.dataset.defaultWidth === undefined) {
+        cell.dataset.defaultWidth = cell.style.width
+        cell.dataset.defaultMaxWidth = cell.style.maxWidth
+        cell.dataset.defaultMinWidth = cell.style.minWidth
+      }
+
+      if (width === null) {
+        cell.style.width = cell.dataset.defaultWidth
+        cell.style.maxWidth = cell.dataset.defaultMaxWidth
+        cell.style.minWidth = cell.dataset.defaultMinWidth
+      } else {
+        cell.style.width = cell.style.maxWidth = cell.style.minWidth = `${width}px`
+      }
     })
   }
 

data/app/helpers/infotable/tables_helper.rb

@@ -28,6 +28,17 @@ module Infotable
       render partial: "infotable/tables/table", locals: locals
     end
 
+    # Inline width style for a header/body cell. Data columns are clipped to their width (ellipsis);
+    # action columns hold buttons, so their width is only a minimum and the column grows to fit all
+    # of them (a clipped "Delete" button is worse than a wider column).
+    def infotable_cell_width_style(column, ellipsis: false)
+      if %w[action actions].include?(column[:type].to_s)
+        "width: 1%; min-width: #{column[:width]}; white-space: nowrap;"
+      else
+        "width: #{column[:width]}; max-width: #{column[:width]}; overflow: hidden;#{' text-overflow: ellipsis;' if ellipsis}"
+      end
+    end
+
     # Format cell value based on column definition
     def format_cell_value(record, column, table_class = nil)
       value = (table_class || Infotable::Base).cell_value(record, column)
@@ -258,7 +269,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/_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_rows.html.erb

@@ -29,7 +29,7 @@
     <% table_class.columns.each do |column| %>
       <td data-column-name="<%= column[:name] %>"
           data-default-visible="<%= column[:visible] %>"
-          style="width: <%= column[:width] %>; max-width: <%= column[:width] %>; overflow: hidden; text-overflow: ellipsis;"
+          style="<%= infotable_cell_width_style(column, ellipsis: true) %>"
           class="<%= cell_padding %> whitespace-nowrap <%= text_size %> text-gray-700 dark:text-gray-300">
         <%= format_cell_value(record, column, table_class) %>
       </td>

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? %>
@@ -33,7 +34,7 @@
                     data-column-name="<%= column[:name] %>"
                     data-default-visible="<%= column[:visible] %>"
                     <%= tag.attributes(data: { default_pinned: column[:pinned] }) if column[:pinned] %>
-                    style="width: <%= column[:width] %>; max-width: <%= column[:width] %>; overflow: hidden;"
+                    style="<%= infotable_cell_width_style(column) %>"
                     class="<%= header_padding %> text-left text-xs font-semibold text-gray-900 dark:text-gray-100 tracking-wider select-none bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
                   <% if column[:sortable] %>
                     <% sort_index = current_sorts.index { |name, _| name == column[:name].to_s } %>

data/lib/infotable/base.rb

@@ -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
@@ -257,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.3.0"
+  VERSION = "1.4.1"
 end

metadata

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