Mobile, properly: tables that become cards on phones
Major release. Tables now collapse into elegant card layouts on mobile, with per-field visibility control and three smart breakpoints.
- Card-based layout on mobile screens (≤480px)
- Field visibility control per device class, show on mobile, hide on tablet, both, neither
- Two-tier collapse: main card toggle plus hidden-fields expansion
- Smart breakpoints: 480px / 768px / 1024px+
- Date-first display puts the most-scanned column at the top of every card
A 12-column table at 375px wide is unreadable. We finally accepted that.
The card layout#
At ≤480px, every row becomes a card. The most important field (configurable; defaults to entry date) becomes the card title. The rest stack vertically with their labels inline. Long values truncate with a “show more” toggle.
It’s not a horizontal scroll prison. It’s not a “switch to desktop view” upsell. It’s the data, restructured for the screen.
Per-field visibility#
Each column gets a two-checkbox visibility control: “show on mobile?” and “show on tablet?”. Three immediate use cases:
- Customer ID column, hide on mobile, useless on a phone
- Notes column, hide on tablet too, only relevant in admin views
- Status column, show everywhere, it’s the whole point
Settings are per-column, per-table. Toggle them inline from the field list (no modal in 3.1+) or from the field settings dialog.
Two-tier collapse#
The card itself can collapse to a one-line summary (title + status). Tapping expands to the full field list. Within the expanded card, less-important fields hide behind a “Show all fields” toggle.
This means a card stays scannable even when it’s representing a 30-field form.
Breakpoints#
- ≤480px: card layout
- 481-768px: hybrid, table with hidden columns
- ≥769px: full table
These breakpoints are CSS-driven and theme-overridable. If your theme has unusual container widths, the breakpoints are filterable from wp-config.
What this unlocked#
Mobile support was the #1 feature request from agencies running Gravity Tables for client-facing dashboards. 3.0 closed that ticket.
Subsequent 3.x releases (3.1 quick toggles, 3.2 production debugging, 3.4 license activation) all built on this foundation.