Rendering a PowerGrid Table

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

Here you will find:

• Blade View
• From route
• Multiple Components Per Page
• Component Attributes

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:

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

<livewire:dish-table />

Blade Directive

Alternatively, you can use the Livewire Blade directive.

// 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:

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

<livewire:tables.dish-table />

From route

If you do not need a Blade view, you can render your Table directly from route :

// routes/web.php

Route::get('/dish', DishTable::class)->name('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.

// 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.

// 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:

// 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.

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

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