Rendering is not okay

[lironesamoun]

Hi,

I tried to set up this package for my project.
After trying the basic example, the rendering is not okay as you can see below

Everything is big. Moreover I have the following message "You are not connected to the internet".

I have generated the component using

php artisan livewire:make Admin/UsersTable

Then, I copy past the basic example.

UserTable.php

<?php

namespace App\Http\Livewire\Admin;

use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Component;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;

class UsersTable extends DataTableComponent
{
    public function columns(): array
    {
        return [
            Column::make('Name')
                ->sortable()
                ->searchable(),
            Column::make('E-mail', 'email')
                ->sortable()
                ->searchable(),
            Column::make('Verified', 'email_verified_at')
                ->sortable(),
        ];
    }

    public function query(): Builder
    {
        return User::query();
    }
}

index.blade.php

<div class="section-body">
        {{--@include('dashboard.admin.users.partials._usersTable')--}}
        <livewire:admin.users-table />
    </div>

Config file

<?php

return [

    /*
     * The class to use to handle the export functionality
     */
    'exports' => \Rappasoft\LaravelLivewireTables\Exports\Export::class,

    /*
     * Which library you want to use for PDF generation
     * Supports dompdf, mpdf
     * You must install the appropriate third party package for each
     * See: https://docs.laravel-excel.com/3.1/exports/export-formats.html
     * And: https://phpspreadsheet.readthedocs.io/en/latest/topics/reading-and-writing-to-file/#pdf
     */
    'pdf_library' => 'dompdf',

    /*
     * The frontend styling framework to use
     * Options: bootstrap-4
     */
    'theme' => 'bootstrap-5',
];

I tried both with Bootstrap-4 and 5.

Bootstrap 5 was installed using npm and it is working well on the website.
I have no errors and I did as well

php artisan clear-compiled && php artisan cache:clear && php artisan route:clear && php artisan view:clear && php artisan config:clear && composer dumpautoload -o

Livewire is as well included both css and script.

Any help please ?

[rappasoft]

It definitely looks like it can't find your css files. If you right click any of the components and use the inspector, does it recognize the css classes? Also your config file is out of date, theme is the only option right now.

[lironesamoun]

Yes, I have no errors concerning CSS. Moreover, I use others components from Bootstrap 5 and it is working.

'theme' => 'bootstrap-5' should be 'theme' => 'bootstrap-4', is that what you mean ?

[rappasoft]

No, your theme is fine if you have everything imported correctly with bootstrap. Bootstrap 4 and 5 are nearly identical anyway and it wouldn't look like that. It's hard to say without having access, but it definitely looks like it is not getting the styles that it wants.

[lironesamoun]

When I publish the config file, I got what I wrote here that's why I don't understand why it is out of date.
Concerning the CSS, I tried to include via CDN Bootstrap and it's still not working.
I'll try to investigate...

[rappasoft]

https://github.com/rappasoft/laravel-livewire-tables/blob/master/config/livewire-tables.php this is the current version. What version of the plugin do you have included?

[lironesamoun]

I did "composer require rappasoft/laravel-livewire-tables"

On my composer.json, I have the version 1.7.

"rappasoft/laravel-livewire-tables": "^1.7",

[lironesamoun]

Ok @rappasoft I got it. There was a comflict with another (old) config 'laravel-livewire-table'

I have deleted the file and publish again and it is now working.

Thank for the insight.

[rappasoft]

Ok good!

[madsem]

I just had the same issue, for me it was that I forgot to wrap the example livewire component in <x-app-layout>...</x-app-layout>.