Website-Suche

angular - Wie man große dynamische Tabellendaten mit ion-col responsiv setzt

Hier habe ich ein Problem im Zusammenhang mit ion-col. Ich binde meine dynamischen Daten an das ion-row und zeige die Daten im ion-col an. Hier ist die Tabelle sehr groß und sie wird abgeschnitten und die Breiten sind instabil. Unten ist mein Code.

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

Hier ist das Problem: Die Tabelle ist so lang, dass sie abgeschnitten wird, und obwohl ich SCSS verwende, richten sich die Spalten und Spaltendaten nicht richtig aus.

Antwort #1

Sie können es ganz einfach mit responsiven Attributen tun.

stackblitz

Um die Breite einer Spalte für alle Geräte und Bildschirme anzupassen, fügen Sie das col-* Attribut hinzu. Diese Attribute weisen die Spalte an, * Spalten von den verfügbaren Spalten einzunehmen.

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

Sie können Spalten ein-/ausblenden auch gemäß den Bildschirm-Breakpoints.

Hinweis: Hier versteckt es alle Spalten beim 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>

Antwort #2

Zunächst einmal handelt es sich hierbei um ein UX-Problem und nicht um ein Entwicklungsproblem.

Zweitens sollte ein Tisch ein Tisch sein, kein Raster !! Ihr HTML-Code sollte semantisch sein.

Ich hatte dieses Problem schon einmal bei einer App, an der ich gearbeitet habe, und hier ist, was ich gemacht habe (kann nicht die beste Lösung für alle Situationen sein), abhängig von Ihren Anforderungen und der Priorität, Daten neben anderen Daten zu visualisieren (zum Beispiel die Gewinne des letzten Monats mit dem aktuellen Monat zu vergleichen).

SASS:

ion-grid
{
   overflow-x: scroll;
}

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

Stellen Sie sicher, dass diese Stile nur auf der gewünschten Seite angewendet werden, verwenden Sie also einen CSS-Spezifizierer oder ersetzen Sie Tags durch IDs.

Verwandte Artikel