K

Table

SplitColumn

One cell divided horizontally between several child columns, each keeping its own rendering.

On this page

Horizontally splits space between multiple child columns.

use NyonCode\WireTable\Columns\SplitColumn;

Basic Split

SplitColumn::make('name_status')
->columns([
TextColumn::make('name')->weight('bold'),
BadgeColumn::make('status')->colors([...]),
])

Vertical Layout

SplitColumn::make('address')
->columns([
TextColumn::make('street'),
TextColumn::make('city'),
TextColumn::make('country'),
])
->vertical()

With Gap & Alignment

SplitColumn::make('user_info')
->columns([
ImageColumn::make('avatar')->circular()->size('sm'),
TextColumn::make('name'),
])
->gap('sm') // 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', or a step 0–12
->alignCenter() // centre on the cross axis

Alignment follows the cross axis, which is what the layout leaves over: in the default row that is vertical, in a vertical() column it is horizontal. A row centres by default; a column stretches, and keeps stretching until you ask for something else, so adding vertical() never re-lays-out a split you already had.

SplitColumn::make('address')
->columns([TextColumn::make('street'), TextColumn::make('city')])
->vertical()
->alignStart() // leading edge, instead of full-width children

gap() takes either vocabulary — a design-system name or a step on Tailwind's 0–12 scale, as an int or a numeric string — and both resolve through the shared Foundation\Support\GapScale, which is what turns them into a literal utility. Anything it does not recognise falls back to the split's default rather than reaching the page as a class Tailwind never generated.

SplitColumn API

->columns(array $columns) // Column[] child columns
->vertical() // vertical layout
->horizontal() // horizontal layout (default)
->gap(string|int $gap) // 'none'|'xs'|'sm'|'md'|'lg'|'xl', or a step 0–12
->getGapClass(): string // the literal gap utility
->alignCenter(bool $align = true) // centre on the cross axis
->alignStart() // start of the cross axis
->getAlignClass(): string // '' while no alignment was asked for
->getColumns(): array

What the split answers to the query seam on behalf of its children:

->isSearchable(): bool // true if any child is searchable
->getSearchColumns(): array // merged from children
->isSortable(): bool // true if any child is sortable, else its own flag
->getSortColumn(): ?string // first sortable child, else its own name

How Sorting a Split Works

A split is registered under a name for the group it draws — 'identity' above — and that name is usually not an attribute of the model. Two methods therefore answer two different questions:

  • isSortable() makes the header clickable as soon as any child is sortable. It falls back to the split's own ->sortable() flag.
  • getSortColumn() names what the click orders by: the first sortable child, falling back to the split's own name.

TableQueryService asks getSortColumn() rather than reusing the name the header was clicked under, so the two never have to agree:

SplitColumn::split([
ImageColumn::make('avatar'),
TextColumn::make('name')->sortable(),
TextColumn::make('email'),
], 'identity')
// header reads "Identity", ORDER BY runs on `name`

Register the split under a real attribute and mark it ->sortable() yourself when you want the group to order by something none of its children shows.