# Основы
Стилизованные таблицы можно создавать с помощью компонента moonshine::table
.
<x-moonshine::table :columns="[ '#', 'First', 'Last', 'Email' ]" :values="[ [1, fake()->firstName(), fake()->lastName(), fake()->safeEmail()], [2, fake()->firstName(), fake()->lastName(), fake()->safeEmail()], [3, fake()->firstName(), fake()->lastName(), fake()->safeEmail()] ]"/>
# | First | Last | |
---|---|---|---|
1 | Rhea | Emmerich | gleichner.vicenta@example.net |
2 | Mia | Casper | collier.kenna@example.org |
3 | Clemens | Bins | aimee06@example.com |
# Упрощенный вид
Параметр simple
позволяет создавать упрощенного вида таблицы.
<x-moonshine::table :simple="true" :columns="[ '#', 'First', 'Last', 'Email' ]" :values="[ [1, fake()->firstName(), fake()->lastName(), fake()->safeEmail()], [2, fake()->firstName(), fake()->lastName(), fake()->safeEmail()], [3, fake()->firstName(), fake()->lastName(), fake()->safeEmail()] ]"/>
# | First | Last | |
---|---|---|---|
1 | Layla | Ankunding | ophelia18@example.org |
2 | Katrine | Robel | zconroy@example.net |
3 | Kassandra | Parker | daija.cruickshank@example.com |
# Фиксированная шапка
Если в таблице содержится большое количество элементов, то можно зафиксировать шапку при прокрутки таблицы.
<x-moonshine::table :sticky="true" :columns="[ '#', 'First', 'Last', 'Email' ]" :values="[ [1, fake()->firstName(), fake()->lastName(), fake()->safeEmail()], [2, fake()->firstName(), fake()->lastName(), fake()->safeEmail()], [3, fake()->firstName(), fake()->lastName(), fake()->safeEmail()] ]"/>
# Отсутствие элементов
Параметр notfound
позволяет выводить сообщение при отсутствии элементов таблицы.
<x-moonshine::table :columns="[ '#', 'First', 'Last', 'Email' ]" :notfound="true"/>
Пока записей нет
# Слоты
Таблицу можно сформировать с использованием слотов.
<x-moonshine::table> <x-slot:thead class="text-center"> <th colspan="4">Header</th> </x-slot:thead> <x-slot:tbody> <tr> <th>1</th> <th>{{ fake()->firstName() }}</th> <th>{{ fake()->lastName() }}</th> <th>{{ fake()->safeEmail() }}</th> </tr> <tr> <th>2</th> <th>{{ fake()->firstName() }}</th> <th>{{ fake()->lastName() }}</th> <th>{{ fake()->safeEmail() }}</th> </tr> <tr> <th>3</th> <th>{{ fake()->firstName() }}</th> <th>{{ fake()->lastName() }}</th> <th>{{ fake()->safeEmail() }}</th> </tr> </x-slot:tbody> <x-slot:tfoot class="text-center"> <td colspan="4">Footer</td> </x-slot:tfoot></x-moonshine::table>
Header | |||
---|---|---|---|
1 | Sedrick | Langworth | kohler.aida@example.com |
2 | Holly | Hoeger | erutherford@example.org |
3 | Matteo | Stamm | juana59@example.net |
Footer |
# Стилизация
Для стилизации таблицы есть предустановленные классы, которые можно использовать для tr
/ td
.
Доступные классы:
bgc-purple bgc-pink bgc-blue bgc-green bgc-yellow bgc-red bgc-gray bgc-primary bgc-secondary bgc-success bgc-warning bgc-error bgc-info
<x-moonshine::table> <x-slot:thead class="bgc-secondary text-center"> <th colspan="3">Header</th> </x-slot:thead> <x-slot:tbody> <tr> <th class="bgc-pink">{{ fake()->firstName() }}</th> <th class="bgc-gray">{{ fake()->lastName() }}</th> <th class="bgc-purple">{{ fake()->safeEmail() }}</th> </tr> <tr> <th class="bgc-green">{{ fake()->firstName() }}</th> <th class="bgc-red">{{ fake()->lastName() }}</th> <th class="bgc-yellow">{{ fake()->safeEmail() }}</th> </tr> </x-slot:tbody></x-moonshine::table>
Header | ||
---|---|---|
Herta | Rowe | jaydon08@example.org |
Manuela | Johnston | jaquelin89@example.org |