Topics

Filament•9mo ago

Calculate Totals in the footer for a table component

How can calculate the total balance of the customers and show it in the footer .Note this table component is not being used in filament admin panel but rather a laravel project with livewire Also how can I add the view and edit actions onto this table component

No description

85 Replies

codeartisanOP•9mo ago

Hussain4real•9mo ago

Use Filament summarizer

codeartisanOP•9mo ago

let me share my code

Hussain4real•9mo ago

and for the View and Edit, you just need to include them in the actions column Okay

codeartisanOP•9mo ago

message.txt

codeartisanOP•9mo ago

When I try to include the Actions I get an error

Hussain4real•9mo ago

your'e probably not importing the right action which column do you want total for? the code is not showing complete paste it instead of file upload use the tripple backtick to format

codeartisanOP•9mo ago

php

php

message.txt

codeartisanOP•9mo ago

Is that better I want the view , delete ,show but I pass in my custom routes Also I want create Action and pass in my custom route name For the column I want to sum the balance

Hussain4real•9mo ago

use Filament\Tables\Columns\Summarizers\Sum;

TextColumn::make('balance')
      ->summarize([
          Sum::make()
])

use Filament\Tables\Columns\Summarizers\Sum;

TextColumn::make('balance')
      ->summarize([
          Sum::make()
])

for the actions, i can see your'e importing the wrong action use Filament\Tables\Actions\Action; then chain the ->url() to the action which will contain the custom route

codeartisanOP•9mo ago

Class "App\Livewire\Tables\Actions\ViewAction" not found I get this error

codeartisanOP•9mo ago

php

php

I dont know if am importing everything in the right way but thats what i have

message.txt

Hussain4real•9mo ago

dont use ViewAction use normal Action since you will be using custom route something like this:

use Filament\Tables\Actions\Action;

 Action::make('view')
       ->url(fn ($record) => route('customers.show', $record)),

use Filament\Tables\Actions\Action;

 Action::make('view')
       ->url(fn ($record) => route('customers.show', $record)),

make sure you Implements HasActions trait and add: use InteractsWithActions;

codeartisanOP•9mo ago

Now the header actions are not appearing But the rest are appearing

codeartisanOP•9mo ago

No description

Hussain4real•9mo ago

did you add any headerAction?

codeartisanOP•9mo ago

Yeah I added create

->headerActions([
                Action::make('create')
                    ->label('Add Customer')
                    ->color('primary')
                    ->url(route('customers.create')),
            ])

->headerActions([
                Action::make('create')
                    ->label('Add Customer')
                    ->color('primary')
                    ->url(route('customers.create')),
            ])

Hussain4real•9mo ago

check if you imported the right action

codeartisanOP•9mo ago

am using use Filament\Tables\Actions\Action; probably i need to implement some trait

Hussain4real•9mo ago

this is from the docs:

use Filament\Actions\Action;

 public function deleteAction(): Action
    {
        return Action::make('delete')
            ->requiresConfirmation()
            ->action(fn () => $this->post->delete());
    }

use Filament\Actions\Action;

 public function deleteAction(): Action
    {
        return Action::make('delete')
            ->requiresConfirmation()
            ->action(fn () => $this->post->delete());
    }

then in ur view:

<div>
   {{ $this->deleteAction }}
   <x-filament-actions::modals />

  {{ $this->table }}
</div>

<div>
   {{ $this->deleteAction }}
   <x-filament-actions::modals />

  {{ $this->table }}
</div>

change yours to createAction(): Action

codeartisanOP•9mo ago

let me try that

Hussain4real•9mo ago

Okay

codeartisanOP•9mo ago

I see it but its color is not visible

public function createAction(): Action
    {
        return Action::make('create')
            ->label('Add Customer')
            ->color('primary')
            ->url(route('customers.create'));
    }

public function createAction(): Action
    {
        return Action::make('create')
            ->label('Add Customer')
            ->color('primary')
            ->url(route('customers.create'));
    }

it shows but its gray in color

Hussain4real•9mo ago

do you have a custom theme?

codeartisanOP•9mo ago

no its just a tailwindcss template probably i add css classes

Hussain4real•9mo ago

if you add css it won't work, it will be stripped out. you need to create custom theme

codeartisanOP•9mo ago

How do I do that then

Hussain4real•9mo ago

https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

codeartisanOP•9mo ago

But am not using a their panel am just using a normal liveware and tailwindcss template

Hussain4real•9mo ago

did you install Filament Table package?

codeartisanOP•9mo ago

Yeah I installed it

Hussain4real•9mo ago

then you need to create a custom theme also you need to tell Your AppServiceprovider the colors you will be using because currently Your Application is unaware of the primary color

codeartisanOP•9mo ago

the problem am not so sure on how to do that

Hussain4real•9mo ago

in your AppServiceProvider in the boot method put this:

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);

use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);

codeartisanOP•9mo ago

ok am trying it

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        //
        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);
    }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        //
        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);
    }
}

thats what i have dont But seems no change I have re-started the application

Hussain4real•9mo ago

recompile your assets

codeartisanOP•9mo ago

npm run dev?

Hussain4real•9mo ago

yes

codeartisanOP•9mo ago

There was change *no change

Hussain4real•9mo ago

Hmm create a custom theme and style it from there

Hussain4real•9mo ago

follow this intruction: https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

codeartisanOP•9mo ago

i have created now

Hussain4real•9mo ago

style the action button there

codeartisanOP•9mo ago

example please

Hussain4real•9mo ago

in your new theme.css style the button action there, you will need to look for the class name in your inspect console i think the name is .fi-btn style that class like this:

.fi-btn{
        @apply bg-purple-600;
    }

.fi-btn{
        @apply bg-purple-600;
    }

codeartisanOP•9mo ago

Sorry to take you back but it seems the create custom theme didnot work as expected

No description

Hussain4real•9mo ago

i guess because you don't have a panel just try styling the action like how you will style a button you could wrap a div around it then style that div and see

codeartisanOP•9mo ago

okay then

Hussain4real•9mo ago

we could get on a call if possible

codeartisanOP•9mo ago

Yeah its okay I set up google meets?

codeartisanOP•9mo ago

https://meet.google.com/tre-kmny-ipd

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

Hussain4real•9mo ago

not now in an hour, 45 minutes time

codeartisanOP•9mo ago

ok no worries Hey @Hussain4real are you available now

Hussain4real•9mo ago

no have a meeting in 15 minutes

codeartisanOP•9mo ago

okay please

Hussain4real•9mo ago

I mean i have a meeting to attend now will let you know once i'm through

codeartisanOP•9mo ago

okay then hey @Hussain4real

Hussain4real•9mo ago

Sorry mate, still in the meeting

codeartisanOP•9mo ago

ok no worries

Hussain4real•9mo ago

Will be through 15 minutes probably

codeartisanOP•9mo ago

ok no problem

Hussain4real•9mo ago

I'm ready if you are

codeartisanOP•9mo ago

am around

codeartisanOP•9mo ago

https://meet.google.com/tre-kmny-ipd

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

Hussain4real•9mo ago

i'm waiting to be let in i can't hear you

codeartisanOP•9mo ago

thank you so much

Hussain4real•9mo ago

my pleasure mate

codeartisanOP•9mo ago

When your free please let me know for some reason export has only cancel button

codeartisanOP•9mo ago

No description

codeartisanOP•9mo ago

@Hussain4real are you available sir

Hussain4real•9mo ago

Okay, will let you know

codeartisanOP•9mo ago

let me wait then helo

Hussain4real•9mo ago

Hi Had a busy day

codeartisanOP•9mo ago

a good morning we can do today hello @Hussain4real

Hussain4real•9mo ago

Hi If you're free

codeartisanOP•9mo ago

am available right now let me share google meet

codeartisanOP•9mo ago

https://meet.google.com/pvp-sjrh-bvw

Real-time meetings by Google. Using your browser, share your video, desktop, and presentations with teammates and customers.

codeartisanOP•9mo ago

Thank you so much it has worked

Hussain4real•9mo ago

my pleasure mate!

codeartisanOP•9mo ago

a good morning I just have one more issue which is to change the filter positions on the table

use Filament\Tables\Filters\Layout;
 
protected function getTableFiltersLayout(): ?string
{
    return Layout::AboveContent;
}

use Filament\Tables\Filters\Layout;
 
protected function getTableFiltersLayout(): ?string
{
    return Layout::AboveContent;
}

does not seem to work with livewire

Hussain4real•9mo ago

you probably need to include the trait Morning

codeartisanOP•9mo ago

I cannot find the trait name

Hussain4real•9mo ago

import this
use Filament\Tables\Concerns\HasFilters;

add this trait
use HasFilters;

import this
use Filament\Tables\Concerns\HasFilters;

add this trait
use HasFilters;

codeartisanOP•9mo ago

->filters([..], FiltersLayout::AboveContent)

->filters([..], FiltersLayout::AboveContent)

->filters([..], FiltersLayout::AboveContent)

That works ok thank you so much for the help

Hussain4real•9mo ago

my pleasure

Filament is a collection of beautiful full-stack components for Laravel.You can get help using it on our Discord.

18KMembers

View on Discord

Want results from more Discord servers?

Add your server