Overview

use Xelqun\Tables\Columns\TextColumn;

TextColumn::make('name')
    ->label('Product')
    ->searchable()
    ->sortable();

Column	Use it for
TextColumn	Text, dates, money and badges
IconColumn	Icons and true or false values
ImageColumn	Images
ColorColumn	Color swatches
SelectColumn	Picking a value in the cell
ToggleColumn	A switch in the cell
TextInputColumn	Typing in the cell
CheckboxColumn	A checkbox in the cell
CustomColumn	Your own Vue component

#Relationships

A dot reaches through a relationship. Eager load it in query() to avoid extra queries.

TextColumn::make('category.name')->label('Category');

#Working out a value

state() works out the cell's value, instead of reading it from the record.

IconColumn::make('verified')
    ->state(fn (User $record): bool => $record->email_verified_at !== null)
    ->boolean();

formatStateUsing() changes the value for display. Sorting and search still use the original.

TextColumn::make('sku')->formatStateUsing(fn (string $state): string => strtoupper($state));

#Links

url() links the cell.

TextColumn::make('website')->url(fn (Brand $record): ?string => $record->website, openInNewTab: true);

A URL outside http(s), mailto, tel or this site is dropped.

#Color and icon

color() and icon() take a value or a closure.

TextColumn::make('status')
    ->badge()
    ->color(fn (string $state): string => $state === 'active' ? 'success' : 'gray');

#Enums

If a value is a cast enum, its getLabel(), getColor() and getIcon() fill in the cell. The column's own color(), icon() and formatStateUsing() win.

#Wide tables

Cells stay on one line, and a table that's too wide scrolls sideways, with its scrollbar on screen while the table is in view. wrap() on a text column lets long text run onto more lines.

#Hiding columns

hidden() and visible() remove a column on the server. A hidden column isn't sent, searched or sorted. To let viewers choose, see column toggles.

#Summaries

summarize() adds a line under a column. See summaries.