Refactor #3965 - For DataTable & Column & ColumnGroup & Row

components/lib/column/BaseColumn.vue

@@ -0,0 +1,191 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+export default {
+    name: 'BaseColumn',
+    extends: BaseComponent,
+    props: {
+        columnKey: {
+            type: null,
+            default: null
+        },
+        field: {
+            type: [String, Function],
+            default: null
+        },
+        sortField: {
+            type: [String, Function],
+            default: null
+        },
+        filterField: {
+            type: [String, Function],
+            default: null
+        },
+        dataType: {
+            type: String,
+            default: 'text'
+        },
+        sortable: {
+            type: Boolean,
+            default: false
+        },
+        header: {
+            type: null,
+            default: null
+        },
+        footer: {
+            type: null,
+            default: null
+        },
+        style: {
+            type: null,
+            default: null
+        },
+        class: {
+            type: String,
+            default: null
+        },
+        headerStyle: {
+            type: null,
+            default: null
+        },
+        headerClass: {
+            type: String,
+            default: null
+        },
+        bodyStyle: {
+            type: null,
+            default: null
+        },
+        bodyClass: {
+            type: String,
+            default: null
+        },
+        footerStyle: {
+            type: null,
+            default: null
+        },
+        footerClass: {
+            type: String,
+            default: null
+        },
+        showFilterMenu: {
+            type: Boolean,
+            default: true
+        },
+        showFilterOperator: {
+            type: Boolean,
+            default: true
+        },
+        showClearButton: {
+            type: Boolean,
+            default: true
+        },
+        showApplyButton: {
+            type: Boolean,
+            default: true
+        },
+        showFilterMatchModes: {
+            type: Boolean,
+            default: true
+        },
+        showAddButton: {
+            type: Boolean,
+            default: true
+        },
+        filterMatchModeOptions: {
+            type: Array,
+            default: null
+        },
+        maxConstraints: {
+            type: Number,
+            default: 2
+        },
+        excludeGlobalFilter: {
+            type: Boolean,
+            default: false
+        },
+        filterHeaderClass: {
+            type: String,
+            default: null
+        },
+        filterHeaderStyle: {
+            type: null,
+            default: null
+        },
+        filterMenuClass: {
+            type: String,
+            default: null
+        },
+        filterMenuStyle: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        expander: {
+            type: Boolean,
+            default: false
+        },
+        colspan: {
+            type: Number,
+            default: null
+        },
+        rowspan: {
+            type: Number,
+            default: null
+        },
+        rowReorder: {
+            type: Boolean,
+            default: false
+        },
+        rowReorderIcon: {
+            type: String,
+            default: undefined
+        },
+        reorderableColumn: {
+            type: Boolean,
+            default: true
+        },
+        rowEditor: {
+            type: Boolean,
+            default: false
+        },
+        frozen: {
+            type: Boolean,
+            default: false
+        },
+        alignFrozen: {
+            type: String,
+            default: 'left'
+        },
+        exportable: {
+            type: Boolean,
+            default: true
+        },
+        exportHeader: {
+            type: String,
+            default: null
+        },
+        exportFooter: {
+            type: String,
+            default: null
+        },
+        filterMatchMode: {
+            type: String,
+            default: null
+        },
+        hidden: {
+            type: Boolean,
+            default: false
+        }
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/column/Column.vue

@@ -1,187 +1,9 @@
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseColumn from './BaseColumn.vue';
 
 export default {
     name: 'Column',
-    extends: BaseComponent,
+    extends: BaseColumn,
-    props: {
-        columnKey: {
-            type: null,
-            default: null
-        },
-        field: {
-            type: [String, Function],
-            default: null
-        },
-        sortField: {
-            type: [String, Function],
-            default: null
-        },
-        filterField: {
-            type: [String, Function],
-            default: null
-        },
-        dataType: {
-            type: String,
-            default: 'text'
-        },
-        sortable: {
-            type: Boolean,
-            default: false
-        },
-        header: {
-            type: null,
-            default: null
-        },
-        footer: {
-            type: null,
-            default: null
-        },
-        style: {
-            type: null,
-            default: null
-        },
-        class: {
-            type: String,
-            default: null
-        },
-        headerStyle: {
-            type: null,
-            default: null
-        },
-        headerClass: {
-            type: String,
-            default: null
-        },
-        bodyStyle: {
-            type: null,
-            default: null
-        },
-        bodyClass: {
-            type: String,
-            default: null
-        },
-        footerStyle: {
-            type: null,
-            default: null
-        },
-        footerClass: {
-            type: String,
-            default: null
-        },
-        showFilterMenu: {
-            type: Boolean,
-            default: true
-        },
-        showFilterOperator: {
-            type: Boolean,
-            default: true
-        },
-        showClearButton: {
-            type: Boolean,
-            default: true
-        },
-        showApplyButton: {
-            type: Boolean,
-            default: true
-        },
-        showFilterMatchModes: {
-            type: Boolean,
-            default: true
-        },
-        showAddButton: {
-            type: Boolean,
-            default: true
-        },
-        filterMatchModeOptions: {
-            type: Array,
-            default: null
-        },
-        maxConstraints: {
-            type: Number,
-            default: 2
-        },
-        excludeGlobalFilter: {
-            type: Boolean,
-            default: false
-        },
-        filterHeaderClass: {
-            type: String,
-            default: null
-        },
-        filterHeaderStyle: {
-            type: null,
-            default: null
-        },
-        filterMenuClass: {
-            type: String,
-            default: null
-        },
-        filterMenuStyle: {
-            type: null,
-            default: null
-        },
-        selectionMode: {
-            type: String,
-            default: null
-        },
-        expander: {
-            type: Boolean,
-            default: false
-        },
-        colspan: {
-            type: Number,
-            default: null
-        },
-        rowspan: {
-            type: Number,
-            default: null
-        },
-        rowReorder: {
-            type: Boolean,
-            default: false
-        },
-        rowReorderIcon: {
-            type: String,
-            default: undefined
-        },
-        reorderableColumn: {
-            type: Boolean,
-            default: true
-        },
-        rowEditor: {
-            type: Boolean,
-            default: false
-        },
-        frozen: {
-            type: Boolean,
-            default: false
-        },
-        alignFrozen: {
-            type: String,
-            default: 'left'
-        },
-        exportable: {
-            type: Boolean,
-            default: true
-        },
-        exportHeader: {
-            type: String,
-            default: null
-        },
-        exportFooter: {
-            type: String,
-            default: null
-        },
-        filterMatchMode: {
-            type: String,
-            default: null
-        },
-        hidden: {
-            type: Boolean,
-            default: false
-        }
-    },
     render() {
         return null;
     }

components/lib/columngroup/BaseColumnGroup.vue

@@ -0,0 +1,19 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+
+export default {
+    name: 'BaseColumnGroup',
+    extends: BaseComponent,
+    props: {
+        type: {
+            type: String,
+            default: null
+        }
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/columngroup/ColumnGroup.vue

@@ -1,15 +1,9 @@
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseColumnGroup from './BaseColumnGroup.vue';
 
 export default {
     name: 'ColumnGroup',
-    extends: BaseComponent,
+    extends: BaseColumnGroup,
-    props: {
-        type: {
-            type: String,
-            default: null
-        }
-    },
     render() {
         return null;
     }

components/lib/datatable/BaseDataTable.vue

@@ -0,0 +1,741 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.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-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;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-datatable p-component',
+        {
+            'p-datatable-hoverable-rows': props.rowHover || props.selectionMode,
+            'p-datatable-resizable': props.resizableColumns,
+            'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-datatable-scrollable': props.scrollable,
+            'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
+            'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
+            'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
+            'p-datatable-striped': props.stripedRows,
+            'p-datatable-gridlines': props.showGridlines,
+            'p-datatable-grouped-header': instance.headerColumnGroup != null,
+            'p-datatable-grouped-footer': instance.footerColumnGroup != null
+        }
+    ],
+    loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
+    loadingIcon: 'p-datatable-loading-icon',
+    header: 'p-datatable-header',
+    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
+    wrapper: 'p-datatable-wrapper',
+    table: ({ props }) => [
+        'p-datatable-table',
+        {
+            'p-datatable-scrollable-table': props.scrollable,
+            'p-datatable-resizable-table': props.resizableColumns,
+            'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+        }
+    ],
+    //tablehead
+    thead: 'p-datatable-thead',
+    // headercell
+    headerCell: ({ instance, props, column }) =>
+        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
+            ? [
+                  'p-filter-column',
+                  {
+                      'p-frozen-column': instance.columnProp(column, 'frozen')
+                  }
+              ]
+            : [
+                  {
+                      'p-sortable-column': instance.columnProp('sortable'),
+                      'p-resizable-column': instance.resizableColumns,
+                      'p-highlight': instance.isColumnSorted(),
+                      'p-filter-column': props.filterColumn,
+                      'p-frozen-column': instance.columnProp('frozen'),
+                      'p-reorderable-column': props.reorderableColumns
+                  }
+              ],
+    columnResizer: 'p-column-resizer',
+    headerContent: 'p-column-header-content',
+    headerTitle: 'p-column-title',
+    sortIcon: 'p-sortable-column-icon',
+    sortBadge: 'p-sortable-column-badge',
+    //headercheckbox
+    headerCheckboxWrapper: ({ instance }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.focused,
+            'p-disabled': instance.disabled
+        }
+    ],
+    hiddenHeaderInputWrapper: 'p-hidden-accessible',
+    headerCheckbox: ({ instance }) => [
+        'p-checkbox-box p-component',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': instance.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    headerCheckboxIcon: 'p-checkbox-icon',
+    // columnfilter
+    columnFilter: ({ props }) => [
+        'p-column-filter p-fluid',
+        {
+            'p-column-filter-row': props.display === 'row',
+            'p-column-filter-menu': props.display === 'menu'
+        }
+    ],
+    filterInput: 'p-fluid p-column-filter-element',
+    filterMenuButton: ({ instance }) => [
+        'p-column-filter-menu-button p-link',
+        {
+            'p-column-filter-menu-button-open': instance.overlayVisible,
+            'p-column-filter-menu-button-active': instance.hasFilter()
+        }
+    ],
+    headerFilterClearButton: ({ instance }) => [
+        'p-column-filter-clear-button p-link',
+        {
+            'p-hidden-space': !instance.hasRowFilter()
+        }
+    ],
+    filterOverlay: ({ instance, props }) => [
+        {
+            'p-column-filter-overlay p-component p-fluid': true,
+            'p-column-filter-overlay-menu': props.display === 'menu',
+            'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    filterRowItems: 'p-column-filter-row-items',
+    filterRowItem: ({ instance, matchMode }) => [
+        'p-column-filter-row-item',
+        {
+            'p-highlight': matchMode && instance.isRowMatchModeSelected(matchMode.value)
+        }
+    ],
+    filterSeparator: 'p-column-filter-separator',
+    filterOperator: 'p-column-filter-operator',
+    filterOperatorDropdown: 'p-column-filter-operator-dropdown',
+    filterConstraints: 'p-column-filter-constraints',
+    filterConstraint: 'p-column-filter-constraint',
+    filterMatchModeDropdown: 'p-column-filter-matchmode-dropdown',
+    filterRemoveButton: 'p-column-filter-remove-button p-button-text p-button-danger p-button-sm',
+    filterAddRule: 'p-column-filter-add-rule',
+    filterAddRuleButton: 'p-column-filter-add-button p-button-text p-button-sm',
+    filterButtonbar: 'p-column-filter-buttonbar',
+    filterClearButton: 'p-button-outlined p-button-sm',
+    filterApplyButton: 'p-button-sm',
+    //tablebody
+    tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
+    rowgroupHeader: 'p-rowgroup-header',
+    rowGroupToggler: 'p-row-toggler p-link',
+    rowGroupTogglerIcon: 'p-row-toggler-icon',
+    row: ({ instance, props, rowData }) => {
+        let rowStyleClass = [];
+
+        if (props.selectionMode) {
+            rowStyleClass.push('p-selectable-row');
+        }
+
+        if (props.selection) {
+            rowStyleClass.push({
+                'p-highlight': instance.isSelected(rowData)
+            });
+        }
+
+        if (props.contextMenuSelection) {
+            rowStyleClass.push({
+                'p-highlight-contextmenu': instance.isSelectedWithContextMenu(rowData)
+            });
+        }
+
+        return rowStyleClass;
+    },
+    rowExpansion: 'p-datatable-row-expansion',
+    rowgroupFooter: 'p-rowgroup-footer',
+    emptyMessage: 'p-datatable-emptymessage',
+    //bodycell
+    bodyCell: ({ instance }) => [
+        {
+            'p-selection-column': instance.columnProp('selectionMode') != null,
+            'p-editable-column': instance.isEditable(),
+            'p-cell-editing': instance.d_editing,
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    columnTitle: 'p-column-title',
+    rowReorderIcon: 'p-datatable-reorderablerow-handle',
+    rowToggler: 'p-row-toggler p-link',
+    rowTogglerIcon: 'p-row-toggler-icon',
+    rowEditorInitButton: 'p-row-editor-init p-link',
+    rowEditorInitIcon: 'p-row-editor-init-icon',
+    rowEditorSaveButton: 'p-row-editor-save p-link',
+    rowEditorSaveIcon: 'p-row-editor-save-icon',
+    rowEditorCancelButton: 'p-row-editor-cancel p-link',
+    rowEditorCancelIcon: 'p-row-editor-cancel-icon',
+    //rowcheckbox
+    checkboxWrapper: ({ instance }) => [
+        'p-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.focused
+        }
+    ],
+    hiddenInputWrapper: 'p-hidden-accessible',
+    checkbox: ({ instance }) => [
+        'p-checkbox-box p-component',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': instance.$attrs.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    checkboxIcon: 'p-checkbox-icon',
+    //rowradiobutton
+    radiobuttonWrapper: ({ instance }) => [
+        'p-radiobutton p-component',
+        {
+            'p-radiobutton-focused': instance.focused
+        }
+    ],
+    radiobutton: ({ instance }) => [
+        'p-radiobutton-box p-component',
+        {
+            'p-highlight': instance.checked,
+            'p-disabled': instance.$attrs.disabled,
+            'p-focus': instance.focused
+        }
+    ],
+    radiobuttonIcon: 'p-radiobutton-icon',
+    //tablefooter
+    tfoot: 'p-datatable-tfoot',
+    //footercell
+    footerCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    //datatable
+    virtualScrollerSpacer: 'p-datatable-virtualscroller-spacer',
+    footer: 'p-datatable-footer',
+    resizeHelper: 'p-column-resizer-helper',
+    reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_datatable_style', manual: true });
+
+export default {
+    name: 'BaseDataTable',
+    extends: BaseComponent,
+    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
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/datatable/BodyCell.vue

@@ -2,8 +2,20 @@
     <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
         <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
     </td>
-    <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
+    <td
-        <span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
+        v-else
+        :style="containerStyle"
+        :class="containerClass"
+        @click="onClick"
+        @keydown="onKeyDown"
+        role="cell"
+        v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }"
+        :data-p-selection-column="columnProp('selectionMode') != null"
+        :data-p-editable-column="isEditable()"
+        :data-p-cell-editing="d_editing"
+        :data-p-frozen-column="columnProp('frozen')"
+    >
+        <span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
         <component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
         <component
             v-else-if="column.children && column.children.editor && d_editing"
@@ -31,28 +43,30 @@
             />
         </template>
         <template v-else-if="columnProp('rowReorder')">
-            <component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
+            <component v-if="column.children && column.children.rowreordericon" :is="column.children.rowreordericon" :class="cx('rowReorderIcon')" />
+            <i v-else-if="columnProp('rowReorderIcon')" :class="[cx('rowReorderIcon'), columnProp('rowReorderIcon')]" />
+            <BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
         </template>
         <template v-else-if="columnProp('expander')">
-            <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
+            <button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
                 <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
                 <template v-else>
-                    <span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                    <span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
-                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
-                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" />
-                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
                 </template>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
-            <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
+            <button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
-                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorEditButton')">
+            <button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorSaveButton')">
-                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPTOptions(column, 'rowEditorSaveIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
+            <button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
-                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -331,7 +345,7 @@ export default {
             if (element) {
                 let cell = element;
 
-                while (cell && !DomHandler.hasClass(cell, 'p-cell-editing')) {
+                while (cell && !DomHandler.getAttribute(cell, 'data-p-cell-editing')) {
                     cell = cell.parentElement;
                 }
 
@@ -352,7 +366,7 @@ export default {
             }
 
             if (prevCell) {
-                if (DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
+                if (DomHandler.getAttribute(prevCell, 'data-p-editable-column')) return prevCell;
                 else return this.findPreviousEditableColumn(prevCell);
             } else {
                 return null;
@@ -370,7 +384,7 @@ export default {
             }
 
             if (nextCell) {
-                if (DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
+                if (DomHandler.getAttribute(nextCell, 'data-p-editable-column')) return nextCell;
                 else return this.findNextEditableColumn(nextCell);
             } else {
                 return null;
@@ -443,16 +457,7 @@ export default {
             return this.columnProp('field');
         },
         containerClass() {
-            return [
+            return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
-                this.columnProp('bodyClass'),
-                this.columnProp('class'),
-                {
-                    'p-selection-column': this.columnProp('selectionMode') != null,
-                    'p-editable-column': this.isEditable(),
-                    'p-cell-editing': this.d_editing,
-                    'p-frozen-column': this.columnProp('frozen')
-                }
-            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');

components/lib/datatable/ColumnFilter.vue

@@ -1,25 +1,24 @@
 <template>
-    <div :class="containerClass" v-bind="getColumnPTOptions('columnFilter')">
+    <div :class="cx('columnFilter')" v-bind="getColumnPTOptions('columnFilter')">
-        <div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
+        <div v-if="display === 'row'" :class="cx('filterInput')" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <button
             v-if="showMenuButton"
             ref="icon"
             type="button"
-            class="p-column-filter-menu-button p-link"
             :aria-label="filterMenuButtonAriaLabel"
             aria-haspopup="true"
             :aria-expanded="overlayVisible"
             :aria-controls="overlayId"
-            :class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
+            :class="cx('filterMenuButton')"
-            @click="toggleMenu()"
+            @click="toggleMenu($event)"
             @keydown="onToggleButtonKeyDown($event)"
             v-bind="getColumnPTOptions('filterMenuButton')"
         >
             <component :is="filterIconTemplate || 'FilterIcon'" />
         </button>
-        <button v-if="showClearButton && display === 'row'" :class="['p-column-filter-clear-button p-link', { 'p-hidden-space': !hasRowFilter() }]" type="button" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
+        <button v-if="showClearButton && display === 'row'" :class="cx('headerFilterClearButton')" type="button" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
             <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
         </button>
         <Portal>
@@ -31,7 +30,7 @@
                     v-focustrap="{ autoFocus: true }"
                     :aria-modal="overlayVisible"
                     role="dialog"
-                    :class="overlayClass"
+                    :class="[cx('filterOverlay'), filterMenuclass]"
                     @keydown.escape="hide"
                     @click="onContentClick"
                     @mousedown="onContentMouseDown"
@@ -39,61 +38,63 @@
                 >
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
-                        <ul class="p-column-filter-row-items" v-bind="getColumnPTOptions('filterRowItems')">
+                        <ul :class="cx('filterRowItems')" v-bind="getColumnPTOptions('filterRowItems')">
                             <li
                                 v-for="(matchMode, i) of matchModes"
                                 :key="matchMode.label"
-                                class="p-column-filter-row-item"
+                                :class="cx('filterRowItem', { matchMode })"
                                 @click="onRowMatchModeChange(matchMode.value)"
                                 @keydown="onRowMatchModeKeyDown($event)"
                                 @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
-                                :class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
                                 :tabindex="i === 0 ? '0' : null"
                                 v-bind="getColumnPTOptions('filterRowItem')"
                             >
                                 {{ matchMode.label }}
                             </li>
-                            <li class="p-column-filter-separator" v-bind="getColumnPTOptions('filterInput')"></li>
+                            <li :class="cx('filterSeparator')" v-bind="getColumnPTOptions('filterSeparator')"></li>
-                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
+                            <li :class="cx('filterRowItem')" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
                                 {{ noFilterLabel }}
                             </li>
                         </ul>
                     </template>
                     <template v-else>
-                        <div v-if="isShowOperator" class="p-column-filter-operator" v-bind="getColumnPTOptions('filterOperator')">
+                        <div v-if="isShowOperator" :class="cx('filterOperator')" v-bind="getColumnPTOptions('filterOperator')">
                             <CFDropdown
                                 :options="operatorOptions"
                                 :modelValue="operator"
                                 :aria-label="filterOperatorAriaLabel"
-                                class="p-column-filter-operator-dropdown"
+                                :class="cx('filterOperatorDropdown')"
                                 optionLabel="label"
                                 optionValue="value"
                                 @update:modelValue="onOperatorChange($event)"
                                 :pt="getColumnPTOptions('filterOperatorDropdown')"
+                                data-pc-section="filteroperatordropdown"
                             ></CFDropdown>
                         </div>
-                        <div class="p-column-filter-constraints" v-bind="getColumnPTOptions('filterConstraints')">
+                        <div :class="cx('filterConstraints')" v-bind="getColumnPTOptions('filterConstraints')">
-                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="getColumnPTOptions('filterConstraint')">
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" :class="cx('filterConstraint')" v-bind="getColumnPTOptions('filterConstraint')">
                                 <CFDropdown
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
                                     :modelValue="fieldConstraint.matchMode"
-                                    class="p-column-filter-matchmode-dropdown"
+                                    :class="cx('filterMatchModeDropdown')"
                                     optionLabel="label"
                                     optionValue="value"
                                     :aria-label="filterConstraintAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
                                     :pt="getColumnPTOptions('filterMatchModeDropdown')"
+                                    data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
                                 <div v-bind="getColumnPTOptions('filterRemove')">
                                     <CFButton
                                         v-if="showRemoveIcon"
                                         type="button"
-                                        class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
+                                        :class="cx('filterRemoveButton')"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :pt="getColumnPTOptions('filterRemoveButton')"
+                                        data-pc-section="filterremovebutton"
                                     >
                                         <template #icon="iconProps">
                                             <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
@@ -102,18 +103,34 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="getColumnPTOptions('filterAddRule')">
+                        <div v-if="isShowAddConstraint" :class="cx('filterAddRule')" v-bind="getColumnPTOptions('filterAddRule')">
-                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')">
+                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddRuleButton')" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')" data-pc-section="filteraddrulebutton">
                                 <template #icon="iconProps">
                                     <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
                                 </template>
                             </CFButton>
                         </div>
-                        <div class="p-column-filter-buttonbar" v-bind="getColumnPTOptions('filterButtonbar')">
+                        <div :class="cx('filterButtonbar')" v-bind="getColumnPTOptions('filterButtonbar')">
-                            <CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="getColumnPTOptions('filterClearButton')"></CFButton>
+                            <CFButton
+                                v-if="!filterClearTemplate && showClearButton"
+                                type="button"
+                                :class="cx('filterClearButton')"
+                                :label="clearButtonLabel"
+                                @click="clearFilter"
+                                :pt="getColumnPTOptions('filterClearButton')"
+                                data-pc-section="filterclearbutton"
+                            ></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="getColumnPTOptions('filterApplyButton')"></CFButton>
+                                <CFButton
+                                    v-if="!filterApplyTemplate"
+                                    type="button"
+                                    :class="cx('filterApplyButton')"
+                                    :label="applyButtonLabel"
+                                    @click="applyFilter()"
+                                    v-bind="getColumnPTOptions('filterApplyButton')"
+                                    data-pc-section="filterapplybutton"
+                                ></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -341,15 +358,17 @@ export default {
 
             return true;
         },
-        toggleMenu() {
+        toggleMenu(event) {
             this.overlayVisible = !this.overlayVisible;
+
+            event.preventDefault();
         },
         onToggleButtonKeyDown(event) {
             switch (event.code) {
                 case 'Enter':
                 case 'Space':
-                    this.toggleMenu();
+                    this.toggleMenu(event);
-                    event.preventDefault();
+
                     break;
 
                 case 'Escape':
@@ -449,13 +468,13 @@ export default {
         findNextItem(item) {
             let nextItem = item.nextElementSibling;
 
-            if (nextItem) return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
+            if (nextItem) return DomHandler.getAttribute(nextItem, 'data-pc-section') === 'filterseparator' ? this.findNextItem(nextItem) : nextItem;
             else return item.parentElement.firstElementChild;
         },
         findPrevItem(item) {
             let prevItem = item.previousElementSibling;
 
-            if (prevItem) return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
+            if (prevItem) return DomHandler.getAttribute(prevItem, 'data-pc-section') === 'filterseparator' ? this.findPrevItem(prevItem) : prevItem;
             else return item.parentElement.lastElementChild;
         },
         hide() {
@@ -480,6 +499,7 @@ export default {
             }
 
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
             DomHandler.absolutePosition(this.overlay, this.$refs.icon);
             this.bindOutsideClickListener();
             this.bindScrollListener();
@@ -571,26 +591,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-column-filter p-fluid',
-                {
-                    'p-column-filter-row': this.display === 'row',
-                    'p-column-filter-menu': this.display === 'menu'
-                }
-            ];
-        },
-        overlayClass() {
-            return [
-                this.filterMenuClass,
-                {
-                    'p-column-filter-overlay p-component p-fluid': true,
-                    'p-column-filter-overlay-menu': this.display === 'menu',
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }
-            ];
-        },
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },

components/lib/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" />
+                <component v-if="$slots.loadingicon" :is="$slots.loadingicon" :class="cx('loadingIcon')" />
-                <i v-else-if="loadingIcon" :class="['p-datatable-loading-icon pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                <i v-else-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
-                <SpinnerIcon v-else spin class="p-datatable-loading-icon" 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,10 +21,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            class="p-paginator-top"
+            :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :pt="ptm('paginator')"
+            data-pc-section="paginator"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -45,7 +46,7 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </DTPaginator>
-        <div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
+        <div :class="cx('wrapper')" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
             <DTVirtualScroller
                 ref="virtualScroller"
                 v-bind="virtualScrollerOptions"
@@ -59,9 +60,10 @@
                 autoSize
                 :showSpacer="false"
                 :pt="ptm('virtualScroller')"
+                data-pc-section="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"
@@ -98,7 +100,6 @@
                             ref="frozenBodyRef"
                             :value="frozenValue"
                             :frozenRow="true"
-                            class="p-datatable-frozen-tbody"
                             :columns="slotProps.columns"
                             :first="d_first"
                             :dataKey="dataKey"
@@ -208,8 +209,8 @@
                         />
                         <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" />
@@ -217,7 +218,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
@@ -229,10 +230,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            class="p-paginator-bottom"
+            :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :pt="ptm('paginator')"
+            data-pc-section="paginator"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -253,11 +255,11 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </DTPaginator>
-        <div ref="resizeHelper" class="p-column-resizer-helper" style="display: none" v-bind="ptm('resizeHelper')"></div>
+        <div ref="resizeHelper" :class="cx('resizeHelper')" 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')">
+        <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>
@@ -265,20 +267,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',
@@ -319,264 +321,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,
@@ -714,11 +458,11 @@ export default {
                 const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
                 if (
-                    DomHandler.hasClass(targetNode, 'p-sortable-column') ||
+                    DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
-                    DomHandler.hasClass(targetNode, 'p-column-title') ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headerTitle' ||
-                    DomHandler.hasClass(targetNode, 'p-column-header-content') ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headerContent' ||
-                    DomHandler.hasClass(targetNode, 'p-sortable-column-icon') ||
+                    DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sortIcon' ||
-                    DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')
+                    DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sortIcon'
                 ) {
                     DomHandler.clearSelection();
 
@@ -930,7 +674,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;
@@ -1010,7 +754,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) {
@@ -1166,11 +910,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 firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-highlight="true"]');
-                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 (firstSelectedRow) {
                     firstSelectedRow.tabIndex = '0';
@@ -1185,7 +929,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;
@@ -1195,19 +939,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;
         },
@@ -1511,7 +1255,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)));
 
@@ -1519,16 +1263,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} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
-                    ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                    ${selector} > tbody[data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
-                    ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                    ${selector} > tfoot[data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
                         ${style}
                     }
                 `;
@@ -1570,7 +1314,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;
             }
         },
@@ -1682,7 +1426,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) {
@@ -1937,7 +1681,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(',');
@@ -1960,15 +1704,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} > thead[data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
-                            ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                            ${selector} > tbody[data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
-                            ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                            ${selector} > tfoot[data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
                                 ${style}
                             }
                         `;
@@ -2177,35 +1921,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();
 
@@ -2332,252 +2047,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>

components/lib/datatable/FooterCell.vue

@@ -77,13 +77,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
+            return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
-                this.columnProp('footerClass'),
-                this.columnProp('class'),
-                {
-                    'p-frozen-column': this.columnProp('frozen')
-                }
-            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('footerStyle');

components/lib/datatable/HeaderCell.vue

@@ -15,15 +15,21 @@
         @dragleave="onDragLeave"
         @drop="onDrop"
         v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
+        :data-p-sortable-column="columnProp('sortable')"
+        :data-p-resizable-column="resizableColumns"
+        :data-p-highlight="isColumnSorted()"
+        :data-p-filter-column="filterColumn"
+        :data-p-frozen-column="columnProp('frozen')"
+        :data-p-reorderable-column="reorderableColumns"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
+        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
-        <div class="p-column-header-content" v-bind="getColumnPTOptions('headerContent')">
+        <div :class="cx('headerContent')" v-bind="getColumnPTOptions('headerContent')">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-            <span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
+            <span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
             <span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
-                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
+                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
             </span>
-            <span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
+            <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
             <DTHeaderCheckbox
                 v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
                 :checked="allRowsSelected"
@@ -209,7 +215,7 @@ export default {
             this.$emit('column-click', { originalEvent: event, column: this.column });
         },
         onKeyDown(event) {
-            if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+            if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
                 this.$emit('column-click', { originalEvent: event, column: this.column });
                 event.preventDefault();
             }
@@ -286,18 +292,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
+            return [this.cx('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
-                this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'),
-                this.columnProp('class'),
-                {
-                    'p-sortable-column': this.columnProp('sortable'),
-                    'p-resizable-column': this.resizableColumns,
-                    'p-highlight': this.isColumnSorted(),
-                    'p-filter-column': this.filterColumn,
-                    'p-frozen-column': this.columnProp('frozen'),
-                    'p-reorderable-column': this.reorderableColumns
-                }
-            ];
         },
         containerStyle() {
             let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');

components/lib/datatable/HeaderCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
+    <div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
-        <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')">
+        <div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 type="checkbox"
@@ -13,9 +13,9 @@
                 v-bind="getColumnPTOptions('hiddenHeaderInput')"
             />
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('headerCheckbox')">
+        <div ref="box" :class="cx('headerCheckbox')" v-bind="getColumnPTOptions('headerCheckbox')">
-            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" :class="cx('headerCheckboxIcon')" />
-            <CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" class="p-checkbox-icon" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
+            <CheckIcon v-else-if="!headerCheckboxIconTemplate && !!checked" :class="cx('headerCheckboxIcon')" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
         </div>
     </div>
 </template>

components/lib/datatable/RowCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
+    <div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
-        <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
+        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 type="checkbox"
@@ -14,9 +14,9 @@
                 v-bind="getColumnPTOptions('hiddenInput')"
             />
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('checkbox')">
+        <div ref="box" :class="cx('checkbox')" v-bind="getColumnPTOptions('checkbox')">
-            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" :class="cx('checkboxIcon')" />
-            <CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" class="p-checkbox-icon" v-bind="getColumnPTOptions('checkboxIcon')" />
+            <CheckIcon v-else-if="!rowCheckboxIconTemplate && !!checked" :class="cx('checkboxIcon')" v-bind="getColumnPTOptions('checkboxIcon')" />
         </div>
     </div>
 </template>

components/lib/datatable/RowRadioButton.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
+    <div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
+        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPTOptions('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('hiddenInput')" />
         </div>
-        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('radiobutton')">
+        <div ref="box" :class="cx('radiobutton')" v-bind="getColumnPTOptions('radiobutton')">
-            <div class="p-radiobutton-icon" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
+            <div :class="cx('radiobuttonIcon')" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
         </div>
     </div>
 </template>

components/lib/datatable/TableBody.vue

@@ -1,23 +1,23 @@
 <template>
-    <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
+    <tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody')">
         <template v-if="!empty">
             <template v-for="(rowData, index) of value">
                 <tr
                     v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))"
                     :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'"
-                    class="p-rowgroup-header"
+                    :class="cx('rowgroupHeader')"
                     :style="rowGroupHeaderStyle"
                     role="row"
                     v-bind="ptm('rowgroupHeader')"
                 >
                     <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
-                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
+                        <button v-if="expandableRowGroups" :class="cx('rowGroupToggler')" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
                             <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
                             <template v-else>
-                                <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                                <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="[cx('rowGroupTogglerIcon'), expandedRowIcon]" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
-                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
+                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
-                                <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                                <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="[cx('rowGroupTogglerIcon'), collapsedRowIcon]" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
-                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
+                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" :class="cx('rowGroupTogglerIcon')" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
                             </template>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
@@ -43,6 +43,9 @@
                     @dragend="onRowDragEnd($event)"
                     @drop="onRowDrop($event)"
                     v-bind="ptm('row')"
+                    :data-p-selectable-row="selectionMode ? true : false"
+                    :data-p-highlight="selection && isSelected(rowData)"
+                    :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"
                 >
                     <template v-for="(col, i) of columns">
                         <DTBodyCell
@@ -83,7 +86,7 @@
                     v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)"
                     :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'"
                     :id="expandedRowId + '_' + index + '_expansion'"
-                    class="p-datatable-row-expansion"
+                    :class="cx('rowExpansion')"
                     role="row"
                     v-bind="ptm('rowExpansion')"
                 >
@@ -94,7 +97,7 @@
                 <tr
                     v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))"
                     :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'"
-                    class="p-rowgroup-footer"
+                    :class="cx('rowgroupFooter')"
                     role="row"
                     v-bind="ptm('rowgroupFooter')"
                 >
@@ -104,7 +107,7 @@
                 </tr>
             </template>
         </template>
-        <tr v-else class="p-datatable-emptymessage" role="row" v-bind="ptm('emptyMessage')">
+        <tr v-else :class="cx('emptyMessage')" role="row" v-bind="ptm('emptyMessage')">
             <td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                 <component v-if="templates.empty" :is="templates.empty" />
             </td>
@@ -341,22 +344,6 @@ export default {
         getRowClass(rowData) {
             let rowStyleClass = [];
 
-            if (this.selectionMode) {
-                rowStyleClass.push('p-selectable-row');
-            }
-
-            if (this.selection) {
-                rowStyleClass.push({
-                    'p-highlight': this.isSelected(rowData)
-                });
-            }
-
-            if (this.contextMenuSelection) {
-                rowStyleClass.push({
-                    'p-highlight-contextmenu': this.isSelectedWithContextMenu(rowData)
-                });
-            }
-
             if (this.rowClass) {
                 let rowClassValue = this.rowClass(rowData);
 
@@ -365,7 +352,7 @@ export default {
                 }
             }
 
-            return rowStyleClass;
+            return [this.cx('row', { rowData }), rowStyleClass];
         },
         shouldRenderRowGroupFooter(value, rowData, i) {
             if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {

components/lib/datatable/TableFooter.vue

@@ -1,5 +1,5 @@
 <template>
-    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup" v-bind="{ ...ptm('tfoot'), ...getColumnGroupPTOptions('root') }">
+    <tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPTOptions('root') } : ptm('tfoot')" data-pc-section="tfoot">
         <tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                 <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />

components/lib/datatable/TableHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <thead class="p-datatable-thead" role="rowgroup" v-bind="{ ...ptm('thead'), ...getColumnGroupPTOptions('root') }">
+    <thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPTOptions('root') } : ptm('thead')" data-pc-section="thead">
         <template v-if="!columnGroup">
             <tr role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@@ -91,7 +91,7 @@
             </tr>
         </template>
         <template v-else>
-            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
+            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPTOptions(row, 'root') }">
                 <template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
                     <DTHeaderCell
                         v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
@@ -269,14 +269,7 @@ export default {
             return column.props && column.props.pt ? column.props.pt : undefined; //@todo
         },
         getFilterColumnHeaderClass(column) {
-            return [
+            return [this.cx('headerCell', { column }), this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class')];
-                'p-filter-column',
-                this.columnProp(column, 'filterHeaderClass'),
-                this.columnProp(column, 'class'),
-                {
-                    'p-frozen-column': this.columnProp(column, 'frozen')
-                }
-            ];
         },
         getFilterColumnHeaderStyle(column) {
             return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];