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

[ihadeed]

Disable super tabs swiping when that page is active

Root page can listen to the tabChange event and toggle the container's swipeEnabled property based on the active tab index.

[pankajjain15]

Thank you so much for your reply . Really appreciate that. But I guess , I didn't put my question properly . Let me put in another way ..

I have five supertab tab1 to tab5

tab1 contains a table having 15 columns with left most column fix and user can scroll that table horizontally to view the other columns which are not viewable area.
So when user tries to scroll table horizontally a super tab is swiped , which I don't want . So issue is how shall I detect if user is scrolling on table itself ? Because , I there are some other elements also where user can try to swipe and will jump to next tab. But I want to restrict/disable that jump/swipe if user doing horizontal scrolling on table only.