Angular Datables fixed header

Question

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

did anyone found the solution for it?

Raza Zaidi
– Raza Zaidi

2022-05-09 07:15:14 +00:00
Commented May 9, 2022 at 7:15 — Raza Zaidi
– Raza Zaidi, Commented May 9, 2022 at 7:15

ABhinayKumar · Accepted Answer · 2020-07-24 06:57:30Z

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

answered Jul 24, 2020 at 6:57

ABhinayKumar

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Datables fixed header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related