DataTable (bs5)

In the future I will need DataTable (bs5). (Demo for bs4 works fine)
In the demo “Datatable.project” for bs5 I see that column alignment (“text-right”) does not work:

{
title: "Salary",
class: "text-right"
}

And row selection does not work:

Button4.onclick = function() {
var table;
table = $("#DataTable1").DataTable();
$(table.rows().nodes()).removeClass("highlight");
$(table.cells().nodes()).removeClass("highlight");
$(table.row(2).nodes()).addClass("highlight");
};

I also have a question, is it possible to define column widths?

DataTables was not developed by us, so we’re not experts. However, they have excellent documentation with lots of samples.

They also have active forums for support.

The header element of the AppStudio project has a CSS file:

<link href="toolbox/bs5/dist/css/dataTables.bootstrap5.min.css" rel="stylesheet">

it is different than the one on the page DataTables example - Bootstrap 5

CSS file:

<link href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.css" rel="stylesheet">

They differ in content. There is no “dt-type-numeric” class in AppStudio.

And the class in the AppStudio project in the numeric field is called:
class="text-right"

On the page DataTables example - Bootstrap 5 it is different:

class="dt-type-numeric"

So shouldn’t this be fixed in AppStudio?

Maybe I can replace the CSS file myself?
If I place the correct CSS file in the application window (CSS tab) then everything is fine, but how do I stop the incorrect file from loading?

It looks like there has been an update to the DataTables libraries. We’ll get that into the next build.

In the meantime, your workaround with the CSS tab makes sense.

1 Like