My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Menampilkan Data Carts


Setelah halaman cart berhasil dibuat dan ditampilkan, maka sekarang kita akan belajar menampilkan table yang nanti berisi data-data cart yang dimasukkan oleh para customers.

Silahkan teman-teman buka file berikut ini app/Filament/Resources/CartResource.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('product.title')->searchable(), Tables\Columns\TextColumn::make('customer.name')->searchable(), Tables\Columns\TextColumn::make('qty'), Tables\Columns\TextColumn::make('total') ->money('IDR', locale: 'id') ->getStateUsing(fn($record) => $record->qty * $record->product->price), ]) ->filters([ // ]) ->actions([ //Tables\Actions\EditAction::make(), ]) ->bulkActions([ Tables\Actions\BulkActionGroup::make([ Tables\Actions\DeleteBulkAction::make(), ]), ]); }

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

  1. TextColumn dengan nama product.title

    css
    Tables\Columns\ImageColumn::make('product.title')->searchable(),

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

  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 qty

    css
    Tables\Columns\TextColumn::make('qty')
  4. TextColumn dengan nama total

    php
    Tables\Columns\TextColumn::make('total') ->money('IDR', locale: 'id') ->getStateUsing(fn($record) => $record->qty * $record->product->price),

    Di atas, kita menambahkan fungsi money yang mana di dalamnya kita panggil locale id, shingga nanti angkanya akan diformat menjadi Rupiah. Dan untuk isinya kita gunakan fungsi getStateUsing yang mana adalah jumlah qty dikalikan price product.

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

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

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

Tidak ada table of contents