From 3ae6ee1272128b1b26f19167dfe7092fac820cb8 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Wed, 27 May 2020 15:12:12 +0300 Subject: [PATCH] Fixed #328 - Flex Scroll height for DataTable --- src/AppMenu.vue | 1 + src/components/datatable/DataTable.vue | 23 +++++++- src/components/datatable/ScrollableView.vue | 33 +----------- src/router.js | 5 ++ src/views/datatable/DataTableDoc.vue | 44 +++++++++++++-- .../datatable/DataTableFlexScrollDemo.vue | 29 ++++++++++ src/views/datatable/DataTableScrollDemo.vue | 54 ++++++++++++++++++- 7 files changed, 151 insertions(+), 38 deletions(-) create mode 100644 src/views/datatable/DataTableFlexScrollDemo.vue diff --git a/src/AppMenu.vue b/src/AppMenu.vue index ec5297fd94..36218324a1 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -78,6 +78,7 @@
  • Selection
  • Lazy
  • Scroll
    • +
  • FlexScroll
  • Expand
  • Edit
  • ColToggle
    • diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue index f07af4f92b..28ed846a0e 100755 --- a/src/components/datatable/DataTable.vue +++ b/src/components/datatable/DataTable.vue @@ -1645,7 +1645,8 @@ export default { 'p-datatable-resizable': this.resizableColumns, 'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit', 'p-datatable-scrollable': this.scrollable, - 'p-datatable-virtual-scrollable': this.virtualScroll + 'p-datatable-virtual-scrollable': this.virtualScroll, + 'p-datatable-flex-scrollable': (this.scrollable && this.scrollHeight === 'flex') } ]; }, @@ -1900,6 +1901,26 @@ export default { top: 0; } +/* Flex Scrollable */ +.p-datatable-flex-scrollable { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; +} + +.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper, +.p-datatable-flex-scrollable .p-datatable-scrollable-view { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; +} + +.p-datatable-flex-scrollable .p-datatable-scrollable-body { + flex: 1; +} + /* Resizable */ .p-datatable-resizable > .p-datatable-wrapper { overflow-x: auto; diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue index e76d7ea497..006f0b2d26 100755 --- a/src/components/datatable/ScrollableView.vue +++ b/src/components/datatable/ScrollableView.vue @@ -11,7 +11,7 @@ -
    +
    @@ -80,8 +80,6 @@ export default { }, virtualScrollCallback: null, mounted() { - this.setScrollHeight(); - if (!this.frozen) this.alignScrollBar(); else @@ -100,8 +98,6 @@ export default { this.virtualScrollCallback(); this.virtualScrollCallback = null; } - - this.setScrollHeight(); }, watch: { totalRecords(newValue) { @@ -159,33 +155,6 @@ export default { } } }, - setScrollHeight() { - if (this.scrollHeight) { - let frozenView = this.$el.previousElementSibling; - if (frozenView) { - let frozenScrollBody = DomHandler.findSingle(frozenView, '.p-datatable-scrollable-body'); - this.$refs.scrollBody.style.maxHeight = frozenScrollBody.style.maxHeight; - } - else { - 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); }, diff --git a/src/router.js b/src/router.js index 8c02614c9b..98cc8e8ac2 100755 --- a/src/router.js +++ b/src/router.js @@ -251,6 +251,11 @@ export default new Router({ name: 'datatablescroll', component: () => import('./views/datatable/DataTableScrollDemo.vue') }, + { + path: '/datatable/flexscroll', + name: 'datatableflexscroll', + component: () => import('./views/datatable/DataTableFlexScrollDemo.vue') + }, { path: '/datatable/style', name: 'datatablestyle', diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue index bae5fb0c16..d2f8f282b9 100755 --- a/src/views/datatable/DataTableDoc.vue +++ b/src/views/datatable/DataTableDoc.vue @@ -662,7 +662,43 @@ methods: { -

    Horizontal Scrolling requires a width of DataTable to be defined and explicit widths on columns.

    +

    Flex Scroll

    +

    In cases where viewport should adjust itself according to the table parent's height instead of a fixed viewport height, set scrollHeight option as flex. In example below, table is inside a Dialog where viewport size dynamically responds to the dialog size changes such as maximizing.

    + + + + +

    Full Page Scroll

    +

    FlexScroll can also be used for cases where scrollable viewport should be responsive with respect to the window size. See the Full Page demo for an example.

    + + + + +

    Horizontal Scrolling

    +

    In horizontal scrolling, it is required to give fixed widths to columns. In general when customizing the column widths of scrollable tables, use colgroup as below to avoid misalignment issues as it will apply both the header, body and footer sections which are different separate elements internally.

    -

    Certain columns can be frozen by using the frozen property of the column component. Widths of the frozen section is specified by the frozenWidth property.

    +

    Frozen Rows and Columns

    +

    Certain columns can be frozen by using the frozen property of the column component. Widths of the frozen section is specified by the frozenWidth property.