0

I am using Angular framework version 8.x to develop my project. I installed the datatables package to enhance the table feature. I following the online documentation to use the package, it works fine. However, I found that it does not support fixed header row options. So, how can I fix the problem? I tried to install the following packages, but those do not help:

datatables.net-fixedheader-dt

datatables.net-fixedheader

The component source code as following:

import {CallTree} from "../CallTree";
import {CallTreeService} from "../call-tree.service";
import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-data-table-call-tree-table',
  templateUrl: './data-table-call-tree-table.component.html',
  styleUrls: ['./data-table-call-tree-table.component.css']
})
export class DataTableCallTreeTableComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  callTreeList:CallTree[]=[];

  error = '';
  dtTrigger: Subject<any> = new Subject();

  constructor(private callTreeService:CallTreeService) { }

  ngOnInit() {
    this.dtOptions = {
            order: [[ 1, "asc" ]],
            paging: false,
            info: false,
    };

    this.callTreeService.getActiveCallTreeList().subscribe(
      (res: CallTree[]) => {
        this.callTreeList = (res);
        this.dtTrigger.next();
      },
      (err) => {
        this.error = err;
      }
    );
  }
}

The following is my app.modules.ts content:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { SafeHtml } from './safe-html.pipe';
import { DataTablesModule } from 'angular-datatables';
import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, 
  MatSortModule, MatTableModule } from "@angular/material";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';
import { DataTableCallTreeTableComponent } from './data-table-call-tree-table/data-table-call-tree-table.component';
@NgModule({
  declarations: [
    AppComponent,
    SafeHtml,
    CallTreeTableComponent,
    DataTableCallTreeTableComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    DataTablesModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatProgressSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
The KNVB
  • 3,588
  • 3
  • 29
  • 54

1 Answers1

-1

apply this css to table in './data-table-call-tree-table.component.css'

table> thead > tr > th {
 position: sticky;
 top: 0;
 z-index: 2;
}
ABhinayKumar
  • 1