Custom theme for a livewire component using a filament resource table

Cer Tain Lee · 2023-11-16T15:55:04.890Z

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

D

Dennis Koch•11/16/23, 8:21 PM

Sorry can’t help a „doesn’t work“ without any Information

C

Cer Tain LeeOP•11/17/23, 5:28 AM

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/**',
            ],
        }),
    ],
})

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/**',
            ],
        }),
    ],
})

vite.config.js

C

Cer Tain LeeOP•11/17/23, 5:29 AM

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

#course{
    background-color: crimson;
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

#course{
    background-color: crimson;
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

#course{
    background-color: crimson;
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

#course{
    background-color: crimson;
}

theme.css

C

Cer Tain LeeOP•11/17/23, 5:31 AM

 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',
            ]);
        
    }

 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',
            ]);
        
    }

table in livewire component

C

Cer Tain LeeOP•11/17/23, 5:32 AM

Trying to get it yto display as a grid in the livewire page

CCer Tain Lee Trying to get it yto display as a grid in the livewire page

D

Dennis Koch•11/17/23, 5:43 AM

That should also work without a theme. Not sure whether it works combined with groups though. What is the issue?

C

Cer Tain LeeOP•11/17/23, 8:16 AM

First off, the styling isn't working the way it's supposed to be working. So I was trying to make it work by using a custom theme

C

Cer Tain LeeOP•11/17/23, 8:16 AM

But the custom theme isn't working too

C

Cer Tain LeeOP•11/17/23, 8:40 AM

Displays like this

CCer Tain Lee Displays like this

T

toeknee•11/17/23, 8:44 AM

inspect your console, what is shown

Ttoeknee inspect your console, what is shown

C

Cer Tain LeeOP•11/17/23, 8:46 AM

content.build.min.js:1

GET chrome-extension://njgehaondchbmjmajphnhlojfnbfokng/js/contentScripts/dom.js net::ERR_FILE_NOT_FOUND
This

C

Cer Tain LeeOP•11/17/23, 12:48 PM

It's been fixed

CCer Tain Lee It's been fixed

D

Dennis Koch•11/17/23, 2:10 PM

What was the issue?