feature update

Author: sa-si-dev

docs/assets/sample-grid/grids-config.js

@@ -15,6 +15,7 @@ const gridsConfig = {
         name: 'First Name',
         key: 'first_name',
         width: '150px',
+        alwaysShow: true,
         filter: {},
       },
       {
@@ -23,7 +24,6 @@ const gridsConfig = {
         resizable: false,
         width: '150px',
         key: 'last_name',
-        alwaysShow: true,
         filter: {},
       },
       {

src/grid-core.js

@@ -95,6 +95,7 @@ export class GridCoreComponent {
 
           <div class="grid-comp-rows-loader"></div>
           <div class="grid-comp-no-rows">${this.i18n('no.rows')}</div>
+          <div class="grid-comp-more-right-column-shadow"></div>
           <div class="grid-comp-col-resizing-line"></div>
         </div>
 
@@ -253,6 +254,7 @@ export class GridCoreComponent {
     let classNames = 'grid-comp-col';
     let textContainerClassNames = 'grid-comp-col-text-container';
     let rightSection = '';
+    let rightOutSection = '';
     let sortIcon = '';
     let resizable = colData.resizable;
     let sortable = colData.sortable;
@@ -279,7 +281,7 @@ export class GridCoreComponent {
 
     if (colData.sticky) {
       classNames += ' grid-comp-col-sticky';
-      rightSection += '<span class="grid-comp-col-sticky-shadow"></span>';
+      rightOutSection += '<span class="grid-comp-col-sticky-shadow"></span>';
     }
 
     if (resizable) {
@@ -306,6 +308,7 @@ export class GridCoreComponent {
         </div>
         ${rightSection}
       </div>
+      ${rightOutSection}
     </th>`;
 
     return html;
@@ -347,7 +350,7 @@ export class GridCoreComponent {
     let value = key ? rowData[colData.key] : '';
     let classNames = 'grid-comp-col';
     let textTooltip = this.getTooltipAttrText(value, true);
-    let rightSection = '';
+    let rightOutSection = '';
     let colStyle = {};
 
     let colAttrData = {
@@ -374,7 +377,7 @@ export class GridCoreComponent {
 
     if (colData.sticky) {
       classNames += ' grid-comp-col-sticky';
-      rightSection += '<span class="grid-comp-col-sticky-shadow"></span>';
+      rightOutSection += '<span class="grid-comp-col-sticky-shadow"></span>';
     }
 
     if (colData.align) {
@@ -384,8 +387,8 @@ export class GridCoreComponent {
     html = `<td class="${classNames}" ${DomUtils.getAttributesText(colAttrData)}>
       <div class="grid-comp-col-content" ${DomUtils.getStyleText(colStyle)}>
         ${html}
-        ${rightSection}
       </div>
+      ${rightOutSection}
     </td>`;
 
     return html;
@@ -977,6 +980,8 @@ export class GridCoreComponent {
     this.addEvent(this.$pageNavPrev, 'click', 'onPageNavPrevClick');
     this.addEvent(this.$pageNavNext, 'click', 'onPageNavNextClick');
 
+    this.addEvent(this.$tableContainer, 'scroll', 'onTableContainerScroll');
+
     if (this.showFilters) {
       this.addEvent(this.$filtersButton, 'click', 'onFiltersButtonClick');
       this.addEvent(this.$filtersBoxCancelButton, 'click', 'onFiltersBoxCancelButtonClick');
@@ -1156,6 +1161,10 @@ export class GridCoreComponent {
   onExportButtonClick(e) {
     this.exportRows(e.target);
   }
+
+  onTableContainerScroll() {
+    this.setTableColumnShadow();
+  }
   /** dom event methods - end */
 
   /** before event methods - start */
@@ -1185,6 +1194,7 @@ export class GridCoreComponent {
     this.renderFooter();
     this.setVisibleColumns();
     this.setBodyHeight();
+    this.setTableColumnShadow();
 
     if (this.showFilters) {
       this.renderFiltersBox();
@@ -1795,6 +1805,16 @@ export class GridCoreComponent {
       reqData[`${d.key}[${d.criteria}]`] = d.value;
     });
   }
+
+  setTableColumnShadow() {
+    let $tableContainer = this.$tableContainer;
+    let scrollLeft = $tableContainer.scrollLeft;
+    let hasLeftColumn = scrollLeft > 0;
+    let hasRightColumn = $tableContainer.scrollWidth > $tableContainer.clientWidth + scrollLeft;
+
+    DomUtils.toggleClass(this.$wrapper, 'has-left-column', hasLeftColumn);
+    DomUtils.toggleClass(this.$wrapper, 'has-right-column', hasRightColumn);
+  }
   /** set methods - end */
 
   /** get methods - start */

src/sass/partials/grid.scss

@@ -59,6 +59,7 @@
   margin-top: -#{$resizeButtonSize / 2};
   opacity: 0;
   cursor: col-resize;
+  z-index: $minZIndex + 1;
 }
 
 .grid-comp-table-wrapper {
@@ -87,12 +88,26 @@
 }
 
 .grid-comp-col-sticky-shadow {
+  display: none;
   position: absolute;
   top: 0;
-  right: -#{$stickyColShadowWidth + $colPaddingRight};
-  width: $stickyColShadowWidth;
-  height: 100%;
-  background: $stickyColShadowBg;
+  right: 0;
+  bottom: 0;
+  width: 10px;
+  box-shadow: $boxShadow7;
+  pointer-events: none;
+}
+
+.grid-comp-more-right-column-shadow {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 40px;
+  z-index: $minZIndex + 6;
+  background: $stickyColRightShadowBg;
+  pointer-events: none;
 }
 
 .grid-comp-col-content {
@@ -163,10 +178,6 @@
       .grid-comp-col-content {
         background-color: $rowHoverBg;
       }
-
-      .grid-comp-col-sticky-shadow {
-        background: $stickyColShadowBgHover;
-      }
     }
   }
 }
@@ -245,6 +256,18 @@
     }
   }
 
+  &.has-left-column {
+    .grid-comp-col-sticky-shadow {
+      display: block;
+    }
+  }
+
+  &.has-right-column {
+    .grid-comp-more-right-column-shadow {
+      display: block;
+    }
+  }
+
   &.show-more-filters-tags {
     .grid-comp-filters-tags-more-button {
       .grid-comp-icon {

src/sass/partials/variable.scss

@@ -42,16 +42,15 @@ $resizeButtonSize: $iconSize;
 $headerIconButtonSize: 36px;
 $minZIndex: 1;
 
-$stickyColShadowWidth: 10px;
-$stickyColShadowBg: linear-gradient(to right, $primaryBg, transparent);
-$stickyColShadowBgHover: linear-gradient(to right, $rowHoverBg, transparent);
+$stickyColRightShadowBg: linear-gradient(to left, $primaryBg, transparent);
 
 $boxShadow1: 0 -1px 7px 0 rgba(0, 0, 0, 0.07);
 $boxShadow2: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 $boxShadow3: 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
 $boxShadow4: inset 0px 11px 8px -10px rgba(0, 0, 0, 0.16);
 $boxShadow5: inset 0px -11px 7px -12px rgba(0, 0, 0, 0.16);
 $boxShadow6: 2px 2px 8px rgba(0, 0, 0, 0.22);
+$boxShadow7: 5px 0px 7px 0 rgba(0, 0, 0, 0.07);
 
 $dropdownArrowWidth: 30px;
 $dropdownArrowSize: 8px;