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

10
src/AppMenu.vue
View File

@ -13,12 +13,18 @@
<template v-if="child.children"> <template v-if="child.children">
<router-link :to="child.children[0].to" v-slot="{isActive}" custom> <router-link :to="child.children[0].to" v-slot="{isActive}" custom>
<div> <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"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)"> <div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)">
<ul> <ul>
<li v-for="(submenuitem, i) of child.children" :key="i"> <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> </li>
</ul> </ul>
</div> </div>

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

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

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

@ -74,9 +74,7 @@ export default {
data() { data() {
return { return {
d_editing: this.editing, d_editing: this.editing,
styleObject: { styleObject: {}
left: '0px'
}
} }
}, },
watch: { watch: {
@ -280,13 +278,23 @@ export default {
}, },
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let left = 0; let align = this.columnProp('alignFrozen');
let prev = this.$el.previousElementSibling; if (align === 'right') {
if (prev) { let right = 0;
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left); 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-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-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
@column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($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" :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
:expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups" :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
:editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading" :editingRows="editingRows" :editingRowKeys="d_editingRowKeys" :templates="$slots" :loading="loading"

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

@ -18,9 +18,7 @@ export default {
}, },
data() { data() {
return { return {
styleObject: { styleObject: {}
left: '0px'
}
} }
}, },
mounted() { mounted() {
@ -39,13 +37,23 @@ export default {
}, },
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let left = 0; let align = this.columnProp('alignFrozen');
let prev = this.$el.previousElementSibling; if (align === 'right') {
if (prev) { let right = 0;
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left); 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() { data() {
return { return {
styleObject: { styleObject: {}
left: '0px'
}
} }
}, },
mounted() { mounted() {
@ -149,13 +147,23 @@ export default {
}, },
updateStickyPosition() { updateStickyPosition() {
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
let left = 0; let align = this.columnProp('alignFrozen');
let prev = this.$el.previousElementSibling; if (align === 'right') {
if (prev) { let right = 0;
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left); 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) { onHeaderCheckboxChange(event) {

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

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