Refactor #3983 - For TreeTable

components/lib/treetable/BaseTreeTable.vue

@@ -0,0 +1,435 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-treetable {
+    position: relative;
+}
+
+.p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treetable-responsive-scroll > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
+.p-treetable-auto-layout > .p-treetable-wrapper > table {
+    table-layout: auto;
+}
+
+.p-treetable-hoverable-rows .p-treetable-tbody > tr {
+    cursor: pointer;
+}
+
+.p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+}
+
+.p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+}
+
+/* Resizable */
+.p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-resizable .p-treetable-thead > tr > th,
+.p-treetable-resizable .p-treetable-tfoot > tr > td,
+.p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+}
+
+.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
+    background-clip: padding-box;
+    position: relative;
+}
+
+.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+}
+
+.p-treetable .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-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+}
+
+.p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+/* Scrollable */
+.p-treetable-scrollable .p-treetable-wrapper {
+    position: relative;
+    overflow: auto;
+}
+
+.p-treetable-scrollable .p-treetable-table {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead,
+.p-treetable-scrollable .p-treetable-tbody,
+.p-treetable-scrollable .p-treetable-tfoot {
+    display: block;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr,
+.p-treetable-scrollable .p-treetable-tbody > tr,
+.p-treetable-scrollable .p-treetable-tfoot > tr {
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+.p-treetable-scrollable .p-treetable-thead > tr > th,
+.p-treetable-scrollable .p-treetable-tbody > tr > td,
+.p-treetable-scrollable .p-treetable-tfoot > tr > td {
+    display: flex;
+    flex: 1 1 0;
+    align-items: center;
+}
+
+.p-treetable-scrollable .p-treetable-thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-treetable-tfoot {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+}
+
+.p-treetable-scrollable .p-frozen-column {
+    position: sticky;
+    background: inherit;
+}
+
+.p-treetable-scrollable th.p-frozen-column {
+    z-index: 1;
+}
+
+.p-treetable-scrollable-both .p-treetable-thead > tr > th,
+.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
+.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
+    flex: 0 0 auto;
+}
+
+.p-treetable-flex-scrollable {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.p-treetable-flex-scrollable .p-treetable-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-treetable p-component',
+        {
+            'p-treetable-hoverable-rows': props.rowHover || props.rowSelectionMode,
+            'p-treetable-auto-layout': props.autoLayout,
+            'p-treetable-resizable': props.resizableColumns,
+            'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-treetable-gridlines': props.showGridlines,
+            'p-treetable-scrollable': props.scrollable,
+            'p-treetable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
+            'p-treetable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
+            'p-treetable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
+            'p-treetable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
+            'p-treetable-responsive-scroll': props.responsiveLayout === 'scroll'
+        }
+    ],
+    loadingWrapper: 'p-treetable-loading',
+    loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
+    loadingIcon: 'p-treetable-loading-icon',
+    header: 'p-treetable-header',
+    paginator: ({ instance }) => (instance.paginatorTop ? 'p-paginator-top' : instance.paginatorBottom ? 'p-paginator-bottom' : ''),
+    wrapper: 'p-treetable-wrapper',
+    thead: 'p-treetable-thead',
+    //headercell
+    headerCell: ({ instance, props, column }) =>
+        column && instance.hasColumnFilter()
+            ? [
+                  'p-filter-column',
+                  {
+                      'p-frozen-column': instance.columnProp(column, 'frozen')
+                  }
+              ]
+            : [
+                  {
+                      'p-sortable-column': instance.columnProp('sortable'),
+                      'p-resizable-column': props.resizableColumns,
+                      'p-highlight': instance.isColumnSorted(),
+                      'p-frozen-column': instance.columnProp('frozen')
+                  }
+              ],
+    columnResizer: 'p-column-resizer',
+    headerTitle: 'p-column-title',
+    sortIcon: 'p-sortable-column-icon',
+    sortBadge: 'p-sortable-column-badge',
+    tbody: 'p-treetable-tbody',
+    //ttrow
+    row: ({ instance }) => [
+        {
+            'p-highlight': instance.selected
+        }
+    ],
+    //bodycell
+    bodyCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    rowToggler: 'p-treetable-toggler p-link',
+    rowTogglerIcon: 'p-tree-toggler-icon',
+    checkboxWrapper: ({ instance }) => [
+        'p-checkbox p-treetable-checkbox p-component',
+        {
+            'p-checkbox-focused': instance.checkboxFocused
+        }
+    ],
+    hiddenInputWrapper: 'p-hidden-accessible',
+    checkbox: ({ instance }) => [
+        'p-checkbox-box',
+        {
+            'p-highlight': instance.checked,
+            'p-focus': instance.checkboxFocused,
+            'p-indeterminate': instance.partialChecked
+        }
+    ],
+    checkboxicon: 'p-checkbox-icon',
+    //treetable
+    emptyMessage: 'p-treetable-emptymessage',
+    tfoot: 'p-treetable-tfoot',
+    //footercell
+    footerCell: ({ instance }) => [
+        {
+            'p-frozen-column': instance.columnProp('frozen')
+        }
+    ],
+    //treetable
+    footer: 'p-treetable-footer',
+    resizeHelper: 'p-column-resizer-helper p-highlight'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_treetable_style', manual: true });
+
+export default {
+    name: 'BaseTreeTable',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        metaKeySelection: {
+            type: Boolean,
+            default: true
+        },
+        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: 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
+        },
+        rowHover: {
+            type: Boolean,
+            default: false
+        },
+        autoLayout: {
+            type: Boolean,
+            default: false
+        },
+        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
+        },
+        filterMode: {
+            type: String,
+            default: 'lenient'
+        },
+        filterLocale: {
+            type: String,
+            default: undefined
+        },
+        resizableColumns: {
+            type: Boolean,
+            default: false
+        },
+        columnResizeMode: {
+            type: String,
+            default: 'fit'
+        },
+        indentation: {
+            type: Number,
+            default: 1
+        },
+        showGridlines: {
+            type: Boolean,
+            default: false
+        },
+        scrollable: {
+            type: Boolean,
+            default: false
+        },
+        scrollDirection: {
+            type: String,
+            default: 'vertical'
+        },
+        scrollHeight: {
+            type: String,
+            default: null
+        },
+        responsiveLayout: {
+            type: String,
+            default: null
+        },
+        tableProps: {
+            type: Object,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/treetable/BodyCell.vue

@@ -1,17 +1,17 @@
 <template>
     <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
-        <button v-if="columnProp('expander')" v-ripple type="button" class="p-treetable-toggler p-link" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
+        <button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPTOptions('rowToggler')">
-            <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" class="p-tree-toggler-icon" />
+            <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" />
-            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
+            <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions('rowTogglerIcon')" />
-            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" class="p-tree-toggler-icon" v-bind="getColumnPTOptions('rowTogglerIcon')" />
+            <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions('rowTogglerIcon')" />
         </button>
-        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="['p-checkbox p-treetable-checkbox p-component', { 'p-checkbox-focused': checkboxFocused }]" @click="toggleCheckbox" v-bind="getColumnPTOptions('checkboxWrapper')">
+        <div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" 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 type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPTOptions('hiddenInput')" />
             </div>
-            <div ref="checkboxEl" :class="checkboxClass" v-bind="getColumnCheckboxPTOptions('checkbox')">
+            <div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPTOptions('checkbox')">
-                <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" class="p-checkbox-icon" />
+                <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="checked" :partialChecked="partialChecked" :class="cx('checkboxicon')" />
-                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" class="p-checkbox-icon" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
+                <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="cx('checkboxicon')" v-bind="getColumnCheckboxPTOptions('checkboxIcon')" />
             </div>
         </div>
         <component v-if="column.children && column.children.body" :is="column.children.body" :node="node" :column="column" />
@@ -165,13 +165,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
+            return [this.columnProp('bodyClass'), this.columnProp('class'), this.cx('bodyCell')];
-                this.columnProp('bodyClass'),
-                this.columnProp('class'),
-                {
-                    'p-frozen-column': this.columnProp('frozen')
-                }
-            ];
         },
         containerStyle() {
             let bodyStyle = this.columnProp('bodyStyle');
@@ -187,9 +181,6 @@ export default {
         },
         checkboxSelectionMode() {
             return this.selectionMode === 'checkbox';
-        },
-        checkboxClass() {
-            return ['p-checkbox-box', { 'p-highlight': this.checked, 'p-focus': this.checkboxFocused, 'p-indeterminate': this.partialChecked }];
         }
     },
     components: {

components/lib/treetable/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/treetable/HeaderCell.vue

@@ -1,21 +1,25 @@
 <template>
     <th
-        :style="[containerStyle]"
         :class="containerClass"
+        :style="[containerStyle]"
         @click="onClick"
         @keydown="onKeyDown"
         :tabindex="columnProp('sortable') ? '0' : null"
         :aria-sort="ariaSort"
         role="columnheader"
         v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
+        :data-p-sortable-column="columnProp('sortable')"
+        :data-p-resizable-column="resizableColumns"
+        :data-p-highlight="isColumnSorted()"
+        :data-p-frozen-column="columnProp('frozen')"
     >
-        <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>
         <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')">{{ getMultiSortMetaIndex() + 1 }}</span>
+        <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
 </template>
 
@@ -125,7 +129,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();
@@ -157,16 +161,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
+            return [this.columnProp('headerClass'), this.columnProp('class'), this.cx('headerCell')];
-                this.columnProp('headerClass'),
-                this.columnProp('class'),
-                {
-                    'p-sortable-column': this.columnProp('sortable'),
-                    'p-resizable-column': this.resizableColumns,
-                    'p-highlight': this.isColumnSorted(),
-                    'p-frozen-column': this.columnProp('frozen')
-                }
-            ];
         },
         containerStyle() {
             let headerStyle = this.columnProp('headerStyle');

components/lib/treetable/TreeTable.vue

@@ -1,13 +1,13 @@
 <template>
-    <div :class="containerClass" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
+    <div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')" data-pc-name="treetable">
-        <div v-if="loading" class="p-treetable-loading" v-bind="ptm('loadingWrapper')">
+        <div v-if="loading" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
-            <div class="p-treetable-loading-overlay p-component-overlay" v-bind="ptm('loadingOverlay')">
+            <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
-                <slot name="loadingicon">
+                <slot name="loadingicon" :class="cx('loadingIcon')">
-                    <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-treetable-loading-icon', loadingIcon]" v-bind="ptm('loadingIcon')" />
+                    <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="[cx('loadingIcon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
                 </slot>
             </div>
         </div>
-        <div v-if="$slots.header" class="p-treetable-header" v-bind="ptm('header')">
+        <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
         <TTPaginator
@@ -19,10 +19,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>
@@ -43,9 +44,9 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </TTPaginator>
-        <div class="p-treetable-wrapper" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
+        <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
             <table ref="table" role="table" v-bind="{ ...tableProps, ...ptm('table') }">
-                <thead class="p-treetable-thead" role="rowgroup" v-bind="ptm('thead')">
+                <thead :class="cx('thead')" role="rowgroup" v-bind="ptm('thead')">
                     <tr role="row" v-bind="ptm('headerRow')">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                             <TTHeaderCell
@@ -70,7 +71,7 @@
                         </template>
                     </tr>
                 </thead>
-                <tbody class="p-treetable-tbody" role="rowgroup" v-bind="ptm('tbody')">
+                <tbody :class="cx('tbody')" role="rowgroup" v-bind="ptm('tbody')">
                     <template v-if="!empty">
                         <TTRow
                             v-for="(node, index) of dataToRender"
@@ -92,13 +93,13 @@
                             :pt="pt"
                         ></TTRow>
                     </template>
-                    <tr v-else class="p-treetable-emptymessage" v-bind="ptm('emptyMessage')">
+                    <tr v-else :class="cx('emptyMessage')" v-bind="ptm('emptyMessage')">
                         <td :colspan="columns.length" v-bind="ptm('bodyCell')">
                             <slot name="empty"></slot>
                         </td>
                     </tr>
                 </tbody>
-                <tfoot v-if="hasFooter" class="p-treetable-tfoot" role="rowgroup" v-bind="ptm('tfoot')">
+                <tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="ptm('tfoot')">
                     <tr role="row" v-bind="ptm('footerRow')">
                         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                             <TTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt"></TTFooterCell>
@@ -116,10 +117,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            class="p-paginator-bottom"
+            :class="cx('paginator')"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :pt="pt"
+            data-pc-section="paginator"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -140,26 +142,26 @@
                 <slot name="paginatorlastpagelinkicon"></slot>
             </template>
         </TTPaginator>
-        <div v-if="$slots.footer" class="p-treetable-footer" v-bind="ptm('footer')">
+        <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
-        <div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none" v-bind="ptm('resizeHelper')"></div>
+        <div ref="resizeHelper" :class="cx('resizeHelper')" style="display: none" v-bind="ptm('resizeHelper')"></div>
     </div>
 </template>
 
 <script>
 import { FilterService } from 'primevue/api';
-import BaseComponent from 'primevue/basecomponent';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Paginator from 'primevue/paginator';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import BaseTreeTable from './BaseTreeTable.vue';
 import FooterCell from './FooterCell.vue';
 import HeaderCell from './HeaderCell.vue';
 import TreeTableRow from './TreeTableRow.vue';
 
 export default {
     name: 'TreeTable',
-    extends: BaseComponent,
+    extends: BaseTreeTable,
     emits: [
         'node-expand',
         'node-collapse',
@@ -177,160 +179,6 @@ export default {
         'filter',
         'column-resize-end'
     ],
-    props: {
-        value: {
-            type: null,
-            default: null
-        },
-        expandedKeys: {
-            type: null,
-            default: null
-        },
-        selectionKeys: {
-            type: null,
-            default: null
-        },
-        selectionMode: {
-            type: String,
-            default: null
-        },
-        metaKeySelection: {
-            type: Boolean,
-            default: true
-        },
-        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: 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
-        },
-        rowHover: {
-            type: Boolean,
-            default: false
-        },
-        autoLayout: {
-            type: Boolean,
-            default: false
-        },
-        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
-        },
-        filterMode: {
-            type: String,
-            default: 'lenient'
-        },
-        filterLocale: {
-            type: String,
-            default: undefined
-        },
-        resizableColumns: {
-            type: Boolean,
-            default: false
-        },
-        columnResizeMode: {
-            type: String,
-            default: 'fit'
-        },
-        indentation: {
-            type: Number,
-            default: 1
-        },
-        showGridlines: {
-            type: Boolean,
-            default: false
-        },
-        scrollable: {
-            type: Boolean,
-            default: false
-        },
-        scrollDirection: {
-            type: String,
-            default: 'vertical'
-        },
-        scrollHeight: {
-            type: String,
-            default: null
-        },
-        responsiveLayout: {
-            type: String,
-            default: null
-        },
-        tableProps: {
-            type: Object,
-            default: null
-        }
-    },
     documentColumnResizeListener: null,
     documentColumnResizeEndListener: null,
     lastResizeHelperX: null,
@@ -491,13 +339,7 @@ export default {
             this.$emit('update:first', this.d_first);
         },
         getFilterColumnHeaderClass(column) {
-            return [
+            return [this.cx('headerCell', { column }), this.columnProp(column, 'filterHeaderClass')];
-                'p-filter-column',
-                this.columnProp(column, 'filterHeaderClass'),
-                {
-                    'p-frozen-column': this.columnProp(column, 'frozen')
-                }
-            ];
         },
         onColumnHeaderClick(e) {
             let event = e.originalEvent;
@@ -508,10 +350,10 @@ 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-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();
 
@@ -855,7 +697,7 @@ export default {
             }
         },
         onColumnKeyDown(event, col) {
-            if (event.code === 'Enter' && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+            if (event.code === 'Enter' && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
                 this.onColumnHeaderClick(event, col);
             }
         },
@@ -899,24 +741,6 @@ export default {
         }
     },
     computed: {
-        containerClass() {
-            return [
-                'p-treetable p-component',
-                {
-                    'p-treetable-hoverable-rows': this.rowHover || this.rowSelectionMode,
-                    'p-treetable-auto-layout': this.autoLayout,
-                    'p-treetable-resizable': this.resizableColumns,
-                    'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
-                    'p-treetable-gridlines': this.showGridlines,
-                    'p-treetable-scrollable': this.scrollable,
-                    'p-treetable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
-                    'p-treetable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
-                    'p-treetable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
-                    'p-treetable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
-                    'p-treetable-responsive-scroll': this.responsiveLayout === 'scroll'
-                }
-            ];
-        },
         columns() {
             let cols = [];
             let children = this.$slots.default();
@@ -1015,174 +839,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-treetable {
-    position: relative;
-}
-
-.p-treetable table {
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-}
-
-.p-treetable .p-sortable-column {
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-treetable-responsive-scroll > .p-treetable-wrapper {
-    overflow-x: auto;
-}
-
-.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
-.p-treetable-auto-layout > .p-treetable-wrapper > table {
-    table-layout: auto;
-}
-
-.p-treetable-hoverable-rows .p-treetable-tbody > tr {
-    cursor: pointer;
-}
-
-.p-treetable-toggler {
-    cursor: pointer;
-    user-select: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-treetable-toggler + .p-checkbox {
-    vertical-align: middle;
-}
-
-.p-treetable-toggler + .p-checkbox + span {
-    vertical-align: middle;
-}
-
-/* Resizable */
-.p-treetable-resizable > .p-treetable-wrapper {
-    overflow-x: auto;
-}
-
-.p-treetable-resizable .p-treetable-thead > tr > th,
-.p-treetable-resizable .p-treetable-tfoot > tr > td,
-.p-treetable-resizable .p-treetable-tbody > tr > td {
-    overflow: hidden;
-}
-
-.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
-    background-clip: padding-box;
-    position: relative;
-}
-
-.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
-    display: none;
-}
-
-.p-treetable .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-treetable .p-column-resizer-helper {
-    width: 1px;
-    position: absolute;
-    z-index: 10;
-    display: none;
-}
-
-.p-treetable .p-treetable-loading-overlay {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-}
-
-/* Scrollable */
-.p-treetable-scrollable .p-treetable-wrapper {
-    position: relative;
-    overflow: auto;
-}
-
-.p-treetable-scrollable .p-treetable-table {
-    display: block;
-}
-
-.p-treetable-scrollable .p-treetable-thead,
-.p-treetable-scrollable .p-treetable-tbody,
-.p-treetable-scrollable .p-treetable-tfoot {
-    display: block;
-}
-
-.p-treetable-scrollable .p-treetable-thead > tr,
-.p-treetable-scrollable .p-treetable-tbody > tr,
-.p-treetable-scrollable .p-treetable-tfoot > tr {
-    display: flex;
-    flex-wrap: nowrap;
-    width: 100%;
-}
-
-.p-treetable-scrollable .p-treetable-thead > tr > th,
-.p-treetable-scrollable .p-treetable-tbody > tr > td,
-.p-treetable-scrollable .p-treetable-tfoot > tr > td {
-    display: flex;
-    flex: 1 1 0;
-    align-items: center;
-}
-
-.p-treetable-scrollable .p-treetable-thead {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-}
-
-.p-treetable-scrollable .p-treetable-tfoot {
-    position: sticky;
-    bottom: 0;
-    z-index: 1;
-}
-
-.p-treetable-scrollable .p-frozen-column {
-    position: sticky;
-    background: inherit;
-}
-
-.p-treetable-scrollable th.p-frozen-column {
-    z-index: 1;
-}
-
-.p-treetable-scrollable-both .p-treetable-thead > tr > th,
-.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
-.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
-.p-treetable-scrollable-horizontal .p-treetable-thead > tr > th .p-treetable-scrollable-horizontal .p-treetable-tbody > tr > td,
-.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
-    flex: 0 0 auto;
-}
-
-.p-treetable-flex-scrollable {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-treetable-flex-scrollable .p-treetable-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-}
-</style>

components/lib/treetable/TreeTableRow.vue

@@ -15,6 +15,7 @@
         @keydown="onKeyDown"
         @touchend="onTouchEnd"
         v-bind="ptm('row')"
+        :data-p-highlight="selected"
     >
         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
             <TTBodyCell
@@ -126,7 +127,7 @@ export default {
             this.$emit('node-toggle', this.node);
         },
         onClick(event) {
-            if (DomHandler.isClickable(event.target) || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
+            if (DomHandler.isClickable(event.target) || DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowtoggler' || DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'rowtoggler') {
                 return;
             }
 
@@ -197,7 +198,7 @@ export default {
         },
         onArrowRightKey(event) {
             const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
-            const togglerElement = DomHandler.findSingle(this.$refs.node, '.p-treetable-toggler');
+            const togglerElement = DomHandler.findSingle(this.$refs.node, '[data-pc-section="rowtoggler"]');
 
             if (ishiddenIcon) return;
 
@@ -216,7 +217,7 @@ export default {
 
             const currentTarget = event.currentTarget;
             const ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
-            const togglerElement = DomHandler.findSingle(currentTarget, '.p-treetable-toggler');
+            const togglerElement = DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
 
             if (this.expanded && !ishiddenIcon) {
                 togglerElement.click();
@@ -263,14 +264,14 @@ export default {
         },
         onTabKey() {
             const rows = [...DomHandler.find(this.$refs.node.parentElement, 'tr')];
-            const hasSelectedRow = rows.some((row) => DomHandler.hasClass(row, 'p-highlight') || row.getAttribute('aria-checked') === 'true');
+            const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true');
 
             rows.forEach((row) => {
                 row.tabIndex = -1;
             });
 
             if (hasSelectedRow) {
-                const selectedNodes = rows.filter((node) => DomHandler.hasClass(node, 'p-highlight') || node.getAttribute('aria-checked') === 'true');
+                const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true');
 
                 selectedNodes[0].tabIndex = 0;
 
@@ -391,12 +392,7 @@ export default {
     },
     computed: {
         containerClass() {
-            return [
+            return [this.node.styleClass, this.cx('root')];
-                this.node.styleClass,
-                {
-                    'p-highlight': this.selected
-                }
-            ];
         },
         expanded() {
             return this.expandedKeys && this.expandedKeys[this.node.key] === true;