Stack column

StackColumn groups several bound components into one cell, stacking them vertically — useful for showing a name and email together, or a title with a subtitle. Pass a schema of normal components to ->schema(), each bound to a row field with ->bound($rowKey).

PHP

StackColumn::make('identity')->label('User')->schema([
  Text::bound('name')->color(Color::default()),
  Text::bound('email')->size(Size::Sm),
]);

TextColumn::make('role');

Preview

Tree

• ▾table
  • actionsLabel:null
  • bulkActions:[]
  • data:[{"email":"[email protected]","name":"Ada Lovelace","role":"Admin"},{"email":"[email protected]","name":"Alan Turing","role":"Editor"}]
  • emptyLabel:null
  • endpoint:null
  • filters:[]
  • layout:null
  • lazy:false
  • pagination:{"currentPage":null,"from":1,"hasMore":false,"lastPage":null,"mode":"none","nextPage":null,"perPage":null,"to":2,"total":2}
  • perPageOptions:[]
  • pinnableColumns:false
  • query:{"filters":[],"mode":null,"page":1,"perPage":25,"search":"","sorts":[],"tableFilterIndicators":[],"tableFilters":{}}
  • resizableColumns:false
  • resizeIndicator:false
  • searchable:false
  • striped:false
  • toolbar:[]

  • ▾column.stack
    • align:"start"
    • filter:null
    • hiddenByDefault:false
    • label:"User"
    • options:[]
    • pinned:null
    • sortable:false
    • toggleable:false
    • width:"xl"

    • ▾text
      • align:null
      • color:{"dark":null,"kind":"named","value":"default"}
      • copyable:false
      • dataBindings:{"text":"name"}
      • size:"md"
      • text:""
    • ▾text
      • align:null
      • color:null
      • copyable:false
      • dataBindings:{"text":"email"}
      • size:"sm"
      • text:""
  • ▾column.text
    • align:"start"
    • badge:null
    • copyable:false
    • date:null
    • filter:null
    • hiddenByDefault:false
    • label:"Role"
    • link:null
    • multiple:null
    • options:[]
    • pinned:null
    • sortable:false
    • toggleable:false
    • width:"md"

Style

The cell materializes the schema against each row — filling text from name and email per the bindings — then renders it through the normal component library, so any component’s display modifiers still apply (the example colors the name and sizes the email down). The stack’s own key labels the header; the bound components read their own row fields, not the stack’s key.

StackColumn::make('product')->label('Product')->schema([
    Text::bound('title'),
    Badge::bound('sku'),
]);

->bound($rowKey) is shorthand for ->make('')->dataKey($prop, $rowKey) against the component’s primary wire prop; use ->dataKey($prop, $rowKey) directly to bind any other prop, and opt custom components into the shorthand with the HasPrimaryBinding concern.