wbDesign Wiki
Storybook

Table Composition with Child Table — Figma Assembly Rules

Скачать .md ↓
Паттернorganism

Status: active Figma assembly contract for a parent summary row whose expanded region contains a table with a different column model.

Verified Evidence

Read-only Plugin API inspection and screenshot on 2026-09-22 in file EO9tuCsqwuHL8cZ4Eb2psR, page 202:129655:

  • Parent table 18785:184884 contains collapsed row 18785:184892, expanded row 18785:184908, expanded region 18785:184924, and next collapsed row 18785:184972.
  • Chevron 18785:184893 is Opened=off; Chevron 18785:184909 is Opened=on. Both resolve to published set 22cc419b16f744e4dd2a1291e577a6120b41f972.
  • Expanded region 18785:184924 is vertical Auto Layout, horizontally Fill, 1400×198, padding 16px top/bottom, 40px left, 24px right, and 12px gap.
  • Region title 18785:184925 precedes inner table 18785:184926 (1336×136). Inner table owns header 18785:184927 (40px) and rows 18785:184934 and 18785:184953 (48px each), with columns different from the parent.
  • Inner headers resolve to Table Header set 825907d7b24368ae1024ab36f267b5bdf063f77a; inner body Text cells resolve to ca4a3816753e89700d86de76068b01799c939816.
  • Source expanded region uses variable bg/dropdown active, key 65c74b0620e69c316d89b7addd238950d2a82dfb; inner body rows use bg/level 1 base, key c5ece31d227299c075a15c46d7c1b189287998af. Separators use stroke/secondary, key ed508cedb139e60ffd8035610463fc51b5f358d4.
  • Screenshot of parent 18785:184884 visibly confirms the indented titled child table immediately beneath the open summary row.

This is evidence of reusable composition anatomy, not permission to copy the reference's example columns or use its loose frames as feature masters.

Required Assembly

  • component.table-wrapper governs the independent child table, its local header/row masters and column widths. component.table-row governs the parent summary row; component.table-cell-chevron governs its expansion affordance. No generic row-expand owner is needed for this specific boundary.
  • Rule ID: table.child-table.local-owner — create screen-owned summary-row, group and child-table masters. Compose instances; do not depend on another screen's feature-local master. Preserve the existing independent table when adding a separate grouped view.
  • Rule ID: table.child-table.expansion — an expanded group places its child region immediately after its summary row, before the next group. Chevron Opened=on matches a visible child region; Opened=off matches its absence or hidden state. Use the published Chevron, Button and Icon instances.
  • Rule ID: table.child-table.columns — the child table has its own published header and body cells with matching widths/order. Its columns may differ from the summary row; never align unrelated fields by pretending they share one column model. Summary fields use the narrowest mapped Table Cells.
  • Rule ID: table.child-table.region — use a vertical, horizontally Fill expanded region with 16px top/bottom, 40px left, 24px right padding and 12px gap when a title is present. Keep the title and child table inside this region, not inside a body cell. The title's wording and presence are screen-owned; omitting it leaves no empty title space.
  • Preserve the child table's own Fill chain and minimum content width; include the region insets when calculating the outer scrolling minimum.
  • Expanded-region emphasis uses the verified bg/dropdown active binding. Ordinary summary/body-row base fill and bottom-only separators follow the row contract; the reference's transparent collapsed loose frames do not override those current rules.
  • Group identity, count wording, fixture data, initial open groups, title copy, pagination/loading policy and prototype transitions belong to the screen target. This contract does not invent production interaction or data loading.

Verification Checklist

  • table.child-table.local-owner: fresh instance readback links summary, group and child-table instances to current screen-local master IDs.
  • table.child-table.expansion: each inspected group's published Chevron state agrees with child-region visibility and ordering.
  • table.child-table.columns: child header/body column IDs and widths agree; summary fields remain their own composition.
  • table.child-table.region: fresh layout readback confirms region Fill, insets, title placement and child-table ancestry; screenshot shows a coherent indented expanded region without clipping.

Documentation Task

LUU-427 · GitHub Issue 10 · verified member danil-lebedev, GitHub ID 50231562 · agent Codex / Specs · run/session luu427-grouped-table-20260922.

WB Logistics · Design SystemСборка 91da5ae

Поиск по Wiki

Начните вводить название или текст