Need help on Super tab containing Table with horizontal scrollbar and fixed column

[pankajjain15]

Hi ,

I am creating an MOBILE application where it is required to have a table on one tab . Well that table is having left most column is fixed one. So when I just try to scroll that table horizontally , instead of table get scrolled , super tab is scrolled. Following is the code snippet

Home page.html

<ion-header>
 <ion-toolbar>
   <ion-title>home</ion-title>
   </ion-toolbar>
  </ion-header>

  <ion-content>
  <super-tabs [config]="config" >
    <super-tabs-toolbar slot="top"  style="color:white;">
      <super-tab-button>
        <ion-label>Tab 1</ion-label>    
      </super-tab-button>
      <super-tab-button>
        <!-- <ion-icon name="home"></ion-icon> -->
        <ion-label>Tab 2</ion-label>    
      </super-tab-button>
    </super-tabs-toolbar>


    <super-tabs-container>
      <super-tab>
        <ion-card class="ion-no-padding ion-no-margin">
          <ion-card-content class="ion-no-padding ion-no-margin">
        <table-component></table-component>
      </ion-card-content>
      </ion-card>  
      </super-tab>
      <super-tab>
        Tab 2 content
      </super-tab>
    </super-tabs-container>
  </super-tabs>
</ion-content>

home.page.ts

import { Component, OnInit } from '@angular/core';
import {SuperTabsConfig } from '@ionic-super-tabs/core'

@Component({
  selector: 'vedic-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  constructor() { }

  ngOnInit() {
  }


  config: SuperTabsConfig = {
   
     sideMenu: 'left',
     shortSwipeDuration: 1500,
     nativeSmoothScroll:true,
     transitionDuration:0,
     allowElementScroll:true
     //debug:true
   };

}

table-component.html

  
<ion-card class="ion-no-padding ion-no-margin">
  <ion-card-content class="ion-no-padding "  >
<div class="zui-wrapper" >
    <div class="zui-scroller"  >
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>
                    <th>Number</th>
                    <th>Position</th>
                    <th>Height</th>
                    <th>Born</th>
                    <th>Salary</th>
                    <th>Prior to NBA/Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
                    <td>15</td>
                    <td>C</td>
                    <td>6'11"</td>
                    <td>08-13-1990</td>
                    <td>$4,917,000</td>
                    <td>Kentucky/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Isaiah Thomas</td>
                    <td>22</td>
                    <td>PG</td>
                    <td>5'9"</td>
                    <td>02-07-1989</td>
                    <td>$473,604</td>
                    <td>Washington/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Ben McLemore</td>
                    <td>16</td>
                    <td>SG</td>
                    <td>6'5"</td>
                    <td>02-11-1993</td>
                    <td>$2,895,960</td>
                    <td>Kansas/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Marcus Thornton</td>
                    <td>23</td>
                    <td>SG</td>
                    <td>6'4"</td>
                    <td>05-05-1987</td>
                    <td>$7,000,000</td>
                    <td>Louisiana State/USA</td>
                </tr>
                <tr>
                    <td class="zui-sticky-col">Jason Thompson</td>
                    <td>34</td>
                    <td>PF</td>
                    <td>6'11"</td>
                    <td>06-21-1986</td>
                    <td>$3,001,000</td>
                    <td>Rider/USA</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</ion-card-content>
</ion-card>

table.component.css

 .zui-table {
    border: none;
    border-right: solid 1px #DDEFEF;
    border-collapse: separate;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: none;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-table tbody td {
    border-bottom: solid 1px #DDEFEF;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
    white-space: nowrap;
}
.zui-wrapper {
    position: relative;
}
.zui-scroller {
    margin-left: 101px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: auto;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 100px;
}

SO issue is , when I scroll right to a table , tab is also get scrolled and I jump to tab2 . So kindly help me out on how to fix this issue. Please let me know if anything else is required.

Thanks