AngularPaginatedTableFyp

by Fede-YaoPai

This library was generated with Angular CLI version 12.1.0.

This library provides a dynamic Angular component rendering a table with pagination and, optionally, a select to choose how many rows per page the table should render.

Set up

In order to use this component, you just have to import the AngularPaginatedTableFypModule into whatever module is declaring the component you want to render the table in:

components.module.ts

...

imports: [
  CommonModule,
  AngularPaginatedTableFypModule
],

...

Now, you should define - in your component's TypeScript file - the three main variables you are going to give to the paginated table component as input:

• The data source, meaning the collection from which the table is going to generate its rows. You can either pass an Observable with the Async Pipe, or a simple collection. We are going to do the former in out example;

• The columns that should be displayed, as an array of strings;

• The properties of the objects from the data source that you want the table to display, also as an array of strings.

This is our example:

home.component.ts

export class HomeComponent implements OnInit {

  public fighters$: Observable<Fighter[]> = this.apiService.getFighters();
  public tableDisplayedColumns: string[] = [
    'Name',
    'Lastname',
    'Nickname',
    'Discipline',
    'Wins',
    'Losses'
  ];

  public tableDisplayedProps: string[] = [
    'name',
    'lastname',
    'nickname',
    'discipline',
    'wins',
    'losses'
  ];

  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
  }

}

At this point, you can use the component selector in your component's HTML to actually render the table:

home.component.html

<paginated-table-fyp
  [dataSource]="(fighters$ | async)!"
  [displayedColumns]="tableDisplayedColumns"
  [displayedProps]="tableDisplayedProps"
  [rowsPerPage]="4"
  [showIndex]="true"
  [fixedLayout]="true"
  [tableClasses]="['table', 'table-dark', 'table-striped']"
  [selectRowsPerPage]="true"
  [rowsPerPageOptions]="[5, 10, 25]"
  [rowsPerPageOptionsLabel]="'Rows per page'"
  [maxDisplayedPaginatorItems]="6"
  [paginatorClasses]="['pagination', 'justify-content-center']"
  [paginatorItemClasses]="['page-item']"
  [paginatorLinkClasses]="['page-link']"
  [rowsPerPageSelectClasses]="['form-select']">
</paginated-table-fyp>

As you can see, this component has lots of options you can apply.

Options

Property name | Property type | What it does | --- | --- | --- | //todo | //todo | //todo |