KeepNeeds Refinement
Table Transaction Component link

A display-only transaction row — a header of column labels, or a content row with a full-width label above however many peso-amount cells you drop into its slot.

Keep — now built from the family's shared atoms
The rebuild turned this from a parallel re-implementation into a genuine composition. Its header slot holds the same Table Cell component that Table Row uses; its content slot holds the same Table Amount Cell that Table Scheduling uses. Settings are Role (Header / Content) and State (Default / Disabled), matching Table Row exactly, and no. of columns is gone — column count is however many cells sit in the ⤷ ColumnSlot. The raster peso is a Peso Sign - Proxima vector instance inherited from the shared amount cell. Kept as its own component because it carries a full-width #label row above its amount cells, which a plain Table Row doesn't. Rows are display-only, and amounts are unsigned by approved design.
In Context

Per-variant descriptions cite account limits — e.g. daily / monthly send caps showing used vs. remaining peso amounts in aligned columns. Other GCash surfaces like transaction history and receipts use the Generic Transaction Card vertical stack, not this tabular layout.

Account Limits USED REMAINING TOTAL Daily ₱3,500 ₱6,500 ₱10,000 Monthly ₱42,000 ₱58,000 ₱100,000 Request Increase
Live Preview
Column Label
Column Label
Column Label
Properties
Role
State
hasLabel
#label
hasBorder
⤷ ColumnSlot
Table Cell ⤷ AssetSlot
Cells
DS Health
Reusable
Pass
⤷ ColumnSlot takes any number of cells, and the shared Table Amount Cell carries its own ⤷ CurrencySlot — a non-peso currency is a swap, not a detach.
Self-contained
Pass
The currency prefix is a Peso Sign - Proxima vector instance inherited from the shared amount cell. The raster image fill and its remote asset URL are gone.
Consistent
Pass
Role and State match Table Row exactly, slots use the family's ⤷ …Slot form, and container is named the same way across all four versions. The no. of columns string-with-period property is gone.
Composable
Pass
Built from the family's own atoms — Table Cell in the header, Table Amount Cell in the content row. Nothing is re-implemented locally.
Behavior
State iOS Android Figma Property Notes
Header Yes Yes Role=Header 360 × 66 on a #F6F9FD ground. ⤷ ColumnSlot holds Table Cell instances, each with a 24 × 24 ⤷ AssetSlot above a Proxima Soft Semibold 12 label.
Content Yes Yes Role=Content 360 × 68 on white. A full-width #label in #6780A9 sits above a row of Table Amount Cell instances, each pairing a label with a peso-prefixed #value.
Disabled Yes Yes State=Disabled Text dims to #C2CFE5 across labels and values alike.
Pressed N/A N/A Not built Not needed — rows are display-only and carry no tap target.
Issues
  • Code Connect mappings not registered. Blocked — the native component library doesn't exist yet. Nothing to action on the design side. C7 · Code Connect Linkability
  • It composes the family's atoms instead of duplicating them. v2.0: rebuilt on node 5896:39727. The header's ⤷ ColumnSlot holds the same Table Cell component Table Row uses; the content row holds the same Table Amount Cell Table Scheduling uses. What were three parallel re-implementations are now one family sharing parts. C1 · Layer Structure & Naming
  • no. of columns is gone. v2.0: column count comes from the number of cells in ⤷ ColumnSlot. The period-in-name string enum inherited from the old Table is no longer there to fix. C2 · Variant & Property Naming
  • The row maps to native primitives. v2.0: frames and slots throughout — a VStack / Column with a nested row of cells. No platform table primitive required. C4 · Native Mappability
  • Interaction states are intentionally minimal. v2.0: reviewed and settled. Rows are display-only, so pressed and selected are not needed. State=Disabled is built and dims text to #C2CFE5. Amounts carry no + / − prefix and no positive/negative colouring — that is the approved design, not a gap. C5 · Interaction State Coverage
  • The peso sign is a vector. v2.0: the raster image fill and its remote figma.com/api/mcp/asset/* URL are gone, replaced by a Peso Sign - Proxima instance in ⤷ CurrencySlot. The header's hardcoded #C2C6CF circle is now a ⤷ AssetSlot holding a swappable Placeholder. C6 · Asset & Icon Quality
  • Staying a separate component is intentional. v2.0: reviewed and dismissed. Transaction keeps its own record because its content row carries a full-width #label above the amount cells, which a plain Table Row entry doesn't. Same reasoning as Table Scheduling — and since both now build from shared atoms, the family reads as one. C1 · Layer Structure & Naming
  • container is named consistently. v2.1: all four versions use lowercase container. The Header versions previously used Container. C1 · Layer Structure & Naming
  • The shared amount cell has a family-neutral name. v2.1: Table Scheduling Amount Cell renamed to Table Amount Cell. It is used by both Scheduling and Transaction, so the old name claimed a family it no longer belonged to exclusively. The rename propagated to both components. C1 · Layer Structure & Naming
Recommendations
  • Document amount-sign semantics. Amounts here are unsigned by approved design — used, remaining, and cap totals rather than signed movements. Write that down so the component isn't reached for on flows that need + / −; those belong to Generic Transaction Card. Docs
  • Align the amount label token with Inline Text. The content-row label uses #6780A9 and the value #0A2757 — the same semantic pair Inline Text covers with its own tokens. A shared set would stop the two drifting apart. Token
  • Audit the colour token bindings. The review tooling reads raw hex and can't see variable bindings, so C3 is recorded as unverified. Confirm #F6F9FD, #E5EBF4, #0A2757, #6780A9, and the #C2CFE5 disabled colour are all bound. Token
  • Flatten the peso glyph. For the Iconography team: Peso Sign - Proxima wraps a shape_full BOOLEAN_OPERATION. Flattening it to a plain vector removes a class of export and scaling surprises. Shared with Table Scheduling. Asset
  • See siblings: Table Row and Table Scheduling — all three share Table Cell and Table Amount Cell. Keep slot naming and state coverage aligned across the family. Family
  • Remove Table - Transaction from core DS, or fold it into Table as a recipe. v2.0: Settled — neither. It keeps its own record because its content row carries a full-width label above the amount cells, and it now composes the family's shared atoms rather than duplicating them. Family
  • Consolidate with Table's row primitive. v2.0: Applied in substance — the header slot holds Table Row's Table Cell and the content slot holds Table Amount Cell, so the parts are shared even though the record stays separate. Composition
  • Rename or drop no. of columns. v2.0: Applied — dropped. Column count comes from the number of cells in ⤷ ColumnSlot. Rename
  • Replace the raster peso sign with a text glyph or vector icon. v2.0: Applied — a Peso Sign - Proxima vector instance in ⤷ CurrencySlot, inherited from the shared amount cell. Asset
  • Give the container one name across all versions. v2.1: Applied — lowercase container on all four. Rename
  • Give the shared amount cell a family-neutral name. v2.1: Applied — Table Scheduling Amount Cell is now Table Amount Cell, propagated to both Scheduling and Transaction. Rename
Types
Header row
DES DEV

Subtle-bg row with bottom border. 10px Proxima Soft Semibold column labels across equal-width flex columns. Optional 24px icon above each label.

Properties
State
Cells
⤷ AssetSlot
Properties
Columns 3
Icon no
Colors
Surface bg #F6F9FD
Border #E5EBF4
Column label #0A2757
Icon placeholder #C2C6CF
Layout
Height 36
Padding H 24
Padding V 12
Icon size 24 × 24
Typography
Preamble style Primary/Multi-line Label/Light/Tiny
Preamble font Proxima Soft Semibold · 10 / 12 · +0.25
Body style Primary/Label/Small
Body font Proxima Soft Bold · 14 / 14 · +0.25
Colors by State
Role Token DefaultPressedDisabled
Header bg main/table/color/bg-subtle #F6F9FD – –
Content bg main/table/color/bg #FFFFFF – –
Row border main/table/color/border #E5EBF4 – –
Header column label main/table/color/label #0A2757 – –
Content preamble label main/table/color/label-preamble #6780A9 – –
Amount value main/table/color/label #0A2757 – –
Currency icon (peso) main/table/color/icon-currency-secondary #183462 – –
Header icon placeholder — (hardcoded) #C2C6CF – –
Content row
DES DEV

White bg with bottom border. Preamble label on top, then equal-width amount cells with a peso glyph + numeric value (<code>X,XXX.XX</code>).

Properties
State
Cells
Properties
Columns 3
Colors
Surface bg #FFFFFF
Border #E5EBF4
Preamble label #6780A9
Amount value #0A2757
Currency glyph #183462
Layout
Height 72.5
Padding H 24
Padding V 16
Typography
Preamble style Primary/Multi-line Label/Light/Tiny
Preamble font Proxima Soft Semibold · 10 / 12 · +0.25
Body style Primary/Label/Small
Body font Proxima Soft Bold · 14 / 14 · +0.25
Layout
Role Token Value
Row width (fixed) — 360px
Header height (icon=no) — 36px
Header height (icon=yes) — 62px
Content row height — 72.5px
Header horizontal padding space/space-24 24px
Header pt / pb 12 / space/space-12 12 / 12px
Content horizontal padding — 24px
Content py space/space-16 16px
Header column gap — 8px
Content label → amounts gap — 8px
Amount column gap — 16px
Header icon → label gap — 2px
Header icon size — 24 × 24px
Peso glyph size — 15 × 15px (raster)
Peso → amount gap — 2px
Property Mapping
Figma PropertySwiftUICompose
Role = Header | Content role: .header / .content role = EBTableRowRole.Header / Content
State = Default | Disabled .disabled(true) enabled = false
hasLabel: Boolean (content only) label: String? — nil hides it label: String? = null
hasBorder: Boolean showsDivider: Bool = true showsDivider: Boolean = true
⤷ ColumnSlot (N × Table Cell) columns: [Column] columns: List<Column>
⤷ ColumnSlot (N × Table Amount Cell) amounts: [AmountCell] amounts: List<AmountCell>
Table Cell → ⤷ AssetSlot Column.asset: AnyView? Column.asset: @Composable (() -> Unit)?
Table Amount Cell → ⤷ CurrencySlot currency: AnyView currency: @Composable () -> Unit
#label (content row) label: String label: String
Table Amount Cell → #label hidden here — the row's single label covers every cell hidden here — the row's single label covers every cell
SwiftUI
ios/Components/Table/EBTableTransactionRow.swift
Jetpack Compose
android/components/table/EBTableTransactionRow.kt
Usage Snippets Planned API
Usage
// Recommended — compose with Inline Text (phone-width)
EBGenericTransactionCard {
    EBInlineText(label: "Daily used",      value: "₱3,500.00")
    EBInlineText(label: "Daily remaining", value: "₱6,500.00")
    EBInlineText(label: "Daily cap",       value: "₱10,000.00")
}

// Option B — if multi-column Table row is retained (tablet / wider)
VStack(spacing: 0) {
    EBTableRow(
        role: .header,
        columns: ["Used", "Remaining", "Cap"]
    )
    EBTableRow(
        role: .content,
        label: "Daily",
        columns: [
            .amount("3,500.00"),
            .amount("6,500.00"),
            .amount("10,000.00")
        ]
    )
}
// Recommended — compose with Inline Text (phone-width)
EBGenericTransactionCard {
    EBInlineText(label = "Daily used",      value = "₱3,500.00")
    EBInlineText(label = "Daily remaining", value = "₱6,500.00")
    EBInlineText(label = "Daily cap",       value = "₱10,000.00")
}

// Option B — if multi-column Table row is retained (tablet / wider)
Column {
    EBTableRow(
        role = EBTableRowRole.Header,
        columns = listOf("Used", "Remaining", "Cap")
    )
    EBTableRow(
        role = EBTableRowRole.Content,
        label = "Daily",
        columns = listOf(
            TableColumn.Amount("3,500.00"),
            TableColumn.Amount("6,500.00"),
            TableColumn.Amount("10,000.00")
        )
    )
}
Accessibility
RequirementiOSAndroid
Amount semantics Each amount cell should read as a single element — wrap peso + value and use .accessibilityLabel("Three thousand five hundred pesos"). Merge peso + value with Modifier.semantics(mergeDescendants = true); set contentDescription to a spoken phrase, not the raw glyph.
Currency glyph fallback Use Unicode \u{20B1} inline — avoid a raster image that won't scale with Dynamic Type. Use Unicode ₱ inline — avoid a bitmap that won't respect font-scale settings.
Header vs content row Header rows carry .accessibilityAddTraits(.isHeader). Header rows use Modifier.semantics { heading() }.
Column label / amount pairing Group the preamble label with each amount column so VoiceOver reads "Daily, three thousand five hundred pesos". Group the preamble label with each amount column so TalkBack reads "Daily, three thousand five hundred pesos".
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure &amp; Naming Ready Composes Table Row's Table Cell in the header and the shared Table Amount Cell in the content row. container is named the same way across all four versions.
C2 Variant &amp; Property Naming Ready Role and State match Table Row exactly. The no. of columns property and its period are gone.
C3 Token Coverage Needs Refinement Not verified — the read-only tooling cannot see variable bindings. The hardcoded #C2C6CF header circle is gone, replaced by a ⤷ AssetSlot.
C4 Native Mappability Ready Frames and slots throughout — builds as a VStack / Column with a nested row of cells.
C5 Interaction State Coverage Ready Display-only by design, so pressed is not needed. State=Disabled dims text to #C2CFE5. Amounts are unsigned by approved design.
C6 Asset &amp; Icon Quality Needs Refinement Raster replaced by a Peso Sign - Proxima vector instance, and the header circle by a ⤷ AssetSlot. The glyph still wraps a shape_full BOOLEAN_OPERATION — delegated to the Iconography team.
C7 Code Connect Linkability Not Mapped Blocked — the native component library does not exist yet.
Variants Inventory (4 total)

Role (2) × State (2) = 4 published versions, listed below. Two booleans sit on top without adding variants — hasBorder on every row, and hasLabel on Content only — so the real combination count is 12. Column count isn't a version either: the ⤷ ColumnSlot takes however many cells you drop in — Table Cell instances in the header, Table Amount Cell instances in the content row, where each cell's own #label is hidden.

RoleStateDimensionsBackgroundNode
HeaderDefault360 × 66#F6F9FD5896:39740
HeaderDisabled360 × 66#F6F9FD5900:40254
ContentDefault360 × 68#FFFFFF5896:39762
ContentDisabled360 × 68#FFFFFF5900:40274
1.0.0 — April 2026Major
Initial Assessment · node 47:324709
Family assessed — 6 variants (2 type × 2 columns × 2 icon, pruned). Only used for account-limit surfaces in the sticker sheet. Documented
Initial
Duplicate of Table — Reuses Table's variant schema with narrower column coverage and a peso-specialised content row. Recommend folding into Table as a recipe. Open
C1 Open
no. of columns inherited naming — String enum with a period in the property name, carried over from Table. Open
C2 Open
No native mobile primitive — Same mobile problem as Table; transaction totals should be Inline Text stacks. Open
C4 Open
No interaction or amount-sign states — No pressed / disabled, no positive / negative amount differentiation. Open
C5 Open
Peso sign is a raster asset — Content row currency prefix is an image fill, not a text glyph or vector. Header icon placeholder is still hardcoded #C2C6CF. Open
C6 Open
Code Connect mappings — Not registered. Open
C7 Open