How Do I Edit DataTables?

Previous to 2023 R2, I was able to customize my own tables with just Bootstrap and everything looks and works perfect. Now, after updating to R2, DataTables seems to be overriding a lot of the Bootstrap. Am I somehow able to fix DataTables to how I need it? This is worrisome that just updating to the latest version of the program is enough to break my program.

1 Like

R2 offers updated version of Bootstrap and DataTables.
There are changes on those that could break customization (as you found out).
I guess you can fix that with R2.
If you share your customizations with screenshots on how it looks and how it should look, I’ll try to help you to update your code.

The picture with green and white rows is the before picture in 2023 r1.1. The picture with grey and white rows is 2023 r2. Thank you for your help.

Can you post the code that you used to make it look like that on R1.1?

Are you talking about the bootstrap 4 file? It’s the customized bootstrap that made it look like that. It might be pretty long to post on here and you might have to use a beautify css tool.

Oh, I was thinking that you did a few custom changes and put some code on the App HTML Header.

Maybe is better to look at the DataTables site and see the Bootstrap 5 file they use to make it look on the new version.

I haven’t done a full Bootstrap Theme yet (either 4.6 or 5.3).

I can try to reduce the height of the rows and the green color by doing some App HTML Header CSS changes. The only problem with height changes is that Xojo will calculate the scroll area with the default height so you will end with some empty space below.

Yeah that’s what I was wondering. But how would I edit the data tables file once I do figure out what I need to change? The data tables file is what is overriding my customizations and I can’t change it unless I can edit it.

I will need to take a look at the changes, I haven’t played enough with R2.

I guess datatables.min.css should allow bootstrap 5 properties to change the look of it, so in theory changing the bootstrap 5 theme should work. I think that approach is better than trying to add some CSS to the App HTML Header.