update the columns and data in the filamentphp table when a button is clicked from the view

Question

I am using filamentphp in a project. I want to update the columns and data when a button is clicked from my view

Here is what I have tried so far

ListFines.php page

class ListFines extends ListRecords implements HasTable
{
    protected static string $resource = FineResource::class;

    protected static string $view = 'filament.resources.fine-resource.pages.list-fines';

    protected function getActions(): array
    {
        return [
            Actions\CreateAction::make(), //adds create button
        ];
    }

    public function updateData(){
        $this->getTableQuery(true);
    }

    protected function getTableQuery($event = false): Builder
    {
        if($event){
            return Fine::where("amount", ">", "50");
        }else{
            return Fine::query();
        }
    }

    protected function getTableColumns(): array
    {
        return [

            Tables\Columns\TextColumn::make("id")
                ->label(__("ID")),

            Tables\Columns\TextColumn::make('users.first_name')
                ->label(__('First Name'))
                ->searchable()
                ->sortable(),
        ];
    }

}

list-fines.blade.php

<x-filament::page>
    <div>
        <button wire:click="updateData" class="bg-chptr-green hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
            {{__("Update Data")}}
        </button>
    {{ $this->table }}
</x-filament::page>

When the button is clicked, I want to update the query to load different data(from different table) and the add new columns to the table.

Right now, when I click on the Update Data button, nothing happens. But I see by dd inside the getTableQuery function that $event is true when the button is clicked but nothing happens. How I can update the query and the table columns?

Here is my main resource page

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\FineResource\Pages;
use App\Models\Fine;
use App\Models\User;
use Filament\Forms;
use Filament\Pages\Actions\DeleteAction;
use Filament\Resources\Form;
use Filament\Resources\Resource;
use Filament\Resources\Table;
use Filament\Tables;
use Illuminate\Database\Eloquent\Builder;

class FineResource extends Resource
{ 
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Select::make("user_id")
                    ->label("Name")
                    ->relationship("users", "name")
                    ->multiple()
                    ->required()
                    ->preload(),
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('users.first_name')
                    ->label(__('First Name'))
                    ->searchable()
                    ->sortable(),
            ])
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListFines::route('/'),
        ];
    }
}

Answer 1

i found solution

<?php namespace App\Http\Livewire;

use Filament\Tables;
use Filament\Tables\Filters\SelectFilter;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Component;
use Filament\Forms;

class RandomTable extends Component implements Tables\Contracts\HasTable
{
    use Tables\Concerns\InteractsWithTable;

    protected $listeners = ['search'];

    public $searchData = [];
    private $query;
    public $showSearch = false;
    public $update;

    public function search($data)
    {
        $this->showSearch = true;
        $this->refreshComponent();
    }

    public function refreshComponent() {
        $this->update = !$this->update;
    }

    protected function getTableQuery(): Builder
    {
       if(!$this->showSearch) {
            $this->query = //query
       } else {
            $this->query = //another query
       }
       return $this->query ;
    }

    protected function getTableColumns(): array
    {
       return [
            ///
       ];
    }

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