Tabulka
Sloupce
Wire Table poskytuje 16 typů sloupců. Všechny sdílejí stejné základní API sloupce pro popisky, viditelnost, autorizaci, řazení, formátování a inline editaci — dokumentované níže. Typ vyberte podle vykreslení buňky; sdílené API sáhněte na kterýkoli z nich.
Na této stránce
- Typy sloupců
- Koncepty
- Sdílené API sloupce
- Factory a identita
- Řazení
- Hledání
- Viditelnost a přepínatelnost
- Responzivní breakpointy
- Responzivní varianty zobrazení
- Formátování hodnot
- Stylování textu
- Šířka a zarovnání
- Ikony
- URL (klikatelná buňka)
- Kopírovatelné
- Tooltip a popis
- Souhrn (agregátní patička)
- Extra HTML atributy
- Pivot sloupce
- Přístup ke stavu
- Vlastní rendering (Blade partialy)
Wire Table poskytuje 16 typů sloupců. Všechny sdílejí stejné základní API sloupce pro popisky, viditelnost, autorizaci, řazení, formátování a inline editaci — dokumentované níže. Typ vyberte podle vykreslení buňky; sdílené API sáhněte na kterýkoli z nich.
Typy sloupců
| Sloupec | Použití pro |
|---|---|
| TextColumn | Univerzální text s presety formátování data/měny/čísel |
| BadgeColumn | Status pilulky s barvou a ikonou, vč. self-coloringu enumů |
| BooleanColumn | True/false jako ikona (fajfka / křížek) |
| IconColumn | Ikony podle stavu nebo dynamicky resolvované |
| ImageColumn | Avatary a náhledy |
| ButtonColumn | Tlačítko s odkazem nebo Livewire akcí v buňce |
| ToggleColumn | Inline editovatelný přepínač on/off |
| CheckboxColumn | Inline editovatelné zaškrtávátko (hustší ToggleColumn) |
| SelectColumn | Inline editovatelný dropdown (options, relace, enumy) |
| TextInputColumn | Inline editovatelný text/číslo/email input |
| StackedColumn | Layouty avatar + jméno + email na sobě |
| SplitColumn | Poskládat několik sloupců vedle sebe |
| PollColumn | Buňky se živě pollovaným stavem/postupem |
| ColorColumn | Uložená CSS barva jako vzorník |
| RatingColumn | Číselné hodnocení jako hvězdičky |
| TagsColumn | Vícehodnotový stav jako chipsy |
Koncepty
- Cesty relací a tečková notace — zobrazit hodnoty souvisejících modelů, agregáty, pivoty
- Enum a JSON casty — labely/barvy/ikony enumů a rendering array/json
- Editace a filtry na úrovni sloupce — inline editace a per-sloupcové inputy filtrů
- Fill handle — vyplňování tažením jako v Excelu, jedním requestem
- Vzory a recepty — kompletní příkladové tabulky
Sdílené API sloupce
Každý sloupec dědí tyto schopnosti ze základní třídy Column.
Factory a identita
Column::make(string $name) // statická factory — $name je cesta v tečkové notaci->label(string|Closure $label) // zobrazovací popisek v <th> (auto-generovaný z názvu)->getName(): string // získat název sloupce->getLabel(): string // získat resolvovaný popisek
Řazení
->sortable(bool $sortable = true, ?Closure $query = null)->isSortable(): bool // Vlastní logika řazení->sortUsing(Closure $fn)
TextColumn::make('full_name') ->sortable() ->sortUsing(function (Builder $query, string $direction) { $query->orderBy('last_name', $direction) ->orderBy('first_name', $direction); })
Hledání
->searchable(bool|array $searchable = true)->isSearchable(): bool // Předejte pole pro hledání v konkrétních DB sloupcích (když je název sloupce virtuální)->searchable(['first_name', 'last_name', 'email']) // Vlastní logika hledání->searchUsing(Closure $fn) // Deklarovat, co sloupec drží, aby šlo do hledání psát >100 a 10..20->searchAs(SearchValueType|string $type) // 'text' | 'numeric' | 'date' | 'code' // Získat resolvované sloupce hledání->getSearchColumns(): array
searchColumns(array $columns)jako samostatný setter existuje jen naStackedColumn. Na ostatních sloupcích předejte pole rovnou dosearchable().
// Hledat napříč více DB sloupciTextColumn::make('user') ->searchable(['first_name', 'last_name', 'email']) // Vlastní logika hledáníTextColumn::make('full_name') ->searchable() ->searchUsing(function (Builder $query, string $search) { $query->where(DB::raw("CONCAT(first_name, ' ', last_name)"), 'like', "%{$search}%"); })
searchAs() má smysl teprve tehdy, když tabulka zapne
hledání rozsahů. Typ hodnoty se obvykle odvodí
z castů modelu — cast decimal:2 nebo datetime stačí — deklarujte ho tedy jen
tam, kde za sloupec casty mluvit nemohou:
// Model nemá pro `amount` žádný cast, takže se z něj nedá nic odvodit.TextColumn::make('amount') ->searchable() ->searchAs('numeric') // ">1000" a "10..20" se teď dostanou i na tento sloupec
Sloupec ponechaný jako text porovnání přeskočí, místo aby porovnával lexikograficky — chybná nebo chybějící deklarace tak jen zúží, čemu hledání rozumí, nikdy nevrátí špatné řádky.
Samotná deklarace nic nezapíná. Hledatelný sloupec, který typ deklaruje, zatímco
hledání tabulky rozsahy nečte, se při renderu tabulky odmítne a pojmenuje
chybějící volání — jinak by se tabulka vrátila prázdná, protože 10..20 by se
hledalo jako doslovný text.
'code' je jediný typ, který se nikdy neodvozuje: říká, že hodnota je řada
plus číslo doplněné nulami (8866 01, 8866 02), což je právě to, co dělá
porovnání textem správným — a ví to jen vlastník. Odemyká
rozsahy uvnitř řady —
8866 01..08.
Viditelnost a přepínatelnost
->hidden(bool|Closure $hidden = true) // skrýt sloupec->isHidden(): bool // Přepínatelné uživatelem (výběr sloupců)->toggleable(bool $toggleable = true) // Podle oprávnění->permission(?string $permission) // viditelné jen když má uživatel oprávnění->visible(Closure $callback) // vlastní callback viditelnosti (jen Closure) // Viditelnost buňky per záznam (redakce jedné buňky per řádek)->visibleForRecord(Closure $callback) // fn ($record) => bool
->hidden(), ->permission(), ->visible() a ->authorize() rozhodují, zda
sloupec v tabulce vůbec existuje — vyhodnocují se jednou, bez záznamu (řídí
také hlavičku, přepínání sloupců a export). Pro skrytí nebo redakci jedné buňky
per řádek — např. zobrazit salary jen pro záznamy, které uživatel smí vidět —
použijte ->visibleForRecord(fn ($record) => …), který běží při renderu buňky se
záznamem řádku. Skrytá buňka se vykreslí prázdná; sloupec dál zabírá své místo
v každém dalším řádku.
TextColumn::make('salary') ->visibleForRecord(fn ($record) => auth()->user()->can('viewSalary', $record));
Responzivní breakpointy
->visibleFrom(string $breakpoint) // skryté pod tímto breakpointem->hiddenFrom(string $breakpoint) // skryté od tohoto breakpointu nahoru->onlyOnMobile() // viditelné jen na mobilu (<md)->onlyOnDesktop() // viditelné jen na desktopu (≥lg)->onlyOnTabletAndUp() // viditelné od md nahoru->onlyOnLargeScreens() // viditelné od xl nahoru
TextColumn::make('phone') ->visibleFrom('md') // skryté na mobilu, viditelné od md TextColumn::make('notes') ->onlyOnLargeScreens() // viditelné jen na xl+
Responzivní varianty zobrazení
// Vlastní render pro mobil vs desktop->mobileDisplayUsing(Closure $fn)->desktopDisplayUsing(Closure $fn)->hasResponsiveDisplay(): bool // Kam sloupec padne na skládané mobilní kartě (viz Pokročilé → Responzivní rozvržení)->mobileTitle() ->mobileSubtitle() ->mobileMetric() ->mobileMeta() ->mobileDetail()
TextColumn::make('user') ->mobileDisplayUsing(fn ($record) => $record->name) ->desktopDisplayUsing(fn ($record) => "{$record->name} <{$record->email}>")
Formátování hodnot
->formatStateUsing(Closure $fn) // transformovat hodnotu pro zobrazení->displayUsing(Closure $fn) // alias pro formatStateUsing->default(mixed $value) // hodnota, když je stav null->placeholder(string $text) // text zobrazený, když je hodnota null/prázdná->limit(int $chars) // zkrátit na N znaků->prefix(string $prefix) // předřadit text->suffix(string $suffix) // přidat text->html(bool $html = true) // vykreslit hodnotu jako raw HTML->wrap(bool $wrap = true) // povolit zalamování textu (výchozí: nowrap)
TextColumn::make('price') ->prefix('$') ->suffix(' USD') ->placeholder('N/A') TextColumn::make('bio') ->limit(100) ->tooltip(fn ($record) => $record->bio) // zobrazit celé při hoveru TextColumn::make('content') ->html() ->wrap() ->limit(200)
TextColumn::make('name') ->weight('bold') ->textSize('lg') TextColumn::make('subtitle') ->textSize('sm') ->textColor('gray') ->weight('light')
Šířka a zarovnání
->width(string $width) // CSS šířka: '200px', '20%', 'auto'->alignment(string $alignment) // 'left', 'center', 'right'->alignLeft() // zkratka->alignCenter() // zkratka->alignRight() // zkratka
Ikony
->icon(string|Icon|null $icon, ?string $position = 'before') // pozice: 'before' | 'after'->color(string|Color $color) // statická barva ikony/textu (pro barvu per řádek použijte BadgeColumn/IconColumn colorUsing())
TextColumn::make('email') ->icon('mail', 'before') ->color('primary')
URL (klikatelná buňka)
->actionUrl(Closure $url, bool $openInNewTab = false) // udělat z buňky odkaz
TextColumn::make('name') ->actionUrl(fn ($record) => route('users.show', $record), openInNewTab: true) ->color('primary')
Kopírovatelné
->copyable(bool $copyable = true) // ikona kopírování kliknutím->copyMessage(string $msg) // text zpětné vazby po zkopírování
Tooltip a popis
->tooltip(string|Closure $tooltip) // tooltip při hoveru->description(string|Closure $desc) // sekundární text pod hodnotou
TextColumn::make('title') ->description(fn ($record) => Str::limit($record->body, 50)) ->tooltip(fn ($record) => "Created: {$record->created_at->format('d.m.Y')}")
Souhrn (agregátní patička)
->summarize(string $aggregate, ?string $label = null)
Dostupné agregáty: 'sum', 'avg', 'count', 'min', 'max', 'range'
Detaily viz Pokročilé — Souhrn.
Extra HTML atributy
->extraAttributes(array $attrs) // na <td>->extraHeaderAttributes(array $attrs) // na <th>
TextColumn::make('notes') ->extraAttributes(['data-testid' => 'notes-cell']) ->extraHeaderAttributes(['class' => 'bg-gray-100'])
Pivot sloupce
->pivot(bool $isPivot = true) // označí jako sloupec pivot tabulky->isPivot(): bool
Pro many-to-many relace s pivot daty:
TextColumn::make('roles.pivot.assigned_at') ->pivot() ->dateTime('d.m.Y')
Přístup ke stavu
->state(mixed $value) // přepsat hodnotu stavu->getState(Model $record): mixed // resolvovat stav ze záznamu
Vlastní rendering (Blade partialy)
Každý sloupec vlastní svůj stav/konfiguraci a deleguje markup na Blade
partial pod packages/table/resources/views/tables/columns/. Základní textová
buňka se vykresluje přes text.blade.php; každý sloupec s custom-UI má svůj
vlastní partial (badge, boolean, icon, image, button, toggle, poll,
split, stacked, select, text-input-*). Sloupce nikdy nevrací inline HTML
z renderCell() — volají renderView('tables.columns.<name>', [...]).
Dva způsoby přizpůsobení markupu:
// 1. Přepis per sloupec — nasměrujte jakýkoli sloupec na svůj vlastní Blade pohled.TextColumn::make('name')->view('columns.my-name-cell'); // 2. Přepis pro celý projekt — publikujte pohledy balíčku a upravte partial.// php artisan vendor:publish --tag=wire-table::views// pak upravte resources/views/vendor/wire-table/tables/columns/badge.blade.php
Pořadí resolvování pohledu: explicitní ->view() vyhrává, pak pohled balíčku
(wire-table::tables.columns.<name>), pak app-level pohled stejného názvu. Váš
partial dostane přesně ta data jako vestavěný — už resolvované primitivy
stavu/konfigurace pro daný sloupec — takže přepisujete jen HTML.