CODEWITHSUNDEEP
angularsortinghtml-tableangular8ng-bootstrap
PPAP
PPAP

Reputation: 3

Angular 8 ng-bootstrap 5 table sorting not working

I have a project which is using .NET Core 3.1 and Angular 8 ("@angular/core": "8.2.12").
The part of getting and subscribing data from Web API is working well.
Now I am trying to perform a sortable, pagination, and filtering table, so I find ng-bootstrap and the working code from this question.

Following the setup, I run the install cmd in PowerShell:

ng add @ng-bootstrap/[email protected]

add this to my app.module.ts:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [
    NgbModule
  ]

and then I tried to follow the working code to add sort function to my table, but I can't click the header to sort the data.

so I copied these files from the working code to my project:

and set route and declarations for table-complete.html page in my app.module.ts:

@NgModule({
  declarations: [
    NgbdTableComponent
  ],
  providers: [AppComponent, NgbdTableComponent, NgbdSortableHeader]

(I change the class name from NgbdTableComplete to NgbdTableComponent)


Here is the screenshot: The pagination and filtering functions are working well.

But I still cannot click the table header to sort the table.
Did I miss something during the process?

Upvotes: 0

Views: 4347

Answers (1)

Pallavi
Pallavi

Reputation: 506

  • Components/directives/pipes should be added to declarations array of app.module as shown below

     @NgModule({
 declarations: [
 AppComponent, 
 NgbdTableComponent, 
 NgbdSortableHeader
 ],
 imports:[BrowserModule, 
          HttpClientModule, 
          NgbModule
          ],
 providers: [] 
 })

  • include below css from working code (styles.css) to display sort arrow

    th[sortable] 
  {
   cursor: pointer;
   user-select: none;
   -webkit-user-select: none;
   }

 th[sortable].desc:before, th[sortable].asc:before {
   content: '';
   display: block;
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC') no-repeat;
   background-size: 22px;
   width: 22px;
   height: 22px;
   float: left;
   margin-left: -22px;
 }

 th[sortable].desc:before {
   transform: rotate(180deg);
   -ms-transform: rotate(180deg);
 }

Upvotes: 3

Related Questions