How to add dynamic data in Collection format?

[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!

Originally posted by @abhaypithadiya in #894

[luanfreitasdev]

Hello @abhaypithadiya , Didn't that work that way? What error are you having?

[abhaypithadiya]

Hey, new rows were pushed into the collection but it didn't render on the front end. I tried the below code and it worked for me. I am not sure if this is correct.

<?php

namespace App\Http\Livewire;

use App\Models\admin\product\Product;
use Illuminate\Support\Carbon;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Log;
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;

    public function mount(): void
    {
        parent::mount();
        $this->testCollection = collect();
    }
    /*
    |--------------------------------------------------------------------------
    |  Datasource
    |--------------------------------------------------------------------------
    | Provides data to your Table using a Model or Collection
    |
    */
    public function datasource(): ?Collection
    {
        return $this->testCollection;
    }

    /*
    |--------------------------------------------------------------------------
    |  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('image')
            ->addColumn('code')
            ->addColumn('category')
            ->addColumn('company')
            ->addColumn('gender')
            ->addColumn('available');
    }

    /*
    |--------------------------------------------------------------------------
    |  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('Image', 'image'),

            Column::make('CODE', 'code')
                ->sortable(),
            Column::make('CATEGORY', 'category')
                ->sortable(),
            Column::make('COMPANY', 'company')
                ->sortable(),
            Column::make('GENDER', 'gender')
                ->sortable(),
            Column::make('AVAILABLE', 'available')
                ->sortable(),
        ];
    }

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

    public function addProduct($id)
    {
        $getProduct = Product::with(['productCategory', 'productImages', 'productCompany'])->where('id', $id)->first();

        $productArray = [
            'id' => $getProduct->id,
            'image' => $getProduct->productImages->first() !== null ? $getProduct->productImages->first()->image_url : '',
            'code' => $getProduct->code,
            'category' => $getProduct->productCategory->first()->name,
            'Company' => $getProduct->productCompany->first()->name,
            'gender' => $getProduct->gender,
            'available' => $getProduct->available,
        ];

        $this->testCollection->push($productArray);
    }
}

Thanks!