Merge branch 'master' of https://github.com/primefaces/primevue
onursenture
commit
0dc7524098
|
|
@ -0,0 +1 @@
|
|||
export * from './components/columngroup/ColumnGroup';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/columngroup/ColumnGroup.vue');
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "primevue",
|
||||
"version": "1.0.0-beta.11-SNAPSHOT",
|
||||
"version": "1.0.0-beta.12-SNAPSHOT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/primefaces/primevue.git"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
"gulp-rename": "^1.2.2",
|
||||
"gulp-uglify": "^1.5.3",
|
||||
"gulp-uglifycss": "^1.0.6",
|
||||
"primeflex": "1.0.0-rc.1",
|
||||
"primeflex": "1.0.0",
|
||||
"primeicons": "2.0.0",
|
||||
"prismjs": "^1.15.0",
|
||||
"quill": "1.3.3",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content-section layout-footer clearfix">
|
||||
<span>PrimeVUE 1.0.0-beta.11</span>
|
||||
<span>PrimeVUE 1.0.0-beta.12</span>
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
|
||||
<a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: []
|
||||
d_children: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.tabs = this.$children.filter(child => child.$options._componentTag.indexOf('AccordionTab')===0);
|
||||
this.d_children = this.$children;
|
||||
},
|
||||
methods: {
|
||||
onTabClick(event, tab) {
|
||||
|
|
@ -76,6 +76,11 @@ export default {
|
|||
return this.props.multiple ? (this.d_activeTabIndex && this.d_activeTabIndex.indexOf(index) >= 0) : this.d_activeTabIndex === index;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.d_children.filter(child => child.$vnode.tag.indexOf('accordiontab') !== -1);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'AccordionTabSlot': AccordionTabSlot
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'accordiontab',
|
||||
props: {
|
||||
header: null,
|
||||
active: Boolean,
|
||||
|
|
|
|||
|
|
@ -17,4 +17,9 @@ export declare class Column extends Vue {
|
|||
excludeGlobalFilter?: boolean;
|
||||
selectionMode?: string;
|
||||
expander?: boolean;
|
||||
colspan?: number;
|
||||
rowspan?: number;
|
||||
rowReorder?: boolean;
|
||||
rowReorderIcon?: string;
|
||||
reorderableColumn?: boolean;
|
||||
}
|
||||
|
|
@ -73,6 +73,18 @@ export default {
|
|||
rowspan: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
rowReorder: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rowReorderIcon: {
|
||||
type: String,
|
||||
default: 'pi pi-bars'
|
||||
},
|
||||
reorderableColumn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
export declare class ColumnGroup extends Vue {
|
||||
type?: string;
|
||||
}
|
||||
|
|
@ -15,15 +15,15 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
_rows: null
|
||||
children: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this._rows = this.$children;
|
||||
this.children = this.$children;
|
||||
},
|
||||
computed: {
|
||||
rows() {
|
||||
return this._rows;
|
||||
return this.children;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,12 +34,15 @@ export declare class DataTable extends Vue {
|
|||
autoLayout?: boolean;
|
||||
resizableColumns?: boolean;
|
||||
columnResizeMode?: string;
|
||||
reorderableColumns?: boolean;
|
||||
$emit(eventName: 'page', event: Event): this;
|
||||
$emit(eventName: 'sort', event: Event): this;
|
||||
$emit(eventName: 'filter', event: Event): this;
|
||||
$emit(eventName: 'row-select', event: Event): this;
|
||||
$emit(eventName: 'row-unselect', event: Event): this;
|
||||
$emit(eventName: 'column-resize-end', event: Event): this;
|
||||
$emit(eventName: 'column-reorder', event: Event): this;
|
||||
$emit(eventName: 'row-reorder', event: Event): this;
|
||||
$slots: {
|
||||
header: VNode[];
|
||||
paginatorLeft: VNode[];
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@
|
|||
<table ref="table">
|
||||
<thead class="p-datatable-thead">
|
||||
<tr v-if="!headerColumnGroup">
|
||||
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
|
||||
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
|
||||
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
|
||||
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
|
||||
:colspan="col.colspan" :rowspan="col.rowspan">
|
||||
<span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
|
||||
<ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
|
||||
|
|
@ -35,7 +37,8 @@
|
|||
</tr>
|
||||
<template v-else>
|
||||
<tr v-for="(row,i) of headerColumnGroup.rows" :key="i">
|
||||
<th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
|
||||
<th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
|
||||
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
|
||||
:colspan="col.colspan" :rowspan="col.rowspan">
|
||||
<ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
|
||||
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
|
||||
|
|
@ -49,13 +52,17 @@
|
|||
<tbody class="p-datatable-tbody">
|
||||
<template v-if="!empty">
|
||||
<tr :class="getRowClass(rowData)" v-for="(rowData, index) of dataToRender" :key="getRowKey(rowData, index)"
|
||||
@click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null">
|
||||
@click="onRowClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode ? '0' : null"
|
||||
@mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
|
||||
<td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
|
||||
<ColumnSlot :data="rowData" :column="col" type="body" v-if="col.$scopedSlots.body" />
|
||||
<template v-else-if="col.selectionMode">
|
||||
<DTRadioButton :value="rowData" :checked="isSelected(rowData)" @change="toggleRowWithRadio" v-if="col.selectionMode === 'single'" />
|
||||
<DTCheckbox :value="rowData" :checked="isSelected(rowData)" @change="toggleRowWithCheckbox" v-else-if="col.selectionMode ==='multiple'" />
|
||||
</template>
|
||||
<template v-else-if="col.rowReorder">
|
||||
<i :class="['p-datatable-reorderablerow-handle', col.rowReorderIcon]"></i>
|
||||
</template>
|
||||
<template v-else>{{resolveFieldData(rowData, col.field)}}</template>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -99,6 +106,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div ref="resizeHelper" class="p-column-resizer-helper p-highlight" style="display: none"></div>
|
||||
<span ref="reorderIndicatorUp" class="pi pi-arrow-down p-datatable-reorder-indicator-up" style="position: absolute; display: none" v-if="reorderableColumns" />
|
||||
<span ref="reorderIndicatorDown" class="pi pi-arrow-up p-datatable-reorder-indicator-down" style="position: absolute; display: none" v-if="reorderableColumns" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -261,6 +270,10 @@ export default {
|
|||
columnResizeMode: {
|
||||
type: String,
|
||||
default: 'fit'
|
||||
},
|
||||
reorderableColumns: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -271,7 +284,8 @@ export default {
|
|||
d_sortField: this.sortField,
|
||||
d_sortOrder: this.sortOrder,
|
||||
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
|
||||
d_selectionKeys: null
|
||||
d_selectionKeys: null,
|
||||
columnOrder: null
|
||||
};
|
||||
},
|
||||
rowTouched: false,
|
||||
|
|
@ -281,6 +295,13 @@ export default {
|
|||
documentColumnResizeEndListener: null,
|
||||
lastResizeHelperX: null,
|
||||
resizeColumnElement: null,
|
||||
columnResizing: false,
|
||||
colReorderIconWidth: null,
|
||||
colReorderIconHeight: null,
|
||||
draggedColumn: null,
|
||||
draggedRowIndex: null,
|
||||
droppedRowIndex: null,
|
||||
rowDragging: null,
|
||||
watch: {
|
||||
first(newValue) {
|
||||
this.d_first = newValue;
|
||||
|
|
@ -305,6 +326,16 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
this.allChildren = this.$children;
|
||||
|
||||
if (this.reorderableColumns) {
|
||||
let columnOrder = [];
|
||||
for (let child of this.allChildren) {
|
||||
if (child.$options._propKeys.indexOf('columnKey') !== -1) {
|
||||
columnOrder.push(child.columnKey||child.field);
|
||||
}
|
||||
}
|
||||
this.columnOrder = columnOrder;
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unbindColumnResizeEvents();
|
||||
|
|
@ -956,6 +987,191 @@ export default {
|
|||
document.removeEventListener('document', this.documentColumnResizeEndListener);
|
||||
this.documentColumnResizeEndListener = null;
|
||||
}
|
||||
},
|
||||
onColumnHeaderMouseDown(event, col) {
|
||||
if (this.reorderableColumns && col.reorderableColumn) {
|
||||
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer'))
|
||||
event.currentTarget.draggable = false;
|
||||
else
|
||||
event.currentTarget.draggable = true;
|
||||
}
|
||||
},
|
||||
onColumnHeaderDragStart(event) {
|
||||
if(this.columnResizing) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
|
||||
this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
|
||||
|
||||
this.draggedColumn = this.findParentHeader(event.target);
|
||||
event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
|
||||
},
|
||||
onColumnHeaderDragOver(event) {
|
||||
let dropHeader = this.findParentHeader(event.target);
|
||||
if(this.reorderableColumns && this.draggedColumn && dropHeader) {
|
||||
event.preventDefault();
|
||||
let containerOffset = DomHandler.getOffset(this.$el);
|
||||
let dropHeaderOffset = DomHandler.getOffset(dropHeader);
|
||||
|
||||
if (this.draggedColumn !== dropHeader) {
|
||||
let targetLeft = dropHeaderOffset.left - containerOffset.left;
|
||||
let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
|
||||
|
||||
this.$refs.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
|
||||
this.$refs.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
|
||||
|
||||
if(event.pageX > columnCenter) {
|
||||
this.$refs.reorderIndicatorUp.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2)) + 'px';
|
||||
this.$refs.reorderIndicatorDown.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
|
||||
this.dropPosition = 1;
|
||||
}
|
||||
else {
|
||||
this.$refs.reorderIndicatorUp.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2)) + 'px';
|
||||
this.$refs.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
|
||||
this.dropPosition = -1;
|
||||
}
|
||||
|
||||
this.$refs.reorderIndicatorUp.style.display = 'block';
|
||||
this.$refs.reorderIndicatorDown.style.display = 'block';
|
||||
}
|
||||
}
|
||||
},
|
||||
onColumnHeaderDragLeave(event) {
|
||||
if(this.reorderableColumns && this.draggedColumn) {
|
||||
event.preventDefault();
|
||||
this.$refs.reorderIndicatorUp.style.display = 'none';
|
||||
this.$refs.reorderIndicatorDown.style.display = 'none';
|
||||
}
|
||||
},
|
||||
onColumnHeaderDrop(event) {
|
||||
event.preventDefault();
|
||||
if (this.draggedColumn) {
|
||||
let dragIndex = DomHandler.index(this.draggedColumn);
|
||||
let dropIndex = DomHandler.index(this.findParentHeader(event.target));
|
||||
let allowDrop = (dragIndex !== dropIndex);
|
||||
if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
|
||||
allowDrop = false;
|
||||
}
|
||||
|
||||
if (allowDrop) {
|
||||
ObjectUtils.reorderArray(this.columnOrder, dragIndex, dropIndex);
|
||||
|
||||
this.$emit('column-reorder', {
|
||||
originalEvent: event,
|
||||
dragIndex: dragIndex,
|
||||
dropIndex: dropIndex
|
||||
});
|
||||
}
|
||||
|
||||
this.$refs.reorderIndicatorUp.style.display = 'none';
|
||||
this.$refs.reorderIndicatorDown.style.display = 'none';
|
||||
this.draggedColumn.draggable = false;
|
||||
this.draggedColumn = null;
|
||||
this.dropPosition = null;
|
||||
}
|
||||
},
|
||||
findParentHeader(element) {
|
||||
if(element.nodeName === 'TH') {
|
||||
return element;
|
||||
}
|
||||
else {
|
||||
let parent = element.parentElement;
|
||||
while(parent.nodeName !== 'TH') {
|
||||
parent = parent.parentElement;
|
||||
if (!parent) break;
|
||||
}
|
||||
return parent;
|
||||
}
|
||||
},
|
||||
findColumnByKey(columns, key) {
|
||||
if(columns && columns.length) {
|
||||
for(let i = 0; i < columns.length; i++) {
|
||||
let child = columns[i];
|
||||
if(child.columnKey === key || child.field === key) {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
onRowMouseDown(event) {
|
||||
if (DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle'))
|
||||
event.currentTarget.draggable = true;
|
||||
else
|
||||
event.currentTarget.draggable = false;
|
||||
},
|
||||
onRowDragStart(event, index) {
|
||||
this.rowDragging = true;
|
||||
this.draggedRowIndex = index;
|
||||
event.dataTransfer.setData('text', 'b'); // For firefox
|
||||
},
|
||||
onRowDragOver(event, index) {
|
||||
if (this.rowDragging && this.draggedRowIndex !== index) {
|
||||
let rowElement = event.currentTarget;
|
||||
let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
|
||||
let pageY = event.pageY;
|
||||
let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
|
||||
let prevRowElement = rowElement.previousElementSibling;
|
||||
|
||||
if (pageY < rowMidY) {
|
||||
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
|
||||
|
||||
this.droppedRowIndex = index;
|
||||
if (prevRowElement)
|
||||
DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
|
||||
else
|
||||
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
|
||||
}
|
||||
else {
|
||||
if (prevRowElement)
|
||||
DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
|
||||
else
|
||||
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
|
||||
|
||||
this.droppedRowIndex = index + 1;
|
||||
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
onRowDragLeave(event) {
|
||||
let rowElement = event.currentTarget;
|
||||
let prevRowElement = rowElement.previousElementSibling;
|
||||
if (prevRowElement) {
|
||||
DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
|
||||
}
|
||||
|
||||
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
|
||||
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
|
||||
},
|
||||
onRowDragEnd(event) {
|
||||
this.rowDragging = false;
|
||||
this.draggedRowIndex = null;
|
||||
this.droppedRowIndex = null;
|
||||
event.currentTarget.draggable = false;
|
||||
},
|
||||
onRowDrop(event) {
|
||||
if (this.droppedRowIndex != null) {
|
||||
let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
|
||||
let processedData = [...this.processedData];
|
||||
ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex);
|
||||
|
||||
this.$emit('row-reorder', {
|
||||
originalEvent: event,
|
||||
dragIndex: this.draggedRowIndex,
|
||||
dropIndex: dropIndex,
|
||||
value: processedData
|
||||
});
|
||||
}
|
||||
|
||||
//cleanup
|
||||
this.onRowDragLeave(event);
|
||||
this.onRowDragEnd(event);
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -970,10 +1186,26 @@ export default {
|
|||
];
|
||||
},
|
||||
columns() {
|
||||
let columns = [];
|
||||
|
||||
if (this.allChildren) {
|
||||
return this.allChildren.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
|
||||
columns = this.allChildren.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
|
||||
|
||||
if (this.reorderableColumns && this.columnOrder) {
|
||||
let orderedColumns = [];
|
||||
for (let columnKey of this.columnOrder) {
|
||||
let column = this.findColumnByKey(columns, columnKey);
|
||||
if (column) {
|
||||
orderedColumns.push(column);
|
||||
}
|
||||
}
|
||||
|
||||
return [...orderedColumns, ...columns.filter((item) => {
|
||||
return orderedColumns.indexOf(item) < 0;
|
||||
})];
|
||||
}
|
||||
}
|
||||
return [];
|
||||
return columns;
|
||||
},
|
||||
headerColumnGroup() {
|
||||
if (this.allChildren) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tabpanel',
|
||||
props: {
|
||||
header: null,
|
||||
active: Boolean,
|
||||
|
|
|
|||
|
|
@ -31,16 +31,11 @@ const TabPanelHeaderSlot = {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: []
|
||||
d_children: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.tabs = this.$children;
|
||||
|
||||
let activeTab = this.findActiveTab();
|
||||
if (!activeTab && this.tabs.length) {
|
||||
this.tabs[0].d_active = true;
|
||||
}
|
||||
this.d_children = this.$children;
|
||||
},
|
||||
methods: {
|
||||
onTabClick(event, tab) {
|
||||
|
|
@ -78,6 +73,17 @@ export default {
|
|||
return activeTab;
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
let activeTab = this.findActiveTab();
|
||||
if (!activeTab && this.tabs.length) {
|
||||
this.tabs[0].d_active = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.d_children.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TabPanelHeaderSlot': TabPanelHeaderSlot
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,6 +146,11 @@ export default new Router({
|
|||
name: 'datatablecoltoggle',
|
||||
component: () => import('./views/datatable/DataTableColToggleDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/datatable/reorder',
|
||||
name: 'datatablereorder',
|
||||
component: () => import('./views/datatable/DataTableReorderDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/datatable/responsive',
|
||||
name: 'datatableresponsive',
|
||||
|
|
|
|||
|
|
@ -59,8 +59,4 @@ export default {
|
|||
'DataTableSubMenu': DataTableSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<CodeHighlight lang="javascript">
|
||||
import DataTable from 'primevue/datatable';
|
||||
import Column from 'primevue/column';
|
||||
import ColumnGroup from 'primevue/columngroup'; //optional for column grouping
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
|
|
@ -219,6 +220,36 @@ export default {
|
|||
<td>null</td>
|
||||
<td>Defines column based selection mode, options are "single" and "multiple".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>colspan</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Number of columns to span for grouping.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowspan</td>
|
||||
<td>number</td>
|
||||
<td>null</td>
|
||||
<td>Number of rows to span for grouping.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowReorder</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether this column displays an icon to reorder the rows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowReorderIcon</td>
|
||||
<td>string</td>
|
||||
<td>pi pi-bars</td>
|
||||
<td>Icon of the drag handle to reorder rows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reorderableColumn</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Defines if the column itself can be reordered with dragging.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -261,6 +292,43 @@ export default {
|
|||
</template>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Column Grouping</h3>
|
||||
<p>Columns can be grouped at header and footer sections by defining a ColumnGroup with nested rows and columns.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="sales">
|
||||
<ColumnGroup type="header">
|
||||
<Row>
|
||||
<Column header="Brand" :rowspan="3" />
|
||||
<Column header="Sale Rate" :colspan="4" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Sales" :colspan="2" />
|
||||
<Column header="Profits" :colspan="2" />
|
||||
</Row>
|
||||
<Row>
|
||||
<Column header="Last Year" />
|
||||
<Column header="This Year" />
|
||||
<Column header="Last Year" />
|
||||
<Column header="This Year" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
<Column field="brand" />
|
||||
<Column field="lastYearSale" />
|
||||
<Column field="thisYearSale" />
|
||||
<Column field="lastYearProfit" />
|
||||
<Column field="thisYearProfit" />
|
||||
<ColumnGroup type="footer">
|
||||
<Row>
|
||||
<Column footer="Totals:" :colspan="3" />
|
||||
<Column footer="$506,202" />
|
||||
<Column footer="$531,020" />
|
||||
</Row>
|
||||
</ColumnGroup>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Pagination</h3>
|
||||
|
|
@ -559,6 +627,58 @@ data() {
|
|||
<Column field="color" header="Color" headerStyle="width: 20%"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Column Reorder</h3>
|
||||
<p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :reorderableColumns="true">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Row Reorder</h3>
|
||||
<p>Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle along with the <i>row-order</i> event which is <b>mandatory</b> to update the new order. Note that the reorder icon can be customized using <i>rowReorderIcon</i> of the column component.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" @row-reorder="onRowReorder">
|
||||
<Column :rowReorder="true" headerStyle="width: 3em" />
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
<Column field="color" header="Color"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onRowReorder(event) {
|
||||
//update new order
|
||||
this.cars = event.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Data Export</h3>
|
||||
|
|
@ -957,6 +1077,12 @@ export default {
|
|||
<td>fit</td>
|
||||
<td>Defines whether the overall table width should change on column resize, <br/> valid values are "fit" and "expand".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reorderableColumns</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>When enabled, columns can be reordered using drag and drop..</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1015,6 +1141,27 @@ export default {
|
|||
event.delta: Change in column width</td>
|
||||
<td>Callback to invoke when a column is resized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>column-resize-end</td>
|
||||
<td>event.element: DOM element of the resized column.<br />
|
||||
event.delta: Change in column width</td>
|
||||
<td>Callback to invoke when a column is resized.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>column-reorder</td>
|
||||
<td>event.originalEvent: Browser event<br />
|
||||
event.dragIndex: Index of the dragged column<br />
|
||||
event.dropIndex: Index of the dropped column</td>
|
||||
<td>Callback to invoke when a column is reordered.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>row-reorder</td>
|
||||
<td>event.originalEvent: Browser event<br />
|
||||
event.originalEvent: Browser event.<br />
|
||||
event.dragIndex: Index of the dragged row<br />
|
||||
value: Reordered value</td>
|
||||
<td>Callback to invoke when a row is reordered.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div>
|
||||
<DataTableSubMenu />
|
||||
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataTable - Reorder</h1>
|
||||
<p>Order of the columns and rows can be changed using drag and drop.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
|
||||
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Source">
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<DataTable :value="cars" :reorderableColumns="true" @column-reorder="onColReorder" @row-reorder="onRowReorder">
|
||||
<Column :rowReorder="true" headerStyle="width: 3em" :reorderableColumn="false" />
|
||||
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import CarService from '../../service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: null,
|
||||
cars: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'vin', header: 'Vin'},
|
||||
{field: 'year', header: 'Year'},
|
||||
{field: 'brand', header: 'Brand'},
|
||||
{field: 'color', header: 'Color'}
|
||||
];
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onColReorder(event) {
|
||||
this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
|
||||
},
|
||||
onRowReorder(event) {
|
||||
this.cars = event.value;
|
||||
this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
import DataTableSubMenu from './DataTableSubMenu';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: null,
|
||||
cars: null
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
|
||||
this.columns = [
|
||||
{field: 'vin', header: 'Vin'},
|
||||
{field: 'year', header: 'Year'},
|
||||
{field: 'brand', header: 'Brand'},
|
||||
{field: 'color', header: 'Color'}
|
||||
];
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsSmall().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
onColReorder() {
|
||||
this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
|
||||
},
|
||||
onRowReorder(event) {
|
||||
this.cars = event.value;
|
||||
this.$toast.add({severity:'success', summary: 'Rows Reordered', life: 3000});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'DataTableSubMenu': DataTableSubMenu
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -11,8 +11,9 @@
|
|||
<li><router-link to="/datatable/colgroup">● ColGroup</router-link></li>
|
||||
<li><router-link to="/datatable/coltoggle">● ColToggle</router-link></li>
|
||||
<li><router-link to="/datatable/responsive">● Responsive</router-link></li>
|
||||
<li><router-link to="/datatable/export">● Export</router-link></li>
|
||||
<li><router-link to="/datatable/reorder">● Reorder</router-link></li>
|
||||
<li><router-link to="/datatable/colresize">● ColResize</router-link></li>
|
||||
<li><router-link to="/datatable/export">● Export</router-link></li>
|
||||
<li><router-link to="/datatable/crud">● Crud</router-link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation dataview-demo">
|
||||
<div class="content-section implementation">
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
|
|
@ -20,27 +20,20 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-details">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="car-details">
|
||||
<div>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #grid="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
|
|
@ -108,36 +101,37 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.dataview-demo {
|
||||
.ui-button {
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.car-data > div {
|
||||
padding: .429em;
|
||||
}
|
||||
|
||||
.p-dropdown {
|
||||
width: 12em;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.p-dropdown {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.dataview-demo {
|
||||
.car-details, .search-icon {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
.p-dataview {
|
||||
.car-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid #d9dad9;
|
||||
|
||||
.filter-container {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.p-dataview {
|
||||
.car-details {
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -37,24 +37,21 @@ export default {
|
|||
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-data">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="car-details">
|
||||
<div>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #grid="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
|
|
@ -426,26 +423,19 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #list="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="car-details">
|
||||
<div>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-details">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -510,7 +500,37 @@ export default {
|
|||
|
||||
<CodeHighlight lang="css">
|
||||
.p-dropdown {
|
||||
width: 12em;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.p-dataview {
|
||||
.car-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2em;
|
||||
border-bottom: 1px solid #d9dad9;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.p-dataview {
|
||||
.car-details {
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue