How to pass variable to the table component

[peroxovy]

Hello,

I'm using Powergrid 3.x is there a possibility to pass a variable to a table component somehow from Livewire Component in which table is rendered?

It's the question, because I'm rendering a chart using Chart.js with the same data which Powergrid table is using and I'm let's say "doubling" the query unnecessary.

I know that passing parameter is possible, and the datasource() method is using Builder, but I'm wondering if it's possible...

Is it?

[cdterry87]

Assuming I understand the question correctly, it sounds like you have a query that you want to avoid running multiple times -- i.e. you want to run the query once and pass it to both your Chart component and to your Table component. If that is correct, you could try this (which seems to work in Livewire 3 and Powergrid 5.x):

You would need three components:
ContainerComponent (which would run your query)
ChartComponent (for your Chart which will be present in your container-component view)
TableComponent (for your Powergrid Table which will also be present in your container-component view)

ContainerComponent.php

This will perform your initial query which will be passed to the view.

<?php

namespace App\Livewire;

use Livewire\Component;

class ContainerComponent extends Component
{
    public function render()
    {
        $datasource = YOUR_QUERY_HERE; // 

        return view('livewire.container-component', [
            'datasource' => $datasource
        ];
    }
}

livewire/container-component.blade.php

This view will hold both your chart and table components and pass the results of your query to both components.

...
    <livewire:chart-component :datasource="$datasource" />
    <livewire:table-component :datasource="$datasource" />
...

TableComponent.php

Define a new public variable called $datasource and return it from the datasource() method.

namespace App\Livewire;

...

final class TableComponent extends PowerGridComponent
{
    public $datasource;

    public function datasource()
    {
        return $this->datasource;
    }

    ...
}

This way your query is only run once in your container component and then you just pass the results of your query to both components. You just need a public property (i.e. the public $datasource; definition) in the Livewire component to pass the results of your query to the livewire component. Hope this helps.