primevue 3.29.2 → 3.30.0

package/datatable/DataTable.vue

@@ -1,15 +1,15 @@
 <template>
-    <div :class="containerClass" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
+    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')" data-pc-name="datatable">
         <slot></slot>
-        <div v-if="loading" class="p-datatable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
+        <div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
             <slot v-if="$slots.loading" name="loading"></slot>
             <template v-else>
-                <component v-if="$slots.loadingicon" :is="$slots.loadingicon" class="p-datatable-loading-icon" />
-                <i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
-                <SpinnerIcon v-else spin class="p-datatable-loading-icon" v-bind="ptm('loadingIcon')" />
+                <component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
+                <i v-else-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" />
             </template>
         </div>
-        <div v-if="$slots.header" class="p-datatable-header" v-bind="ptm('header')">
+        <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <DTPaginator
@@ -21,9 +21,10 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            class="p-paginator-top"
+            :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :unstyled="unstyled"
             :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
@@ -45,10 +46,10 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
+        <div :class="cx('wrapper')" :style="[sx('wrapper'), { maxHeight: virtualScrollerDisabled ? scrollHeight : '' }]" v-bind="ptm('wrapper')">
             <DTVirtualScroller
                 ref="virtualScroller"
-                v-bind="{ ...virtualScrollerOptions, ...ptm('virtualScroller') }"
+                v-bind="virtualScrollerOptions"
                 :items="processedData"
                 :columns="columns"
                 :style="scrollHeight !== 'flex' ? { height: scrollHeight } : undefined"
@@ -58,9 +59,10 @@
                 inline
                 autoSize
                 :showSpacer="false"
+                :pt="ptm('virtualScroller')"
             >
                 <template #content="slotProps">
-                    <table ref="table" role="table" :class="tableStyleClass" :style="[tableStyle, slotProps.spacerStyle]" v-bind="{ ...tableProps, ...ptm('table') }">
+                    <table ref="table" role="table" :class="[cx('table'), tableClass]" :style="[tableStyle, slotProps.spacerStyle]" v-bind="{ ...tableProps, ...ptm('table') }">
                         <DTTableHeader
                             :columnGroup="headerColumnGroup"
                             :columns="slotProps.columns"
@@ -90,6 +92,7 @@
                             @column-drop="onColumnHeaderDrop($event)"
                             @column-resizestart="onColumnResizeStart($event)"
                             @checkbox-change="toggleRowsWithCheckbox($event)"
+                            :unstyled="unstyled"
                             :pt="pt"
                         />
                         <DTTableBody
@@ -97,7 +100,6 @@
                             ref="frozenBodyRef"
                             :value="frozenValue"
                             :frozenRow="true"
-                            class="p-datatable-frozen-tbody"
                             :columns="slotProps.columns"
                             :first="d_first"
                             :dataKey="dataKey"
@@ -147,6 +149,8 @@
                             @row-edit-cancel="onRowEditCancel($event)"
                             :editingMeta="d_editingMeta"
                             @editing-meta-change="onEditingMetaChange"
+                            :unstyled="unstyled"
+                            :pt="pt"
                         />
                         <DTTableBody
                             ref="bodyRef"
@@ -203,12 +207,13 @@
                             @row-edit-cancel="onRowEditCancel($event)"
                             :editingMeta="d_editingMeta"
                             @editing-meta-change="onEditingMetaChange"
+                            :unstyled="unstyled"
                             :pt="pt"
                         />
                         <tbody
                             v-if="hasSpacerStyle(slotProps.spacerStyle)"
+                            :class="cx('virtualScrollerSpacer')"
                             :style="{ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }"
-                            class="p-datatable-virtualscroller-spacer"
                             v-bind="ptm('virtualScrollerSpacer')"
                         ></tbody>
                         <DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" :pt="pt" />
@@ -216,7 +221,7 @@
                 </template>
             </DTVirtualScroller>
         </div>
-        <div v-if="$slots.footer" class="p-datatable-footer" v-bind="ptm('footer')">
+        <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
         <DTPaginator
@@ -228,9 +233,10 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            class="p-paginator-bottom"
+            :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
+            :unstyled="unstyled"
             :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
@@ -252,11 +258,11 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </DTPaginator>
-        <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none" v-bind="ptm('resizeHelper')"></div>
-        <span v-if="reorderableColumns" ref="reorderIndicatorUp" class="p-datatable-reorder-indicator-up" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
+        <div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
+        <span v-if="reorderableColumns" ref="reorderIndicatorUp" :class="cx('reorderIndicatorUp')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorUp')">
             <component :is="$slots.reorderindicatorupicon || 'ArrowDownIcon'" />
         </span>
-        <span v-if="reorderableColumns" ref="reorderIndicatorDown" class="p-datatable-reorder-indicator-down" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')">
+        <span v-if="reorderableColumns" ref="reorderIndicatorDown" :class="cx('reorderIndicatorDown')" style="position: absolute; display: none" v-bind="ptm('reorderIndicatorDown')">
             <component :is="$slots.reorderindicatordownicon || 'ArrowUpIcon'" />
         </span>
     </div>
@@ -264,20 +270,20 @@
 
 <script>
 import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
-import BaseComponent from 'primevue/basecomponent';
 import ArrowDownIcon from 'primevue/icons/arrowdown';
 import ArrowUpIcon from 'primevue/icons/arrowup';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
+import BaseDataTable from './BaseDataTable.vue';
 import TableBody from './TableBody.vue';
 import TableFooter from './TableFooter.vue';
 import TableHeader from './TableHeader.vue';
 
 export default {
     name: 'DataTable',
-    extends: BaseComponent,
+    extends: BaseDataTable,
     emits: [
         'value-change',
         'update:first',
@@ -318,264 +324,6 @@ export default {
         'row-edit-save',
         'row-edit-cancel'
     ],
-    props: {
-        value: {
-            type: Array,
-            default: null
-        },
-        dataKey: {
-            type: [String, Function],
-            default: null
-        },
-        rows: {
-            type: Number,
-            default: 0
-        },
-        first: {
-            type: Number,
-            default: 0
-        },
-        totalRecords: {
-            type: Number,
-            default: 0
-        },
-        paginator: {
-            type: Boolean,
-            default: false
-        },
-        paginatorPosition: {
-            type: String,
-            default: 'bottom'
-        },
-        alwaysShowPaginator: {
-            type: Boolean,
-            default: true
-        },
-        paginatorTemplate: {
-            type: [Object, String],
-            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-        },
-        pageLinkSize: {
-            type: Number,
-            default: 5
-        },
-        rowsPerPageOptions: {
-            type: Array,
-            default: null
-        },
-        currentPageReportTemplate: {
-            type: String,
-            default: '({currentPage} of {totalPages})'
-        },
-        lazy: {
-            type: Boolean,
-            default: false
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        loadingIcon: {
-            type: String,
-            default: undefined
-        },
-        sortField: {
-            type: [String, Function],
-            default: null
-        },
-        sortOrder: {
-            type: Number,
-            default: null
-        },
-        defaultSortOrder: {
-            type: Number,
-            default: 1
-        },
-        multiSortMeta: {
-            type: Array,
-            default: null
-        },
-        sortMode: {
-            type: String,
-            default: 'single'
-        },
-        removableSort: {
-            type: Boolean,
-            default: false
-        },
-        filters: {
-            type: Object,
-            default: null
-        },
-        filterDisplay: {
-            type: String,
-            default: null
-        },
-        globalFilterFields: {
-            type: Array,
-            default: null
-        },
-        filterLocale: {
-            type: String,
-            default: undefined
-        },
-        selection: {
-            type: [Array, Object],
-            default: null
-        },
-        selectionMode: {
-            type: String,
-            default: null
-        },
-        compareSelectionBy: {
-            type: String,
-            default: 'deepEquals'
-        },
-        metaKeySelection: {
-            type: Boolean,
-            default: true
-        },
-        contextMenu: {
-            type: Boolean,
-            default: false
-        },
-        contextMenuSelection: {
-            type: Object,
-            default: null
-        },
-        selectAll: {
-            type: Boolean,
-            default: null
-        },
-        rowHover: {
-            type: Boolean,
-            default: false
-        },
-        csvSeparator: {
-            type: String,
-            default: ','
-        },
-        exportFilename: {
-            type: String,
-            default: 'download'
-        },
-        exportFunction: {
-            type: Function,
-            default: null
-        },
-        resizableColumns: {
-            type: Boolean,
-            default: false
-        },
-        columnResizeMode: {
-            type: String,
-            default: 'fit'
-        },
-        reorderableColumns: {
-            type: Boolean,
-            default: false
-        },
-        expandedRows: {
-            type: Array,
-            default: null
-        },
-        expandedRowIcon: {
-            type: String,
-            default: undefined
-        },
-        collapsedRowIcon: {
-            type: String,
-            default: undefined
-        },
-        rowGroupMode: {
-            type: String,
-            default: null
-        },
-        groupRowsBy: {
-            type: [Array, String, Function],
-            default: null
-        },
-        expandableRowGroups: {
-            type: Boolean,
-            default: false
-        },
-        expandedRowGroups: {
-            type: Array,
-            default: null
-        },
-        stateStorage: {
-            type: String,
-            default: 'session'
-        },
-        stateKey: {
-            type: String,
-            default: null
-        },
-        editMode: {
-            type: String,
-            default: null
-        },
-        editingRows: {
-            type: Array,
-            default: null
-        },
-        rowClass: {
-            type: null,
-            default: null
-        },
-        rowStyle: {
-            type: null,
-            default: null
-        },
-        scrollable: {
-            type: Boolean,
-            default: false
-        },
-        virtualScrollerOptions: {
-            type: Object,
-            default: null
-        },
-        scrollHeight: {
-            type: String,
-            default: null
-        },
-        frozenValue: {
-            type: Array,
-            default: null
-        },
-        responsiveLayout: {
-            type: String,
-            default: 'scroll'
-        },
-        breakpoint: {
-            type: String,
-            default: '960px'
-        },
-        showGridlines: {
-            type: Boolean,
-            default: false
-        },
-        stripedRows: {
-            type: Boolean,
-            default: false
-        },
-        tableStyle: {
-            type: null,
-            default: null
-        },
-        tableClass: {
-            type: String,
-            default: null
-        },
-        tableProps: {
-            type: null,
-            default: null
-        },
-        filterInputProps: {
-            type: null,
-            default: null
-        }
-    },
     data() {
         return {
             d_first: this.first,
@@ -658,7 +406,7 @@ export default {
     mounted() {
         this.$el.setAttribute(this.attributeSelector, '');
 
-        if (this.responsiveLayout === 'stack' && !this.scrollable) {
+        if (this.responsiveLayout === 'stack' && !this.scrollable && !this.unstyled) {
             this.createResponsiveStyle();
         }
 
@@ -713,11 +461,12 @@ export default {
                 const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
                 if (
-                    DomHandler.hasClass(targetNode, 'p-sortable-column') ||
-                    DomHandler.hasClass(targetNode, 'p-column-title') ||
-                    DomHandler.hasClass(targetNode, 'p-column-header-content') ||
-                    DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
-                    DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
+                    DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
+                    DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
+                    DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon'
                 ) {
                     DomHandler.clearSelection();
 
@@ -929,7 +678,7 @@ export default {
             const event = e.originalEvent;
             const index = e.index;
             const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
-            const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
+            const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
 
             if (DomHandler.isClickable(event.target)) {
                 return;
@@ -1009,7 +758,7 @@ export default {
 
             if (focusedItem) {
                 focusedItem.tabIndex = '-1';
-                DomHandler.find(body, 'tr.p-selectable-row')[index].tabIndex = '0';
+                DomHandler.find(body, 'tr[data-p-selectable-row="true"]')[index].tabIndex = '0';
             }
         },
         onRowDblClick(e) {
@@ -1165,11 +914,11 @@ export default {
         },
         onTabKey(event, rowIndex) {
             const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
-            const rows = DomHandler.find(body, 'tr.p-selectable-row');
+            const rows = DomHandler.find(body, 'tr[data-p-selectable-row="true"]');
 
             if (event.code === 'Tab' && rows && rows.length > 0) {
-                const firstSelectedRow = DomHandler.findSingle(body, 'tr.p-highlight');
-                const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
+                const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-highlight="true"]');
+                const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
 
                 if (firstSelectedRow) {
                     firstSelectedRow.tabIndex = '0';
@@ -1184,7 +933,7 @@ export default {
             let nextRow = row.nextElementSibling;
 
             if (nextRow) {
-                if (DomHandler.hasClass(nextRow, 'p-selectable-row')) return nextRow;
+                if (DomHandler.getAttribute(nextRow, 'data-p-selectable-row') === true) return nextRow;
                 else return this.findNextSelectableRow(nextRow);
             } else {
                 return null;
@@ -1194,19 +943,19 @@ export default {
             let prevRow = row.previousElementSibling;
 
             if (prevRow) {
-                if (DomHandler.hasClass(prevRow, 'p-selectable-row')) return prevRow;
+                if (DomHandler.getAttribute(prevRow, 'data-p-selectable-row') === true) return prevRow;
                 else return this.findPrevSelectableRow(prevRow);
             } else {
                 return null;
             }
         },
         findFirstSelectableRow() {
-            const firstRow = DomHandler.findSingle(this.$refs.table, '.p-selectable-row');
+            const firstRow = DomHandler.findSingle(this.$refs.table, 'tr[data-p-selectable-row="true"]');
 
             return firstRow;
         },
         findLastSelectableRow() {
-            const rows = DomHandler.find(this.$refs.table, '.p-selectable-row');
+            const rows = DomHandler.find(this.$refs.table, 'tr[data-p-selectable-row="true"]');
 
             return rows ? rows[rows.length - 1] : null;
         },
@@ -1450,7 +1199,8 @@ export default {
         onColumnResize(event) {
             let containerLeft = DomHandler.getOffset(this.$el).left;
 
-            DomHandler.addClass(this.$el, 'p-unselectable-text');
+            this.$el.setAttribute('data-p-unselectable-text', 'true');
+            !this.isUnstyled && DomHandler.addClass(this.$el, 'p-unselectable-text');
             this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
             this.$refs.resizeHelper.style.top = 0 + 'px';
             this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
@@ -1499,7 +1249,8 @@ export default {
 
             this.$refs.resizeHelper.style.display = 'none';
             this.resizeColumn = null;
-            DomHandler.removeClass(this.$el, 'p-unselectable-text');
+            this.$el.setAttribute('data-p-unselectable-text', 'true');
+            !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-unselectable-text');
 
             this.unbindColumnResizeEvents();
 
@@ -1510,7 +1261,7 @@ export default {
         resizeTableCells(newColumnWidth, nextColumnWidth) {
             let colIndex = DomHandler.index(this.resizeColumnElement);
             let widths = [];
-            let headers = DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th');
+            let headers = DomHandler.find(this.$refs.table, 'thead[data-pc-section="thead"] > tr > th');
 
             headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
 
@@ -1518,16 +1269,16 @@ export default {
             this.createStyleElement();
 
             let innerHTML = '';
-            let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+            let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-section="virtualscroller"]'} > table[data-pc-section="table"]`;
 
             widths.forEach((width, index) => {
                 let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
                 let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
 
                 innerHTML += `
-                    ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                    ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                    ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                    ${selector} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
+                    ${selector} > tbody[data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
+                    ${selector} > tfoot[data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
                         ${style}
                     }
                 `;
@@ -1569,7 +1320,7 @@ export default {
             const column = e.column;
 
             if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
-                if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;
+                if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) event.currentTarget.draggable = false;
                 else event.currentTarget.draggable = true;
             }
         },
@@ -1681,7 +1432,7 @@ export default {
             return null;
         },
         onRowMouseDown(event) {
-            if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) event.currentTarget.draggable = true;
+            if (DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;
             else event.currentTarget.draggable = false;
         },
         onRowDragStart(e) {
@@ -1704,17 +1455,30 @@ export default {
                 let prevRowElement = rowElement.previousElementSibling;
 
                 if (pageY < rowMidY) {
-                    DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+                    rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+                    !this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
 
                     this.droppedRowIndex = index;
-                    if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-                    else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+
+                    if (prevRowElement) {
+                        prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
+                        !this.isUnstyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    } else {
+                        rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
+                        !this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    }
                 } else {
-                    if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-                    else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    if (prevRowElement) {
+                        prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+                        !this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    } else {
+                        rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
+                        !this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    }
 
                     this.droppedRowIndex = index + 1;
-                    DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+                    rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
+                    !this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
                 }
 
                 event.preventDefault();
@@ -1725,11 +1489,14 @@ export default {
             let prevRowElement = rowElement.previousElementSibling;
 
             if (prevRowElement) {
-                DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+                !this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
             }
 
-            DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
-            DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+            rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+            !this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+            rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
+            !this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
         },
         onRowDragEnd(event) {
             this.rowDragging = false;
@@ -1936,7 +1703,7 @@ export default {
         },
         saveColumnWidths(state) {
             let widths = [];
-            let headers = DomHandler.find(this.$el, '.p-datatable-thead > tr > th');
+            let headers = DomHandler.find(this.$el, 'thead[data-pc-section="thead"] > tr > th');
 
             headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
             state.columnWidths = widths.join(',');
@@ -1959,15 +1726,15 @@ export default {
                     this.createStyleElement();
 
                     let innerHTML = '';
-                    let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+                    let selector = `[data-pc-name="datatable"][${this.attributeSelector}] > [data-pc-section="wrapper"] ${this.virtualScrollerDisabled ? '' : '> [data-pc-section="virtualscroller"]'} > table[data-pc-section="table"]`;
 
                     widths.forEach((width, index) => {
                         let style = `width: ${width}px !important; max-width: ${width}px !important`;
 
                         innerHTML += `
-                            ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                            ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                            ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                            ${selector} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
+                            ${selector} > tbody[data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
+                            ${selector} > tfoot[data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
                                 ${style}
                             }
                         `;
@@ -2176,35 +1943,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-datatable p-component',
-                {
-                    'p-datatable-hoverable-rows': this.rowHover || this.selectionMode,
-                    'p-datatable-resizable': this.resizableColumns,
-                    'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
-                    'p-datatable-scrollable': this.scrollable,
-                    'p-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
-                    'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
-                    'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
-                    'p-datatable-striped': this.stripedRows,
-                    'p-datatable-gridlines': this.showGridlines,
-                    'p-datatable-grouped-header': this.headerColumnGroup != null,
-                    'p-datatable-grouped-footer': this.footerColumnGroup != null
-                }
-            ];
-        },
-        tableStyleClass() {
-            return [
-                'p-datatable-table',
-                {
-                    'p-datatable-scrollable-table': this.scrollable,
-                    'p-datatable-resizable-table': this.resizableColumns,
-                    'p-datatable-resizable-table-fit': this.resizableColumns && this.columnResizeMode === 'fit'
-                },
-                this.tableClass
-            ];
-        },
         columns() {
             let children = this.getChildren();
 
@@ -2331,252 +2069,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-datatable {
-    position: relative;
-}
-
-.p-datatable > .p-datatable-wrapper {
-    overflow: auto;
-}
-
-.p-datatable-table {
-    border-spacing: 0px;
-    width: 100%;
-}
-
-.p-datatable .p-sortable-column {
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-datatable .p-sortable-column .p-column-title,
-.p-datatable .p-sortable-column .p-sortable-column-icon,
-.p-datatable .p-sortable-column .p-sortable-column-badge {
-    vertical-align: middle;
-}
-
-.p-datatable .p-sortable-column .p-sortable-column-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-datatable-hoverable-rows .p-selectable-row {
-    cursor: pointer;
-}
-
-/* Scrollable */
-.p-datatable-scrollable > .p-datatable-wrapper {
-    position: relative;
-}
-
-.p-datatable-scrollable-table > .p-datatable-thead {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-}
-
-.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
-    position: sticky;
-    z-index: 1;
-}
-
-.p-datatable-scrollable-table > .p-datatable-tfoot {
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-}
-
-.p-datatable-scrollable .p-frozen-column {
-    position: sticky;
-    background: inherit;
-}
-
-.p-datatable-scrollable th.p-frozen-column {
-    z-index: 1;
-}
-
-.p-datatable-flex-scrollable {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-datatable-flex-scrollable > .p-datatable-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-}
-
-.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
-    position: sticky;
-    z-index: 1;
-}
-
-/* Resizable */
-.p-datatable-resizable-table > .p-datatable-thead > tr > th,
-.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
-.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
-    background-clip: padding-box;
-    position: relative;
-}
-
-.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
-    display: none;
-}
-
-.p-datatable .p-column-resizer {
-    display: block;
-    position: absolute !important;
-    top: 0;
-    right: 0;
-    margin: 0;
-    width: 0.5rem;
-    height: 100%;
-    padding: 0px;
-    cursor: col-resize;
-    border: 1px solid transparent;
-}
-
-.p-datatable .p-column-header-content {
-    display: flex;
-    align-items: center;
-}
-
-.p-datatable .p-column-resizer-helper {
-    width: 1px;
-    position: absolute;
-    z-index: 10;
-    display: none;
-}
-
-.p-datatable .p-row-editor-init,
-.p-datatable .p-row-editor-save,
-.p-datatable .p-row-editor-cancel {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Expand */
-.p-datatable .p-row-toggler {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    position: relative;
-}
-
-/* Reorder */
-.p-datatable-reorder-indicator-up,
-.p-datatable-reorder-indicator-down {
-    position: absolute;
-    display: none;
-}
-
-.p-reorderable-column,
-.p-datatable-reorderablerow-handle {
-    cursor: move;
-}
-
-/* Loader */
-.p-datatable .p-datatable-loading-overlay {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-}
-
-/* Filter */
-.p-column-filter-row {
-    display: flex;
-    align-items: center;
-    width: 100%;
-}
-
-.p-column-filter-menu {
-    display: inline-flex;
-    margin-left: auto;
-}
-
-.p-column-filter-row .p-column-filter-element {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-.p-column-filter-menu-button,
-.p-column-filter-clear-button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    text-decoration: none;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-column-filter-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-.p-column-filter-row-items {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.p-column-filter-row-item {
-    cursor: pointer;
-}
-
-.p-column-filter-add-button,
-.p-column-filter-remove-button {
-    justify-content: center;
-}
-
-.p-column-filter-add-button .p-button-label,
-.p-column-filter-remove-button .p-button-label {
-    flex-grow: 0;
-}
-
-.p-column-filter-buttonbar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
-    width: auto;
-}
-
-/* Responsive */
-.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
-    display: none;
-}
-
-/* VirtualScroller */
-.p-datatable-virtualscroller-spacer {
-    display: flex;
-}
-
-.p-datatable .p-virtualscroller .p-virtualscroller-loading {
-    transform: none !important;
-    min-height: 0;
-    position: sticky;
-    top: 0;
-    left: 0;
-}
-</style>