How to add dynamic Rows while Using Collections instead of Modal?

[abhaypithadiya]

Hey guys! I have two tables in a page, In which one table has all the products the other table is empty. The empty table is created with the collections format and the other table is has all the products via the Modal. I am trying to achieve a functionality when the user clicks on a button in the products table that product should be added to the empty table and in the collection.

This is my code :

<?php

namespace App\Http\Livewire;

use Illuminate\Support\Carbon;
use Illuminate\Support\Collection;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridEloquent;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Traits\ActionButton;

final class TestTable extends PowerGridComponent
{
    use ActionButton;

    public $testCollection;

    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */
    public function datasource(): ?Collection
    {
        $this->testCollection = $test = collect([
            ['id' => 1, 'name' => 'Name 1', 'price' => 1.58, 'created_at' => now()],
        ]);

        return $test;
    }

    /*
    |--------------------------------------------------------------------------
    |  Relationship Search
    |--------------------------------------------------------------------------
    | Configure here relationships to be used by the Search and Table Filters.
    |
    */
    public function setUp(): array
    {
        $this->showCheckBox();

        return [
            Exportable::make('export')
                ->striped()
                ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
            Header::make()->showSearchInput(),
            Footer::make()
                ->showPerPage()
                ->showRecordCount(),
        ];
    }

    /*
    |--------------------------------------------------------------------------
    |  Add Column
    |--------------------------------------------------------------------------
    | Make Datasource fields available to be used as columns.
    | You can pass a closure to transform/modify the data.
    |
    */
    public function addColumns(): PowerGridEloquent
    {
        return PowerGrid::eloquent()
            ->addColumn('id')
            ->addColumn('name')
            ->addColumn('price')
            ->addColumn('created_at_formatted', function ($entry) {
                return Carbon::parse($entry->created_at)->format('d/m/Y');
            });
    }

    /*
    |--------------------------------------------------------------------------
    |  Include Columns
    |--------------------------------------------------------------------------
    | Include the columns added columns, making them visible on the Table.
    | Each column can be configured with properties, filters, actions...
    |

    */
     /**
     * PowerGrid Columns.
     *
     * @return array<int, Column>
     */
    public function columns(): array
    {
        return [
            Column::make('ID', 'id')
                ->searchable()
                ->sortable(),

            Column::make('Name', 'name')
                ->searchable()
                ->makeInputText('name')
                ->sortable(),

            Column::make('Price', 'price')
                ->sortable()
                ->makeInputRange('price', '.', ''),

            Column::make('Created', 'created_at_formatted')
                ->makeInputDatePicker('created_at'),
        ];
    }

    protected function getListeners()
    {
        return array_merge(
            parent::getListeners(),
            [
                'addProduct',
            ]
        );
    }

    public function addProduct($id)
    {
        $this->testCollection->push(['id' => 2, 'name' => 'Name 2', 'price' => 2.58, 'created_at' => 2]);
        $this->emit('pg:eventRefresh-default');
    }
}

Here I am listening to an event 'addProduct' which is called when the user clicks a button in the products table. Is there any way I could achieve this?

Thanks!