DOM configuration, V2, StimulusJS

tacman1123

I know you're changing the DOM options in version 2, and wanted to bring up something worth considering for V2.

Stimulus controllers are automatically fired when they data- elements are added to the DOM. This makes it easy to have an Single Page Application experience without having to constantly add event when new elements are added. One more reason to get rid of the jQuery-like initialization, which only happens on page load.

$(document).ready( function () {
    $('#table_id').DataTable();
} );

The problem I had was when trying to initialize a table with a stimulus controller (<table data-conroller=...>), the datatables library removes the table dom element and re-creates a div that surrounds the table, then a table element with the same attributes. But since stimulus events are fired the dom node is created or destroyed, my controller was being fired incorrectly.

The solution was to put the stimulus controller in a div that surrounds the table, and then create a stimulus target for just the table. But that got me to thinking that really I want to have the flexibility to do that for all the datatable components -- buttons, pagination, search, etc.

I read a blog post a while back that the dom: configuration was certainly going to change in 2.0, so the purpose of this post is to request that in that refactoring that using stimulus in taken into account.

On a related note, I've been using a stimulus component for datatables for a while now, and love it.

allan

Hi,

Thanks for the feedback! At the moment I don't have any plans for DOM mutation observes in DataTables, but it is possible that I'll add it in future. The dom replacement code has actually been written already and is in the 2 branch of the git repo - it uses a new layout option where you can do things like:

layout: {
  topLeft: 'buttons',
  topRight: new Buttons( ... ),
  bottomLeft: 'paging'
}

etc. So that is more for layout rather than watching the DOM for changes in data. I doubt we'll ever add mutation observers for things like the filtering input, buttons etc.

Regarding the jQuery bit - you can already avoid all jQuery code with DataTables if you want. See this section of the manual.

Regards,
Allan