Extending FTable in your Component - fairmutex/FTable GitHub Wiki

The component in which the table is to be used must extend FTableComponent

import { FTableComponent } from 'ftable';

If the Data to be used is supplied from Front End inject FTableLocalService

import { FTableLocalService } from 'ftable';

constructor(_ftableService: FTableLocalService) {
        // Loading Data
        const d = data['default'] as any[]; 
        // Set Data in Service
        _ftableService.setLocalTableData(d);
        // Inject the Service to FTableComponent
        super(_ftableService);
...

If the Data to be used is supplied from Back End inject FTableAPIService

import { FTableAPIService} from 'ftable';

constructor(_ftableService: FTableAPIService) {
        // Set headers required
        let httpHeaders = new HttpHeaders({
            'content-Type': 'application/json; charset=utf-8',
            'Accept': 'application/json',
        });
        // set API URL and header data
        _ftableService.setAPIConfig('https://localhost:44333/api/v1/Sample/', httpHeaders);
        // Inject the Service to the parent component (FTableComponent)
        super(_ftableService);
...

FTableComponent exposes a property named table for type FTable this has to be initialized and populated to render the table as required.

      this.table = new FTable();

Set Paging Data Page sizes available for user

        this.table.pageSizes = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 20, 30, 40, 50, 60, 100, 150, 200]; 

Page size Index

        this.table.pageSizeIndex = 6;

Page Size

        this.table.dataModifier.pageSize = this.table.pageSizes[this.table.pageSizeIndex];

Starting Page

        this.table.dataModifier.currentPage = 1; 

Sorting Array

        this.table.dataModifier.orders = [];

Searching Parameter

        this.table.dataModifier.search = new FSearch('');

Data Required to initialize Columns

Titles to be displayed

        const titles = ['Avatar','Name', 'Surname', 'Age', 'Email', 'Status', 'DOB', 'Actions'];  

Internal column names used internally match data and case of Back End the properties properties

        const names = ['picture','name', 'surname', 'age', 'email', 'status', 'dateOfBirth', '']; 

Types are there to help in the template

        const types = ['', 'string', 'string', 'number', 'string', 'checkbox', 'date', '']; 

Filters to be used in the table. EmailFFilterComponent is a custom filter, the others are standard that come with FTable

        this.filters = ['','string', 'string', 'number', EmailFFilterComponent, 'checkbox', 'date', '']; 

Initialize Columns for the Table

        this.table.columns = [];
        for (let i = 0; i < titles.length; i++) {
            this.table.columns.push(new FColumn(titles[i], names[i], types[i], formats[i]));
        }