Skip to content

Rendering a PowerGrid Table โ€‹

This section covers how to render your PowerGrid Component in a Blade View.

Here you will find:

Blade View โ€‹

HTML Tag โ€‹

To display your PowerGrid Table, you can use the <livewire> tag as demonstrated below.

Following our example of DishTable (app/Livewire/DishTable.php), we will use the tag:

php
// resources/views/my-view.blade.php

<livewire:dish-table />

Blade Directive โ€‹

Alternatively, you can use the Livewire Blade directive.

php
// resources/views/my-view.blade.php

@livewire('dish-table') 

๐ŸŽ‰ Great, we have a table!

Now, let's move forward to configure the Datasource.

Component in sub-folder โ€‹

If the PowerGrid Table is located in a sub-folder, you can easily specify its path using dot notation.

For reference, the following example utilizes the class app/Livewire/Tables/DishTable.php:

php
// resources/views/my-view.blade.php

<livewire:tables.dish-table />

Multiple Components Per Page โ€‹

To render more than one PowerGrid component on the same page, you must first assign a unique TableName to each component. Read more about configuring table name.

Furthermore, if you have pagination enabled, you might have to configure the ?page= parameter for each component. Learn more about the URL Page Parameter.

Then, you can just include two <livewire> tags as demonstrated below.

php
// resources/views/my-view.blade.php

<livewire:dish-table/>

<livewire:user-table>

Component Attributes โ€‹

Passing Attributes โ€‹

To pass data to your PowerGrid Table, you can add attributes to the <livewire> HTML tag.

In the next example, we are passing the tableName via an attribute.

php
// resources/views/my-view.blade.php

<livewire:dish-table tableName="DishTable" />

<livewire:user-table tableName="UserTable" />

Passing Custom Attributes โ€‹

To pass a custom attribute, you must to declare it as a public property within the PowerGrid Table Component.

Example:

php
// app/Livewire/DishTable.php

class DishTable extends PowerGridComponent
{
    //Custom attribute currency
    public string $currency; 
}

Then, you can simply add this attribute in the <livewire> tag, as demonstrated below.

php
// resources/views/my-view.blade.php

<livewire:dish-table>
<livewire:dish-table currency="USD"/>

Created By Luan Freitas and @DanSysAnalyst