Таблицы

# Основы

Стилизованные таблицы можно создавать с помощью компонента 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 Hulda Brown buckridge.lavonne@example.org
2 Kip Zboncak adrienne.stehr@example.org
3 Ryder Grimes schoen.ashlee@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 Email
1 Presley Turcotte estefania.bayer@example.com
2 Celia Bechtelar zieme.lula@example.net
3 Marie Rutherford horacio28@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 Kayley Effertz wbauch@example.net
2 Dora Graham oconnell.ruth@example.org
3 Loyal Willms kiel.howell@example.com
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
Kaylee Crist charlotte45@example.net
Antonio Walter huel.lacy@example.net
UI компоненты
Spinner
UI компоненты
Tabs