Fixed #4786 - DataTable/TreeTable: Frozen column improvements

This commit is contained in:
tugcekucukoglu 2023-11-09 18:02:09 +03:00
parent 31e47e8668
commit 321479f131
8 changed files with 45 additions and 15 deletions

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);