V3 support for Col Toggle

src/components/datatable/DataTable.vue

@@ -1246,11 +1246,11 @@ export default {
             }
         },
         findColumnByKey(columns, key) {
-            if(columns && columns.length) {
+            if (columns && columns.length) {
-                for(let i = 0; i < columns.length; i++) {
+                for (let i = 0; i < columns.length; i++) {
-                    let child = columns[i];
+                    let column = columns[i];
-                    if(child.columnKey === key || child.field === key) {
+                    if (column.props.columnKey === key || column.props.field === key) {
-                        return child;
+                        return column;
                     }
                 }
             }
@@ -1651,23 +1651,31 @@ export default {
             ];
         },
         columns() {
-            let columns = this.$slots.default().filter(child => child.type.name === 'column');
+            let cols = [];
+            let children = this.$slots.default();
+            
+            children.forEach(child => {
+                if (child.dynamicChildren)
+                    cols = [...cols, ...child.children];
+                else if (child.type.name === 'column')
+                    cols.push(child);
+            });
 
             if (this.reorderableColumns && this.d_columnOrder) {
                 let orderedColumns = [];
                 for (let columnKey of this.d_columnOrder) {
-                    let column = this.findColumnByKey(columns, columnKey);
+                    let column = this.findColumnByKey(cols, columnKey);
                     if (column) {
                         orderedColumns.push(column);
                     }
                 }
 
-                return [...orderedColumns, ...columns.filter((item) => {
+                return [...orderedColumns, ...cols.filter((item) => {
                     return orderedColumns.indexOf(item) < 0;
                 })];
             }
             
-            return columns;
+            return cols;
         },
         frozenColumns() {
             let frozenColumns = [];

src/views/datatable/DataTableColToggleDemo.vue

@@ -12,7 +12,7 @@
                 <DataTable :value="products">
                     <template #header>
                         <div style="text-align:left">
-                            <MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
+                            <MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
                                 placeholder="Select Columns" style="width: 20em"/>
                         </div>
                     </template>
@@ -30,7 +30,7 @@
 &lt;DataTable :value="products"&gt;
     &lt;template #header&gt;
         &lt;div style="text-align:left"&gt;
-            &lt;MultiSelect :value="selectedColumns" :options="columns" optionLabel="header" @input="onToggle"
+            &lt;MultiSelect :modelValue="selectedColumns" :options="columns" optionLabel="header" @update:modelValue="onToggle"
                 placeholder="Select Columns" style="width: 20em"/&gt;
         &lt;/div&gt;
     &lt;/template&gt;