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

@Sampath check this url https://ionic-whawjk.stackblitz.io/ in this way im getting & really thanx for url related to stackblitz — Madpop, Oct 29 '17 at 09:13
@Sampath Actually it is a Dynamic Json data which im getting and if u see the fields u can see how the field name is cutting off — Madpop, Oct 29 '17 at 10:42
If you need to show `scss` on `stackblitz` you can see how: https://stackoverflow.com/questions/46252546/add-scss-file-to-the-stackblitz — Sampath, Oct 29 '17 at 13:28
Have you found the solution for this? If not can you show an image of your exact requirement? — Sampath, Oct 31 '17 at 13:23
@Sampath actually i posted an image to u and by using the scss i made some modifications and i updated my question with image — Madpop, Nov 01 '17 at 03:50

Sampath · Accepted Answer · 2017-11-02T02:35:35.530

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>

i have so many fields so based on screen resolution is it possible to define the fields to show and hide? — Madpop, Nov 02 '17 at 01:25
i got solutions for the resolution i used hideWhen & showWhen properties — Madpop, Nov 02 '17 at 02:49

score 3 · Answer 2 · answered Nov 01 '17 at 04:40

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.

score 2 · Answer 3 · answered Oct 30 '17 at 06:37

If you want to modify the grid columns and their padding can be modified via Sass variables.

$grid-columns is a ionic-sass variable mainly used to generate the widths (in percent) for the each individual column.

$grid-padding-width is another variable used for the padding on the grid, while this also allows you to set the breakpoint-specific widths that are divided evenly across padding-left and padding-right as well as padding-top and padding-bottom of the grid and columns.

Generally you can set the different breakpoints based on the devices. like as follows:

$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px
);

for that break points you can set the max-width as follows :

$grid-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

For implementing more about responsive grid in Ionic check this link

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

3 Answers3