Filament•3y ago

Custom theme for a livewire component using a filament resource table

So I used a filament table to populate a livewire component and I'm trying to get it to display a custom theme but it doesn't work

Solution

I needed to run
php artisan filament:install --scaffold --tables

npm install

Jump to solution

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

 public static function table(Table $table): Table
    {
        return $table
            ->contentGrid([
                'md' => 2,
                'xl' => 5,
            ])
            ->query(ModelCourse::query())
            ->columns([
                Grid::make()
                    ->columns(1)
                    ->schema([
                        ImageColumn::make('image')
                            ->toggleable()
                            ->circular(),
                        TextColumn::make('name')
                            ->size(TextColumnSize::Large)
                            ->searchable(),
                        TextColumn::make('level.name')
                            ->searchable(),
                        TextColumn::make('cost')
                            ->searchable(),
                        TextColumn::make('duration')
                            ->searchable(),
                        TextColumn::make('details')
                            ->searchable()
                            ->toggleable(isToggledHiddenByDefault: true),

                    ])->columns(2)
            ])

            ->contentGrid(['md' => 2, 'xl' => '3'])
            ->groups([
                'level.name',
            ]);
        
    }

 public static function table(Table $table): Table
    {
        return $table
            ->contentGrid([
                'md' => 2,
                'xl' => 5,
            ])
            ->query(ModelCourse::query())
            ->columns([
                Grid::make()
                    ->columns(1)
                    ->schema([
                        ImageColumn::make('image')
                            ->toggleable()
                            ->circular(),
                        TextColumn::make('name')
                            ->size(TextColumnSize::Large)
                            ->searchable(),
                        TextColumn::make('level.name')
                            ->searchable(),
                        TextColumn::make('cost')
                            ->searchable(),
                        TextColumn::make('duration')
                            ->searchable(),
                        TextColumn::make('details')
                            ->searchable()
                            ->toggleable(isToggledHiddenByDefault: true),

                    ])->columns(2)
            ])

            ->contentGrid(['md' => 2, 'xl' => '3'])
            ->groups([
                'level.name',
            ]);
        
    }