How to add default styling to datatable used inside Editor?

maxmedia

Description of problem:
When using "datatable" field type in Editor, datatable is created automatically without any special table classes. In BS5, table needs at least classs "table" to be nice. Is there a simple way to define default classses for those dynamically created tables?

This works fine, but maybe there's a bettter way:

eshopEditor.on('open', function() {
var table=eshopEditor.field('mx_eshopOrderItems').dt();
$(table.table().container()).find('table').addClass('table table-striped');
});

allan

In this example if I select Bootstrap 5 as the styling option, the table does have table assigned to it as a class name. That comes from this line in editor.bootstrap5.js:

DataTable.Editor.fieldTypes.datatable.tableClass = 'table';

You can override that parameter if you want it to have a different class name.

Allan

maxmedia

Ah, thanks Allan, learning every day
But editing library file is probably not a good idea due to future updates.
Inspired by changing default settings for Datables, I have tried this in my custom.js init to use additional classes, seems to work:

Object.assign(DataTable.Editor.fieldTypes.datatable.tableClass = 'table table-striped');

allan

You don't need to edit the library file (sorry, I wasn't suggesting you do so) - you just need to include that line of code somewhere in your own code, after the library has been loaded. Probably just before you create the Editor instance (which it sounds like you have done).

DataTable.Editor.fieldTypes.datatable.tableClass = 'table table-striped';

will do it. No need to use Object.assign here since it isn't an object you are passing to assign.

Allan