Column Widths That Persist — Real Drag Resize + localStorage (JS)

Letting users resize table columns is only half the feature — if the widths reset every time they reload the page, it barely feels like a preference at all. This snippet builds genuine pointer-drag column resizing in plain HTML, CSS, and vanilla JavaScript, and actually writes the resulting widths to localStorage, reading them back on load so a user's column layout survives a refresh or a return visit days later.

Real pointer-drag resizing, not a decorative handle

Each header renders a thin .crp-handle at its right edge. A pointerdown on a handle records the starting cursor X and the column's current width (read from its live <col> element via getBoundingClientRect), and setPointerCapture ensures the drag keeps tracking even if the cursor leaves the handle's small hit area. pointermove then computes delta = e.clientX - startX and sets the <col>'s width directly, clamped to a MIN_WIDTH floor so a column can never be dragged to zero or negative width. Using <col> elements inside a <colgroup> (rather than styling every <td> individually) is what lets one width change apply to the entire column in one place.

Genuine localStorage read and write

On pointerup, endDrag() reads every column's *current* width off its <col> element into a plain { key: widthPx } object and calls localStorage.setItem('crp-column-widths-v1', JSON.stringify(widths)) — a real write to persistent browser storage, not an in-memory variable that resets on reload. On load, loadWidths() reads that same key back with localStorage.getItem and JSON.parses it, wrapped in a try/catch since storage can throw in private browsing or when disabled — falling back to each column's default width if nothing was saved or parsing fails.

A sensible key and JSON structure

The storage key is namespaced and versioned (crp-column-widths-v1), and the stored value is a flat object keyed by column identifier rather than array index — so adding, removing, or reordering columns in a future version doesn't silently apply stale widths to the wrong column. This is a small but important design choice: an index-keyed structure (widths[2] = 180) would misassign every saved width the moment a column is added.

Confirms the persistence, doesn't just claim it

A status line beneath the table explicitly states whether widths were restored from a previous visit or nothing is saved yet, and updates immediately after a drag to confirm the save happened — so the persistence isn't just present in the code, it's visibly confirmed in the UI, which matters for a feature that's otherwise invisible until the user reloads.

Reset and defaults

A "Reset widths" button clears the stored key and re-renders from each column's default width, giving users an escape hatch if they resize columns into an awkward layout. Pair this with a table column resize snippet if you want resizing without persistence, or a resizable columns table for a broader resizing reference.