Geek Answers Handbook

How to set up a large dynamic data table using ion-col

here I encounter a problem associated with ions, I bind my dynamic data to the ion series and the data displayed in the ion column, here the table is huge and it turns off, and the width of this unstable is lower - this 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 in the table is so long that it turns off, and even if im setting to use scss, but the col and col data do not get the correct alignment

Table data

+6
source share
4 answers

You can easily do this using Adaptive Attributes .

stackblitz

, col- *. , * .

<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>

show/hide .

: hides md.

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>
+7

, UX, .

-, , ! HTML- .

- , , ( , ) , ( , ).

enter image description here

SASS:

ion-grid
{
   overflow-x: scroll;
}

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

, , css .

+3

, Sass.

$grid-columns - -, ( ) .

$grid-padding-width - , , , , padding-left padding-right, padding-top padding- .

, . :

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

:

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

Ionic

+2

Tablesaw

npm install tablesaw

( )

<link rel="stylesheet" href="tablesaw.css">
<script src="tablesaw.js"></script>
<script src="tablesaw-init.js"></script>

Tablesaw ( jQuery)

<link rel="stylesheet" href="tablesaw.css">
<!-- load your own jQuery -->
<script src="jquery.js"></script>
<script src="tablesaw.jquery.js"></script>
<script src="tablesaw-init.js"></script>

! : if/it >

<table class="tablesaw tablesaw-stack" data-tablesaw-mode="stack">

.

-

github .

GitHub

Demo

0

More articles:


All Articles