Filament•3mo ago

Can I use a filament table outside of Filament directories?

I love Filament so much that I want to use its Table feature in another part of my code. This code has nothing to do with Filament. Because this is not a Filament Resource, I don't know how to invoke a Table and feed it headers, columns, etc, as I would in a traditional Resource. Is this possible to do, or must Tables, with their magical properties, live in a typical Resource PHP file under the Filament directory structure?

33 Replies

awcodes•3mo ago

All the packages can be used outside of panels. Just follow the getting started guides on each package in the docs. Just skip the composer install parts since you already have the packages installed.

Blackpig•3mo ago

https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component

Adding a table to a Livewire component - Table Builder - Filament

StricksOP•3mo ago

@awcodes Fantasic - just what I need - thanks! I saw that in the docs, but ignored it as I thought it was for adding a LiveWire "component" which I misunderstood to be fiddling around with LiveWire itself. @awcodes I've followed the instrucitons, but I'm getting this error. Target [Filament\Tables\Contracts\HasTable] is not instantiable while building [Filament\Tables\Table]. I am using a model called Family as you can see referenced. I have my blade set up just as the docs advised, but my guess is the error is in the use statements below. My Route is Route::get('/TestTable', [TestTable::class, 'table']); My code in app/Livewire/TestTable.php looks like this. Any clues on this error?

<?php

namespace App\Livewire;

use App\Models\Family;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class TestTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        return $table
            ->query(Family::query())
            ->columns([
                TextColumn::make('name'),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ]);
    }

    public function render(): View
    {
        return view('livewire.test-table');
    }
}

<?php

namespace App\Livewire;

use App\Models\Family;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class TestTable extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        return $table
            ->query(Family::query())
            ->columns([
                TextColumn::make('name'),
            ])
            ->filters([
                // ...
            ])
            ->actions([
                // ...
            ])
            ->bulkActions([
                // ...
            ]);
    }

    public function render(): View
    {
        return view('livewire.test-table');
    }
}

awcodes•3mo ago

Are you using full page livewire Your class looks ok to me.

StricksOP•3mo ago

Thanks for reviewing my code. I'm not using a full page, and I'd prefer not to, but I could if needed. Have you ever seen that error? There's not much on Google about it.

awcodes•3mo ago

It’s a weird error and I’m not sure what it’s saying. I wonder if it’s a conflict with your controller method name.

StricksOP•3mo ago

Hmmm, good call. I'll test that. I removed all Controllers (except for the default one which is pretty much empty). Still no luck. I'll keep messing around with it.

awcodes•3mo ago

Would have to see your layout, blade and livewire blade file at this point. Sorry. Just hard to visualize all the piece with the limited code shared.

StricksOP•3mo ago

Understood. I will make the repo public again if that helps.

awcodes•3mo ago

Sure, I’ll look it over if you want to share it

StricksOP•3mo ago

Thanks - give me 3 min

StricksOP•3mo ago

https://github.com/dstrickler/nhadbv2-filament I put the app/http/controller/reportwriter code back in there as it didn't make a difference removing it (I suppose I could have stashed it). But the repo should have everything in it. TIA for the help!

GitHub

GitHub - dstrickler/nhadbv2-filament

Contribute to dstrickler/nhadbv2-filament development by creating an account on GitHub.

StricksOP•3mo ago

Oh, and the liveware compoment is called TestTableDWS.php now, just to make it unique. If it matters, this is on a Mac, running the latest version of Herd Pro as the backend.

awcodes•3mo ago

Ok, for starters your report writer has the wrong namespace and it’s also extending Resource instead of controller. Resource is specific to filament panels, and is not a controller so you can’t use it that way. The controller method should return a view and in that view you output the livewire component that has your table stuff.

StricksOP•3mo ago

Thanks for the tip. That code has a lot of doodling, so I decided to start a new, clean project. I installed Laravel , Filament. and laravel-ignition for debugging. The code is here: https://github.com/dstrickler/ReportWriter I created a LiveWire compoment and configured it exactly like the docs said, swapping the Product model for my Family model. I couldn't get the LiveWre working with the Route (see below), so I tried creating a Controller that referenced the Blade the LiveWire uses and built a Route to the Controller, but that didn't work either.
The old error has disappeared in this new project. Now, when I call the Livewire directly with Route::get('/report', \App\Livewire\Report::class); in my web.php file, I get a 500 error from the browser. Should the route command directly call the LiveWire file shown above? Or should it call a Controller that just displays the View, which has the @LiveWire() command in it (I've tried both)? The documentation is unclear. As a hint, the error, which doesn't show in the logs, is inside of the blade file. Removing the @LiveWire('report) line removes the 500 error, but obviously doesn't display the table. TIA for your help. I feel I'm missing something very basic in concept, as this code new project is so simple.

GitHub

GitHub - dstrickler/ReportWriter

Contribute to dstrickler/ReportWriter development by creating an account on GitHub.

Dennis Koch•3mo ago

I get a 500 error from the browser.

What does the error say? If you use a controller, it should use the same Blade view as the Livewire file. If you use the component directly, it shouldn't contain @livewire() again

StricksOP•3mo ago

It's a classic 500 error. See enclosed pic. For simplicity, I'll directly call the LiveWire component now, using Route::get('/report', \App\Livewire\Report::class); in my web.php, and my Report class is right out of the docs at https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component I now get an eror Livewire page component layout view not found: [components.layouts.app] which seems deep in the LiveWire code. Since I think I'm missing something fundamentally wrong, is there a code example I could look at besides the docs that shows this working?

Adding a table to a Livewire component - Table Builder - Filament

StricksOP•3mo ago

Also, I did not install LiveWire, as I assumed that it was included with Filament. Should I try and install it? UPDATE: I just installed it, and it doesn't seem to make a difference, but I'm still testing. I also ran php artisan livewire:publish --config @Dennis Koch Thanks for helping me. If it helps, this is my blade fiile. Very simple.

<!-- livewire('report') -->

<?PHP
// For debugging only
if (isset($this) == FALSE) {
    echo "\$this value is undefined in the Blade";
    exit();
}
?>

<div>
    You are in the report.blade file.
    {{ $this->table }}
</div>

<!-- livewire('report') -->

<?PHP
// For debugging only
if (isset($this) == FALSE) {
    echo "\$this value is undefined in the Blade";
    exit();
}
?>

<div>
    You are in the report.blade file.
    {{ $this->table }}
</div>

Debugged this to the point where I found out it's missing file /resources/views/components/layouts/app.blade.php. I created a blank file, and now there is no error, but it's not loading anything else.

awcodes•3mo ago

That file should contain all of your base html layout. Look up full page components in the livewire docs.

StricksOP•3mo ago

Ah, I didn't realize it needed more for testing. Thanks for the tip! @awcodes The base html layout helped a lot - thanks. No crashing errors now, but I'm seeing a giant (and I don't use that term lightly) black "X" on the screen, and "No families" in normal size print on the bottom left. I assume the "families" reference is to my table families and my model 'family' in this code in the Livewire component. Any clues on what's causing the "X"?

class Report extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        return $table
            ->query(Family::query())
            ->columns([
                TextColumn::make('name'),
            ])
        ...

class Report extends Component implements HasForms, HasTable
{
    use InteractsWithTable;
    use InteractsWithForms;

    public function table(Table $table): Table
    {
        return $table
            ->query(Family::query())
            ->columns([
                TextColumn::make('name'),
            ])
        ...

StricksOP•3mo ago

@awcodes regarding your reference to a "full page component", I've found it on https://livewire.laravel.com/docs/components#full-page-components but it looks even more complex. I'm trying to get this as simple as possible so I can grasp it, and move up to more complex setups. Would it be possible to use the examples on https://livewire.laravel.com/docs/quickstart ?

Laravel

Quickstart | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Laravel

Components | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

awcodes•3mo ago

It’s as simple as including the liverwire and filament scripts and styles directives on what ever you base layout is. As long as you hook it all up correctly it will work.

StricksOP•3mo ago

Ok. I’ll look for full step-by-step instructions in the morning. Once I get this working and start to understand this, I’m going to talk to the filament people about getting a beginners guide going. Their beginners guide is way too advanced if you’ve never done this stuff before. 🙂

awcodes•3mo ago

I think that is fair. But using filament carries with it an understanding of the underlying stacks too. Ie laravel, livewire, alpine and tailwind. But certainly willing to help any new comers.

StricksOP•3mo ago

Yup, and it should. I jumped in too quick and it shows 🙂

StricksOP•3mo ago

I think I found the "docs" I was looking for: https://livewire.laravel.com/screencast/getting_started/installation When I looked at them, these videos were broken (wouldn't play), so I moved on to the written docs. While the guy talks fast, he explains things really well, and they're easy to follow. I'll watch the course. Also note the giant "X" in my question above seems to be not rendering Tailwind in the view. My code still complains that Family isn't a valid table, but it also contains roughly the same way as User. When I figure that out and post it back here.

Laravel

Installation Screencast | Laravel

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

StricksOP•3mo ago

Solved Tailwind install by opening some config files and saving them back to disk. Sounds like something was corrupted. The "X" I mentioned before is now formatted and looks like the enclosed pic. Switching the app/livewire/report.php file to use ->query(User::query()) instead of ->query(Family::query()) works well. I'm close to a solution.

StricksOP•3mo ago

I'm not sure why, but running this command solves the missing Tailwind, but it did. npm run build Solved: Ugh! When I created this new project for debugging this, I changed the config/database.php, but the /env.php file's database settings overriding it. Thus my "No families" error truly meant it couldn't find the table Families. Thanks for the help everyone!

Dennis Koch•3mo ago

Tailwind compiles the CSS based on the classes you used. So every time you add new ones, you need to rebuild your CSS file

StricksOP•3mo ago

Thanks @Dennis Koch - that explains what I'm seeing. I'll make sure do that.

StricksOP•2mo ago

@Dennis Koch, I'm still struggling with some CSS on my test project above. You can see from the image that the footer center with the "Per Page" has strange "down arrow" symbols, but it does work if you pull down the menu and choose a new value. Also, the pagination works.
The search box also doesn't work. It allows typing in it and shows that I've chosen the filter, but it doesn't reduce the record set based on the filter. I'm not sure if this is related to the above issue. To troubleshoot this, I've: 1. Run npm run dev 2. Made sure the app.blade.php has the @filamentStyles() and @filamentScripts() directives in it. 3. Restarted Herd in case there was some caching issue and ran a php artisan optimize:clear. 4. Check the log and found no errors. The code is at https://github.com/dstrickler/ReportWriter Any ideas? I feel like I've tangled some CSS directives or something.

GitHub

GitHub - dstrickler/ReportWriter

Contribute to dstrickler/ReportWriter development by creating an account on GitHub.

awcodes•2mo ago

app.blade.php is not in the location that livewire is looking for it so you also need to include the livewire scripts and styles directives.

StricksOP•2mo ago

Oooo - good catch - thanks. So if my dir looks like the image below, where should the app.blade.php file with the directives go? I have seen references to both locations. The one under ../views/layouts is blank. The one under ../views/components/layouts has the base HTML (eg. <HTML>, <BODY>, etc) with the directives.

Gaming

Programming

Can I use a filament table outside of Filament directories?