infotable 1.4.1 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f00cd7591b4bc03f8f7443771dc1be2abc2e022602a2a2b14a61090d6eea76aa
-  data.tar.gz: 1c48ace8adb272674a1b0138b7aa1744dfe5154695b87ea5e1773cc918d912fc
+  metadata.gz: a1a84d197b721ed57ad46be7d91a870d0f7d0d3c6a7bc471e4e1c306aefa9e1f
+  data.tar.gz: 19c3fd871c6e5bee6908266fe877774786b8b2e7d7fa289117b05e65684016e2
 SHA512:
-  metadata.gz: 9ed45ecaf4c41b844dd6a7df34e35bcecefe593fa146fbe352ec9c6e4b20501f7661464a383f6a6ae386190e13d6a4cb395765c6ea4450f1d2637f442256c148
-  data.tar.gz: 79fae3ddc36f3c98c826eb18fcb9856f810e5d8fd2681eb9244ba3577efa7a397b384eb8bb170c791cd1668c5c5f5e444f546553d55cffb0cd099813555366bd
+  metadata.gz: b8bcbd636497943daa6fb58cec7a8550f4258c14a7a65a771d10c1f4e2776bed51fe6b8ad2137126131b353fedd91076e6d017697b0f405b3694d257bd436098
+  data.tar.gz: c6a4f20ebe7642c1d8d686be6e8fee8226f1076ee93b2daa5de79f0b7a630f17d264eb64cc067d164fb1de5033f1c08c059ca1e46a7b9d5b7666298f7d5b5a47

data/README.md

@@ -129,6 +129,15 @@ Infotable.configure do |config|
 end
 ```
 
+### Security
+
+Tables are served by the engine at `/infotable/tables/:name/{data,export,ids}`. A table without an
+`authorize { |controller| ... }` block is readable (and exportable as CSV) by **everyone who can reach the
+route**, unless the engine controllers inherit your app's authentication. The installer therefore sets
+`config.parent_controller = "ApplicationController"`; keep it (or point it at a controller with your
+`before_action :authenticate_user!`) and add `authorize` to tables with restricted data. The engine's own
+default (`ActionController::Base`) applies no authentication at all.
+
 ### Available Global Options
 
 | Option | Type | Default | Description |
@@ -137,7 +146,8 @@ end
 | `per_page_options` | Array | `[10, 25, 50, 100]` | Available rows per page options |
 | `drawer_position` | Symbol | `:right` | Position of filter/column drawer (`:left` or `:right`) |
 | `drawer_width` | String | `"26rem"` | Width of the drawer (`px`, `rem`, `em`, `vw` or `%`; anything else falls back to the default) |
-| `parent_controller` | String | `"ActionController::Base"` | Controller the engine's controllers inherit from. Set it to `"ApplicationController"` to reuse your authentication |
+| `parent_controller` | String | `"ActionController::Base"` (the installer sets `"ApplicationController"`) | Controller the engine's controllers inherit from. Set it to `"ApplicationController"` to reuse your authentication |
+| `max_select_all` | Integer, nil | `4000` | "Select all N matching" collects at most this many ids (each is sent as `ids[]`; Rack accepts 4096 parameters per request) |
 | `table_min_height` | String | `"400px"` | Minimum table height |
 | `table_max_height` | String | `"600px"` | Maximum table height (enables scrolling) |
 | `autofilter` | Boolean | `true` | Auto-apply filters on change (debounced) vs manual apply |
@@ -448,6 +458,30 @@ Features:
 - Cmd/Ctrl+Click to open in new tab
 - Ignores clicks on buttons, links, and inputs
 
+#### Row click, classes and data attributes
+
+```ruby
+# Style rows by their data (write the Tailwind classes out in full so they are generated)
+row_class ->(order) { "bg-red-50" if order.overdue? }
+
+# data-* attributes on the <tr>, e.g. for your own Stimulus controller
+row_data ->(post) { { post_id: post.id, status: post.status } }   # data-post-id, data-status
+
+# Rows fire a cancelable `infotable:row-click` event (needs no row_link)
+row_click
+```
+
+Every row also gets `id="<dom_id>"` (`order_42`), so Turbo Streams can target it (`turbo_stream.replace dom_id(order)`, `broadcasts_to`). Rows without a record id are left without one.
+
+Clicking a row (not a link, button or input inside it) first dispatches `infotable:row-click` on the `<tr>`, with `detail: { id, url, data, originalEvent }`. If nothing calls `preventDefault()` and the table has a `row_link`, the click then falls back to following it, so the two compose:
+
+```js
+document.addEventListener("infotable:row-click", event => {
+  if (event.detail.data.status === "locked") event.preventDefault()   // no navigation for locked rows
+  else openPreview(event.detail.data.postId)                          // ...or handle it yourself
+})
+```
+
 #### Row Size
 
 Control table row padding and text size with three options:

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

@@ -267,7 +267,7 @@ export default class extends Controller {
     // Keep search and sort from the current frame URL
     if (tableFrame?.src) {
       const current = new URL(tableFrame.src, window.location.href).searchParams
-      for (const key of ["search", "sort", "sort_column", "sort_direction"]) {
+      for (const key of ["search", "per_page", "sort", "sort_column", "sort_direction"]) {
         if (current.has(key) && !params.has(key)) params.set(key, current.get(key))
       }
     }
@@ -568,7 +568,7 @@ export default class extends Controller {
     this.saveColumnVisibility(tableName, columnName, isVisible)
 
     // Apply visibility to table
-    this.applyColumnVisibility(tableName)
+    this.applyToTable(tableName)
     
     // Update badge
     this.updateColumnBadge(tableName)
@@ -591,7 +591,7 @@ export default class extends Controller {
         const columnName = checkbox.dataset.columnName
         this.saveColumnVisibility(tableName, columnName, true)
       })
-      this.applyColumnVisibility(tableName)
+      this.applyToTable(tableName)
       this.updateColumnBadge(tableName)
       
       // Dispatch event to update export link
@@ -613,7 +613,7 @@ export default class extends Controller {
         const columnName = checkbox.dataset.columnName
         this.saveColumnVisibility(tableName, columnName, false)
       })
-      this.applyColumnVisibility(tableName)
+      this.applyToTable(tableName)
       this.updateColumnBadge(tableName)
       
       // Dispatch event to update export link
@@ -638,7 +638,7 @@ export default class extends Controller {
     }
 
     visibility[columnName] = isVisible
-    localStorage.setItem(key, JSON.stringify(visibility))
+    this.storeSet(key, JSON.stringify(visibility))
   }
 
   // Sync checkboxes with localStorage values or defaults
@@ -722,67 +722,12 @@ export default class extends Controller {
     }
   }
 
-  // Apply column visibility to the table
-  applyColumnVisibility(tableName) {
-    const tableWrapper = document.querySelector(`[data-infotable--table-name-value="${tableName}"]`)
-    if (!tableWrapper) {
-      console.warn(`Table wrapper not found for: ${tableName}`)
-      return
-    }
-
-    // Try to find table in the wrapper or in turbo-frame
-    let table = tableWrapper.querySelector("table")
-    if (!table) {
-      // Table might be inside turbo-frame
-      const turboFrame = document.getElementById(`${tableName}_content`)
-      if (turboFrame) {
-        table = turboFrame.querySelector("table")
-      }
-    }
-    
-    if (!table) {
-      console.warn(`Table not found for: ${tableName}`)
-      return
-    }
-
-    // Find all table headers and cells
-    const headers = table.querySelectorAll("thead th[data-column-name]")
-    const rows = table.querySelectorAll("tbody tr")
-    
-    if (headers.length === 0) {
-      console.warn(`No column headers found for table: ${tableName}`)
-      return
-    }
-    
-    // Get saved preferences from localStorage
-    const visibility = this.getColumnVisibility(tableName)
-
-    headers.forEach((header) => {
-      const columnName = header.dataset.columnName
-      const defaultVisible = header.dataset.defaultVisible === "true"
-      
-      // Determine if column should be visible
-      let shouldShow
-      if (visibility && visibility.hasOwnProperty(columnName)) {
-        // Use saved preference
-        shouldShow = visibility[columnName]
-      } else {
-        // Use default visibility
-        shouldShow = defaultVisible
-      }
-      
-      // Apply visibility
-      header.style.display = shouldShow ? "" : "none"
-      
-      // Hide/show corresponding cells in all rows
-      rows.forEach(row => {
-        const cells = row.querySelectorAll("td[data-column-name]")
-        const cell = Array.from(cells).find(c => c.dataset.columnName === columnName)
-        if (cell) {
-          cell.style.display = shouldShow ? "" : "none"
-        }
-      })
-    })
+  // The table controller applies order, visibility and pinning (it owns the table DOM); an explicit
+  // `order` replaces the stored one (used right after a drag, a pin or a reset)
+  applyToTable(tableName, order = null) {
+    document.dispatchEvent(new CustomEvent("infotable:apply-columns", {
+      detail: { tableName, order }
+    }))
   }
 
   // Update column badge count for a specific table
@@ -876,13 +821,10 @@ export default class extends Controller {
       const columnItems = list.querySelectorAll('.column-item')
       const newOrder = Array.from(columnItems).map(item => item.dataset.columnName)
 
-      // Apply the new order to the table (reorders DOM)
-      this.applyColumnOrder(tableName, newOrder)
+      // Order and sticky positioning, applied to the table immediately
+      this.applyToTable(tableName, newOrder)
     }
 
-    // Apply sticky positioning to table immediately
-    this.applyColumnPinningToTable(tableName)
-
     // Dispatch event for export link update
     document.dispatchEvent(new CustomEvent("infotable:columns-changed", {
       detail: { tableName }
@@ -903,40 +845,53 @@ export default class extends Controller {
       console.warn("Failed to parse column pinned from localStorage", e)
     }
 
-    if (pinned) {
-      pinnedData[columnName] = pinned
-    } else {
-      delete pinnedData[columnName]
-    }
+    // An unpin is stored as null (not removed): a column pinned by default must stay unpinned
+    pinnedData[columnName] = pinned || null
 
-    localStorage.setItem(key, JSON.stringify(pinnedData))
+    this.storeSet(key, JSON.stringify(pinnedData))
   }
 
-  // Get pinned state from localStorage
-  getColumnPinned(tableName, columnName) {
-    const key = `infotable_column_pinned_${tableName}`
+  // localStorage is missing or full in some browsers (private mode): the drawer then works for this page only
+  storeSet(key, value) {
     try {
-      const stored = localStorage.getItem(key)
-      if (stored) {
-        const pinnedData = JSON.parse(stored)
-        return pinnedData[columnName] || null
-      }
+      localStorage.setItem(key, value)
     } catch (e) {
-      console.warn("Failed to parse column pinned from localStorage", e)
+      console.warn("Failed to write to localStorage", e)
+    }
+  }
+
+  storeRemove(key) {
+    try {
+      localStorage.removeItem(key)
+    } catch (e) {
+      console.warn("Failed to write to localStorage", e)
     }
-    return null
   }
 
-  // Get all pinned columns
+  // Get pinned state from localStorage
+  getColumnPinned(tableName, columnName) {
+    return this.getAllColumnsPinned(tableName)[columnName] || null
+  }
+
+  // Pinned columns: what the user chose (localStorage) over the table's `pinned:` defaults.
+  // A column the user unpinned is stored as null and stays unpinned.
   getAllColumnsPinned(tableName) {
     const key = `infotable_column_pinned_${tableName}`
+    let stored = {}
     try {
-      const stored = localStorage.getItem(key)
-      return stored ? JSON.parse(stored) : {}
+      const raw = localStorage.getItem(key)
+      if (raw) stored = JSON.parse(raw)
     } catch (e) {
       console.warn("Failed to parse column pinned from localStorage", e)
-      return {}
     }
+
+    const pinned = {}
+    const form = document.getElementById(`column-visibility-form-${tableName}`)
+    form?.querySelectorAll('.column-item').forEach(item => {
+      const defaultPinned = item.dataset.defaultPinned
+      if (defaultPinned) pinned[item.dataset.columnName] = defaultPinned
+    })
+    return { ...pinned, ...stored }
   }
 
   // Update pin button styling
@@ -1001,202 +956,6 @@ export default class extends Controller {
     this.saveColumnOrder(tableName, newOrder)
   }
 
-  // Apply pinning to table (add sticky positioning)
-  applyColumnPinningToTable(tableName) {
-    const tableWrapper = document.querySelector(`[data-infotable--table-name-value="${tableName}"]`)
-    if (!tableWrapper) return
-
-    let table = tableWrapper.querySelector("table")
-    if (!table) {
-      const turboFrame = document.getElementById(`${tableName}_content`)
-      if (turboFrame) {
-        table = turboFrame.querySelector("table")
-      }
-    }
-
-    if (!table) return
-
-    const pinnedData = this.getAllColumnsPinned(tableName)
-    const headers = Array.from(table.querySelectorAll("thead th[data-column-name]"))
-    const rows = table.querySelectorAll("tbody tr")
-
-    // Calculate positions for pinned columns
-    let leftOffset = 0
-    let rightOffset = 0
-
-    // First pass: reset all columns
-    headers.forEach(header => {
-      header.style.position = ''
-      header.style.left = ''
-      header.style.right = ''
-      header.style.zIndex = ''
-      header.style.removeProperty('background-color')
-      header.style.removeProperty('background-image')
-      header.style.removeProperty('opacity')
-      header.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
-    })
-
-    rows.forEach(row => {
-      const cells = row.querySelectorAll("td[data-column-name]")
-      cells.forEach(cell => {
-        cell.style.position = ''
-        cell.style.left = ''
-        cell.style.right = ''
-        cell.style.zIndex = ''
-        cell.style.removeProperty('background-color')
-        cell.style.removeProperty('background-image')
-        cell.style.removeProperty('opacity')
-        cell.classList.remove('infotable-pinned-left', 'infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900', "after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]", "before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
-      })
-    })
-
-    // Find last left-pinned and first right-pinned columns
-    let lastLeftPinned = null
-    let firstRightPinned = null
-
-    headers.forEach(header => {
-      const columnName = header.dataset.columnName
-      const pinned = pinnedData[columnName]
-      if (pinned === 'left') {
-        lastLeftPinned = columnName
-      }
-      if (pinned === 'right' && !firstRightPinned) {
-        firstRightPinned = columnName
-      }
-    })
-
-    // Apply sticky positioning for pinned columns
-    headers.forEach(header => {
-      const columnName = header.dataset.columnName
-      const pinned = pinnedData[columnName]
-
-      if (pinned === 'left') {
-        // Get existing inline styles
-        const existingStyles = header.getAttribute('style') || ''
-
-        // Build comprehensive style string with all !important flags
-        const newStyles = `
-          position: sticky !important;
-          left: ${leftOffset}px !important;
-          z-index: 30 !important;
-          background: #f9fafb !important;
-          background-color: #f9fafb !important;
-          background-image: none !important;
-          background-position: initial !important;
-          background-size: initial !important;
-          background-repeat: initial !important;
-          background-attachment: initial !important;
-          opacity: 1 !important;
-          ${existingStyles}
-        `.replace(/\s+/g, ' ').trim()
-
-        // Set all styles at once via setAttribute
-        header.setAttribute('style', newStyles)
-        header.classList.add('infotable-pinned-left', '!bg-gray-50', 'dark:!bg-gray-800')
-
-        // 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 => {
-          const cell = row.querySelector(`td[data-column-name="${columnName}"]`)
-          if (cell) {
-            // Get existing inline styles
-            const existingStyles = cell.getAttribute('style') || ''
-
-            // Build comprehensive style string
-            const newStyles = `
-              position: sticky !important;
-              left: ${leftOffset}px !important;
-              z-index: 15 !important;
-              background: #ffffff !important;
-              background-color: #ffffff !important;
-              background-image: none !important;
-              background-position: initial !important;
-              background-size: initial !important;
-              background-repeat: initial !important;
-              background-attachment: initial !important;
-              opacity: 1 !important;
-              ${existingStyles}
-            `.replace(/\s+/g, ' ').trim()
-
-            cell.setAttribute('style', newStyles)
-            cell.classList.add('infotable-pinned-left', '!bg-white', 'dark:!bg-gray-900')
-
-            if (columnName === lastLeftPinned) {
-              cell.classList.add("after:content-['']", "after:absolute", "after:top-0", "after:right-0", "after:bottom-0", "after:w-5", "after:pointer-events-none", "after:bg-gradient-to-r", "after:from-transparent", "after:to-black/[0.04]", "after:z-[1]")
-            }
-          }
-        })
-
-        leftOffset += header.offsetWidth
-      } else if (pinned === 'right') {
-        // Get existing inline styles
-        const existingStyles = header.getAttribute('style') || ''
-
-        // Build comprehensive style string
-        const newStyles = `
-          position: sticky !important;
-          right: ${rightOffset}px !important;
-          z-index: 30 !important;
-          background: #f9fafb !important;
-          background-color: #f9fafb !important;
-          background-image: none !important;
-          background-position: initial !important;
-          background-size: initial !important;
-          background-repeat: initial !important;
-          background-attachment: initial !important;
-          opacity: 1 !important;
-          ${existingStyles}
-        `.replace(/\s+/g, ' ').trim()
-
-        header.setAttribute('style', newStyles)
-        header.classList.add('infotable-pinned-right', '!bg-gray-50', 'dark:!bg-gray-800')
-
-        // 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 => {
-          const cell = row.querySelector(`td[data-column-name="${columnName}"]`)
-          if (cell) {
-            // Get existing inline styles
-            const existingStyles = cell.getAttribute('style') || ''
-
-            // Build comprehensive style string
-            const newStyles = `
-              position: sticky !important;
-              right: ${rightOffset}px !important;
-              z-index: 15 !important;
-              background: #ffffff !important;
-              background-color: #ffffff !important;
-              background-image: none !important;
-              background-position: initial !important;
-              background-size: initial !important;
-              background-repeat: initial !important;
-              background-attachment: initial !important;
-              opacity: 1 !important;
-              ${existingStyles}
-            `.replace(/\s+/g, ' ').trim()
-
-            cell.setAttribute('style', newStyles)
-            cell.classList.add('infotable-pinned-right', '!bg-white', 'dark:!bg-gray-900')
-
-            if (columnName === firstRightPinned) {
-              cell.classList.add("before:content-['']", "before:absolute", "before:top-0", "before:left-0", "before:bottom-0", "before:w-5", "before:pointer-events-none", "before:bg-gradient-to-l", "before:from-transparent", "before:to-black/[0.04]", "before:z-[1]")
-            }
-          }
-        })
-
-        rightOffset += header.offsetWidth
-      }
-    })
-  }
-
   // ========== Column Ordering with Drag and Drop ==========
 
   // Initialize Sortable for drag and drop column ordering
@@ -1237,7 +996,9 @@ export default class extends Controller {
 
     // Unpin all columns when manually reordering
     const pinnedKey = `infotable_column_pinned_${tableName}`
-    localStorage.removeItem(pinnedKey)
+    const unpinned = {}
+    columnItems.forEach(item => { unpinned[item.dataset.columnName] = null })
+    this.storeSet(pinnedKey, JSON.stringify(unpinned))
 
     // Update pin button styling for all items
     columnItems.forEach(item => {
@@ -1247,11 +1008,8 @@ export default class extends Controller {
     // Save to localStorage
     this.saveColumnOrder(tableName, newOrder)
 
-    // Apply order to table
-    this.applyColumnOrder(tableName, newOrder)
-
-    // Remove sticky positioning since all are unpinned
-    this.applyColumnPinningToTable(tableName)
+    // Apply order to the table; nothing is pinned any more
+    this.applyToTable(tableName, newOrder)
 
     // Dispatch event for export link update
     document.dispatchEvent(new CustomEvent("infotable:columns-changed", {
@@ -1262,7 +1020,7 @@ export default class extends Controller {
   // Save column order to localStorage
   saveColumnOrder(tableName, order) {
     const key = `infotable_column_order_${tableName}`
-    localStorage.setItem(key, JSON.stringify(order))
+    this.storeSet(key, JSON.stringify(order))
   }
 
   // Load column order from localStorage
@@ -1298,7 +1056,7 @@ export default class extends Controller {
 
     // Valid schema, apply the order
     this.applyColumnOrderToList(tableName, storedOrder)
-    this.applyColumnOrder(tableName, storedOrder)
+    this.applyToTable(tableName, storedOrder)
   }
 
   // Check if stored order is valid against default schema
@@ -1352,64 +1110,10 @@ export default class extends Controller {
     })
   }
 
-  // Apply column order to the table
-  applyColumnOrder(tableName, order) {
-    const tableWrapper = document.querySelector(`[data-infotable--table-name-value="${tableName}"]`)
-    if (!tableWrapper) return
-
-    // Try to find table in the wrapper or in turbo-frame
-    let table = tableWrapper.querySelector("table")
-    if (!table) {
-      const turboFrame = document.getElementById(`${tableName}_content`)
-      if (turboFrame) {
-        table = turboFrame.querySelector("table")
-      }
-    }
-
-    if (!table) return
-
-    // Get headers and create a map
-    const headerRow = table.querySelector("thead tr")
-    if (!headerRow) return
-
-    const headers = Array.from(headerRow.querySelectorAll("th[data-column-name]"))
-    const headerMap = new Map()
-
-    headers.forEach((header, index) => {
-      headerMap.set(header.dataset.columnName, { element: header, originalIndex: index })
-    })
-
-    // Reorder headers according to order array
-    order.forEach(columnName => {
-      const headerInfo = headerMap.get(columnName)
-      if (headerInfo) {
-        headerRow.appendChild(headerInfo.element)
-      }
-    })
-
-    // Reorder cells in each row
-    const rows = table.querySelectorAll("tbody tr")
-    rows.forEach(row => {
-      const cells = Array.from(row.querySelectorAll("td[data-column-name]"))
-      const cellMap = new Map()
-
-      cells.forEach(cell => {
-        cellMap.set(cell.dataset.columnName, cell)
-      })
-
-      order.forEach(columnName => {
-        const cell = cellMap.get(columnName)
-        if (cell) {
-          row.appendChild(cell)
-        }
-      })
-    })
-  }
-
   // Clear column order from localStorage
   clearColumnOrder(tableName) {
     const key = `infotable_column_order_${tableName}`
-    localStorage.removeItem(key)
+    this.storeRemove(key)
   }
 
   // Reset to defaults - clear all custom settings
@@ -1421,14 +1125,14 @@ export default class extends Controller {
 
     // Clear column visibility
     const visibilityKey = `infotable_columns_${tableName}`
-    localStorage.removeItem(visibilityKey)
+    this.storeRemove(visibilityKey)
 
     // Clear column order
     this.clearColumnOrder(tableName)
 
     // Clear column pinning
     const pinnedKey = `infotable_column_pinned_${tableName}`
-    localStorage.removeItem(pinnedKey)
+    this.storeRemove(pinnedKey)
 
     // Reset checkboxes to defaults
     const form = document.getElementById(`column-visibility-form-${tableName}`)
@@ -1452,19 +1156,10 @@ export default class extends Controller {
       this.applyColumnOrderToList(tableName, schemaNames)
     }
 
-    // Apply defaults to table
-    this.applyColumnVisibility(tableName)
-
-    // Apply default column order to table
+    // Apply the defaults (visibility, default order, default pinning) to the table
     const list = Array.from(this.columnListTargets).find(l => l.dataset.tableName === tableName)
-    if (list) {
-      const defaultSchema = JSON.parse(list.dataset.columnsSchema || '[]')
-      const schemaNames = defaultSchema.map(item => typeof item === 'string' ? item : item.name)
-      this.applyColumnOrder(tableName, schemaNames)
-    }
-
-    // Remove sticky positioning
-    this.applyColumnPinningToTable(tableName)
+    const defaultSchema = JSON.parse(list?.dataset.columnsSchema || '[]')
+    this.applyToTable(tableName, list ? defaultSchema.map(item => typeof item === 'string' ? item : item.name) : null)
 
     // Update badge
     this.updateColumnBadge(tableName)