Initiated Vertical Scrolling Table
cagataycivici
parent
b3fdd2c6e8
commit
f756d0a3df
|
|
@ -19,7 +19,7 @@
|
|||
<slot name="paginatorRight"></slot>
|
||||
</template>
|
||||
</DTPaginator>
|
||||
<div class="p-datatable-wrapper">
|
||||
<div class="p-datatable-wrapper" v-if="!scrollable">
|
||||
<table ref="table">
|
||||
<DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
|
||||
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
|
||||
|
|
@ -39,6 +39,32 @@
|
|||
<DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-datatable-scrollable-wrapper" v-else>
|
||||
<DTScrollableView :scrollHeight="scrollHeight" :columns="columns">
|
||||
<template #header>
|
||||
<DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
|
||||
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
|
||||
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta"
|
||||
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($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)" />
|
||||
</template>
|
||||
<template #body>
|
||||
<DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
|
||||
: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="$scopedSlots"
|
||||
@rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
|
||||
@row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
|
||||
@row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
|
||||
@cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
|
||||
@row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<DTTableFooter :columnGroup="footerColumnGroup" :columns="columns" />
|
||||
</template>
|
||||
</DTScrollableView>
|
||||
</div>
|
||||
<DTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-bottom" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
|
||||
<template #left v-if="$scopedSlots.paginatorLeft">
|
||||
|
|
@ -62,7 +88,7 @@ import ObjectUtils from '../utils/ObjectUtils';
|
|||
import FilterUtils from '../utils/FilterUtils';
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
import Paginator from '../paginator/Paginator';
|
||||
//import ScrollableView from './ScrollableView.vue';
|
||||
import ScrollableView from './ScrollableView.vue';
|
||||
import TableHeader from './TableHeader.vue';
|
||||
import TableBody from './TableBody.vue';
|
||||
import TableFooter from './TableFooter.vue';
|
||||
|
|
@ -244,6 +270,14 @@ export default {
|
|||
rowClass: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -1409,7 +1443,8 @@ export default {
|
|||
'p-datatable-hoverable-rows': (this.rowHover || this.selectionMode),
|
||||
'p-datatable-auto-layout': this.autoLayout,
|
||||
'p-datatable-resizable': this.resizableColumns,
|
||||
'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit'
|
||||
'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
|
||||
'p-datatable-scrollable': this.scrollable
|
||||
}
|
||||
];
|
||||
},
|
||||
|
|
@ -1532,7 +1567,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
'DTPaginator': Paginator,
|
||||
//'DTScrollableView': ScrollableView,
|
||||
'DTScrollableView': ScrollableView,
|
||||
'DTTableHeader': TableHeader,
|
||||
'DTTableBody': TableBody,
|
||||
'DTTableFooter': TableFooter,
|
||||
|
|
|
|||
|
|
@ -1,14 +1,127 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div :class="containerClass">
|
||||
<div class="p-datatable-scrollable-header" ref="scrollHeader" @scroll="onHeaderScroll">
|
||||
<div class="p-datatable-scrollable-header-box" ref="scrollHeaderBox">
|
||||
<table class="p-datatable-scrollable-header-table'">
|
||||
<colgroup class="p-datatable-scrollable-colgroup">
|
||||
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
|
||||
</colgroup>
|
||||
<slot name="header"></slot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-datatable-scrollable-body" ref="scrollBody" @scroll="onBodyScroll">
|
||||
<table ref="scrollTable">
|
||||
<colgroup class="p-datatable-scrollable-colgroup">
|
||||
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
|
||||
</colgroup>
|
||||
<slot name="body"></slot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-datatable-scrollable-footer" ref="scrollFooter">
|
||||
<div class="p-datatable-scrollable-footer-box" ref="scrollFooterBox">
|
||||
<table class="p-datatable-scrollable-footer-table">
|
||||
<colgroup class="p-datatable-scrollable-colgroup">
|
||||
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
|
||||
</colgroup>
|
||||
<slot name="footer"></slot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
frozen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
frozenWidth: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
columns: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
scrollHeight: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setScrollHeight();
|
||||
|
||||
if (!this.frozen)
|
||||
this.alignScrollBar();
|
||||
else
|
||||
this.$refs.scrollBody.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
|
||||
},
|
||||
watch: {
|
||||
scrollHeight() {
|
||||
this.setScrollHeight();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onHeaderScroll() {
|
||||
|
||||
},
|
||||
onBodyScroll() {
|
||||
|
||||
},
|
||||
setScrollHeight() {
|
||||
if (this.scrollHeight) {
|
||||
if(this.scrollHeight.indexOf('%') !== -1) {
|
||||
let datatableContainer = this.findDataTableContainer(this.$el);
|
||||
this.$refs.scrollBody.style.visibility = 'hidden';
|
||||
this.$refs.scrollBody.style.height = '100px'; //temporary height to calculate static height
|
||||
let containerHeight = DomHandler.getOuterHeight(datatableContainer);
|
||||
let relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(this.scrollHeight, 10) / 100;
|
||||
let staticHeight = containerHeight - 100; //total height of headers, footers, paginators
|
||||
let scrollBodyHeight = (relativeHeight - staticHeight);
|
||||
|
||||
this.$refs.scrollBody.style.height = 'auto';
|
||||
this.$refs.scrollBody.style.maxHeight = scrollBodyHeight + 'px';
|
||||
this.$refs.scrollBody.style.visibility = 'visible';
|
||||
}
|
||||
else {
|
||||
this.$refs.scrollBody.style.maxHeight = this.scrollHeight;
|
||||
}
|
||||
}
|
||||
},
|
||||
hasVerticalOverflow() {
|
||||
return DomHandler.getOuterHeight(this.$refs.scrollTable) > DomHandler.getOuterHeight(this.$refs.scrollBody);
|
||||
},
|
||||
alignScrollBar() {
|
||||
let scrollBarWidth = this.hasVerticalOverflow() ? DomHandler.calculateScrollbarWidth() : 0;
|
||||
|
||||
this.$refs.scrollHeaderBox.style.marginRight = scrollBarWidth + 'px';
|
||||
if (this.$refs.scrollFooterBox) {
|
||||
this.$refs.scrollFooterBox.style.marginRight = scrollBarWidth + 'px';
|
||||
}
|
||||
},
|
||||
findDataTableContainer(element) {
|
||||
if (element) {
|
||||
let el = element;
|
||||
while (el && !DomHandler.hasClass(el, 'p-datatable')) {
|
||||
el = el.parentElement;
|
||||
}
|
||||
|
||||
return el;
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-datatable-scrollable-view', {'p-datatable-frozen-view': this.frozen, 'p-datatable-unfrozen-view': !this.frozen && this.frozenWidth}];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<h3>Vertical</h3>
|
||||
<DataTable :value="cars">
|
||||
<DataTable :value="cars" :scrollable="true" scrollHeight="200px">
|
||||
<Column field="vin" header="Vin"></Column>
|
||||
<Column field="year" header="Year"></Column>
|
||||
<Column field="brand" header="Brand"></Column>
|
||||
|
|
|
|||
Loading…
Reference in New Issue