Table

# Основы

Стилизованные таблицы можно создавать с помощью компонента 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 Email
1 Torrance Nolan gloria21@example.com
2 Kaia Deckow pmuller@example.com
3 Stefanie Schinner glockman@example.net

# Упрощенный вид

Параметр 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 Email
1 Nakia Rodriguez eward@example.com
2 Naomie Sipes alexandro.pfannerstill@example.org
3 Frederik Upton lorine.bernier@example.net

# Отсутствие элементов

Параметр 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 Augusta Yost weber.desiree@example.org
2 Leanna Kuhic jbode@example.org
3 Elena Deckow xlebsack@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
Pierce Cronin jarrett63@example.org
Deonte Fisher gerhold.jarod@example.org