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

View File

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

View File

@ -1,5 +1,5 @@
<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" />
{{ columnProp('footer') }}
</td>
@ -68,7 +68,7 @@ export default {
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -77,7 +77,7 @@ export default {
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

View File

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

View File

@ -1,5 +1,5 @@
<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">
<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')" />
@ -152,7 +152,7 @@ export default {
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -161,7 +161,7 @@ export default {
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

View File

@ -1,5 +1,5 @@
<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" />
{{ columnProp('footer') }}
</td>
@ -68,7 +68,7 @@ export default {
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
@ -77,7 +77,7 @@ export default {
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);

View File

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

View File

@ -713,6 +713,34 @@ export default {
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) {
if (element) {
const targetNode = element.nodeName;

View File

@ -59,6 +59,8 @@ export declare class DomHandler {
static getFocusableElements(el: HTMLElement, selector?: string): any[];
static getFirstFocusableElement(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 applyStyle(el: HTMLElement, style: any): void;
static isIOS(): boolean;