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

Support to freeze cells on the right

pull/973/head
Cagatay Civici 2021-02-10 13:49:36 +03:00
parent 3471c03e10
commit 5f870bdf7a
8 changed files with 81 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/demo/menu/menu.json
View File

@ -255,6 +255,7 @@
{
"name": "DataTable",
"meta": ["datatable"],
"badge": "New",
"children": [
{
"name": "Documentation",
@ -298,7 +299,8 @@
},
{
"name": "Filter",
"to": "/datatable/filter"
"to": "/datatable/filter",
"badge": "New"
},
{
"name": "Selection",
@ -310,7 +312,8 @@
},
{
"name": "Scroll",
"to": "/datatable/scroll"
"to": "/datatable/scroll",
"badge": "New"
},
{
"name": "FlexScroll",

10
src/AppMenu.vue
View File

@ -13,12 +13,18 @@
<template v-if="child.children">
<router-link :to="child.children[0].to" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">{{child.name}}</a>
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">
{{child.name}}
<Tag v-if="child.badge" :value="child.badge"></Tag>
</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)">
<ul>
<li v-for="(submenuitem, i) of child.children" :key="i">
<router-link :to="submenuitem.to">{{submenuitem.name}}</router-link>
<router-link :to="submenuitem.to">
{{submenuitem.name}}
<Tag v-if="submenuitem.badge" :value="submenuitem.badge"></Tag>
</router-link>
</li>
</ul>
</div>

4
src/components/column/Column.vue
View File

@ -158,6 +158,10 @@ export default {
type: Boolean,
default: false
},
alignFrozen: {
type: String,
default: 'left'
},
exportable: {
type: Boolean,
default: true

26
src/components/datatable/BodyCell.vue
View File

@ -74,9 +74,7 @@ export default {
data() {
return {
d_editing: this.editing,
styleObject: {
left: '0px'
}
styleObject: {}
}
},
watch: {
@ -280,13 +278,23 @@ export default {
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
}
this.styleObject.right = right + 'px';
}
else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
}
this.styleObject.left = left + 'px';
}
this.styleObject.left = left + 'px';
}
}
},

2
src/components/datatable/DataTable.vue
View File

@ -24,7 +24,7 @@
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
@column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
<DTTableBody :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
<DTTableBody v-if="frozenValue" :value="frozenValue" :frozenRow="true" class="p-datatable-frozen-tbody" :columns="columns" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode" :contextMenu="contextMenu" :contextMenuSelection="contextMenuSelection"
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"

26
src/components/datatable/FooterCell.vue
View File

@ -18,9 +18,7 @@ export default {
},
data() {
return {
styleObject: {
left: '0px'
}
styleObject: {}
}
},
mounted() {
@ -39,13 +37,23 @@ export default {
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
}
this.styleObject.right = right + 'px';
}
else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
}
this.styleObject.left = left + 'px';
}
this.styleObject.left = left + 'px';
}
}
},

26
src/components/datatable/HeaderCell.vue
View File

@ -83,9 +83,7 @@ export default {
},
data() {
return {
styleObject: {
left: '0px'
}
styleObject: {}
}
},
mounted() {
@ -149,13 +147,23 @@ export default {
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
}
this.styleObject.right = right + 'px';
}
else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
}
this.styleObject.left = left + 'px';
}
this.styleObject.left = left + 'px';
}
},
onHeaderCheckboxChange(event) {

24
src/views/datatable/DataTableScrollDemo.vue
View File

@ -98,24 +98,24 @@
<div class="card">
<h5>Frozen Columns</h5>
<DataTable :value="customers" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both">
<Column field="name" header="Name" :style="{width:'250px'}" frozen>
<Column field="name" header="Name" :style="{width:'200px'}" frozen>
<template #body="slotProps">
<span style="font-weight: 700">{{slotProps.data.name}}</span>
<span class="p-text-bold">{{slotProps.data.name}}</span>
</template>
</Column>
<Column field="id" header="Id" :style="{width:'250px'}"></Column>
<Column field="name" header="Name" :style="{width:'250px'}"></Column>
<Column field="country.name" header="Country" :style="{width:'250px'}"></Column>
<Column field="date" header="Date" :style="{width:'250px'}"></Column>
<Column field="balance" header="Balance" :style="{width:'250px'}">
<Column field="id" header="Id" :style="{width:'200px'}"></Column>
<Column field="name" header="Name" :style="{width:'200px'}"></Column>
<Column field="country.name" header="Country" :style="{width:'200px'}"></Column>
<Column field="date" header="Date" :style="{width:'200px'}"></Column>
<Column field="company" header="Company" :style="{width:'200px'}"></Column>
<Column field="status" header="Status" :style="{width:'200px'}"></Column>
<Column field="activity" header="Activity" :style="{width:'200px'}"></Column>
<Column field="representative.name" header="Representative" :style="{width:'200px'}"></Column>
<Column field="balance" header="Balance" :style="{width:'200px'}" frozen alignFrozen="right">
<template #body="{data}">
{{formatCurrency(data.balance)}}
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
</template>
</Column>
<Column field="company" header="Company" :style="{width:'250px'}"></Column>
<Column field="status" header="Status" :style="{width:'250px'}"></Column>
<Column field="activity" header="Activity" :style="{width:'250px'}"></Column>
<Column field="representative.name" header="Representative" :style="{width:'250px'}"></Column>
</DataTable>
</div>
</div>