Filament•2y ago

Use Table-Widget in Livewire Component / Outside Admin Panel

I'm using a table widget to display data inside the dashboard. This data should also be displayed in the public frontend (outside the admin panel). What's the best way to display this table widget there without duplicating the whole class? Everything is exactly the same. Thank you!

19 Replies

Patrick Boivin•2y ago

Not sure how others do it but I think adding static methods to you resource class can be a simple solution :

public static function getTableColumns(): array
{
    return [ ... ];
}

public static function table(Table $table): Table
{
    return $table
        ->columns(static::getTableColumns());
}

public static function getTableColumns(): array
{
    return [ ... ];
}

public static function table(Table $table): Table
{
    return $table
        ->columns(static::getTableColumns());
}

Sorry you're using a widget but the idea still applies

ProdexOP•2y ago

so you mean calling the static class inside the livewire component as well? I think it expects an array or I didn't quite understand the approach yet can you explain it more? Currently I have a widget class and my livewire component

Patrick Boivin•2y ago

Yeah, the idea is to define your columns in one place (e.g. a static method) and call it for each table, instead of duplicating the config

    protected function getTableColumns(): array
    {
        return MyResource::getTableColumns();
    }

    protected function getTableColumns(): array
    {
        return MyResource::getTableColumns();
    }

Hope that makes sense...

ProdexOP•2y ago

okay, but there's no way to get the entire widget rendered outside the admin panel? Background: Even the defined actions and query should be the same. Thank you already!

Patrick Boivin•2y ago

Good point, haha! As far as I know, a widget is basically a simple livewire component... you may be able to just render it in a front-end view with @livewire()

ProdexOP•2y ago

in the source code of filament I found the following table-widget.blade.php view:

<x-filament::widget class="filament-widgets-table-widget">
    {{ $this->table }}
</x-filament::widget>

<x-filament::widget class="filament-widgets-table-widget">
    {{ $this->table }}
</x-filament::widget>

But I don't how to get $this->table or what to replace it with.

Patrick Boivin•2y ago

Not sure you need to change that... how are you adding the component on your front-end page?

ProdexOP•2y ago

my idea was to create a new livewire component and then somehow implement the widget there so $this->table would be available. But I never done anything like this in filament before

Patrick Boivin•2y ago

The widget is already a livewire component. To use it in your front-end, I think you just need to register it manually in your AppServiceProvider, something like this:

    public function boot(): void
    {
        Livewire::component("my-custom-widget", MyCustomWidget::class);
    }

    public function boot(): void
    {
        Livewire::component("my-custom-widget", MyCustomWidget::class);
    }

Then @livewire('my-custom-widget') in your view

ProdexOP•2y ago

hm... okay I registered it, but if it's being used with @livewire() the server crashes with empty response 😅 But if I do something wrong inside the widget a exception gets thrown, so it does get through somehow...

Patrick Boivin•2y ago

I just tested it here, I'm able to use a table widget outside of the admin panel. Not sure where your error comes from. Check storage/logs/laravel.log

ProdexOP•2y ago

ah now it works, just had the wrong class. Thank you!!

Patrick Boivin•2y ago

Nice!

ProdexOP•2y ago

Okay to save some more duplicate code I decided to implement <x-filament::layouts.base> to my view so I don't have to create a new layout. It works fine but there's just one little thing that's missing: I implemented a custom theme for the admin panel (tailwind blue colors) and that's not recognized inside the base layout. Do you know how I can set this to the correct theme? Would be awesome!

Patrick Boivin•2y ago

Can you verify that your custom admin css is loaded on the front-end?

ProdexOP•2y ago

In the filament base layout component the css loads with this logic:

        @foreach (\Filament\Facades\Filament::getStyles() as $name => $path)
            @if (\Illuminate\Support\Str::of($path)->startsWith(['http://', 'https://']))
                <link rel="stylesheet" href="{{ $path }}" />
            @elseif (\Illuminate\Support\Str::of($path)->startsWith('<'))
                {!! $path !!}
            @else
                <link rel="stylesheet" href="{{ route('filament.asset', [
                    'file' => "{$name}.css",
                ]) }}" />
            @endif
        @endforeach

        @foreach (\Filament\Facades\Filament::getStyles() as $name => $path)
            @if (\Illuminate\Support\Str::of($path)->startsWith(['http://', 'https://']))
                <link rel="stylesheet" href="{{ $path }}" />
            @elseif (\Illuminate\Support\Str::of($path)->startsWith('<'))
                {!! $path !!}
            @else
                <link rel="stylesheet" href="{{ route('filament.asset', [
                    'file' => "{$name}.css",
                ]) }}" />
            @endif
        @endforeach

In the stylesheet in the HTML is this: http://localhost/filament/assets/app.css Inside the admin panel it's this: http://localhost/build/assets/filament.css so I don't know how filament handles the custom path internally, but it doesn't work for the frontend at the moment

Patrick Boivin•2y ago

Yeah... I don't think the core layouts are designed to be used outside of the admin but I feel like you're close to a working solution. Maybe this can be done in your Vite config?

ProdexOP•2y ago

I debugged through the code and it seems like that registerViteTheme doesn't get called, so it loads the default theme. By any chance, you do know why this is not being called outside the admin panel? It's registered in my AppServiceProvider as the docs said. ah, now I got it. I removed Filament::serving(function () {} so it always gets called.

Patrick Boivin•2y ago

Cool!

Gaming

Programming

Use Table-Widget in Livewire Component / Outside Admin Panel