Filament•17mo ago

Custom Reports using Filament Tables

I am trying to create views for reports. And in these view I am trying to load filament table with the report data. I tried creating a filament-page and load table but not able to do so due to the error Property [$table] not found on component:...

19 Replies

toeknee•17mo ago

It's a page so it won't have a table. Please read the table docs on how to add the table.

Vp•17mo ago

"I tried creating a filament-page and load table but not able to do so due to the error Property [$table] not found on component:" Like I said in other post, If you're going to do like this then you need to follow this https://filamentphp.com/docs/2.x/tables/getting-started#preparing-your-livewire-component

Kiran TimsinaOP•17mo ago

Okk! I loaded a form in a page so I assumed I can do the same for table too. My Bad.

Kiran TimsinaOP•17mo ago

I did this using livewire as suggested and I am able to load table. Is there a way I can bring the side nav bar too? My view looks pretty bad without the headers and navbar.

Vp•17mo ago

Send code please, it shouldn't break anything normally Did you create your page using this https://filamentphp.com/docs/2.x/admin/pages/getting-started#creating-a-page

Kiran TimsinaOP•17mo ago

class FlavorReport extends Component implements HasTable
{
    use InteractsWithTable;

    public function render()
    {
        return view('livewire.flavor-report');
    }

    protected function getTableQuery(): Builder
    {
        return Flavor::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')
        ];
    }
}

class FlavorReport extends Component implements HasTable
{
    use InteractsWithTable;

    public function render()
    {
        return view('livewire.flavor-report');
    }

    protected function getTableQuery(): Builder
    {
        return Flavor::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')
        ];
    }
}

The view is: <div> {{ $this->table }} </div>

Vp•17mo ago

class should extend 'Page' not component.. did you use this to create your page?

Kiran TimsinaOP•17mo ago

Creating page didn't work. So I created a livewire component instead using artisal make:livewire.

toeknee•17mo ago

You can do the same for the table, but I am assuming you didnt Can you provide the whole page code

Kiran TimsinaOP•17mo ago

<?php

namespace App\Filament\Pages;

use App\Models\Flavor;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Builder;


class FlavourReport extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.flavour-report';

    protected function getTableQuery(): Builder
    {
        return Flavor::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')
        ];
    }
}

<?php

namespace App\Filament\Pages;

use App\Models\Flavor;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Builder;


class FlavourReport extends Page
{
    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.flavour-report';

    protected function getTableQuery(): Builder
    {
        return Flavor::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')
        ];
    }
}

The view is: <div> {{ $this->table }} </div>

Kiran TimsinaOP•17mo ago

Error: https://flareapp.io/share/LPlE2V87

Flare

Property [$table] not found on component: [app.filament.pages.flavour-report] - The error occurred at http://backend.test/admin/flavour-report

Kiran TimsinaOP•17mo ago

@toeknee_iom This is the full code with error.

toeknee•17mo ago

So as per their error, you have not implemented tables. try:

<?php

namespace App\Filament\Pages;

use Filament\Tables;
use App\Models\Flavor;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Builder;


class FlavourReport extends Page implements Tables\Contracts\HasTable 
{
     
    use Tables\Concerns\InteractsWithTable; 

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.flavour-report';

    protected function getTableQuery(): Builder
    {
        return Flavor::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')
        ];
    }
}

<?php

namespace App\Filament\Pages;

use Filament\Tables;
use App\Models\Flavor;
use Filament\Pages\Page;
use Filament\Tables\Columns\TextColumn;
use Illuminate\Database\Eloquent\Builder;


class FlavourReport extends Page implements Tables\Contracts\HasTable 
{
     
    use Tables\Concerns\InteractsWithTable; 

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.flavour-report';

    protected function getTableQuery(): Builder
    {
        return Flavor::query();
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')
        ];
    }
}

Kiran TimsinaOP•17mo ago

Thanks @toeknee_iom . I was expecting that it won't require this as it does not require with form when building a filament page. I am able to show flavors here. Awesome! One last thing I want to achieve here is show a report (generated using many tables) instead of Flavor model. Here my $data variable is an array that I want to load as filament table like we would do using foreach().. in vanilla laravel blade. $report = (new ReportDashboardController)->cakeFlavorProduction(new Request()); $data = json_decode($report->getContent(), true)['data']; Is this possible?

toeknee•17mo ago

You can't manipulate tables data, you have to use the native render. However, you can use sushi and create a custom model to get the data instead of a model as per your request if I understand it correctly.

Kiran TimsinaOP•17mo ago

Got it! I think I can manipulate the table using a unique identifier for the eloquent model that I am using and fetching the row of data for that identifier using formatStateUsing. Thanks a tons @toeknee_iom @.valpuia You're a life saver!

toeknee•17mo ago

Great stuff! welcomes

Kiran TimsinaOP•17mo ago

Here's the code:

protected function getTableColumns(): array
    {
        $report = (new ReportDashboardController)->cakeFlavorProduction(new Request([
            'startDate' => '2023-01-01',
            'endDate' => '2023-01-31',
        ]));
        $res = json_decode($report->getContent(), true)['data'];

        return [
            TextColumn::make('name'),
            TextColumn::make('sales')->label('Sales')->formatStateUsing(function ($record) use ($res) {
                return collect($res)->firstWhere('id', $record->id)['pound'] ?? 0;
            })
        ];
    }

protected function getTableColumns(): array
    {
        $report = (new ReportDashboardController)->cakeFlavorProduction(new Request([
            'startDate' => '2023-01-01',
            'endDate' => '2023-01-31',
        ]));
        $res = json_decode($report->getContent(), true)['data'];

        return [
            TextColumn::make('name'),
            TextColumn::make('sales')->label('Sales')->formatStateUsing(function ($record) use ($res) {
                return collect($res)->firstWhere('id', $record->id)['pound'] ?? 0;
            })
        ];
    }

Adnan Yalahow•10mo ago

hi friend i would love to see how you didi this can u show more code like the view and also the controller please help me i want to show an array of data to show in the table

Gaming

Programming

Custom Reports using Filament Tables