Return livewire component from column

[GermanZun]

Hi! How can I return a Livewire component for a column? I'm trying to do this.

 Column::make(__('report/registeredPlayers.status'), 'status')
                ->view('livewire.reports.toggle') ,

with this component:

<?php

namespace App\Http\Livewire\Reports;

use Livewire\Component;

class Toggle extends Component
{
    public function changeStatus(){
        debugbar()->info("hi");
    }


    public function render()
    {
        return view('livewire.reports.toggle');
    }
}

and this view:

<div>
    <input wire:change="changeStatus" type="checkbox"
           class="js-switch"/>
</div>

But it keeps looking for the methods in the parent component

Unable to call component method. Public method [changeStatus] not found on component: [report.registered-player.report]

thanks!

[lrljoe]

You can use a ComponentColumn type for this, take a look at the docs as there's a good example there.

[GermanZun]

i think its made for blade components, not for livewire components. I tried it but it looks on the components folder, not in livewire.

[lrljoe]

How odd, I think I may be thinking of one of my development branches that supports loading Livewire components I'm that way, I'll have to take a proper look later. Is it just a toggle that you're trying to do, or do you have other use cases? There's cleaner approaches for a toggle that don't require loading components in like that. Remember that if you have 100 items in view, then that'd be 100 extra Livewire Components that need to load, render etc, which will be memory heavy. Joe.

…

________________________________ From: GermanZun ***@***.***> Sent: Monday, April 24, 2023 4:56:23 PM To: rappasoft/laravel-livewire-tables ***@***.***> Cc: Joe McElwee ***@***.***>; Comment ***@***.***> Subject: Re: [rappasoft/laravel-livewire-tables] Return livewire component from column (Discussion #1172) i think its made for blade components, not for livewire components. I tried it but it looks on the components folder, not in livewire. — Reply to this email directly, view it on GitHub<#1172 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AZATUORZDYWG2NOMAMBQ7NDXC2PCPANCNFSM6AAAAAAXHII33E>. You are receiving this because you commented.Message ID: ***@***.***>

[DamianGosciewski]

I needed same functionality and I've done it by creating custom column type (extending Column). It looks like that:

This is how I add this:

public function columns(): array
{
    return [
        // ...
        LivewireComponentColumn::make('Status', 'status')
            ->component('helpers::toggle-button')
            ->attributes(fn ($value, $row, Column $column) => [
                'model' => $row,
                'field' => $column->getFrom(),
            ]),
    ];
}

Custom column code:

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\HtmlString;
use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Traits\Configuration\ComponentColumnConfiguration;
use Rappasoft\LaravelLivewireTables\Views\Traits\Helpers\ComponentColumnHelpers;
use Illuminate\Support\Str;

class LivewireComponentColumn extends Column
{
    use ComponentColumnHelpers,
        ComponentColumnConfiguration;

    protected string $livewireComponent;

    public function component(string $livewireComponent): self
    {
        if (Str::startsWith($livewireComponent, 'livewire:')) {
            $livewireComponent = substr($livewireComponent, 9);
        }

        $this->livewireComponent = $livewireComponent;

        return $this;
    }

    public function getContents(Model $row)
    {
        if ($this->isLabel()) {
            throw new DataTableConfigurationException('You can not use a label column with a component column');
        }
        
        $attributes = [];
        $value = $this->getValue($row);

        if ($this->hasAttributesCallback()) {
            $attributes = call_user_func($this->getAttributesCallback(), $value, $row, $this);

            if (! is_array($attributes)) {
                throw new DataTableConfigurationException('The return type of callback must be an array');
            }
        }

        $implodedAttributes = collect($attributes)->map(function ($value, $key) {
            return ':' . $key . '="$' . $key . '"';
        })->implode(' ');

        return new HtmlString(Blade::render(
            '<livewire:dynamic-component :component="$component" ' . $implodedAttributes . ' :wire:key="'. $row->id . '" />',
            [
                'component' => $this->livewireComponent,
                ...$attributes,
            ],
        ));

    }
}

It's just for a few items in table, so memory is not a problem for me and I already had livewire toggle component done.

It also works with nwidart modules package by typing module name first, like: ModuleName::toggle

@lrljoe What other 'cleaner' approach would you suggest to use?

[lrljoe]

@DamianGosciewski I have a toggle Column in testing at the moment.

Very happy for you to issue a PR for a Livewire component Column though!

I'm planning a minor release for bug fixes and minor tweaks over next couple of days.

Then there's a slightly larger one including the ToggleColumn, but nothing that'll impact anything you'd be working on for this.

Appreciate the input!

[lrljoe]

There's also the consideration of LW3 and how it handles child components more smoothly (being able to wire:model them), which will be a big win.
As will being able to reposition the component in the DOM on the fly

[DamianGosciewski]

Haven't heard of v3 changes yet, I'll look into it, thanks.

[lrljoe]

Full changes will be announced later this month when it is released at Laracon. However, the key items that are important for this include:

• Being able to wire:model on a child component
• Being able to place a child component elsewhere in the DOM more dynamically.

[lrljoe]

I'm presently fixing the Livewire 3 approach, as well as adding the toggleColumn into this package v3

[lrljoe]

I will look at including something similar for v3 using the new LW3 methods, once I or someone else fixes them that is!

[lrljoe]

I've migrated this as-is into the V3 core package, but have yet to write up docs etc, and there are a couple of bits that do need a tweak.

I'm hoping to get all of that done next weekend.

[NatanTechofNY]

@lrljoe @DamianGosciewski I love the solution you came up with but Livewire doesn't like it.
Multiple root elements detected. This is not supported. See docs for more information
Any ideas on how to resolve this properly?

[lrljoe]

So, the official LivewireComponentColumn isn't ready yet, we haven't written the tests or docs for it, so it's not officially supported

The thing to keep in mind for a Livewire Component, particularly when you're considering tables etc is, the performance demand. Having 10 small components on a page, while not ideal, isn't the end of the world.

But allow your user to load 50, 100, or 250 rows in your table, and there'll definitely be a large performance impact, as not only does Livewire need to keep track of those individual Livewire Components, and hydrate/dehydrate them, but also, the user's browser needs to run large chunks of code repeatedly. Add into that, pagination, and it becomes quite a painful experience!

I'm looking at various options here, including some dynamic component loading etc, so that a single component could look after multiple rows, but it's quite a way off being done.