HTML CSS Vertical Scroll Table Example

How to get the contents inside of a table to scroll vertically with a fixed header. The CSS portion of this solution was provided by nkmol on stackoverflow.com.

Use the following in your css file or style tags.

div {
  display: inline-block;
  height: 350px;
  overflow: auto;
  width: 100%;
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

table {
  border-collapse: collapse;
}

th {
  background-color: #808080;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #EAEAEA
}

The data table should look similar to the following:

<div>
  <table class="table table-striped">
    <thead>
      <tr>
        <th class="text-left">Index</th>
        <th class="text-left">Ticker</th>
        <th class="text-left">Price</th>
        <th class="text-left">Changes</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of dataArr" >
      <tr class="">

        <td class="text-left">{{item.indexName | slice:0:15  }}</td>
        <td class="text-left">{{item.ticker}}</td>
        <td class="text-left">{{item.price | number:'2.1-2'}}</td>
        <td class="text-left">{{item.changes}}</td>
      </tr>
      </ng-container>
    </tbody>
  </table>
</div>

The rest of this how to article is not necessary. It is the rest of the code for getting major stock indexes.

If you do not have a service already, from your angular 2+ application root folder. Type type following CLI command in the terminal.

ng g s services/financial-stock

In your service file paste the following code.

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
import { SharedService } from './shared.service';

export interface MajorIndexesResult {
  majorIndexesList: any;
}

@Injectable({
  providedIn: 'root'
})
export class YOUR-SERVICE-NAME {

  constructor(private http: HttpClient) { }

  getMajorIndexes() {
    const URL = 'https://financialmodelingprep.com/api/v3/majors-indexes';
    console.log(URL);
    return this.http.get<MajorIndexesResult>(URL);
  }
}

In your component.ts file should have the following:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { StockFmpService } from './../../../services/stock-fmp.service';
import { HttpErrorResponse } from '@angular/common/http';
import { Subscription } from 'rxjs';
export interface Entity {
  ticker: string;
  changes: number;
  price: number;
  indexName: string;
}
@Component({
  selector: 'app-major-indexes-table',
  templateUrl: './major-indexes-table.component.html',
  styleUrls: ['./major-indexes-table.component.scss']
})
export class MajorIndexesTableComponent implements OnInit, OnDestroy {

  private subs = new Subscription();
  public dataArr: any;
  constructor(private financeAPI: FinancialStockService) {}

  ngOnInit(): void {
    this.subs.add(this.financeAPI.getMajorIndexes()
    .subscribe((res) => {
      this.dataArr = res.majorIndexesList;
      console.log('Data Array: ', this.dataArr);
    },
    (err: HttpErrorResponse) => {
      console.log(err);
    }));
  }

  ngOnDestroy(): void {
    if(this.subs) {
      this.subs.unsubscribe();
    }
  }

}

And the html and css at the beginning of this article for your CSS or SCSS and HTML files.