TableBuilder

# Основы

Поля и декорации в MoonShine используются внутри таблиц в режиме preview.
За таблицы отвечает TableBuilder.
Благодаря TableBuilder таблицы отображаются и наполняются данными.
Вы также можете использовать TableBuilder на собственных страницах или даже вне MoonShine. 

TableBuilder::make(
    Fields|array $fields = [],
    Paginator|iterable $items = [],
    ?Paginator $paginator = null
)
  • $fields - поля,
  • $items - значения полей,
  • $paginator - объект пагинатора.
use MoonShine\Components\TableBuilder;
 
TableBuilder::make(
    [Text::make('Text')],
    [['text' => 'Value']]
)

Можно использовать методы: 

TableBuilder::make()
    ->fields([Text::make('Text')]) 
    ->items([['text' => 'Value']])

Также доступен helper table(): 

{!!
    table() 
        ->fields([Text::make('Text')])
        ->items([['text' => 'Value']])
!!}
Text
Value

# Поля

Метод fields() позволяет задать перечень полей для построения таблицы: 

TableBuilder::make()
    ->fields([
        Text::make('Text'),
    ])

# Данные

Метод items() служит для наполнения таблицы данными: 

TableBuilder::make()
    ->fields([Text::make('Text')])
    ->items([['text' => 'Value']])

Соответствие данных с полями осуществляется через значение column поля!

# Пагинация

Метод paginator для того чтобы таблица работала с пагинацией: 

$paginator = Article::paginate();
 
TableBuilder::make()
    ->fields([Text::make('Text')])
    ->items($paginator->items())
    ->paginator($paginator)
Или сразу передать пагинатор: 
TableBuilder::make(
    items: Article::paginate()  
)
    ->fields([Text::make('Text')])
TableBuilder работает с массивами элементов;
если у вас нет массивов, вам нужно преобразовать пагинатор в массивы: 
$paginator = Article::paginate();
 
TableBuilder::make()
    ->fields([Text::make('Text')])
    ->items($paginator->through(fn ($item) => $item->toArray()))  
    ->paginator($paginator)
Или вместо этого вы можете использовать метод cast().

# Приведение к типу

Метод cast() служит для приведения значений таблицы к определенному типу.
Так как по умолчанию поля работают с примитивными типами: 

use MoonShine\TypeCasts\ModelCast;
 
TableBuilder::make(items: User::paginate())
    ->fields([Text::make('Email')])
    ->cast(ModelCast::make(User::class))

В этом примере мы привели данные к формату модели User с использованием ModelCast.

За более подробной информацией обратитесь к разделу TypeCasts

# Кнопки

Для добавления новых кнопок на основе ActionButton, воспользуйтесь методом buttons().
Кнопки будут добавляться для каждого row, а при включении режима bulk() отображаться в футере для массовых действий: 

TableBuilder::make(items: Article::paginate())
    ->fields([ID::make(), Switcher::make('Active')])
    ->cast(ModelCast::make(Article::class))
    ->buttons([
        ActionButton::make('Delete', route('name.delete')),
        ActionButton::make('Edit', route('name.edit'))->showInDropdown(),
        ActionButton::make('Go to home', route('home'))->blank()->canSee(fn($data) => $data->active),
        ActionButton::make('Mass Delete', route('name.mass_delete'))->bulk()
    ])

# Асинхронный режим

Если необходимо получать данные из таблицы асинхронно (при пагинации, сортировке), то воспользуйтесь методом async(): 

async(
    ?string $asyncUrl = null,
    string|array|null $asyncEvents = null,
    ?string $asyncCallback = null
)
  • asyncUrl - url запроса,
  • asyncEvents - вызываемые события после успешного запроса,
  • asyncCallback - js callback функция после получения ответа.
TableBuilder::make()
    ->async('/async_url')

После успешного запроса, можно вызвать события, добавив параметр asyncEvents. 

TableBuilder::make()
        ->name('crud')
        ->async(asyncEvents: ['table-updated-crud', 'form-reset-main-form'])

В MoonShine уже есть набор готовых событий:

  • table-updated-{name} - обновление асинхронной таблицы по ее имени,
  • form-reset-{name} - сброс значений формы по ее имени,
  • fragment-updated-{name} - обновление blade fragment по его имени.

Метод async() должен быть после метода name()!

# Атрибуты

Вы можете задать любые html атрибуты для таблицы через метод customAttributes(): 

TableBuilder::make()
    ->customAttributes(['class' => 'custom-table'])

Вы можете задать любые html атрибуты для строк и ячеек таблицы: 

TableBuilder::make()
    ->trAttributes(
        function(
            mixed $data,
            int $row,
            ComponentAttributeBag $attributes
        ): ComponentAttributeBag {
            return $attributes->merge(['class' => 'bgc-green']);
        }
    )
Text
Value 
TableBuilder::make()
    ->tdAttributes(
        function(
            mixed $data,
            int $row,
            int $cell,
            ComponentAttributeBag $attributes
        ): ComponentAttributeBag {
            return $attributes->merge(['class' => 'bgc-red']);
        }
    )
Text
Value

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

По умолчанию, если у таблицы нет данных, то она будет пустой, но можно вывести сообщение "Пока записей нет".
Для этого воспользуйтесь методом withNotFound(): 

TableBuilder::make()
    ->withNotFound()

Пока записей нет

# Упрощённый стиль

По умолчанию таблица стилизована под MoonShine, но с помощью метода simple() можно отобразить таблицу в упрощённом стиле: 

TableBuilder::make()
    ->simple()
Text
Value

# Фиксированная шапка

Метод sticky() позволяет зафиксировать шапку при прокрутке таблицы с большим числом элементов. 

TableBuilder::make()
    ->sticky()

# Preview

Метод preview() отключает отображение кнопок и сортировок для таблицы: 

TableBuilder::make()
    ->preview()

# Вертикальный режим

С помощью метода vertical() можно отобразить таблицу в вертикальном режиме: 

TableBuilder::make()
    ->vertical()
Value 1
Value 2

# Добавление записей

С помощью метода creatable() можно создать кнопку "Добавить" для генерации новых записей в таблице: 

creatable(
    bool $reindex = true,
    ?int $limit = null,
    ?string $label = null,
    ?string $icon = null,
    array $attributes = [],
    ?ActionButton $button = null
)
  • $reindex - режим редактирования с динамическим name,
  • $limit - количество записей которые можно добавить,
  • $label - название кнопки,
  • $icon - иконка у кнопки,
  • $attributes - дополнительные атрибуты,
  • $button - кастомная кнопка добавления.
TableBuilder::make()
    ->creatable(
        icon: 'heroicons.outline.pencil',
        attributes: ['class' => 'my-class']
    ) 
    ->fields([
        Text::make('Title'),
        Text::make('Text')
    ])->items([
        ['title' => 'Value 1', 'text' => 'Value 2'],
        ['title' => '', 'text' => '']
    ])
Title Text
Value 1 Value 2
Добавить

В режиме добавления необходимо, чтобы последний элемент был пустым (скелет новой записи)!

reindex

Если в таблице находятся поля в режиме редактирования с динамическим name, то нужно добавить метод или параметр reindex: 

TableBuilder::make()
    ->creatable(reindex: true)

или 

TableBuilder::make()
    ->creatable()
    ->reindex()
limit

Если требуется ограничить количество записей которые можно добавить, то необходимо указать параметр limit: 

TableBuilder::make()
    ->creatable(limit: 6)
Кастомная кнопка добавления 
TableBuilder::make()
    ->creatable(
        button: ActionButton::make('Foo', '#')
    )

# Редактируемые записи

По умолчанию поля в таблице отображаются в режиме preview,
но если требуется отобразить их как элементы формы с возможностью редактирования,
то необходимо воспользоваться методом editable(): 

TableBuilder::make()
    ->editable()

# Сортируемые записи

Для сортировки строк в таблице воспользуйтесь методом sortable(): 

sortable(
    ?string $url = null,
    string $key = 'id',
    ?string $group = null
)
  • $url - url-обработчика,
  • $key - ключ элемента,
  • $group - группировка.
TableBuilder::make()
    ->sortable(
        url: '/update_indexes_endpoint',
        key: 'id',
        group: 'nested'
    )
Title Text
Value 1 Value 2
Value 3 Value 4

# Отображение колонок

Можно предоставить пользователям самостоятельно определять какие колонки отображать в таблице, с сохранением выбора. Для этого необходимо воспользоваться методом columnSelection(). 

columnSelection(string $uniqueId = '')
  • $uniqueId - уникальное Id таблицы для сохранения выбора отображаемых колонок.
TableBuilder::make()
    ->fields([
        Text::make('Title'),
        Text::make('Text')
    ])
    ->columnSelection('unique-id')
Title Text
Value 1 Value 2
Value 3 Value 4

Если необходимо исключить поля из выбора, то воспользуйтесь методом columnSelection() 

public function columnSelection(bool $active = true)
TableBuilder::make()
    ->fields([
        Text::make('Title')
            ->columnSelection(false),
        Text::make('Text')
    ])
    ->columnSelection('unique-id')
Title Text
Value 1 Value 2
Value 3 Value 4
Дополнительно
FormBuilder
Дополнительно
CardsBuilder