Filament•4w 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•4w ago

could you share the code?

Agcodex•4w 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•4w ago

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

Agcodex•4w ago

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

LeandroFerreira•4w ago

ok, but does it work?

Agcodex•4w ago

yeap, my only problem is the action

LeandroFerreira•4w ago

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

Agcodex•4w ago

here is the sample image

Agcodex•4w ago

I already added it here,

LeandroFerreira•4w ago

same error when you click in the action?

Agcodex•4w 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•4w 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

Agcodex•4w ago

yep yep will do,

Agcodex•4w 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•4w ago

ok, I'll have a look ✌️

Gaming

Programming

How to display tables with actions inside infolist builder ?