vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #4786 - DataTable/TreeTable: Frozen column improvements

pull/4789/head
tugcekucukoglu 2023-11-09 18:02:09 +03:00
parent 31e47e8668
commit 321479f131
8 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/datatable/BodyCell.vue
View File

@ -450,7 +450,7 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = this.$el.nextElementSibling; let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -459,7 +459,7 @@ export default {
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = this.$el.previousElementSibling; let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

6
components/lib/datatable/FooterCell.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }"> <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" /> <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }} {{ columnProp('footer') }}
</td> </td>
@ -68,7 +68,7 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = this.$el.nextElementSibling; let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -77,7 +77,7 @@ export default {
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = this.$el.previousElementSibling; let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

4
components/lib/datatable/HeaderCell.vue
View File

@ -270,7 +270,7 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = this.$el.nextElementSibling; let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -279,7 +279,7 @@ export default {
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = this.$el.previousElementSibling; let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

6
components/lib/treetable/BodyCell.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }"> <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggler')" data-pc-group-section="rowactionbutton"> <button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggler')" data-pc-group-section="rowactionbutton">
<component v-if="column.children && column.children.rowtogglericon" :is="column.children && column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" /> <component v-if="column.children && column.children.rowtogglericon" :is="column.children && column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" />
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" /> <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
@ -152,7 +152,7 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = this.$el.nextElementSibling; let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -161,7 +161,7 @@ export default {
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = this.$el.previousElementSibling; let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

6
components/lib/treetable/FooterCell.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }"> <td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" /> <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
{{ columnProp('footer') }} {{ columnProp('footer') }}
</td> </td>
@ -68,7 +68,7 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = this.$el.nextElementSibling; let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -77,7 +77,7 @@ export default {
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = this.$el.previousElementSibling; let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

4
components/lib/treetable/HeaderCell.vue
View File

@ -115,7 +115,7 @@ export default {
if (align === 'right') { if (align === 'right') {
let right = 0; let right = 0;
let next = this.$el.nextElementSibling; let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) { if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0); right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -124,7 +124,7 @@ export default {
this.styleObject.right = right + 'px'; this.styleObject.right = right + 'px';
} else { } else {
let left = 0; let left = 0;
let prev = this.$el.previousElementSibling; let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) { if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0); left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

28
components/lib/utils/DomHandler.js
View File

@ -713,6 +713,34 @@ export default {
return nextIndex > -1 ? focusableElements[nextIndex] : null; return nextIndex > -1 ? focusableElements[nextIndex] : null;
}, },
getPreviousElementSibling(element, selector) {
let previousElement = element.previousElementSibling;
while (previousElement) {
if (previousElement.matches(selector)) {
return previousElement;
} else {
previousElement = previousElement.previousElementSibling;
}
}
return null;
},
getNextElementSibling(element, selector) {
let nextElement = element.nextElementSibling;
while (nextElement) {
if (nextElement.matches(selector)) {
return nextElement;
} else {
nextElement = nextElement.nextElementSibling;
}
}
return null;
},
isClickable(element) { isClickable(element) {
if (element) { if (element) {
const targetNode = element.nodeName; const targetNode = element.nodeName;

2
components/lib/utils/Utils.d.ts vendored
View File

@ -59,6 +59,8 @@ export declare class DomHandler {
static getFocusableElements(el: HTMLElement, selector?: string): any[]; static getFocusableElements(el: HTMLElement, selector?: string): any[];
static getFirstFocusableElement(el: HTMLElement, selector?: string): any; static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
static getLastFocusableElement(el: HTMLElement, selector?: string): any; static getLastFocusableElement(el: HTMLElement, selector?: string): any;
static getPreviousElementSibling(el: HTMLElement, selector?: string): any;
static getNextElementSibling(el: HTMLElement, selector?: string): any;
static isClickable(el: HTMLElement): boolean; static isClickable(el: HTMLElement): boolean;
static applyStyle(el: HTMLElement, style: any): void; static applyStyle(el: HTMLElement, style: any): void;
static isIOS(): boolean; static isIOS(): boolean;