diff --git a/packages/cli/test/functional/test_site_table_plugin/expected/index.html b/packages/cli/test/functional/test_site_table_plugin/expected/index.html index 75e6cc85cd..4881760c4e 100644 --- a/packages/cli/test/functional/test_site_table_plugin/expected/index.html +++ b/packages/cli/test/functional/test_site_table_plugin/expected/index.html @@ -31,7 +31,7 @@

Welcome to MarkBind - +
@@ -80,7 +80,7 @@

Welcome to MarkBind -

Name
 +
@@ -129,7 +129,7 @@

Welcome to MarkBind -

Name
+
@@ -177,105 +177,101 @@

Welcome to MarkBind -

Name
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
- - -

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
+
+

Test table can be included in a panel

-

-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
-
-
-

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
+
+

Test table can be included in a modal

@@ -283,53 +279,51 @@

Welcome to MarkBindtrigger

-

-

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
-
-
-

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAgeCountry
John28USA
Emily32Canada
Michael41UK
Sophia255Germany
David37Australia
Emma29New Zealand
+
+
@@ -368,20 +362,72 @@

Welcome to MarkBind + --- Test table can be included in a panel - + @@ -65,7 +65,7 @@ Test table can be included in a modal trigger - + diff --git a/packages/core/src/plugins/dataTable.ts b/packages/core/src/plugins/dataTable.ts index 8ba1cbdb34..d1768be05d 100644 --- a/packages/core/src/plugins/dataTable.ts +++ b/packages/core/src/plugins/dataTable.ts @@ -27,20 +27,72 @@ const initScript = ` return options; } - Vue.directive('datatable', { - inserted: function(el, binding) { - const options = binding.value || {}; - const tableOptions = getTableOptions(el); - $(el).DataTable({ ...tableOptions, ...options }); - } - }); + function initializeTables(tables) { + if (!tables || tables.length === 0) return; + tables.forEach(table => { + const options = getTableOptions(table); + $(table).DataTable(options); + $(table).addClass('dt-processed'); + }); + } - document.addEventListener('DOMContentLoaded', function() { - $('table.sortable-table, table.searchable-table, table.sortable-searchable-table').each(function() { - const options = getTableOptions(this); - $(this).DataTable(options); + function setupTableObserver() { + const observer = new MutationObserver((mutations) => { + let newTables = []; + + mutations.forEach(mutation => { + if (mutation.addedNodes.length) { + mutation.addedNodes.forEach(node => { + + if (node.nodeType === 1 && node.tagName === 'TABLE' && + !$(node).hasClass('dt-processed') && + ($(node).hasClass('sortable-table') || + $(node).hasClass('searchable-table') || + $(node).hasClass('sortable-searchable-table'))) { + newTables.push(node); + } + + if (node.nodeType === 1 && node.querySelectorAll) { + const tablesInNode = node.querySelectorAll( + 'table.sortable-table:not(.dt-processed), ' + + 'table.searchable-table:not(.dt-processed), ' + + 'table.sortable-searchable-table:not(.dt-processed)'); + if (tablesInNode.length) { + newTables = [...newTables, ...tablesInNode]; + } + } + }); + } + }); + + if (newTables.length > 0) { + initializeTables(newTables); + } }); + + // Start observing the entire document for changes + observer.observe(document.body, { + childList: true, + subtree: true + }); + + return observer; + } + + document.addEventListener('DOMContentLoaded', function() { + // Process any existing tables + const existingTables = document.querySelectorAll( + 'table.sortable-table:not(.dt-processed), ' + + 'table.searchable-table:not(.dt-processed), ' + + 'table.sortable-searchable-table:not(.dt-processed)' + ); + if (existingTables.length > 0) { + initializeTables(existingTables); + } + + setupTableObserver(); }); + `; @@ -77,8 +129,7 @@ export = { const $renderedTable = $(renderedTable); $renderedTable.find('table') .addClass(tableClass) - .attr('id', `datatable-${index}`) - .attr('v-datatable', ''); + .attr('id', `datatable-${index}`); $node.replaceWith($renderedTable); }); diff --git a/packages/core/test/unit/plugins/default/dataTable.test.ts b/packages/core/test/unit/plugins/default/dataTable.test.ts index 49164aa971..5abe366417 100644 --- a/packages/core/test/unit/plugins/default/dataTable.test.ts +++ b/packages/core/test/unit/plugins/default/dataTable.test.ts @@ -39,7 +39,6 @@ test('postRender should add appropriate classes and attributes to m-table elemen $('table').each((index, el) => { expect($(el).attr('class')).toEqual(expectedClasses[index]); expect($(el).attr('id')).toEqual(`datatable-${index}`); - expect($(el).attr('v-datatable')).toBeDefined(); }); });