Skip to content

Data Source โ€‹

This section covers your PowerGrid Component's Data Source configuration.

Here you will find:

Introduction โ€‹

The Data Source is responsible for feeding data into your PowerGrid Table Component.

Currently, PowerGrid can receive data from the Eloquent Builder, Query Builder, Collections, and arrays.

Configuring the Data Source โ€‹

You may return the following types as in your Table's datasource() method.

TypeTypeOnline Example
Eloquent BuilderIlluminate\Database\Eloquent\Builder::class๐ŸŒŽ Eloquent Builder
Query BuilderIlluminate\Database\Query\Builder::class๐ŸŒŽ Query Builder
CollectionIlluminate\Support\Collection::class๐ŸŒŽ Collection
Native PHP Arrayarray-

Here is an example using Eloquent to get the data of the Model Dish.

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use Illuminate\Database\Eloquent\Builder;
use App\Models\Dish;

class DishTable extends PowerGridComponent
{
  public function datasource(): ?Builder
  {
    return Dish::query();
  }
}

๐ŸŽ‰ Job done!

Let's jump to the Data Source Fields section and configure the fields from your Data Source.

Relationships โ€‹

Of course, you can also load Relationships in your data source.

In this example, let's bring in the Kitchen relationship, to show where each dish was cooked.

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use Illuminate\Database\Eloquent\Builder;
use App\Models\Dish;

class DishTable extends PowerGridComponent
{
  public function datasource(): ?Builder
  {
    return Dish::query();
    return Dish::query()->with('kitchen');
  }
}

The Dish Model might look something like this:

php
// app/Models/Dish.php

class Dish extends Model
{
    public function kitchen(): BelongsTo
    {
        return $this->belongsTo(Kitchen::class);
    }

    // ...
}

๐Ÿš€ See it in action

See an interactive example using Relationships in Data Source.

Join Tables โ€‹

Some features like Column sortable() or Column Filters may require you to join your relationship in your data source. This will make the relationship Table fields available in the same result row.

This example loads joins the categories relationship.

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use Illuminate\Database\Eloquent\Builder;
use App\Models\Dish;

class DishTable extends PowerGridComponent
{
  public function datasource(): ?Builder
  {
    return Dish::query();
    return Dish::query()
              ->join('categories', function ($categories) {
                  $categories->on('dishes.category_id', '=', 'categories.id');
              })
              ->select([
                  'dishes.id',
                  'dishes.calories',
                  'categories.name as category_name',
              ]);
  }
}

๐Ÿš€ See it in action

See an interactive example using Join in Data Source.

Custom Primary Key โ€‹

By default, PowerGrid uses the field id as your Model's primary key.

If you need to use a different database column, just add the property $primaryKey in your PowerGrid Component.

You may also configure the $sortField property to match your primary key.

php
// app/Livewire/DishTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;

class DishTable extends PowerGridComponent
{
    public string $primaryKey = 'dishes.custom_dish_id';

    public string $sortField = 'dishes.custom_dish_id';
}

Column/Key conflict โ€‹

You might encounter a conflict between primary keys using the same field name (E.g, id).

To solve this problem, you must define your key in the $primaryKey and $sortField proprieties.

Read more in the Custom Primary Key subsection.

Created By Luan Freitas and @DanSysAnalyst