webdevpuneet.com

Related Snippets

85 in Tables category
38–43 of 60

Column Widths That Persist (localStorage)

Table Row Detail Panel (Master-Detail)

Table Inline Cell Validation

Print-Optimized Table View

Nested JSON to Table Mapper

Table Loading / Empty / Error States

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

Column Widths That Persist (localStorage) · Tables · Plain HTML, CSS & JS · Live preview

CategoryTables
TagsLocal StorageTouch GesturesDark ModeData Tables

Copy & paste

Source Code

<div class="crp-wrap">
  <div class="crp-bar">
    <h3>Support tickets</h3>
    <button type="button" class="crp-reset" id="crpReset">Reset widths</button>
  </div>
  <div class="crp-scroll">
    <table class="crp-table" id="crpTable">
      <colgroup id="crpColgroup"></colgroup>
      <thead>
        <tr id="crpHeadRow"></tr>
      </thead>
      <tbody id="crpBody"></tbody>
    </table>
  </div>
  <p class="crp-note" id="crpNote"></p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real pointer-drag resizing
pointerdown/pointermove/pointerup with setPointerCapture drives live column resizing.
Genuine localStorage writes
Widths are actually persisted via localStorage.setItem on drag release.
Genuine localStorage reads
Saved widths are read and applied via localStorage.getItem on every load.
Namespaced, versioned key
A dedicated storage key avoids collisions with other localStorage data.
Key-based, not index-based JSON
Widths are stored by column key, staying correct if columns are reordered.
Minimum width clamp
Columns can't be dragged below a sensible floor.
colgroup-driven widths
One <col> width change resizes the entire column cleanly.
Visible persistence confirmation
A status line states whether widths were restored or just saved.

About this UI Snippet

Persistent Column Widths — Real Drag Resizing Saved to localStorage

Screenshot of the Column Widths That Persist (localStorage) snippet rendered live

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.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA tickets table renders with drag handles on the right edge of each header.
  2. 2
    Drag a column edgeThe column resizes live as you drag, clamped to a minimum width.
  3. 3
    Release the dragThe current widths of every column are written to localStorage immediately.
  4. 4
    Reload the pageYour custom widths are read back from localStorage and applied on load.
  5. 5
    Check the status lineIt confirms whether widths were restored from a previous visit.
  6. 6
    Click Reset widthsClears the saved localStorage entry and returns every column to its default width.

Real-world uses

Common Use Cases

Admin and data-dense tables
Let power users tune column widths once and keep them — pair with a resizable columns table.
Support and ticket queues
Persist a layout tuned for longer subject lines across sessions.
Spreadsheet-like internal tools
Mirror spreadsheet column-width memory that survives reloads.
Dashboards with saved layouts
Extend the same localStorage pattern to column order or visibility, alongside data table column toggle.
Multi-user internal apps
Each browser remembers its own layout independently, no backend needed.
Learning localStorage persistence
A reference for real read/write persistence — compare with table column resize for resizing without saving.
Related: Nested JSON to Table Mapper
See the Nested JSON to Table Mapper for a related tables pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It really saves to localStorage. On pointerup, endDrag() reads each column's live width and calls localStorage.setItem with a JSON-stringified object under the key crp-column-widths-v1 — open your browser's DevTools Application/Storage tab after dragging a column and you'll see the entry written there, and it survives closing the tab.

Both the read and write paths are wrapped in try/catch. loadWidths() falls back to an empty object (so every column uses its coded default width) if reading throws or the value can't be parsed, and saveWidths() silently no-ops if writing throws — so resizing still works visually for the current session even if persistence isn't available.

An index-keyed structure like widths[2] breaks the moment a column is added, removed, or reordered — index 2 might now be a completely different column, and it would silently apply the wrong saved width. Keying by each column's stable identifier (e.g. "subject") means a saved width always reapplies to the correct column even if the table's column order changes later.

On pointerdown over a handle, the code records the starting cursor X and the column's current width. On every pointermove during the drag, it computes how far the cursor has moved (delta) and sets the <col> element's width to the starting width plus that delta, clamped to a minimum. Because all cells in a column share one <col> element inside a <colgroup>, this single width update resizes the whole column at once.

Keep the widths object in component state, initialize it from localStorage.getItem in an effect/lifecycle hook on mount, attach pointerdown/pointermove/pointerup handlers to each resize handle that update that state, and call localStorage.setItem on pointerup. Bind each <col>'s width style to the corresponding state value — the drag math and storage calls are framework-agnostic.