Adding data- attributes to custom elements

tacman1123

I'm reading about how to add custom elements to the datatable wrapper, including class and id.

https://datatables.net/examples/basic_init/dom.html and the custom toolbar example at https://datatables.net/examples/advanced_init/dom_toolbar.html

< and > - div elements
<"#id" and > - div with an id
<"class" and > - div with a class
<"#id.class" and > - div with an id and class

brainstorming: 
<@controller=article @action="article#click">

Would create <div data-controller="article" data-action="article#click">

I'm trying to integrate SimulusJS with DataTables, which uses data- attributes to reference elements, rather than ids and classes. So I'm wondering if there's a way (or you would consider adding) custom attributes to this created element.

For example, https://github.com/jgorman/stimulus-datatables#run-datatables-under-rails-turbolinks shows a switch outside the datatable. if I want to use a stimulus toggle switch in a toolbar within the datatable, I'd need to create the toolbar with a data attribute.

Alternatively, I can create my elements outside the datatable, and move them in on initComplete. Or add the data attributes to the toolbar by id or class. But one benefit of Stimulus is getting away from relying on specific ID's or classes to add event listeners, etc.

tacman1123

On a related note, it seems like class could be a ".", and the string should be the dom node. so <"span"> or <"div.toolbar>". Not really necessary, but if #id.class and #id are supported, ".class" seems natural.

allan

initComplete is the way to do this at the moment. In there you can modify the elements created by dom (select based on the class / id used in it).

I'm actually going to move away from dom in DataTables 2 and replace it with a new layout option which will be far easier to use. For example you can do: topLeft: 'buttons' and it would work with all styling libraries. It will also provide opportunities for better control of the DOM elements created.

Allan

tacman1123

That sounds great! Especially if we can add data attributes to the layout.