Priority Column Hiding

Technical Deep Dive & Specifications

The Priority Tier Matrix

To systematically control column visibility across viewports, we establish a standardized Priority Classification Hierarchy:

+-----------------------------------------------------------------------------------------------+
| Priority Tier | Classification  | Visible Breakpoint       | Example Fields                   |
+-----------------------------------------------------------------------------------------------+
| Priority 1    | Essential (Core)| All Viewports (>= 0px)   | Entity Name, ID, Primary Status  |
| Priority 2    | Important       | Tablet & Desktop (>=640px)| Date, Category, Primary Metric   |
| Priority 3    | Secondary       | Desktop Only (>=1024px)  | Subscriptions, Tags, Region      |
| Priority 4    | Tertiary / Gran | Widescreen (>=1280px)    | Timestamps, Hash IDs, Audit Logs |
+-----------------------------------------------------------------------------------------------+

CSS Utility Class Architecture

We map these priority tiers directly to reusable CSS classes:

/* Base: Mobile First (Hide everything except Priority 1) */
.col-p2,
.col-p3,
.col-p4 {
  display: none;
}

/* Tablet (>= 640px): Reveal Priority 2 */
@media (min-width: 640px) {
  .col-p2 {
    display: table-cell;
  }
}

/* Desktop (>= 1024px): Reveal Priority 3 */
@media (min-width: 1024px) {
  .col-p3 {
    display: table-cell;
  }
}

/* Widescreen (>= 1280px): Reveal Priority 4 */
@media (min-width: 1280px) {
  .col-p4 {
    display: table-cell;
  }
}

Breakpoint Behavior Breakdown:
Width < 640px:   [ P1 (Name) ]                                   [ Action Drawer (v) ]
Width 640-1023:  [ P1 (Name) ] [ P2 (Category) ] [ P2 (Price) ]   [ Action Drawer (v) ]
Width >= 1024px: [ P1 (Name) ] [ P2 (Category) ] [ P2 (Price) ] [ P3 (SKU) ] [ P3 (Stock) ]

The Progressive Disclosure Pattern (Expandable Child Rows)

Hiding data entirely without a fallback penalizes mobile users who require full access. The industry-standard solution is an Expandable Detail Drawer:

1. On desktop, the toggle button column is hidden (display: none), and all data columns are visible in the main row.
2. On mobile, secondary columns are hidden from the main row, and a toggle button column is displayed.
3. Clicking the toggle button expands an auxiliary <tr class="detail-row"> containing a full list of the hidden data attributes.

Desktop Layout:
+--------------------------------------------------------------------------+
| Order ID  | Customer     | Product       | Date       | Amount | Status  |
| #1001     | Alice Cooper | Cloud Server  | 2026-08-20 | $499   | Active  |
+--------------------------------------------------------------------------+

Mobile Layout (Collapsed):
+--------------------------------------------------------------------------+
| [>] #1001     | Alice Cooper                   | $499                    |
+--------------------------------------------------------------------------+

Mobile Layout (Expanded Detail Drawer):
+--------------------------------------------------------------------------+
| [v] #1001     | Alice Cooper                   | $499                    |
| +----------------------------------------------------------------------+ |
| | Product: Cloud Server Dedicated | Date: 2026-08-20 | Status: Active   | |
| +----------------------------------------------------------------------+ |
+--------------------------------------------------------------------------+

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 73–92: Priority utility media queries. Classes .p-priority-2 and .p-priority-3 remain display: none on mobile screens and activate into display: table-cell as the viewport reaches tablet ($640\text{px}$) and desktop ($1024\text{px}$) thresholds.
• Lines 93–99: When the screen is wider than $1024\text{px}$, the toggle button column (.col-toggle) is suppressed (display: none) because all columns fit comfortably in standard horizontal layout.
• Lines 123–128: The button features aria-expanded="false" and aria-controls="details-101", establishing an explicit relationship for screen reader software between the trigger and the collapsible detail drawer.
• Lines 135–150: The detail row uses <td colspan="7"> spanning the entire width of the table. Inside, a CSS Grid .detail-container cleanly arranges key-value cards.

Expected Browser Render Output

• Mobile Viewport (375px): Shows only [▶], Order ID, Customer, and Total. Tapping the [▶] flips the icon to [▼] and slides open a grey drawer displaying Product Tier, Date Placed, and Payment Method.
• Tablet Viewport (768px): Automatically reveals Product Tier in the main table row.
• Desktop Viewport (1200px): The [▶] expand button disappears entirely; all 6 data columns are cleanly visible in a single horizontal row.