Just can find this? Customize the Group Buttons

[AiFxApp]

Summary of problem or feature request

Hi, I have spent the better part of 2 days customizing the table look and feel -- the last area I just cant seem to find where or how to is the Group Buttons from Select All to Delete Selection

• I want to add padding far left and in-between, and group position them center and finally color to each?

IMAGE of challenge:

System details

Composer version 2.3.5 node -v17.5.0 Laravel Installer 4.2.10 PHP 8.0.17

• Operating System: Windows 11
• PHP Version: "php": "^8.0",
• Laravel Version: "laravel/framework": "^8.0",
• Laravel-Datatables Version: "yajra/laravel-datatables-oracle": "^9.9"
• Bootstrap CSS

[yajra]

Quick answer, make sure you have the dataTables buttons css loaded on your site.

Also, better check datatables.net forum to get better results as this is already a js/css issue. Thanks!

[AiFxApp]

as you can see I have the necessary Button CDN (which i converted to a file to allow me to try and customize this.) Yet sadly a still am not able to? Your advice would be appreciated

I see in the datatables.net docs the following:

section

https://datatables.net/extensions/buttons/#Displaying-the-buttons

Any change someone has an example for me (i am still VERY young in JS) yet if you can show me how to I will could learn by this - Please? <as you can see in the image in 1st comment above my exact need and reference>

[AiFxApp]

I assume something like this:

var table = $('#example').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

This is an example from Datatables.net -- yet i am unsure on how to proceed

[AiFxApp]

Please sir - I would love to know how to place these buttons correctly?

[AiFxApp]

I assume something like this:

var table = $('#example').DataTable( {
    buttons: [
        'copy', 'excel', 'pdf'
    ]
} );

table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );

This is an example from Datatables.net -- yet i am unsure on how to proceed

This only makes them disappear - I am sure i am not understanding properly

[yajra]

The screenshot you posted is almost correct and just missing a piece of css in the library. Make sure buttons css files are loaded correctly.

You can also achieve the layout you want by using the dom option