Sekarang kita akan lanjutkan belajar menampilkan table pada halaman transactions, dimana pada table ini nanti akan memberikan sedikit custom untuk status transaction menggunakan sebuah badge, sehingga tampilkannya akan sedikit lebih bagus.

Silahkan teman-teman buka file berikut ini app/Filament/Resources/TransactionResource.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\TextColumn::make('invoice')->searchable(),
            Tables\Columns\TextColumn::make('customer.name')->searchable(),
            Tables\Columns\TextColumn::make('total')->money('IDR', locale: 'id'),
            Tables\Columns\TextColumn::make('status')->badge()
            ->color(fn(string $state): string => match ($state) {
                'pending' => 'warning',
                'success' => 'success',
                'expired' => 'gray',
                'failed' => 'danger',
            }),
            Tables\Columns\TextColumn::make('created_at'),
        ])
        ->filters([
            //
        ])
        ->actions([
            // Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            // Tables\Actions\BulkActionGroup::make([
            //     Tables\Actions\DeleteBulkAction::make(),
            // ]),
        ]);
}

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

1. TextColumn dengan nama invoice

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

   Di atas kita tambahkan fungsi searchable untuk proses pencarian berdasarkan invoice transaction.

2. TextColumn dengan nama customer.name

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

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

3. TextColumn dengan nama total

   
           
   css
           
   
               
           
        
   Tables\Columns\TextColumn::make('total')
      ->money('IDR', locale: 'id'),
   

   Di atas, kita menambahkan fungsi money yang mana di dalamnya kita panggil locale id, shingga nanti angkanya akan diformat menjadi Rupiah.

4. TextColumn dengan nama status

   
           
   php
           
   
               
           
        
   Tables\Columns\TextColumn::make('status')->badge()
       ->color(fn(string $state): string => match ($state) {
           'pending' => 'warning',
           'success' => 'success',
           'expired' => 'gray',
           'failed' => 'danger',
       }),
   

   Di atas, kita membuat sebuah kondisi untuk field status menggunakan sebuah badge. Jadi jika isi dari field status bernilai pending, maka badge yang ditampilkan adalah warna kuning / warning, dan begitu juga seterusnya.

5. TextColumn dengan nama created_at

   
           
   css
           
   
               
           
        
   Tables\Columns\TextColumn::make('created_at')
   

Dan di atas, pada bagian actions kita disable untuk aksi edit data dengan nambahkan double slash // atau komentar.

        
php
        

            
        
     
->actions([
	//Tables\Actions\EditAction::make(),
])

Dan kita lakukan hal yang sama pada bulkActions, dimana kita juga men-disable aksi untuk delete data transaction.

        
ruby
        

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

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