Setelah berhasil melakukan create product, maka kita akan belajar menampilkan data-nya dalam bentuk table menggunakan Laravel Filament.

Silahkan teman-teman buka file berikut ini app/Filament/Resources/ProductResource.php, kemudian cari kode berikut ini.

        
php
        

            
        
     
public static function table(Table $table): Table
{
    return $table
        ->columns([
            //
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
            Tables\Actions\DeleteBulkAction::make(),
        ]),
    ]);
}

Kemudian ubah menjadi seperti berikut ini.

        
php
        

            
        
     
public static function table(Table $table): Table
{
    return $table
    ->columns([
            Tables\Columns\ImageColumn::make('image')->circular(),
            Tables\Columns\TextColumn::make('title')->searchable(),
            Tables\Columns\TextColumn::make('category.name')->searchable(),
            Tables\Columns\TextColumn::make('price')->numeric(decimalPlaces: 0)->money('IDR', locale: 'id'),
            Tables\Columns\TextColumn::make('description')->html()->limit(50),
        ])
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
            Tables\Actions\DeleteBulkAction::make(),
        ]),
    ]);
}

Dari perubahan kode di atas, kita menambahkan beberapa column, yaitu:

1. ImageColumn dengan nama image

   
           
   css
           
   
               
           
        
   Tables\Columns\ImageColumn::make('image')->circular(),
   

   Di atas kita tambahkan fungsi circular agar gambarnya jadi bulat.

2. TextColumn dengan nama title

   
           
   css
           
   
               
           
        
   Tables\Columns\TextColumn::make('title')->searchable()
   

   Di atas kita tambahkan fungsi searchable untuk proses pencarian berdasarkan title product.

3. TextColumn dengan nama category.name

   
           
   css
           
   
               
           
        
   Tables\Columns\TextColumn::make('category.name')->searchable()
   

   Di atas kita tambahkan fungsi searchable untuk proses pencarian berdasarkan name category.

4. TextColumn dengan nama price

   
           
   css
           
   
               
           
        
   Tables\Columns\TextColumn::make('price')->numeric(decimalPlaces: 0)->money('IDR', locale: 'id')
   

   Di atas kita tambahkan fungsi numeric di dalam di dalamnya kita format dengan decimal dan kita ubah ke mata uang Indonesia (Rp.).

5. TextColumn dengan nama description

   
           
   css
           
   
               
           
        
   Tables\Columns\TextColumn::make('description')->html()->limit(50)
   

   Di atas kita tambahkan fungsi html karena isi dari content berupa sintaks HTML dan kita batas 50 kata menggunakan fungsi limit.

Sekarang, silahkan reload project-nya, jika berhasil maka kurang lebih hasilnya akan seperti berikut ini.