Filament•5mo ago

i am new to laravel and filament...

so i need to remake an existing table into filament table. but for some reason it looks like this... here is the code for livewire file:

class WarehouseItemsTable extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    protected function getTableQuery(): Builder
    {
        return Item::query()->with(['type', 'unit', 'page']);
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')->label('Názov')->searchable(),
            TextColumn::make('sku')->label('SKU'),
            TextColumn::make('upc')->label('UPC'),
            TextColumn::make('weight')->label('Váha'),
            TextColumn::make('type.name')->label('Typ'),
            TextColumn::make('unit.name')->label('Jednotka'),
        ];
    }

    public function render()
    {
        return view('livewire.warehouse-items-table');
    }
}

class WarehouseItemsTable extends Component implements HasTable, HasForms
{
    use InteractsWithTable;
    use InteractsWithForms;

    protected function getTableQuery(): Builder
    {
        return Item::query()->with(['type', 'unit', 'page']);
    }

    protected function getTableColumns(): array
    {
        return [
            TextColumn::make('name')->label('Názov')->searchable(),
            TextColumn::make('sku')->label('SKU'),
            TextColumn::make('upc')->label('UPC'),
            TextColumn::make('weight')->label('Váha'),
            TextColumn::make('type.name')->label('Typ'),
            TextColumn::make('unit.name')->label('Jednotka'),
        ];
    }

    public function render()
    {
        return view('livewire.warehouse-items-table');
    }
}

and here is the usage in blade file:

        <div class="card-body">
            @section('content')
                <div class="container mx-auto p-4">
                    <h1 class="text-2xl font-bold mb-4">Skladové položky</h1>
                    @livewire('warehouse-items-table')
                </div>
            @endsection
        </div>

        <div class="card-body">
            @section('content')
                <div class="container mx-auto p-4">
                    <h1 class="text-2xl font-bold mb-4">Skladové položky</h1>
                    @livewire('warehouse-items-table')
                </div>
            @endsection
        </div>

35 Replies

PulandoooOP•5mo ago

https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component i was following this dcumentation but without any result.. i really need help

Adding a table to a Livewire component - Tables - Filament

Dennis Koch•5mo ago

Looks like you missed some installation steps: https://filamentphp.com/docs/3.x/tables/installation#existing-laravel-projects

Installation - Tables - Filament

PulandoooOP•5mo ago

thx i will try and let you know did everything as u suggested but without result

Dennis Koch•5mo ago

Can you check the network tab in DevTools whether some files are missing? Looks like your stylesheet is not loaded

PulandoooOP•5mo ago

what stylesheet should be loading there?

Dennis Koch•5mo ago

The one from your app. Probably app.css?

PulandoooOP•5mo ago

so i need to code styles to those tables?

Dennis Koch•5mo ago

No, you don't. They are provided by Filament. But the stylesheet needs to be there so they are applied See the "Configuring Styles" step

PulandoooOP•5mo ago

yep app.css is missing there

Dennis Koch•5mo ago

So you didn't include any styles in your layout?

PulandoooOP•5mo ago

not in my layout i have app.css mentioned in vite.config i thought it would auto load that

Dennis Koch•5mo ago

No, you need to include them in the layout. Should be in the default Laravel layout file unless you removed it. Vite cannot know on which page you need which stylesheets

PulandoooOP•5mo ago

now it looks like this

Dennis Koch•5mo ago

Are the all the JS files loaded? Did you add @filamentScripts and @filamentStyles to your layout?

PulandoooOP•5mo ago

no i did not

Dennis Koch•5mo ago

Please read the docs I linked completely. It's all mentioned there.

PulandoooOP•5mo ago

added this to my layout:

@vite([
    'resources/css/app.css',
    'resources/css/filament/panel/theme.css'
])
@livewireStyles
@filamentStyles

@vite([
    'resources/css/app.css',
    'resources/css/filament/panel/theme.css'
])
@livewireStyles
@filamentStyles

Dennis Koch•5mo ago

You do no need resources/css/filament/panel/theme.css because it's outside a panel

PulandoooOP•5mo ago

removed it and that broke the table

Dennis Koch•5mo ago

Then your tailwind config probably isn't configured correctly

PulandoooOP•5mo ago

configured exactly like in the docs

Dennis Koch•5mo ago

Did you rebuild your app.css?

PulandoooOP•5mo ago

ofc

Dennis Koch•5mo ago

All I can say: It shouldn't be needed and your app.css should contain the relevant classes. Can you share the tailwind config?

PulandoooOP•5mo ago

sure:

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

Dennis Koch•5mo ago

That looks like the tailwind config for your theme, not the tailwind config for your project

PulandoooOP•5mo ago

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

sorry here is the project tailwing config

Dennis Koch•5mo ago

And that one is missing the relevant content paths

PulandoooOP•5mo ago

added them and its still not working...

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/css/app.css', <--
        './resources/css/filament/panel/theme.css' <--
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/css/app.css', <--
        './resources/css/filament/panel/theme.css' <--
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

Dennis Koch•5mo ago

You need to add the files you are using Tailwind classes. Not your CSS files:

        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',

        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',

PulandoooOP•5mo ago

🤔

PulandoooOP•5mo ago

and yes i did the rebuild

Dennis Koch•5mo ago

Not sure whether it's the cause, but you are missing the preset. Please see: https://filamentphp.com/docs/3.x/tables/installation#installing-tailwind-css

Installation - Tables - Filament

PulandoooOP•5mo ago

i did everything as it is in the docs everything

Dennis Koch•5mo ago

No. You just shared the tailwind config which isn't the same 🤷🏼‍♂️

Gaming

Programming

i am new to laravel and filament...

Did you find this page helpful?