From 9eb8fa12a6bfe1e493d91ff9593f18c5ada6b957 Mon Sep 17 00:00:00 2001
From: Azat Yamalov <yamalov.azat@live.com>
Date: Thu, 8 Dec 2022 11:42:35 +0300
Subject: [PATCH 1/6] footer

---
 pl-grid-column.js |  18 +++++--
 pl-grid.js        | 135 +++++++++++++++++++++++++++++++---------------
 2 files changed, 106 insertions(+), 47 deletions(-)

diff --git a/pl-grid-column.js b/pl-grid-column.js
index c5d08df..2ef3c61 100644
--- a/pl-grid-column.js
+++ b/pl-grid-column.js
@@ -65,6 +65,9 @@ class PlGridColumn extends PlElement {
         },
         _cellTemplate: {
             type: Object
+        },
+        _footerTemplate: {
+            type: Object
         }
     }
 
@@ -142,11 +145,16 @@ class PlGridColumn extends PlElement {
 
     connectedCallback() {
         super.connectedCallback();
-        let tplEl = [...this.childNodes].find(n => n.nodeType === document.COMMENT_NODE && n.textContent.startsWith('tpl:'));
-        if (tplEl) {
-            // host context can be assigned to template
-            this._cellTemplate = tplEl?._tpl;
-            this._cellTemplate._hctx = [...tplEl._hctx, this];
+        let tplEls = [...this.childNodes].filter(n => n.nodeType === document.COMMENT_NODE && n.textContent.startsWith('tpl:'));
+        let footerTpl = tplEls.find(tplEl => tplEl._tpl.tpl.getAttribute('is') == 'footer');
+        if(footerTpl) {
+            this._footerTemplate = footerTpl?._tpl;
+            this._footerTemplate._hctx = [...footerTpl._hctx, this];
+        }
+        let cellTpl = tplEls.find(tplEl => !tplEl._tpl.tpl.hasAttribute('is'));
+        if(cellTpl) {
+            this._cellTemplate = cellTpl?._tpl;
+            this._cellTemplate._hctx = [...cellTpl._hctx, this];
         }
         else {
             this._cellTemplate = html`<span title$="[[_getTitle(row, field, kind, format, titleField)]]">[[_getValue(row, field, kind, format)]]</span>`;
diff --git a/pl-grid.js b/pl-grid.js
index da682c1..b3b2035 100644
--- a/pl-grid.js
+++ b/pl-grid.js
@@ -40,9 +40,11 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         #container {
             width: 100%;
             height: 100%;
-            overflow: auto;
+            display: flex;
+            flex-direction: column;
             position: relative;
             contain: strict;
+            overflow:auto;
         }
 
         #headerContainer{
@@ -50,30 +52,52 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             width: 100%;
             position: sticky;
             background-color: var(--grey-lightest);
-            z-index: 1;
+            z-index: 2;
             top: 0;
         }
 
+        #footerContainer {
+            display: flex;
+            width: 100%;
+            background-color: var(--grey-lightest);
+            z-index: 2;
+            bottom: 0;
+            will-change: bottom;
+            height: 32px;
+        }
+
+
         #header{
             display: var(--pl-grid-header-display, flex);
-            border-bottom: 1px solid var(--grey-light);
+            border-bottom: 1px solid var(--grey-base);
             position: sticky;
             top: 0;
             flex: 1;
             will-change: width;
         }
 
+        #footer{
+            display: var(--pl-grid-header-display, flex);
+            border-top: 1px solid var(--grey-base);
+            position: sticky;
+            bottom: 0;
+            flex: 1;
+            will-change: width;
+        }
+
         .headerEl[fixed], 
-        .headerEl[action]  {
+        .headerEl[action],
+        .footerEl[fixed],
+        .footerEl[action] {
             position: sticky;
             z-index: 3;
         }
 
-        .headerEl[action] {
+        .headerEl[action], .footerEl[action] {
             right: 0;
         }
         
-        .headerEl[hidden] {
+        .headerEl[hidden], .footerEl[hidden] {
             display: none;
         }
 
@@ -146,8 +170,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
         .row[active]{
             z-index: 1;
-         }
-
+        }
 
         .top-toolbar ::slotted(*) {
             width: 100%;
@@ -167,7 +190,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             display: none;
         }
     `;
-    static treeFirstCellTemplate = html`<pl-icon-button style$="[[_getRowMargin(row, column.index)]]" variant="link" iconset="pl-default" icon="[[_getTreeIcon(row)]]" on-click="[[_onTreeNodeClick]]"></pl-icon-button>`;
+    static treeFirstCellTemplate = html`<pl-icon-button style$="[[_getRowMargin(row, column.index)]]" variant="link" iconset="pl-default"
+    icon="[[_getTreeIcon(row)]]" on-click="[[_onTreeNodeClick]]"></pl-icon-button>`;
     static template = html`
         <div class="top-toolbar">
             <slot name="top-toolbar"></slot>
@@ -176,7 +200,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             <div id="headerContainer">
                 <div id="header">
                     <template d:repeat="[[_columns]]" d:as="column">
-                        <div class="headerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]" style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth)]]">
+                        <div class="headerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]"
+                            style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth, 'header')]]">
                             <slot name="[[_getSlotName(column.index)]]"></slot>
                         </div>
                     </template>
@@ -185,9 +210,12 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             <div id="rowsContainer">
                 <pl-virtual-scroll canvas="[[$.rowsContainer]]" items="{{_vdata}}" as="row" id="scroller">
                     <template id="tplRow">
-                        <div class="row" active$="[[_isRowActive(row, selected)]]" on-click="[[_onRowClick]]" on-dblclick="[[_onRowDblClick]]">
+                        <div class="row" active$="[[_isRowActive(row, selected)]]" on-click="[[_onRowClick]]"
+                            on-dblclick="[[_onRowDblClick]]">
                             <template d:repeat="[[_columns]]" d:as="column">
-                                <div style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth)]]" class="cell" hidden$="[[column.hidden]]" fixed$="[[column.fixed]]" action$="[[column.action]]">
+                                <div style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth)]]"
+                                    class="cell" hidden$="[[column.hidden]]" fixed$="[[column.fixed]]"
+                                    action$="[[column.action]]">
                                     [[getTemplateForCell(tree,column.index)]]
                                     <span>[[column.cellTemplate]]</span>
                                 </div>
@@ -196,11 +224,22 @@ class PlGrid extends PlResizeableMixin(PlElement) {
                     </template>
                 </pl-virtual-scroll>
             </div>
+            <div id="footerContainer">
+                <div id="footer">
+                    <template d:repeat="[[_columns]]" d:as="column">
+                        <div class="footerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]"
+                            style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth, 'footer')]]">
+                            [[column.footerTemplate]]
+                        </div>
+                    </template>
+                </div>
+            </div>
         </div>
         <div class="bottom-toolbar">
             <slot name="bottom-toolbar"></slot>
         </div>
-        <pl-data-tree bypass="[[!tree]]" key-field="[[keyField]]" pkey-field="[[pkeyField]]" has-child-field="[[hasChildField]]" in="{{data}}" out="{{_vdata}}"></pl-data-tree>
+        <pl-data-tree bypass="[[!tree]]" key-field="[[keyField]]" pkey-field="[[pkeyField]]" has-child-field="[[hasChildField]]"
+            in="{{data}}" out="{{_vdata}}"></pl-data-tree>
     `;
 
     connectedCallback() {
@@ -235,6 +274,15 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             }
             this._init();
         }, 0);
+
+
+        this.$.container.addEventListener('scroll', (e) => {
+            let throttler = throttle(() => {
+                this.$.footerContainer.style.bottom =  -this.$.container.scrollTop + 'px';
+            }, 300)
+
+            throttler();
+        });
     }
 
     _dataObserver(data, old, mut) {
@@ -244,9 +292,9 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             }
         }
 
-        if(mut.path != 'data' && this.selected) {
+        if (mut.path != 'data' && this.selected) {
             let m = mut.path.match(/^data\.(\d*)/);
-            if(m[1] == this.data.indexOf(this.selected)) {
+            if (m[1] == this.data.indexOf(this.selected)) {
                 this.forwardNotify(mut, `data.${m[1]}`, 'selected');
             }
         }
@@ -254,7 +302,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
     onColumnAttributeChange(event) {
         const { index, attribute, value } = event.detail;
-        if(this._columns[index]) {
+        if (this._columns[index]) {
             if (attribute === 'width') {
                 this._changeColumnWidth(this._columns[index], value);
             }
@@ -295,6 +343,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
                 action: column.action || false,
                 index: index,
                 cellTemplate: column._cellTemplate,
+                footerTemplate: column._footerTemplate,
                 node: column
             };
 
@@ -333,7 +382,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         return `column-${index}`;
     }
 
-    _getCellStyle(index, width, internal, isHeader) {
+    _getCellStyle(index, width, internal, type) {
         const column = this._columns[index];
         const style = [];
 
@@ -348,26 +397,28 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             style.push(`flex: 1 1 ${column._calculatedWidth}px`);
         }
 
-        style.push(`justify-content: ${column.justify}`);
-        switch(column.justify) {
-            case 'end':
-            case 'flex-end':
-            case 'right': {
-                style.push('text-align: end')
-                break;
-            }
-
-            case 'start':
-            case 'flex-start':
-            case 'left': {
-                style.push('text-align: start')
-                break;
-            }
-
-            case 'center':
-            {
-                style.push('text-align: center;')
-                break;
+        if (type === 'header') {
+            style.push('text-align: start;')
+        } else {
+            style.push(`justify-content: ${column.justify}`);
+            switch (column.justify) {
+                case 'end':
+                case 'flex-end':
+                case 'right': {
+                    style.push('text-align: end')
+                    break;
+                }
+                case 'start':
+                case 'flex-start':
+                case 'left': {
+                    style.push('text-align: start')
+                    break;
+                }
+                case 'center':
+                    {
+                        style.push('text-align: center;')
+                        break;
+                    }
             }
         }
         if (column.fixed) {
@@ -384,7 +435,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
     async _onRowClick(event) {
         const res = await this.beforeSelect(event.model.row);
-        if(!res) {
+        if (!res) {
             return false;
         }
         if (event.model.row) {
@@ -433,7 +484,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         if (!val) {
             return;
         }
-        
+
         if (this.tree) {
             const parents = [];
 
@@ -450,7 +501,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             })
         }
 
-        if(mutation.path != 'selected') {
+        if (mutation.path != 'selected') {
             this.forwardNotify(mutation, `selected`, `data.${this.data.indexOf(this.selected)}`);
         }
     }
@@ -465,8 +516,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             delete this.data.control.treeMode;
         }
     }
-    getTemplateForCell(tree,index) {
-        return tree && index===0 ? PlGrid.treeFirstCellTemplate : undefined ;
+    getTemplateForCell(tree, index) {
+        return tree && index === 0 ? PlGrid.treeFirstCellTemplate : undefined;
     }
 }
 

From 1db9705daa4ea4cd0b28f199f916327d933410f7 Mon Sep 17 00:00:00 2001
From: Azat Yamalov <yamalov.azat@live.com>
Date: Thu, 23 Feb 2023 13:56:15 +0300
Subject: [PATCH 2/6] footer

---
 pl-grid.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/pl-grid.js b/pl-grid.js
index b3b2035..de81ed8 100644
--- a/pl-grid.js
+++ b/pl-grid.js
@@ -64,6 +64,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             bottom: 0;
             will-change: bottom;
             height: 32px;
+            position: absolute;
         }
 
 
@@ -249,6 +250,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         const resizeObserver = new ResizeObserver((resizes) => {
             let throttler = throttle(() => {
                 this.$.rowsContainer.style.width = resizes[0].contentRect.width + 'px';
+                this.$.footerContainer.style.width = resizes[0].contentRect.width + 'px';
+
                 this.reactToResize();
             }, 300)
 
@@ -279,7 +282,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         this.$.container.addEventListener('scroll', (e) => {
             let throttler = throttle(() => {
                 this.$.footerContainer.style.bottom =  -this.$.container.scrollTop + 'px';
-            }, 300)
+            }, 100)
 
             throttler();
         });

From 0f93ed27260c1d222d177d7ef32635dc73dda747 Mon Sep 17 00:00:00 2001
From: Azat Yamalov <yamalov.azat@live.com>
Date: Tue, 14 Mar 2023 09:59:51 +0300
Subject: [PATCH 3/6] footer

---
 pl-grid.js | 44 +++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/pl-grid.js b/pl-grid.js
index de81ed8..7bade09 100644
--- a/pl-grid.js
+++ b/pl-grid.js
@@ -19,7 +19,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         _columns: { type: Array, value: () => [] },
         keyField: { type: String },
         pkeyField: { type: String },
-        hasChildField: { type: String, value: '_haschildren' }
+        hasChildField: { type: String, value: '_haschildren' },
+        lastVirtual: { type: Object, value: null, observer: 'lastVirtualObserver'}
     }
 
     static css = css`
@@ -67,7 +68,6 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             position: absolute;
         }
 
-
         #header{
             display: var(--pl-grid-header-display, flex);
             border-bottom: 1px solid var(--grey-base);
@@ -86,6 +86,21 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             will-change: width;
         }
 
+        .footerEl {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding: var(--space-sm);
+            box-sizing: border-box;
+            font: var(--header-font);
+            color: var(--header-color);
+        }
+
+        .footerCell{
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
         .headerEl[fixed], 
         .headerEl[action],
         .footerEl[fixed],
@@ -209,7 +224,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
                 </div>
             </div>
             <div id="rowsContainer">
-                <pl-virtual-scroll canvas="[[$.rowsContainer]]" items="{{_vdata}}" as="row" id="scroller">
+                <pl-virtual-scroll canvas="[[$.rowsContainer]]" items="{{_vdata}}" as="row" id="scroller" last-item="{{lastVirtual}}">
                     <template id="tplRow">
                         <div class="row" active$="[[_isRowActive(row, selected)]]" on-click="[[_onRowClick]]"
                             on-dblclick="[[_onRowDblClick]]">
@@ -230,7 +245,9 @@ class PlGrid extends PlResizeableMixin(PlElement) {
                     <template d:repeat="[[_columns]]" d:as="column">
                         <div class="footerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]"
                             style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth, 'footer')]]">
-                            [[column.footerTemplate]]
+                            <div class="footerCell">
+                                [[column.footerTemplate]]
+                            </div>
                         </div>
                     </template>
                 </div>
@@ -251,7 +268,6 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             let throttler = throttle(() => {
                 this.$.rowsContainer.style.width = resizes[0].contentRect.width + 'px';
                 this.$.footerContainer.style.width = resizes[0].contentRect.width + 'px';
-
                 this.reactToResize();
             }, 300)
 
@@ -318,6 +334,24 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         }
     }
 
+
+    lastVirtualObserver(val, old, mut) {
+        if(old) {
+            old.ctx._ti._nodes.forEach(i => { 
+                if (i.style){
+                    i.style.paddingBottom = i.lastPaddingBottom + `px`;}
+                    delete i.lastPaddingBottom;
+                }
+            );
+        }
+        val?.ctx._ti._nodes.forEach(i => { 
+            if (i.style){
+                i.lastPaddingBottom = i.style.getPropertyValue('paddingBottom');
+                i.style.paddingBottom = i.lastPaddingBottom + val.h + `px`;}
+            }
+        );
+    }
+
     reactToResize() {
         this._columns.forEach((el) => {
             if (!el.width) {

From 84eb93ffc1dd590f97de93b0fa3c532685953c9b Mon Sep 17 00:00:00 2001
From: Azat Yamalov <yamalov.azat@live.com>
Date: Tue, 14 Mar 2023 13:41:00 +0300
Subject: [PATCH 4/6] footer

---
 pl-grid.js | 116 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 67 insertions(+), 49 deletions(-)

diff --git a/pl-grid.js b/pl-grid.js
index 7bade09..361e15d 100644
--- a/pl-grid.js
+++ b/pl-grid.js
@@ -6,7 +6,7 @@ import "@plcmp/pl-icon";
 import "@plcmp/pl-iconset-default";
 import "@plcmp/pl-data-tree";
 
-import { PlResizeableMixin, throttle } from '@plcmp/utils';
+import { PlResizeableMixin, throttle, PlaceHolder } from '@plcmp/utils';
 
 import "./pl-grid-column.js";
 
@@ -70,7 +70,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
         #header{
             display: var(--pl-grid-header-display, flex);
-            border-bottom: 1px solid var(--grey-base);
+            border-bottom: 1px solid var(--grey-light);
             position: sticky;
             top: 0;
             flex: 1;
@@ -133,6 +133,19 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             background-color: var(--background-color);
             width: 100%;
             box-sizing: border-box;
+            position: relative;
+        }
+
+        .row[loading]::after {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left:0;
+            display: flex;
+            content:'Загрузка...';
+            align-items: center;
+            justify-content: center;
         }
 
         .cell {
@@ -154,6 +167,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             text-overflow: ellipsis;
             overflow: hidden;
             line-height: 24px;
+            width: 100%;
         }
 
         .cell[fixed] {
@@ -186,7 +200,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
         .row[active]{
             z-index: 1;
-        }
+         }
 
         .top-toolbar ::slotted(*) {
             width: 100%;
@@ -206,8 +220,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             display: none;
         }
     `;
-    static treeFirstCellTemplate = html`<pl-icon-button style$="[[_getRowMargin(row, column.index)]]" variant="link" iconset="pl-default"
-    icon="[[_getTreeIcon(row)]]" on-click="[[_onTreeNodeClick]]"></pl-icon-button>`;
+    static treeFirstCellTemplate = html`<pl-icon-button style$="[[_getRowMargin(row, column.index)]]" variant="link" iconset="pl-default" icon="[[_getTreeIcon(row)]]" on-click="[[_onTreeNodeClick]]"></pl-icon-button>`;
     static template = html`
         <div class="top-toolbar">
             <slot name="top-toolbar"></slot>
@@ -216,22 +229,18 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             <div id="headerContainer">
                 <div id="header">
                     <template d:repeat="[[_columns]]" d:as="column">
-                        <div class="headerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]"
-                            style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth, 'header')]]">
+                        <div class="headerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]" style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth)]]">
                             <slot name="[[_getSlotName(column.index)]]"></slot>
                         </div>
                     </template>
                 </div>
             </div>
             <div id="rowsContainer">
-                <pl-virtual-scroll canvas="[[$.rowsContainer]]" items="{{_vdata}}" as="row" id="scroller" last-item="{{lastVirtual}}">
+                <pl-virtual-scroll canvas="[[$.rowsContainer]]" items="{{_vdata}}" as="row" id="scroller">
                     <template id="tplRow">
-                        <div class="row" active$="[[_isRowActive(row, selected)]]" on-click="[[_onRowClick]]"
-                            on-dblclick="[[_onRowDblClick]]">
+                        <div class="row" loading$="[[_isPlaceholder(row)]]" active$="[[_isRowActive(row, selected)]]" on-click="[[_onRowClick]]" on-dblclick="[[_onRowDblClick]]">
                             <template d:repeat="[[_columns]]" d:as="column">
-                                <div style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth)]]"
-                                    class="cell" hidden$="[[column.hidden]]" fixed$="[[column.fixed]]"
-                                    action$="[[column.action]]">
+                                <div style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth)]]" class="cell" hidden$="[[column.hidden]]" fixed$="[[column.fixed]]" action$="[[column.action]]">
                                     [[getTemplateForCell(tree,column.index)]]
                                     <span>[[column.cellTemplate]]</span>
                                 </div>
@@ -256,8 +265,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         <div class="bottom-toolbar">
             <slot name="bottom-toolbar"></slot>
         </div>
-        <pl-data-tree bypass="[[!tree]]" key-field="[[keyField]]" pkey-field="[[pkeyField]]" has-child-field="[[hasChildField]]"
-            in="{{data}}" out="{{_vdata}}"></pl-data-tree>
+        <pl-data-tree bypass="[[!tree]]" key-field="[[keyField]]" pkey-field="[[pkeyField]]" has-child-field="[[hasChildField]]" in="{{data}}" out="{{_vdata}}"></pl-data-tree>
     `;
 
     connectedCallback() {
@@ -311,22 +319,22 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             }
         }
 
-        if (mut.path != 'data' && this.selected) {
+        if(mut.path != 'data' && this.selected) {
             let m = mut.path.match(/^data\.(\d*)/);
-            if (m[1] == this.data.indexOf(this.selected)) {
+            if(m[1] == this.data.indexOf(this.selected)) {
                 this.forwardNotify(mut, `data.${m[1]}`, 'selected');
             }
         }
     }
 
     onColumnAttributeChange(event) {
-        const { index, attribute, value } = event.detail;
-        if (this._columns[index]) {
+        const { index, attribute, value, init } = event.detail;
+        if(this._columns[index]) {
             if (attribute === 'width') {
                 this._changeColumnWidth(this._columns[index], value);
             }
             if (attribute === 'sort') {
-                this._changeColumnSort(this._columns[index], value)
+                this._changeColumnSort(this._columns[index], value, init)
             }
             if (attribute === 'hidden') {
                 this.set(`_columns.${index}.hidden`, value);
@@ -394,7 +402,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         return row === selected;
     }
 
-    _changeColumnSort(column, sort) {
+    _changeColumnSort(column, sort, init) {
         let sorts = [...this.data.sorts] || [];
         const ind = sorts.findIndex(item => item.field === column.field);
         if (ind >= 0) {
@@ -407,7 +415,14 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         };
 
         sorts.splice(0, 0, newSort);
-        this.set('data.sorts', sorts);
+
+        // если сортировка была указана в гриде, то выставляем ее по-тихому, без уведомления о мутации
+        // иначе по клику на сортировку вызываем мутацию и перезагружаем датасет 
+        if(init) {
+            this.data.sorts =  sorts;
+        } else {
+            this.set('data.sorts', sorts);
+        }
     }
 
     _changeColumnWidth(column, width) {
@@ -419,7 +434,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         return `column-${index}`;
     }
 
-    _getCellStyle(index, width, internal, type) {
+    _getCellStyle(index, width, internal, isHeader) {
         const column = this._columns[index];
         const style = [];
 
@@ -434,28 +449,26 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             style.push(`flex: 1 1 ${column._calculatedWidth}px`);
         }
 
-        if (type === 'header') {
-            style.push('text-align: start;')
-        } else {
-            style.push(`justify-content: ${column.justify}`);
-            switch (column.justify) {
-                case 'end':
-                case 'flex-end':
-                case 'right': {
-                    style.push('text-align: end')
-                    break;
-                }
-                case 'start':
-                case 'flex-start':
-                case 'left': {
-                    style.push('text-align: start')
-                    break;
-                }
-                case 'center':
-                    {
-                        style.push('text-align: center;')
-                        break;
-                    }
+        style.push(`justify-content: ${column.justify}`);
+        switch(column.justify) {
+            case 'end':
+            case 'flex-end':
+            case 'right': {
+                style.push('text-align: end')
+                break;
+            }
+
+            case 'start':
+            case 'flex-start':
+            case 'left': {
+                style.push('text-align: start')
+                break;
+            }
+
+            case 'center':
+            {
+                style.push('text-align: center;')
+                break;
             }
         }
         if (column.fixed) {
@@ -472,7 +485,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
     async _onRowClick(event) {
         const res = await this.beforeSelect(event.model.row);
-        if (!res) {
+        if(!res) {
             return false;
         }
         if (event.model.row) {
@@ -547,14 +560,19 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             this.data.control.treeMode = {
                 hidValue: undefined,
                 keyField: this.keyField,
-                hidField: this.pkeyField
+                hidField: this.pkeyField,
+                filterByHid: true
             };
         } else if (this.data.control) {
             delete this.data.control.treeMode;
         }
     }
-    getTemplateForCell(tree, index) {
-        return tree && index === 0 ? PlGrid.treeFirstCellTemplate : undefined;
+    getTemplateForCell(tree,index) {
+        return tree && index===0 ? PlGrid.treeFirstCellTemplate : undefined ;
+    }
+
+    _isPlaceholder(row) {
+        return row instanceof PlaceHolder;
     }
 }
 

From 53bd53b1c073aaa27aadfa367bae53903ab00e23 Mon Sep 17 00:00:00 2001
From: Azat Yamalov <yamalov.azat@live.com>
Date: Wed, 22 Mar 2023 11:24:36 +0300
Subject: [PATCH 5/6] footer

---
 pl-grid.js | 102 +++++++++++++++++++++++++++--------------------------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/pl-grid.js b/pl-grid.js
index 361e15d..aa30f8e 100644
--- a/pl-grid.js
+++ b/pl-grid.js
@@ -20,7 +20,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         keyField: { type: String },
         pkeyField: { type: String },
         hasChildField: { type: String, value: '_haschildren' },
-        lastVirtual: { type: Object, value: null, observer: 'lastVirtualObserver'}
+
+        _hasFooter: { type: Boolean, value: false }
     }
 
     static css = css`
@@ -123,6 +124,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             position: relative;
             display: flex;
             flex-direction: column;
+            flex-shrink:0;
+            padding-bottom: var(--footer-padding, 0);
         }
 
         .row {
@@ -221,6 +224,21 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         }
     `;
     static treeFirstCellTemplate = html`<pl-icon-button style$="[[_getRowMargin(row, column.index)]]" variant="link" iconset="pl-default" icon="[[_getTreeIcon(row)]]" on-click="[[_onTreeNodeClick]]"></pl-icon-button>`;
+    static footerTemplate = html`
+    <div id="footerContainer">
+        <div id="footer">
+            <template d:repeat="[[_columns]]" d:as="column">
+                <div class="footerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]"
+                    style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth, 'footer')]]">
+                    <div class="footerCell">
+                        [[column.footerTemplate]]
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>`
+
+
     static template = html`
         <div class="top-toolbar">
             <slot name="top-toolbar"></slot>
@@ -249,18 +267,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
                     </template>
                 </pl-virtual-scroll>
             </div>
-            <div id="footerContainer">
-                <div id="footer">
-                    <template d:repeat="[[_columns]]" d:as="column">
-                        <div class="footerEl" hidden$=[[column.hidden]] fixed$=[[column.fixed]] action$="[[column.action]]"
-                            style$="[[_getCellStyle(column.index, column.width, column._calculatedWidth, 'footer')]]">
-                            <div class="footerCell">
-                                [[column.footerTemplate]]
-                            </div>
-                        </div>
-                    </template>
-                </div>
-            </div>
+            [[_getFooterTemplate(_hasFooter)]]
         </div>
         <div class="bottom-toolbar">
             <slot name="bottom-toolbar"></slot>
@@ -275,7 +282,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         const resizeObserver = new ResizeObserver((resizes) => {
             let throttler = throttle(() => {
                 this.$.rowsContainer.style.width = resizes[0].contentRect.width + 'px';
-                this.$.footerContainer.style.width = resizes[0].contentRect.width + 'px';
+                if(this._hasFooter) this.$.footerContainer.style.width = resizes[0].contentRect.width + 'px';
                 this.reactToResize();
             }, 300)
 
@@ -304,11 +311,13 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
 
         this.$.container.addEventListener('scroll', (e) => {
-            let throttler = throttle(() => {
-                this.$.footerContainer.style.bottom =  -this.$.container.scrollTop + 'px';
-            }, 100)
-
-            throttler();
+            if(this._hasFooter) {
+                let throttler = throttle(() => {
+                    this.$.footerContainer.style.bottom = -this.$.container.scrollTop + 'px';
+                }, 100)
+    
+                throttler();
+            }
         });
     }
 
@@ -319,9 +328,9 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             }
         }
 
-        if(mut.path != 'data' && this.selected) {
+        if (mut.path != 'data' && this.selected) {
             let m = mut.path.match(/^data\.(\d*)/);
-            if(m[1] == this.data.indexOf(this.selected)) {
+            if (m[1] == this.data.indexOf(this.selected)) {
                 this.forwardNotify(mut, `data.${m[1]}`, 'selected');
             }
         }
@@ -329,7 +338,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
     onColumnAttributeChange(event) {
         const { index, attribute, value, init } = event.detail;
-        if(this._columns[index]) {
+        if (this._columns[index]) {
             if (attribute === 'width') {
                 this._changeColumnWidth(this._columns[index], value);
             }
@@ -342,24 +351,6 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         }
     }
 
-
-    lastVirtualObserver(val, old, mut) {
-        if(old) {
-            old.ctx._ti._nodes.forEach(i => { 
-                if (i.style){
-                    i.style.paddingBottom = i.lastPaddingBottom + `px`;}
-                    delete i.lastPaddingBottom;
-                }
-            );
-        }
-        val?.ctx._ti._nodes.forEach(i => { 
-            if (i.style){
-                i.lastPaddingBottom = i.style.getPropertyValue('paddingBottom');
-                i.style.paddingBottom = i.lastPaddingBottom + val.h + `px`;}
-            }
-        );
-    }
-
     reactToResize() {
         this._columns.forEach((el) => {
             if (!el.width) {
@@ -395,6 +386,12 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             column._index = index;
             return info;
         });
+
+        if(this._columns.some(x => x.footerTemplate)) {
+            this._hasFooter = true;
+            this.$.rowsContainer.style.setProperty('--footer-padding', '32px');
+        }
+        
         this.reactToResize();
     }
 
@@ -418,8 +415,8 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
         // если сортировка была указана в гриде, то выставляем ее по-тихому, без уведомления о мутации
         // иначе по клику на сортировку вызываем мутацию и перезагружаем датасет 
-        if(init) {
-            this.data.sorts =  sorts;
+        if (init) {
+            this.data.sorts = sorts;
         } else {
             this.set('data.sorts', sorts);
         }
@@ -450,7 +447,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         }
 
         style.push(`justify-content: ${column.justify}`);
-        switch(column.justify) {
+        switch (column.justify) {
             case 'end':
             case 'flex-end':
             case 'right': {
@@ -466,10 +463,10 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             }
 
             case 'center':
-            {
-                style.push('text-align: center;')
-                break;
-            }
+                {
+                    style.push('text-align: center;')
+                    break;
+                }
         }
         if (column.fixed) {
             const left = column.index === 0 ? '0' : this._columns[column.index - 1].width + 'px';
@@ -485,7 +482,7 @@ class PlGrid extends PlResizeableMixin(PlElement) {
 
     async _onRowClick(event) {
         const res = await this.beforeSelect(event.model.row);
-        if(!res) {
+        if (!res) {
             return false;
         }
         if (event.model.row) {
@@ -567,10 +564,15 @@ class PlGrid extends PlResizeableMixin(PlElement) {
             delete this.data.control.treeMode;
         }
     }
-    getTemplateForCell(tree,index) {
-        return tree && index===0 ? PlGrid.treeFirstCellTemplate : undefined ;
+    getTemplateForCell(tree, index) {
+        return tree && index === 0 ? PlGrid.treeFirstCellTemplate : undefined;
     }
 
+    _getFooterTemplate(_hasFooter) {
+        return _hasFooter ? PlGrid.footerTemplate : undefined;
+    }
+
+
     _isPlaceholder(row) {
         return row instanceof PlaceHolder;
     }

From 3792692db16f03bda2d5ef6f27bab751bfb91101 Mon Sep 17 00:00:00 2001
From: Azat Yamalov <yamalov.azat@live.com>
Date: Wed, 22 Mar 2023 11:29:59 +0300
Subject: [PATCH 6/6] check for selected in inline delete

---
 pl-grid.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pl-grid.js b/pl-grid.js
index aa30f8e..490e0e6 100644
--- a/pl-grid.js
+++ b/pl-grid.js
@@ -485,7 +485,11 @@ class PlGrid extends PlResizeableMixin(PlElement) {
         if (!res) {
             return false;
         }
-        if (event.model.row) {
+
+
+        // проверка, что выделенный элемент присутствует в списке видимых данных
+        // необходимо при инлайн удалении строки
+        if (event.model.row && this._vdata.includes(event.model.row)) {
             this.selected = event.model.row;
         }