Filament•6mo ago

How to handle data from an external api in a filament table

Does filament allow showing of data that is from an external api in the table

24 Replies

toeknee•6mo ago

One of the most asked questions...... use sushi

toeknee•6mo ago

https://filamentphp.com/community/how-to-consume-an-external-api-with-filament-tables

Filament

How to consume an external API with Filament Tables by Leandro Ferr...

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.

codeartisanOP•6mo ago

Thank you sir @toeknee I think this solution does not work when am using just a filament table in laravel because thats what am doing currently Do you think you have any alternative?

toeknee•6mo ago

Yes yes it does, it's exactly what it says....

codeartisanOP•6mo ago

It was a typo I am using the filament table component in livewire but I need to fetch some data from an external api then feed it into the table but it seems that package works only with filament admin

toeknee•6mo ago

That package has nothing to do with filament admin. It uses models and is completely independent of filament.

codeartisanOP•6mo ago

okay let me review it again php artisan make:model Product php artisan make:filament-resource Product --simple --view Here it need me to create filament resource @toeknee it requires me to create a filament resource

Dennis Koch•6mo ago

Well, the tutorial is for the admin panel, but you don't need to strictly follow it. You can also create a Filament table in a Livewire component

codeartisanOP•6mo ago

I have the table already created

Dennis Koch•6mo ago

No need to create a resource then

codeartisanOP•6mo ago

Tested it and it renders but it picks from a model i want to fetch data from an external @toeknee had recommended that

Dennis Koch•6mo ago

So what did you do? Did you follow the rest of the tutorial?

codeartisanOP•6mo ago

Yeah i went through but failed to figure out how to pick the data from the model to the table

Dennis Koch•6mo ago

So what's your model code?

codeartisanOP•6mo ago

let me share

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Sushi\Sushi;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Arr;

class Station extends Model
{
    use HasFactory, Sushi;

    //{"Code":"SUG-001","Name":"kirinya","LocationType":" ","email":"","phoneNumber":"","latitude":"","longitude":""}

    protected $fillable = ['Code','Name','LocationType','email','phoneNumber','latitude','longitude'];

   /**
     * Model Rows
     *
     * @return void
     */
    public function getRows()
    {
        //API
        $stations = Http::get('https://graph.stabexinternational.com/api/stations/getLocations')->json();
 
        //filtering some attributes
        $stations = Arr::map($stations['data'], function ($item) {
            return Arr::only($item,
                [
                    'Code',
                    'Name',
                    'LocationType',
                    'email',
                    'PhoneNumber',
                    'latitude',
                    'longitude',

                ]
            );
        });
 
        return $stations;
    }
 
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Sushi\Sushi;
use Illuminate\Support\Facades\Http;
use Illuminate\Support\Arr;

class Station extends Model
{
    use HasFactory, Sushi;

    //{"Code":"SUG-001","Name":"kirinya","LocationType":" ","email":"","phoneNumber":"","latitude":"","longitude":""}

    protected $fillable = ['Code','Name','LocationType','email','phoneNumber','latitude','longitude'];

   /**
     * Model Rows
     *
     * @return void
     */
    public function getRows()
    {
        //API
        $stations = Http::get('https://graph.stabexinternational.com/api/stations/getLocations')->json();
 
        //filtering some attributes
        $stations = Arr::map($stations['data'], function ($item) {
            return Arr::only($item,
                [
                    'Code',
                    'Name',
                    'LocationType',
                    'email',
                    'PhoneNumber',
                    'latitude',
                    'longitude',

                ]
            );
        });
 
        return $stations;
    }
 
}

Dennis Koch•6mo ago

And what data does it output? And what's the Resource for that?

codeartisanOP•6mo ago

same model just updated the $product to $stations I failed from that next part because I needed to create a resource I basically failed to understand how to move on beyond this step

Dennis Koch•6mo ago

Sorry, it's not the resource code but the table code. What's that like?

codeartisanOP•6mo ago

<?php

namespace App\Livewire;

use App\Models\Station;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Builder;

class ListStation extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public function table(Table $table): Table
    {
        return $table
            ->query(Station::query())
            ->columns([
                //
                Tables\Columns\TextColumn::make('Code')
                ->searchable()
                ->sortable(),
                Tables\Columns\TextColumn::make('Name')
                ->numeric()
                ->sortable(),
                Tables\Columns\TextColumn::make('email')
                ->searchable()
                ->sortable(),

            ])
            ->filters([
                //
            ])
            ->actions([
                //
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    //
                ]),
            ]);
    }

    public function render(): View
    {
        return view('livewire.list-station');
    }
}

<?php

namespace App\Livewire;

use App\Models\Station;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables;
use Filament\Tables\Concerns\InteractsWithTable;
use Filament\Tables\Contracts\HasTable;
use Filament\Tables\Table;
use Livewire\Component;
use Illuminate\Contracts\View\View;
use Illuminate\Database\Eloquent\Builder;

class ListStation extends Component implements HasForms, HasTable
{
    use InteractsWithForms;
    use InteractsWithTable;

    public function table(Table $table): Table
    {
        return $table
            ->query(Station::query())
            ->columns([
                //
                Tables\Columns\TextColumn::make('Code')
                ->searchable()
                ->sortable(),
                Tables\Columns\TextColumn::make('Name')
                ->numeric()
                ->sortable(),
                Tables\Columns\TextColumn::make('email')
                ->searchable()
                ->sortable(),

            ])
            ->filters([
                //
            ])
            ->actions([
                //
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    //
                ]),
            ]);
    }

    public function render(): View
    {
        return view('livewire.list-station');
    }
}

codeartisanOP•6mo ago

codeartisanOP•6mo ago

It finally rendered but am not sure why the css is like this shows partial

Dennis Koch•6mo ago

I don't know. Try to recompile it. Maybe some paths are missing from your tailwind config

codeartisanOP•6mo ago

sure let me try again and make sure all the table paths are present but thank you so much I have fixed it Just inquiring how can I add a loader because the data is much

Gaming

Programming

How to handle data from an external api in a filament table