angular-paginated-table-fyp/README.md

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.0.

# AngularPaginatedTableFyp
## by Fede-YaoPai

This library was generated with [Angular CLI](https://github.com/angular/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 |