Table customization

[Augen2203]

Hi.
I wanted to customize my table a little, but I noticed that this is not possible, since it is tightly written in the class:
"class Bootstrap5".

Therefore, I cannot, for example, add the class table-sm or remove table-bordered, table-hover if I don't need it.

Is more customization of the tables possible?

Thanks for the great package!

[luanfreitasdev]

Hello @Augen2203 .

You can copy the \PowerComponents\LivewirePowerGrid\Themes\Bootstrap5::class class and make some modifications.

To impose on your project, you can do it inside the component

    public function template(): ?string
    {
        return \App\Http\Livewire\MyCustomBs5Template::class;
    }

[Augen2203]

Hi, I am grateful for your reply.

Yes, I understand that I can do it this way, but my question implied what I want, for example, to make table-sm for the user-table table, and remove table-bordered for the orders-table, these are all examples, I mean that it would be great to add customize the table itself, if necessary, in the table component itself, or expand it using some trait.

thanks

[luanfreitasdev]

any idea what it would look like?

[CrazyBoy49z]

?php

namespace App\Libraries\PowerComponents\Themes;

use PowerComponents\LivewirePowerGrid\Themes\Components\Cols;
use PowerComponents\LivewirePowerGrid\Themes\Components\Row;
use PowerComponents\LivewirePowerGrid\Themes\Components\Table;
use PowerComponents\LivewirePowerGrid\Themes\Theme;

class Bootstrap5 extends \PowerComponents\LivewirePowerGrid\Themes\Bootstrap5
{
    public function rows(): Row
    {
        return Theme::row()
            ->span('d-flex justify-content-between ', 'white-space: break-spaces;');
    }

    public function cols(): Cols
    {
        return Theme::cols()
            ->div('pg-column')
            ->clearFilter('', 'color: #c30707; cursor:pointer; float: right;');
    }
}

and replace in config

'theme' => App\Libraries\PowerComponents\Themes\Bootstrap5::class,

[oohegor]

Works! but don't forget to set this path in tailwind.config.js as well.

module.exports = {
    content: [
        ...
        './app/Libraries/PowerComponents/Themes/Bootstrap5.php'
    ],

[CrazyBoy49z]

Works! but don't forget to set this path in tailwind.config.js as well.

module.exports = {
    content: [
        ...
        './app/Libraries/PowerComponents/Themes/Bootstrap5.php'
    ],

Why? If you use a bootstrap, it does not need this setting

[oohegor]

sure, my miss,
I am used tailwind, so that's why I needed to correct my tailwind.config.js

for bootstrap it doesn't need