Skill LibraryPrompt Skill1 DesignsTop Views

Complex Table Hierarchy

Build high-density data tables with task modeling, column priority, responsive disclosure, bulk actions, states, accessible headers, and frontend implementation constraints.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines10

Reusable instruction lines for generation.

Author@Interface Lab

Component

Skill Directive

Description

Build high-density data tables with task modeling, column priority, responsive disclosure, bulk actions, states, accessible headers, and frontend implementation constraints.

TagsComponent

Skill Prompt

- Use for operations dashboards, review queues, finance lists, resource libraries, logs, and permission matrices; inputs must include user task, data scale, columns, primary key, sort/filter needs, bulk actions, permissions, and target viewports.
- Write the table task model first: scanning, comparing, sorting, filtering, bulk handling, reviewing, exporting, or opening detail; column order, default sort, and row actions must serve the highest-frequency task.
- Create column priority: identity column, status column, key metrics, time/owner, secondary metadata, and action column; low-priority columns move to disclosure, detail drawer, or export instead of competing for width.
- Do not lose semantics: real data tables use table/thead/tbody/th/td/caption, simple headers use scope, and complex multi-level headers use id/headers; mobile cards must preserve header meaning.
- Choose responsive strategy by task: small comparisons can use horizontal scroll and frozen first column; mobile review can become summary cards; overview-only views show core columns plus detail page; complex fields use expanded rows or drawers.
- Dense states are complete: sticky header, sort indicators, filter summary, hover/focus, selected, loading, empty, filtered-empty, error, permission denied, and partial data.
- Bulk selection needs a separate bulk toolbar with selected count, available actions, clear selection, and destructive confirmation; row actions are muted or disabled in bulk mode to avoid scope confusion.
- Frontend implementation defines stable column widths, right-aligned numbers, safe truncation/expansion for long text, pagination or virtualization, server-side sort/filter, stable row ids, and URL-reproducible filter state.
- Output: task model, column priority map, responsive disclosure table, state matrix, bulk action contract, accessible markup notes, and desktop/mobile QA checklist.
- Common mistakes: equal emphasis for every column, squeezing full tables onto mobile, color-only status, missing caption/header association, long text breaking layout, and destructive bulk action without confirmation. Sources: W3C WAI Tables, WAI responsive data tables, Carbon Data Table.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

Complex Table Hierarchy

More pages using Complex Table Hierarchy