From 2efaa699c7662b5f6ff22fff5e2043a4da91bd94 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 23 Sep 2020 20:55:00 +0300
Subject: [PATCH] Initated datatable migration

---
 src/components/columngroup/ColumnGroup.vue    | 20 +----
 src/components/datatable/BodyCell.vue         | 42 +++++-----
 src/components/datatable/ColumnSlot.vue       | 31 -------
 src/components/datatable/DataTable.vue        | 79 ++++++++----------
 src/components/datatable/ScrollableView.vue   | 10 +--
 src/components/datatable/TableBody.vue        | 61 ++------------
 src/components/datatable/TableFooter.vue      | 25 +++---
 src/components/datatable/TableHeader.vue      | 58 +++++++-------
 src/components/datatable/TableLoadingBody.vue |  9 +--
 src/components/row/Row.vue                    | 19 +----
 src/views/datatable/DataTableFilterDemo.vue   |  2 +-
 .../datatable/DataTableSelectionDemo.vue      | 12 +--
 src/views/datatable/DataTableSortDemo.vue     | 80 +++++++++----------
 13 files changed, 160 insertions(+), 288 deletions(-)
 delete mode 100755 src/components/datatable/ColumnSlot.vue

diff --git a/src/components/columngroup/ColumnGroup.vue b/src/components/columngroup/ColumnGroup.vue
index 25ffa033d..27948a767 100755
--- a/src/components/columngroup/ColumnGroup.vue
+++ b/src/components/columngroup/ColumnGroup.vue
@@ -1,9 +1,3 @@
-<template>
-    <div>
-        <slot></slot>
-    </div>
-</template>
-
 <script>
 export default {
     name: 'columngroup',
@@ -13,18 +7,8 @@ export default {
             default: null
         }
     },
-    data() {
-        return {
-            children: null
-        };
-    },
-    mounted() {
-        this.children = this.$children;
-    },
-    computed: {
-        rows() {
-            return this.children;
-        }
+    render() {
+        return null;
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 6e9130885..0e1f4697c 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -1,20 +1,20 @@
 <template>
-    <td :style="column.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown">
-        <ColumnSlot :data="rowData" :column="column" :index="index" type="body" v-if="column.$scopedSlots.body && !d_editing" />
-        <ColumnSlot :data="rowData" :column="column" :index="index" type="editor" v-else-if="column.$scopedSlots.editor && d_editing" />
-        <template v-else-if="column.selectionMode">
-            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.selectionMode === 'single'" />
-            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.selectionMode ==='multiple'" />
+    <td :style="column.props.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown">
+        <component :is="column.children.body" :data="rowData" :column="column" :index="index" v-if="column.children && column.children.body && !d_editing" />
+        <component :is="column.children.editor" :data="rowData" :column="column" :index="index" v-else-if="column.children && column.children.editor && d_editing" />
+        <template v-else-if="column.props.selectionMode">
+            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props.selectionMode === 'single'" />
+            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props.selectionMode ==='multiple'" />
         </template>
-        <template v-else-if="column.rowReorder">
-            <i :class="['p-datatable-reorderablerow-handle', column.rowReorderIcon]"></i>
+        <template v-else-if="column.props.rowReorder">
+            <i :class="['p-datatable-reorderablerow-handle', column.props.rowReorderIcon]"></i>
         </template>
-        <template v-else-if="column.expander">
+        <template v-else-if="column.props.expander">
             <button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
                 <span :class="rowTogglerIcon"></span>
             </button>
         </template>
-        <template v-else-if="editMode === 'row' && column.rowEditor">
+        <template v-else-if="editMode === 'row' && column.props.rowEditor">
             <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
                 <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
@@ -32,7 +32,6 @@
 <script>
 import DomHandler from '../utils/DomHandler';
 import ObjectUtils from '../utils/ObjectUtils';
-import ColumnSlot from './ColumnSlot.vue';
 import RowRadioButton from './RowRadioButton';
 import RowCheckbox from './RowCheckbox.vue';
 import Ripple from '../ripple/Ripple';
@@ -91,7 +90,7 @@ export default {
     },
     methods: {
         resolveFieldData() {
-            return ObjectUtils.resolveFieldData(this.rowData, this.column.field);
+            return ObjectUtils.resolveFieldData(this.rowData, this.column.props.field);
         },
         toggleRow(event) {
             this.$emit('row-toggle', {
@@ -106,7 +105,7 @@ export default {
             this.$emit('checkbox-change', event);
         },
         isEditable() {
-            return this.column.$scopedSlots.editor != null;
+            return this.column.children && this.column.children.editor != null;
         },
         bindDocumentEditListener() {
             if (!this.documentEditListener) {
@@ -136,14 +135,14 @@ export default {
             if (this.editMode === 'cell' && this.isEditable() && !this.d_editing) {
                 this.d_editing = true;
                 this.bindDocumentEditListener();
-                this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+                this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
             }
         },
         completeEdit(event, type) {
             let completeEvent = {
                 originalEvent: event,
                 data: this.rowData,
-                field: this.column.field,
+                field: this.column.props.field,
                 index: this.index,
                 type: type,
                 defaultPrevented: false,
@@ -167,7 +166,7 @@ export default {
 
                     case 27:
                         this.switchCellToViewMode();
-                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
                     break;
 
                     case 9:
@@ -256,26 +255,25 @@ export default {
             return (DomHandler.find(this.$el, '.p-invalid').length === 0);
         },
         onRowEditInit(event) {
-            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
         },
         onRowEditSave(event) {
-            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
         },
         onRowEditCancel(event) {
-            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.field, index: this.index});
+            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props.field, index: this.index});
         }
     },
     computed: {
         containerClass() {
-            return [this.column.bodyClass, {
-                'p-selection-column': this.column.selectionMode != null,
+            return [this.column.props.bodyClass, {
+                'p-selection-column': this.column.props.selectionMode != null,
                 'p-editable-column': this.isEditable(),
                 'p-cell-editing': this.d_editing
             }];
         }
     },
     components: {
-        'ColumnSlot': ColumnSlot,
         'DTRadioButton': RowRadioButton,
         'DTCheckbox': RowCheckbox
     },
diff --git a/src/components/datatable/ColumnSlot.vue b/src/components/datatable/ColumnSlot.vue
deleted file mode 100755
index 7a06d147d..000000000
--- a/src/components/datatable/ColumnSlot.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-export default {
-    functional: true,
-    props: {
-        column: {
-            type: null,
-            default: null
-        },
-        data: {
-            type: null,
-            default: null
-        },
-        index: {
-            type: Number,
-            default: null
-        },
-        type: {
-            type: String,
-            default: null
-        }
-    },
-    render(createElement, context) {
-        const content = context.props.column.$scopedSlots[context.props.type]({
-            'data': context.props.data,
-            'index': context.props.index,
-            'column': context.props.column
-        });
-        return [content];
-    }
-}
-</script>
\ No newline at end of file
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index fa09e9bfe..2bbacba50 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -364,7 +364,6 @@ export default {
     },
     data() {
         return {
-            allChildren: null,
             d_first: this.first,
             d_rows: this.rows,
             d_sortField: this.sortField,
@@ -432,13 +431,12 @@ export default {
         }
     },
     mounted() {
-        this.allChildren = this.$children;
-
         if (this.reorderableColumns) {
             let columnOrder = [];
-            for (let child of this.allChildren) {
-                if (child.$options._propKeys.indexOf('columnKey') !== -1) {
-                    columnOrder.push(child.columnKey||child.field);
+            const children = this.$slots.default();
+            for (let child of children) {
+                if (child.type.name === 'column') {
+                    columnOrder.push(child.props.columnKey||child.props.field);
                 }
             }
             this.d_columnOrder = columnOrder;
@@ -474,9 +472,9 @@ export default {
             const event = e.originalEvent;
             const column = e.column;
 
-            if (column.sortable) {
+            if (column.props.sortable) {
                 const targetNode = event.target;
-                const columnField = column.sortField || column.field;
+                const columnField = column.props.sortField || column.props.field;
 
                 if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@@ -1636,7 +1634,7 @@ export default {
                 filters: this.filters,
                 filterMatchModes: filterMatchModes
             };
-        }
+        },
     },
     computed: {
         containerClass() {
@@ -1653,25 +1651,22 @@ export default {
             ];
         },
         columns() {
-            let columns = [];
+            let columns = this.$slots.default().filter(child => child.type.name === 'column');
 
-            if (this.allChildren) {
-                columns = this.allChildren.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
-
-                if (this.reorderableColumns && this.d_columnOrder) {
-                    let orderedColumns = [];
-                    for (let columnKey of this.d_columnOrder) {
-                        let column = this.findColumnByKey(columns, columnKey);
-                        if (column) {
-                            orderedColumns.push(column);
-                        }
+            if (this.reorderableColumns && this.d_columnOrder) {
+                let orderedColumns = [];
+                for (let columnKey of this.d_columnOrder) {
+                    let column = this.findColumnByKey(columns, columnKey);
+                    if (column) {
+                        orderedColumns.push(column);
                     }
-
-                    return [...orderedColumns, ...columns.filter((item) => {
-                        return orderedColumns.indexOf(item) < 0;
-                    })];
                 }
+
+                return [...orderedColumns, ...columns.filter((item) => {
+                    return orderedColumns.indexOf(item) < 0;
+                })];
             }
+            
             return columns;
         },
         frozenColumns() {
@@ -1702,44 +1697,40 @@ export default {
             return this.frozenColumns.length > 0;
         },
         headerColumnGroup() {
-            if (this.allChildren) {
-                for (let child of this.allChildren) {
-                    if (child.$vnode.tag.indexOf('columngroup') !== -1 && child.type === 'header') {
-                        return child;
-                    }
+            const children = this.$slots.default();
+            for (let child of children) {
+                if (child.type.name === 'columngroup' && child.props.type === 'header') {
+                    return child;
                 }
             }
 
             return null;
         },
         frozenHeaderColumnGroup() {
-            if (this.allChildren) {
-                for (let child of this.allChildren) {
-                    if (child.$vnode.tag.indexOf('columngroup') !== -1 && child.type === 'frozenheader') {
-                        return child;
-                    }
+            const children = this.$slots.default();
+            for (let child of children) {
+                if (child.type.name === 'columngroup' && child.props.type === 'frozenheader') {
+                    return child;
                 }
             }
 
             return null;
         },
         footerColumnGroup() {
-            if (this.allChildren) {
-                for (let child of this.allChildren) {
-                    if (child.$vnode.tag.indexOf('columngroup') !== -1 && child.type === 'footer') {
-                        return child;
-                    }
+            const children = this.$slots.default();
+            for (let child of children) {
+                if (child.type.name === 'columngroup' && child.props.type === 'footer') {
+                    return child;
                 }
             }
 
             return null;
         },
         frozenFooterColumnGroup() {
-            if (this.allChildren) {
-                for (let child of this.allChildren) {
-                    if (child.$vnode.tag.indexOf('columngroup') !== -1 && child.type === 'frozenfooter') {
-                        return child;
-                    }
+           const children = this.$slots.default();
+            for (let child of children) {
+                if (child.type.name === 'columngroup' && child.props.type === 'frozenfooter') {
+                    return child;
                 }
             }
 
diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue
index 6481ad26a..271a5c3c1 100755
--- a/src/components/datatable/ScrollableView.vue
+++ b/src/components/datatable/ScrollableView.vue
@@ -5,7 +5,7 @@
                 <table class="p-datatable-scrollable-header-table">
                     <colgroup>
                         <template v-for="(col,i) of columns">
-                            <col v-if="shouldRenderCol(col)" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
+                            <col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" />
                         </template>
                     </colgroup>
                     <slot name="header"></slot>
@@ -17,14 +17,14 @@
             <table ref="scrollTable" :class="bodyTableClass" :style="bodyTableStyle">
                 <colgroup>
                     <template v-for="(col,i) of columns">
-                        <col v-if="shouldRenderCol(col)" :key="col.columnKey||col.field||i" :style="col.bodyStyle || col.headerStyle" />
+                        <col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.bodyStyle || col.props.headerStyle" />
                     </template>
                 </colgroup>
                 <slot name="body"></slot>
             </table>
             <table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll">
                 <colgroup>
-                    <col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle || col.headerStyle" />
+                    <col v-for="(col,i) of columns" :key="col.props.columnKey||col.props.field||i" :style="col.props.bodyStyle || col.props.headerStyle" />
                 </colgroup>
                 <DTTableLoadingBody :columns="columns" :rows="rows" />
             </table>
@@ -35,7 +35,7 @@
                 <table class="p-datatable-scrollable-footer-table">
                     <colgroup>
                         <template v-for="(col,i) of columns">
-                            <col v-if="shouldRenderCol(col)" :key="col.columnKey||col.field||i" :style="col.footerStyle || col.headerStyle" />
+                            <col v-if="shouldRenderCol(col)" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle || col.props.headerStyle" />
                         </template>
                     </colgroup>
                     <slot name="footer"></slot>
@@ -175,7 +175,7 @@ export default {
         },
         shouldRenderCol(column) {
             if (this.rowGroupMode && this.rowGroupMode === 'subheader') {
-                return this.groupRowsBy !== column.field;
+                return this.groupRowsBy !== column.props.field;
             }
 
             return true;
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index d941fba54..c9add398d 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -7,7 +7,7 @@
                         <button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
                             <span :class="rowGroupTogglerIcon(rowData)"></span>
                         </button>
-                        <DTRowExpansionTemplate :template="templates['groupheader']" :data="rowData" :index="index" />
+                        <component :is="templates['groupheader']" :data="rowData" :index="index" />
                     </td>
                 </tr>
                 <tr :class="getRowClass(rowData)" :key="getRowKey(rowData, index)"
@@ -15,8 +15,8 @@
                     @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
                     @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                     <template v-for="(col,i) of columns">
-                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
-                            :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null"
+                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.props.columnKey||col.props.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
+                            :rowTogglerIcon="col.props.expander ? rowTogglerIcon(rowData): null"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
                             :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
                             @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@@ -26,18 +26,18 @@
                 </tr>
                 <tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, index) + '_expansion'">
                     <td :colspan="columns.length">
-                        <DTRowExpansionTemplate :template="templates['expansion']" :data="rowData" :index="index" />
+                        <component :is="templates['expansion']" :data="rowData" :index="index" />
                     </td>
                 </tr>
                 <tr class="p-rowgroup-footer" v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, index)" :key="getRowKey(rowData, index) + '_subfooter'">
-                    <DTRowExpansionTemplate :template="templates['groupfooter']" :data="rowData" :index="index" />
+                    <component :is="templates['groupfooter']" :data="rowData" :index="index" />
                 </tr>
             </template>
         </template>
         <tr v-else class="p-datatable-emptymessage">
             <td :colspan="columns.length">
-                <DTSlotTemplate :template="templates.empty" v-if="templates.empty && !loading"/>
-                <DTSlotTemplate :template="templates.loading" v-if="templates.loading && loading"/>
+                <component :is="templates.empty" v-if="templates.empty && !loading" />
+                <component :is="templates.loading" v-if="templates.loading && loading" />
             </td>
         </tr>
     </tbody>
@@ -47,49 +47,6 @@
 import ObjectUtils from '../utils/ObjectUtils';
 import BodyCell from './BodyCell.vue';
 
-const RowExpansionTemplate = {
-    functional: true,
-    props: {
-        name: {
-            type: String,
-            default: null
-        },
-        data: {
-            type: null,
-            default: null
-        },
-        index: {
-            type: Number,
-            default: null
-        },
-        template: {
-            type: null,
-            default: null
-        }
-    },
-    render(createElement, context) {
-        const content = context.props.template({
-            'data': context.props.data,
-            'index': context.props.index
-        });
-        return [content];
-    }
-}
-
-const SlotTemplate = {
-    functional: true,
-    props: {
-        template: {
-            type: null,
-            default: null
-        }
-    },
-    render(createElement, context) {
-        const content = context.props.template();
-        return [content];
-    }
-}
-
 export default {
     props: {
         value: {
@@ -446,9 +403,7 @@ export default {
         }
     },
     components: {
-        'DTBodyCell': BodyCell,
-        'DTRowExpansionTemplate': RowExpansionTemplate,
-        'DTSlotTemplate': SlotTemplate
+        'DTBodyCell': BodyCell
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
index 1c2832027..d9cf69e75 100755
--- a/src/components/datatable/TableFooter.vue
+++ b/src/components/datatable/TableFooter.vue
@@ -1,18 +1,18 @@
 <template>
     <tfoot class="p-datatable-tfoot" v-if="hasFooter">
         <tr v-if="!columnGroup">
-            <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
-                :colspan="col.colspan" :rowspan="col.rowspan">
-                <DTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                {{col.footer}}
+            <td v-for="(col,i) of columns" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle" :class="col.props.footerClass"
+                :colspan="col.props.colspan" :rowspan="col.props.rowspan">
+                <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
+                {{col.props.footer}}
             </td>
         </tr>
         <template v-else>
-            <tr v-for="(row,i) of columnGroup.rows" :key="i">
-                <td v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass"
-                    :colspan="col.colspan" :rowspan="col.rowspan">
-                    <DTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                    {{col.footer}}
+            <tr v-for="(row,i) of columnGroup.children.default()" :key="i">
+                <td v-for="(col,i) of row.children.default()" :key="col.props.columnKey||col.props.field||i" :style="col.props.footerStyle" :class="col.props.footerClass"
+                    :colspan="col.props.colspan" :rowspan="col.props.rowspan">
+                    <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
+                    {{col.props.footer}}
                 </td>
             </tr>
         </template>
@@ -20,8 +20,6 @@
 </template>
 
 <script>
-import ColumnSlot from './ColumnSlot.vue';
-
 export default {
     props: {
         columnGroup: {
@@ -42,7 +40,7 @@ export default {
             }
             else {
                 for (let col of this.columns) {
-                    if (col.footer || col.$scopedSlots.footer) {
+                    if (col.props.footer || (col.children && col.children.footer)) {
                         hasFooter = true;
                         break;
                     }
@@ -51,9 +49,6 @@ export default {
 
             return hasFooter;
         }
-    },
-    components: {
-        'DTColumnSlot': ColumnSlot
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 85126c38f..449057df5 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -3,41 +3,41 @@
         <template v-if="!columnGroup">
             <tr>
                 <template v-for="(col,i) of columns">
-                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :tabindex="col.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
-                        :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
+                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props.field)" :tabindex="col.props.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
+                        :key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" :class="getColumnHeaderClass(col)"
                         @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
                         @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
-                        :colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
+                        :colspan="col.props.colspan" :rowspan="col.props.rowspan" :aria-sort="getAriaSort(col)">
                         <span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
-                        <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
-                        <span class="p-column-title" v-if="col.header">{{col.header}}</span>
-                        <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                        <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
+                        <span class="p-column-title" v-if="col.props.header">{{col.props.header}}</span>
+                        <span v-if="col.props.sortable" :class="getSortableColumnIcon(col)"></span>
                         <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
-                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple' && !hasColumnFilter()" />
+                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props.selectionMode ==='multiple' && !hasColumnFilter()" />
                     </th>
                 </template>
             </tr>
             <tr v-if="hasColumnFilter()">
                 <template v-for="(col,i) of columns">
-                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :key="col.columnKey||col.field||i"
-                        :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
-                        <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
-                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
+                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props.field)" :key="col.props.columnKey||col.props.field||i"
+                        :class="getFilterColumnHeaderClass(col)" :style="col.props.filterHeaderStyle">
+                        <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
+                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props.selectionMode ==='multiple'" />
                     </th>
                 </template>
             </tr>
         </template>
         <template v-else>
-            <tr v-for="(row,i) of columnGroup.rows" :key="i">
-                <th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.sortable ? '0' : null"
+            <tr v-for="(row,i) of columnGroup.children.default()" :key="i">
+                <th v-for="(col,i) of row.children.default()" :key="col.props.columnKey||col.props.field||i" :style="col.props.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.props.sortable ? '0' : null"
                     @click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
-                    :colspan="col.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
-                    <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
-                    <span class="p-column-title" v-if="col.header">{{col.header}}</span>
-                    <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                    :colspan="col.props.colspan" :rowspan="col.props.rowspan" :aria-sort="getAriaSort(col)">
+                   <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
+                    <span class="p-column-title" v-if="col.props.header">{{col.props.header}}</span>
+                    <span v-if="col.props.sortable" :class="getSortableColumnIcon(col)"></span>
                     <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
-                    <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
-                    <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
+                    <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
+                    <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props.selectionMode ==='multiple'" />
                 </th>
             </tr>
         </template>
@@ -46,7 +46,6 @@
 
 <script>
 import DomHandler from '../utils/DomHandler';
-import ColumnSlot from './ColumnSlot.vue';
 import HeaderCheckbox from './HeaderCheckbox.vue';
 
 export default {
@@ -98,27 +97,27 @@ export default {
     },
     methods: {
         isMultiSorted(column) {
-            return column.sortable && this.getMultiSortMetaIndex(column) > -1
+            return column.props.sortable && this.getMultiSortMetaIndex(column) > -1
         },
         isColumnSorted(column) {
-            return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.field || this.sortField === column.sortField)) : this.isMultiSorted(column);
+            return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.props.field || this.sortField === column.props.sortField)) : this.isMultiSorted(column);
         },
         getColumnHeaderClass(column) {
-            return [column.headerClass,
-                    {'p-sortable-column': column.sortable},
+            return [column.props.headerClass,
+                    {'p-sortable-column': column.props.sortable},
                     {'p-resizable-column': this.resizableColumns},
                     {'p-highlight': this.isColumnSorted(column)}
             ];
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', column.filterHeaderClass];
+            return ['p-filter-column', column.props.filterHeaderClass];
         },
         getSortableColumnIcon(column) {
             let sorted = false;
             let sortOrder = null;
 
             if (this.sortMode === 'single') {
-                sorted = this.sortField && (this.sortField === column.field || this.sortField === column.sortField);
+                sorted = this.sortField && (this.sortField === column.props.field || this.sortField === column.props.sortField);
                 sortOrder = sorted ? this.sortOrder: 0;
             }
             else if (this.sortMode === 'multiple') {
@@ -142,7 +141,7 @@ export default {
 
             for (let i = 0; i < this.multiSortMeta.length; i++) {
                 let meta = this.multiSortMeta[i];
-                if (meta.field === column.field || meta.field === column.sortField) {
+                if (meta.field === column.props.field || meta.field === column.props.sortField) {
                     index = i;
                     break;
                 }
@@ -180,7 +179,7 @@ export default {
             }
         },
         getAriaSort(column) {
-            if (column.sortable) {
+            if (column.props.sortable) {
                 const sortIcon = this.getSortableColumnIcon(column);
                 if (sortIcon[1]['pi-sort-amount-down'])
                     return 'descending';
@@ -196,7 +195,7 @@ export default {
         hasColumnFilter() {
             if (this.columns) {
                 for (let col of this.columns) {
-                    if (col.$scopedSlots.filter) {
+                    if (col.children && col.children.filter) {
                         return true;
                     }
                 }
@@ -206,7 +205,6 @@ export default {
         }
     },
     components: {
-        'DTColumnSlot': ColumnSlot,
         'DTHeaderCheckbox': HeaderCheckbox
     }
 }
diff --git a/src/components/datatable/TableLoadingBody.vue b/src/components/datatable/TableLoadingBody.vue
index cb230ee08..a47a3d02c 100755
--- a/src/components/datatable/TableLoadingBody.vue
+++ b/src/components/datatable/TableLoadingBody.vue
@@ -1,16 +1,14 @@
 <template>
     <tbody class="p-datatable-tbody">
         <tr v-for="n in rows" :key="n">
-            <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i">
-                <DTColumnSlot :column="col" :index="i" type="loading" />
+            <td v-for="(col,i) of columns" :key="col.props.columnKey||col.props.field||i">
+                <component :is="col.children.loading" :column="col" :index="i" v-if="col.children && col.children.loading" />
             </td>
         </tr>
     </tbody>
 </template>
 
 <script>
-import ColumnSlot from './ColumnSlot';
-
 export default {
     props: {
         columns: {
@@ -21,9 +19,6 @@ export default {
             type: null,
             default: null
         }
-    },
-    components: {
-        'DTColumnSlot': ColumnSlot
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/components/row/Row.vue b/src/components/row/Row.vue
index 961d86883..0a2bff195 100755
--- a/src/components/row/Row.vue
+++ b/src/components/row/Row.vue
@@ -1,21 +1,8 @@
-<template>
-    <div>
-        <slot></slot>
-    </div>
-</template>
-
 <script>
 export default {
-    props: {
-
-    },
-    data() {
-        return {
-            columns: null
-        };
-    },
-    mounted() {
-        this.columns = this.$children;
+    name: 'row',
+    render() {
+        return null;
     }
 }
 </script>
\ No newline at end of file
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 18b7fa7b3..05ae78045 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -51,7 +51,7 @@
                             <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{slotProps.data.representative.name}}</span>
                         </template>
-                            <template #filter>
+                        <template #filter>
                             <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
diff --git a/src/views/datatable/DataTableSelectionDemo.vue b/src/views/datatable/DataTableSelectionDemo.vue
index 1338b21b4..cb08bfece 100755
--- a/src/views/datatable/DataTableSelectionDemo.vue
+++ b/src/views/datatable/DataTableSelectionDemo.vue
@@ -89,7 +89,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Single&lt;/h5&gt;
     &lt;p&gt;In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.&lt;/p&gt;
-    &lt;DataTable :value="products" :selection.sync="selectedProduct1" selectionMode="single" dataKey="id"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProduct1" selectionMode="single" dataKey="id"&gt;
         &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
         &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
@@ -101,7 +101,7 @@
     &lt;h5&gt;Multiple&lt;/h5&gt;
     &lt;p&gt;In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
             Setting metaKeySelection property as false enables multiple selection without meta key.&lt;/p&gt;
-    &lt;DataTable :value="products" :selection.sync="selectedProducts1" selectionMode="multiple" dataKey="id"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProducts1" selectionMode="multiple" dataKey="id"&gt;
         &lt;template #header&gt;
             Multiple Selection with MetaKey
         &lt;/template&gt;
@@ -111,7 +111,7 @@
         &lt;Column field="quantity" header="Quantity"&gt;&lt;/Column&gt;
     &lt;/DataTable&gt;
 
-    &lt;DataTable :value="products" :selection.sync="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProducts2" selectionMode="multiple" dataKey="id" :metaKeySelection="false" style="margin-top: 2em"&gt;
         &lt;template #header&gt;
             Multiple Selection without MetaKey
         &lt;/template&gt;
@@ -125,7 +125,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Events&lt;/h5&gt;
     &lt;p&gt;row-select and row-unselects are available as selection events.&lt;/p&gt;
-    &lt;DataTable :value="products" :selection.sync="selectedProduct2" selectionMode="single" dataKey="id"
+    &lt;DataTable :value="products" v-model:selection="selectedProduct2" selectionMode="single" dataKey="id"
         @row-select="onRowSelect" @row-unselect="onRowUnselect"&gt;
         &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -137,7 +137,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;RadioButton&lt;/h5&gt;
     &lt;p&gt;Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".&lt;/p&gt;
-    &lt;DataTable :value="products" :selection.sync="selectedProduct3" dataKey="id"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProduct3" dataKey="id"&gt;
         &lt;Column selectionMode="single" headerStyle="width: 3em"&gt;&lt;/Column&gt;
         &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -149,7 +149,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Checkbox&lt;/h5&gt;
     &lt;p&gt;Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".&lt;/p&gt;
-    &lt;DataTable :value="products" :selection.sync="selectedProducts3" dataKey="id"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProducts3" dataKey="id"&gt;
         &lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
         &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index eb90b6905..ba5447490 100755
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -11,11 +11,11 @@
             <div class="card">
                 <h5>Single Column</h5>
                 <DataTable :value="products">
-                    <Column field="code" header="Code" sortable></Column>
-                    <Column field="name" header="Name" sortable></Column>
-                    <Column field="category" header="Category" sortable></Column>
-                    <Column field="quantity" header="Quantity" sortable></Column>
-                    <Column field="price" header="Price" sortable>
+                    <Column field="code" header="Code" :sortable="true"></Column>
+                    <Column field="name" header="Name" :sortable="true"></Column>
+                    <Column field="category" header="Category" :sortable="true"></Column>
+                    <Column field="quantity" header="Quantity" :sortable="true"></Column>
+                    <Column field="price" header="Price" :sortable="true">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
@@ -27,11 +27,11 @@
                 <h5>Multiple Columns</h5>
                 <p>Use metakey to add a column to the sort selection.</p>
                 <DataTable :value="products" sortMode="multiple">
-                    <Column field="code" header="Code" sortable></Column>
-                    <Column field="name" header="Name" sortable></Column>
-                    <Column field="category" header="Category" sortable></Column>
-                    <Column field="quantity" header="Quantity" sortable></Column>
-                    <Column field="price" header="Price" sortable>
+                    <Column field="code" header="Code" :sortable="true"></Column>
+                    <Column field="name" header="Name" :sortable="true"></Column>
+                    <Column field="category" header="Category" :sortable="true"></Column>
+                    <Column field="quantity" header="Quantity" :sortable="true"></Column>
+                    <Column field="price" header="Price" :sortable="true">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
@@ -42,11 +42,11 @@
             <div class="card">
                 <h5>Presort</h5>
                 <DataTable :value="products" sortField="category" :sortOrder="-1">
-                    <Column field="code" header="Code" sortable></Column>
-                    <Column field="name" header="Name" sortable></Column>
-                    <Column field="category" header="Category" sortable></Column>
-                    <Column field="quantity" header="Quantity" sortable></Column>
-                    <Column field="price" header="Price" sortable>
+                    <Column field="code" header="Code" :sortable="true"></Column>
+                    <Column field="name" header="Name" :sortable="true"></Column>
+                    <Column field="category" header="Category" :sortable="true"></Column>
+                    <Column field="quantity" header="Quantity" :sortable="true"></Column>
+                    <Column field="price" header="Price" :sortable="true">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
@@ -57,11 +57,11 @@
             <div class="card">
                 <h5>Removable Sort</h5>
                 <DataTable :value="products" removableSort>
-                    <Column field="code" header="Code" sortable></Column>
-                    <Column field="name" header="Name" sortable></Column>
-                    <Column field="category" header="Category" sortable></Column>
-                    <Column field="quantity" header="Quantity" sortable></Column>
-                    <Column field="price" header="Price" sortable>
+                    <Column field="code" header="Code" :sortable="true"></Column>
+                    <Column field="name" header="Name" :sortable="true"></Column>
+                    <Column field="category" header="Category" :sortable="true"></Column>
+                    <Column field="quantity" header="Quantity" :sortable="true"></Column>
+                    <Column field="price" header="Price" :sortable="true">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
@@ -78,11 +78,11 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Single Column&lt;/h5&gt;
     &lt;DataTable :value="products"&gt;
-        &lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="price" header="Price" sortable&gt;
+        &lt;Column field="code" header="Code" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="category" header="Category" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="quantity" header="Quantity" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="price" header="Price" sortable="true"&gt;
             &lt;template #body="slotProps"&gt;
                 {{formatCurrency(slotProps.data.price)}}
             &lt;/template&gt;
@@ -94,11 +94,11 @@
     &lt;h5&gt;Multiple Columns&lt;/h5&gt;
     &lt;p&gt;Use metakey to add a column to the sort selection.&lt;/p&gt;
     &lt;DataTable :value="products" sortMode="multiple"&gt;
-        &lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="price" header="Price" sortable&gt;
+        &lt;Column field="code" header="Code" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="category" header="Category" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="quantity" header="Quantity" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="price" header="Price" sortable="true"&gt;
             &lt;template #body="slotProps"&gt;
                 {{formatCurrency(slotProps.data.price)}}
             &lt;/template&gt;
@@ -109,11 +109,11 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Presort&lt;/h5&gt;
     &lt;DataTable :value="products" sortField="category" :sortOrder="-1"&gt;
-        &lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="price" header="Price" sortable&gt;
+        &lt;Column field="code" header="Code" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="category" header="Category" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="quantity" header="Quantity" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="price" header="Price" sortable="true"&gt;
             &lt;template #body="slotProps"&gt;
                 {{formatCurrency(slotProps.data.price)}}
             &lt;/template&gt;
@@ -124,11 +124,11 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Removable Sort&lt;/h5&gt;
     &lt;DataTable :value="products" removableSort&gt;
-        &lt;Column field="code" header="Code" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="category" header="Category" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="quantity" header="Quantity" sortable&gt;&lt;/Column&gt;
-        &lt;Column field="price" header="Price" sortable&gt;
+        &lt;Column field="code" header="Code" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="category" header="Category" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="quantity" header="Quantity" sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column field="price" header="Price" sortable="true"&gt;
             &lt;template #body="slotProps"&gt;
                 {{formatCurrency(slotProps.data.price)}}
             &lt;/template&gt;