Filament•6mo ago

How to display tables with actions inside infolist builder ?

Hello everone, I would like to ask on how you display table using infolist builder. As for my implementation, I use custom livewire component and build table inside that component and pass data parameters like the columns , query and actions. I was able to display the table. but the issue occur when I click the action, it throw the exception that query is empty, given I was able to display the table data, I never expect my query to empty. Any Ideas?

15 Replies

LeandroFerreira•6mo ago

could you share the code?

Gerald AfableOP•6mo ago

Here for my livewire component.

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

    protected $columns = [];

    protected Builder | Closure | null $query = null;
    protected  Closure | null $modifyQueryUsing = null;
    public ?string  $heading;

    protected $actions = [];


    public function mount(
        array $columns = [],
        array $actions = [],
        Builder | Closure | null $query = null,
        Closure | null $modifyQueryUsing,
    ) {
        $this->columns = $columns;
        $this->actions = $actions;
        $this->query = $query;
        $this->modifyQueryUsing = $modifyQueryUsing;
    }

    public function render()
    {
        return view('livewire.table-entry');
    }

    // getters
    public function table(Table $table): Table
    {
        $table
            ->heading($this->heading)
            ->query($this->getQuery())
            ->columns($this->getColumns())
            ->actions($this->getActions());

        if ($this->modifyQueryUsing) {
            $table->modifyQueryUsing($this->modifyQueryUsing);
        }

        return $table->paginated(false);
    }
}

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

    protected $columns = [];

    protected Builder | Closure | null $query = null;
    protected  Closure | null $modifyQueryUsing = null;
    public ?string  $heading;

    protected $actions = [];


    public function mount(
        array $columns = [],
        array $actions = [],
        Builder | Closure | null $query = null,
        Closure | null $modifyQueryUsing,
    ) {
        $this->columns = $columns;
        $this->actions = $actions;
        $this->query = $query;
        $this->modifyQueryUsing = $modifyQueryUsing;
    }

    public function render()
    {
        return view('livewire.table-entry');
    }

    // getters
    public function table(Table $table): Table
    {
        $table
            ->heading($this->heading)
            ->query($this->getQuery())
            ->columns($this->getColumns())
            ->actions($this->getActions());

        if ($this->modifyQueryUsing) {
            $table->modifyQueryUsing($this->modifyQueryUsing);
        }

        return $table->paginated(false);
    }
}

this is how I use it in infolist builder

Livewire::make(TableEntry::class, function ($state) {
    $product = $state;
    return [
         'heading' => 'Components',
         'columns' => [
            Tables\Columns\TextColumn::make('component.name')->label('Name'),
            Tables\Columns\TextColumn::make('board.code')->label('Board'),
            Tables\Columns\TextColumn::make('qty_per_set')->label('Qty/Set')
                    ->formatStateUsing(fn ($state) => $state * $product->qty),
        ],
        'query' => ComponentProduct::query(),
        'actions' => [
            Tables\Actions\Action::make('jo')
                ->label('Create JO')
                ->button()
        ],
        'modifyQueryUsing' => fn (Builder $query) => $query->whereBelongsTo($state->product)
    ];
})

Livewire::make(TableEntry::class, function ($state) {
    $product = $state;
    return [
         'heading' => 'Components',
         'columns' => [
            Tables\Columns\TextColumn::make('component.name')->label('Name'),
            Tables\Columns\TextColumn::make('board.code')->label('Board'),
            Tables\Columns\TextColumn::make('qty_per_set')->label('Qty/Set')
                    ->formatStateUsing(fn ($state) => $state * $product->qty),
        ],
        'query' => ComponentProduct::query(),
        'actions' => [
            Tables\Actions\Action::make('jo')
                ->label('Create JO')
                ->button()
        ],
        'modifyQueryUsing' => fn (Builder $query) => $query->whereBelongsTo($state->product)
    ];
})

LeandroFerreira•6mo ago

instead of this ->query($this->getQuery()), try to add your model in the query ->query(YourModel::query())

Gerald AfableOP•6mo ago

I am making the TableEntry Dynamic like not specific to every model, so I can reuse it in different pages,

LeandroFerreira•6mo ago

ok, but does it work?

Gerald AfableOP•6mo ago

yeap, my only problem is the action

LeandroFerreira•6mo ago

I mean, YourModel::query() works with action?

Gerald AfableOP•6mo ago

here is the sample image

Gerald AfableOP•6mo ago

I already added it here,

LeandroFerreira•6mo ago

same error when you click in the action?

Gerald AfableOP•6mo ago

yes yes, when I try to dump the query before the table is return it become null, when action is click it calling again the table(Table $table) function, but my livewire properties reset to default values,

LeandroFerreira•6mo ago

yes.. I've never tried this way before, but if you create a mini repo in the github reproducing this issue, I can take a look

Gerald AfableOP•6mo ago

yep yep will do,

Gerald AfableOP•6mo ago

Hi @Leandro Ferreira here is repo you request https://github.com/agcodex01/table-entry where you can review the code. Thanks 🙂

GitHub

GitHub - agcodex01/table-entry: Filament table entry

Filament table entry. Contribute to agcodex01/table-entry development by creating an account on GitHub.

LeandroFerreira•6mo ago

ok, I'll have a look ✌️

Gaming

Programming

How to display tables with actions inside infolist builder ?