How to set a large Dynamic table data responsive using ion-col

Question

here im facing a issue related ion-col , i am binding my dynamic data to the ion - row and display data in the ion-col here the table is huge and it is cutting off and widths of that unstable below is my cod

<ion-grid class="contnr">
      <ion-row style="" class="grid-head">
        <ion-col width-40>
          Transaction
        </ion-col>
        <ion-col width-40>
          Count
        </ion-col>
        <ion-col width-40 >
         Overall  Gross Amount
        </ion-col>
        <ion-col width-40 >
          Overall Disc
        </ion-col>
        <ion-col  width-40>
          Overall Tax
        </ion-col >
        <ion-col  width-40>
         Overall ServiceTax
        </ion-col>
        <ion-col  width-40>
         Overall Charge
        </ion-col>
        <ion-col  width-40>
          Overall Net
        </ion-col>
      </ion-row>
      <ion-row *ngFor="let value of resultData" style="background:#eff0f1" class="cont-rows">

        <ion-col width-40>
          {{value.TransacType}}
        </ion-col>
        <ion-col width-40>
          {{value.Transactions}}
        </ion-col>
        <ion-col width-40>
          {{value.Count}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallSales}}
        </ion-col>
        <ion-col width-40>
          {{value.Discount}}
        </ion-col>
        <ion-col width-40>
          {{value.OverallTax}}
        </ion-col>
        <ion-col width-40>
          {{value.MandatoryTax}}
        </ion-col>
        <ion-col width-40>
          {{value.ServiceCharge}}
        </ion-col>
        <ion-col width-40>
          {{value.NetAmt}}
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          Total
        </ion-col>

        <ion-col>
          {{grossTotal}}
        </ion-col>
        <ion-col>
          {{Nets}}
        </ion-col>

      </ion-row>
    </ion-grid>

here the problem the table is so long that it is cutting off and even though im setting of using scss but the col and col data is not getting in properly aligning

Answer 1

You can easily do it using Responsive attributes.

stackblitz

To customize a column's width for all devices and screens, add the col-* attribute. These attributes tell the column to take up * columns out of the available columns.

<ion-grid>
  <ion-row>
    <ion-col col-4>
      1 of 4
    </ion-col>
    <ion-col col-2>
      2 of 4
    </ion-col>
    <ion-col col-2>
      3 of 4
    </ion-col>
    <ion-col col-4>
      4 of 4
    </ion-col>
  </ion-row>
</ion-grid>

You can show/hide columns according to the screen breakpoints too.

Note: Here it hides all the columns on md breakpoint.

stackblitz

.scss

@media (min-width: 768px) and (max-width:991px) {
  .hidden-md {
    display: none;
  }
}

.html

<ion-grid>
        <ion-row>
            <ion-col col-6 class="hidden-md">
                1 of 4
            </ion-col>
            <ion-col col-6 class="hidden-md">
                2 of 4
            </ion-col>
        </ion-row>
    </ion-grid>

Answer 2

First of all, this is a UX issue rather than a development issue.

Second, a table should be a table, not a grid !! Your HTML code should be semantic.

I had this issue before on some app I was working on, and here what I did (might not be the best solution for all situations) depending on your demands, and the priority for data to be visualized next to other data (for example compare last month profits with current month).

SASS:

ion-grid
{
   overflow-x: scroll;
}

ion-row
{
    display: table;       
    white-space: nowrap;
}

Make sure these styles are only applied on the desired page, so use css specifier, or replace tags with IDs.