Modals

This feature is available in v1.8 and above

The package itself does not provide any modal functionality, but it does give you a placeholder view to put your modal code in the context of the table component. This way you can control the visibility of your modal from the table component instead of having to wrap it in a parent component.

You can load your modal code using this component method:

1public function modalsView(): string
2{
3    return 'table.includes.modals';
4}

Use the path to your view in your system.

The HTML will be placed right after the table.

#Example: Opening a modal on row click

Here's an example of opening a modal on row click and passing some data.

#Add properties to manage the modal.

1// To show/hide the modal
2public bool $viewingModal = false;
3 
4// The information currently being displayed in the modal
5public $currentModal;

#Enable the row click but don't return a URL.

This step is technically optional, but without it, you will get no pointer cursor or highlight of the row on hover.

1public function getTableRowUrl(): string
2{
3    return '#';
4}

#Add a custom attribute with a wire:click:

1public function setTableRowAttributes($row): array
2{
3    return ['wire:click.prevent' => 'viewModal('.$row->id.')'];
4}

Here I've added method to call with the selected row that will display our modal.

#Implement the method to manage your modal:

1 public function viewHistoryModal($modelId): void
2{
3    $this->viewingModal = true;
4    $this->currentModal = MyModel::findOrFail($modelId);
5}

#Add a method to reset the modal:

1public function resetModal(): void
2{
3    $this->reset('viewingModal', 'currentModal');
4}

#Add your modal markup using the modalsView method:

1public function modalsView(): string
2{
3    return 'admin.livewire.my-model.includes.modal';
4}

For our example modal, I'm going to use a Jetstream component:

 1<x-jet-dialog-modal wire:model="viewingModal">
 2    <x-slot name="title">
 3        @lang('My Modal')
 4    </x-slot>
 5 
 6    <x-slot name="content">
 7        {{ $currentModal is available here }}
 8    </x-slot>
 9 
10    <x-slot name="footer">
11        <x-jet-secondary-button wire:click="resetModal" wire:loading.attr="disabled">
12            @lang('Done')
13        </x-jet-secondary-button>
14    </x-slot>
15</x-jet-dialog-modal>

Now when you click a row, a modal will appear with the given information for the row, and when you click away or hit the Done button, the information will be reset and the modal will disappear.

#Working with links on clickable rows that display a modal:

See: Working with links on clickable rows