I'm currently available for full time hire! Inquire Here

Laravel Livewire Tables Documentation
Sponsors Demo Support

Edit

🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.

This is the documentation for v3. You can switch versions in the menu at the top. Check your current version with the following command:

composer show rappasoft/laravel-livewire-tables

Actions (beta)

Actions is a beta feature, that allows for the creation of Action Buttons that appear above the toolbar. These are ideal for common Actions that do not impact existing records, such as a "Create", "Assign", "Back" buttons.

This is NOT recommended for production use at this point in time.

Component Available Methods

setActionWrapperAttributes

This is used to set attributes for the "div" that wraps all defined Action Buttons:

1public function configure(): void
2{
3    $this->setActionWrapperAttributes([
4        'class' => 'space-x-4'
5    ]);
6}

setActionsInToolbarEnabled

Displays the Actions within the Toolbar. Default is displaying above the Toolbar.

1public function configure(): void
2{
3    $this->setActionsInToolbarEnabled();
4}

setActionsInToolbarDisabled

Displays the Actions above the Toolbar, default behaviour

1public function configure(): void
2{
3    $this->setActionsInToolbarDisabled();
4}

setActionsLeft

Displays the Actions justified to the left

1public function configure(): void
2{
3    $this->setActionsLeft();
4}

setActionsCenter

Displays the Actions justified to the center

1public function configure(): void
2{
3    $this->setActionsCenter();
4}

setActionsRight

Displays the Actions justified to the right

1public function configure(): void
2{
3    $this->setActionsRight();
4}

actions()

Define your actions using the actions() method:

1public function actions(): array
2{
3    return [
4        Action::make('View Dashboard')
5        ->setRoute('dashboard'),
6    ];
7}

Button Available Methods

setLabelAttributes

Set custom attributes for an Action Label. At present it is recommended to only use this for "class" and "style" attributes to avoid conflicts.

By default, this replaces the default classes on the Action Label, if you would like to keep them, set the default flag to true.

1Action::make('Dashboard')
2    ->setRoute('dashboard')
3    ->wireNavigate()
4    ->setLabelAttributes([
5        'class' => 'text-xl',
6        'default' => true,
7    ]),

setActionAttributes

setActionAttributes is used to pass any attributes that you wish to implement on the "button" element for the action button. By default it will merge with the default classes.

You can set "default-styling" and "default-colors" to false to replace, rather than over-ride either default-styling or default-colors.

 1public function actions(): array
 2{
 3    return [
 4        Action::make('View Dashboard')
 5            ->setActionAttributes([
 6                'class' => 'dark:bg-blue-500 dark:text-white dark:border-blue-600 dark:hover:border-blue-900 dark:hover:bg-blue-800',
 7                'default-colors' => false, // Will over-ride the default colors
 8                'default-styling' => true // Will use the default styling
 9            ]),
10    ];
11}

setIcon

setIcon is used to set an icon for the action button

1public function actions(): array
2{
3    return [
4        Action::make('Edit Item')
5        ->setIcon("fas fa-edit"),
6    ];
7}

setIconAttributes

setIconAttributes is used to set any additional attributes for the Icon for the action button

1public function actions(): array
2{
3    return [
4        Action::make('Edit Item')
5        ->setIcon("fas fa-edit")
6        ->setIconAttributes(['class' => 'font-4xl text-4xl']),
7    ];
8}

setIconLeft

setIconLeft is used to prepend the Icon to the Text (Non-Default Behaviour)

1public function actions(): array
2{
3    return [
4        Action::make('Edit Item')
5        ->setIcon("fas fa-edit")
6        ->setIconAttributes(['class' => 'font-4xl text-4xl'])
7        ->setIconLeft(),
8    ];
9}

setIconRight

setIconRight is used to append the Icon to the Text (Default Behaviour)

1public function actions(): array
2{
3    return [
4        Action::make('Edit Item')
5        ->setIcon("fas fa-edit")
6        ->setIconAttributes(['class' => 'font-4xl text-4xl'])
7        ->setIconRight(),
8    ];
9}

setRoute

Used for non-wireable butons, to set the route that the action button should take the user to upon clicking.

1public function actions(): array
2{
3    return [
4        Action::make('Dashboard')
5        ->setRoute('dashboard')
6    ];
7}

wireNavigate

Used in conjunction with setRoute - makes the link "wire:navigate" rather than default behaviour

1public function actions(): array
2{
3    return [
4        Action::make('Dashboard')
5        ->setRoute('dashboard')
6        ->wireNavigate()
7    ];
8}

setWireAction

1public function actions(): array
2{
3    return [
4        Action::make('Create 2')
5        ->setWireAction("wire:click")
6    ];
7}

setWireActionParams

Specify the action & parameters to pass to the wire:click method

1public function actions(): array
2{
3    return [
4        Action::make('Create 2')
5        ->setWireAction("wire:click")
6        ->setWireActionParams(['id' => 'test']),
7    ];
8}

setWireActionDispatchParams

Use $dispatch rather than a typical wire:click action

1public function actions(): array
2{
3    return [
4        Action::make('Create 2')
5        ->setWireAction("wire:click")
6        ->setWireActionDispatchParams("'openModal', { component: 'test-modal' }"),
7    ];
8}

setView

This is used to set a Custom View for the Button

1public function actions(): array
2{
3    return [
4        Action::make('Edit Item')
5        ->setView("buttons.edit"),
6    ];
7}

Extending

You can extend the Base Action class which can be a useful timesaver, when you wish to re-use the same look/feel of an Action, but wish to set a different route (for example). You can set any defaults in the __construct method, ensuring that the parent constructor is called first!

 1use Rappasoft\LaravelLivewireTables\Views\Action;
 2 
 3class EditAction extends Action
 4{
 5    public function __construct(?string $label = null)
 6    {
 7        parent::__construct($label);
 8        $this
 9            ->setActionAttributes([
10                'class' => 'dark:bg-blue-500 dark:text-white dark:border-blue-600 dark:hover:border-blue-900 dark:hover:bg-blue-800',
11                'default-colors' => false,
12                'default-styling' => true
13            ])
14            ->setIcon("fas fa-edit")
15            ->setIconAttributes([
16                'class' => 'font-4xl text-4xl'
17            ]);
18    }
19}

You may define a Custom View to be used via either the setView method, or by defining the view directly in your class.

1protected string $view = 'buttons.edit-action';