Прокручиваемая сетка или таблица с верхней строкой и левой колонкой, зафиксированной в Ionic 3

Question

Мне нужно реализовать таблицу или сетку в Ionic, где левый столбец остается фиксированным, когда пользователь выполняет горизонтальную прокрутку, а когда он расположен вертикально, он должен двигаться.Верхний ряд должен быть похожим, но он перемещается только с горизонтальной прокруткой и остается фиксированным, когда прокрутка вертикальная.

Answer 1

Для сетки с прокруткой и фиксированным верхним рядом, например:

import { Component, ViewChild } from '@angular/core';
import { Content, Platform } from 'ionic-angular';

@Component({
    template: `
    <ion-header>
        <ion-navbar>
            <ion-title>Main Title</ion-title>
        </ion-navbar>

        <ion-toolbar mode="md" no-border-top>
            <ion-grid>
                <ion-row>
                    <ion-col col-2>Id</ion-col>
                    <ion-col col-2 text-right>Name</ion-col>
                </ion-row>
            </ion-grid>
        </ion-toolbar>
    </ion-header>

    <ion-content>
        <ion-grid>
            <ion-row *ngFor="let note of myData; let odd = odd" [ngClass]="{ 'table-background-row': odd}">
                <ion-col>
                    {{note?.id}}
                </ion-col>
                <ion-col>
                    {{note?.name}}
                </ion-col>
            </ion-row>
        </ion-grid>

        <ion-infinite-scroll>
            <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-content>
`})

class myPage {
    @ViewChild(Content) content: Content;

    myData: any;
    constructor(public platform: Platform, ) {
        this.toggleToolbar();
        this.myData = [{
            id: 1,
            name: "myName"
        },
        {
            id: 2,
            name: "yourName"
        }];
    });

    toggleToolbar() {
        this.content.resize();
    }
}

Это может быть полезно для вас:)