Fetch and Display API Data Using FilamentPHP Custom Tables

In this article, we will explore, how we can fetch and Fetch and Display API Data Using FilamentPHP Custom Tables.

1. Create a custom page

First, we will start by creating a custom page. To create a custom page, copy the following command in terminal.

php artisan make:filament-page WordPressBlog (Your Page Name)

You can refer to this article for more depth in filament custom page. Also I highly recommend to go through the official docs.

2. Implement Hastables and add a table method.

After that, we need to implement HasTables and use InteractsWithTable traits in our page. Also lets define our table() method.

class WordPressBlog extends Page implements HasTable
{
    use InteractsWithTable;

  public function table(Table $table): Table
    {
      return $table->columns([
           // list of columns
        ])
    }

}

3. Logic for API

Following the above step, now we need to integrate the APIs. For that we will be using HTTP facades and here are the list of important attributes:

1. string sortColumn : This is the column, that filament uses to store the sortColumn name. It can be any of your filament table column when you use sorting.
2. string sortDirection: This stores the direction of sorting asc or desc.
3. int page : This property stores the current page.
4. int recordsPerPage : This property stores the number of record you want to show per page.
5. string $search: This property stores the search value.

return $table 
     $baseUrl ="yourbaseurl.com";
   ->records(function(?string $sortColumn,?string $sortDirection,int $page,int $recordsPerPage)use($baseUrl){
                $response = Http::get($baseUrl,[
                    'per_page' => $recordsPerPage ?? 10,
                    'page' => $page ?? 1 ,
                    'orderBy' => $sortColumn,
                    'order' => $sortDirection,
                ]);
                if(!$response->successful())
                {
                    return new LengthAwarePaginator([],0,0,0);
                }
                $posts = collect($response->json())->map(function($post){
                    return [
                        'id' => $post['id'],
                        'title' => $post['title'],
                        'slug' => $post['slug'] ?? "default",
                        'link'=> $post['link']
                    ];
                });
                return new LengthAwarePaginator(
                    $posts,
                    $response->header('X-WP-Total'),
                    $recordsPerPage,
                    $page
                );
            })

You can check the above code that returns the LengthAwarePaginator so that the pagination works for our table. And note that the above fields and attributes are linked with the tutorial guide or the video posted above.

Your Page Blade Component

So, the most important thing is to modify your page blade component and add

{{$this->table}}

Without this, your page cannot display the table.