satti-table

SattiTable

The idea of this component is cloning jquery data table in Angular way, this component is only made for data table with http calls.

Install

You can get it on NPM installing satti-table module as a project dependency.

npm install satti-table --save

Setup

You'll need to add SattiTableModule to your application module. So that, the <satti-table></satti-table> components will be accessible in your application.

...
import { SattiTableModule } from 'satti-table';
...

@NgModule({
  declarations: [
    YourAppComponent
  ],
  imports: [
    ...
    SattiTableModule,
    ...
  ],
  providers: [],
  bootstrap: [YourAppComponent]
})

export class YourAppModule {}

After that, you can use the satti-table components in your templates, passing the configuration data into the component itself.

• satti-table: Handle the data table with http of your app;

<div>
  <satti-table [option]="option" (httpCall)="getDataFromApi($event)" (actionCallBack)="actionCallBack($event)"></satti-table>
</div>

In Yout Component,

export class YourAppComponent {
  option: any = {
    columns: ['name','position', 'office','age']
  }
  getDataFromApi(callBack: () => void){
    let data = {
        offset: this.option.start,
        limit: this.option.length,
        search: this.option.searchText,
        sort: {
            field: this.option.sort.columnId,
            dir: this.option.sort.value == 1 ? 'asc' : 'desc'
        }
    }
    this.httpClient.post('http://api.sample.com/', data).subscribe((resp: any) => {
        this.option.data = resp.data.map(d => {
            d.hideAction = 'view-btn, edit-btn';
            return d;
        });
        this.option.total = 4;
        callBack();
    }, err => alert(err.statusText ? err.statusText :  err.message))
  }
}

Note

** To Hide Action Button **

data: [
    {
        ...,
        ...,
        hideAction: 'edit,delete'
    }
]

Options

• columns: pass the column id with label;
• data: raw data;
• showEntry: 'n' records to show;
• start: data from the start index;
• length - record from filtred data;
• total: total records;
• searchText: search value of input field;
• sort: sorting the columns as Accending and decending;
• idKey: pass the column id which is unique to identify;
• reload: this is method to re-initialize the component;

option[columns]

export class AppComponent {
    ....
    option: any = {
        columns: [
            {
                _id: 'name',
                label: 'Name',
                sort: true
            },
            {
                _id: 'pos',
                label: 'Position',
                sort: true
            },
            {
                _id: 'branch',
                label: 'Brach',
                sort: false
            },
            {
                _id: 'age',
                label: 'Age',
                sort: true
            },
            {
                _id: 'action',
                label: 'Action',
                action: [
                    {
                        type: 'view-more',
                        className: 'btn btn-warning',
                        returnKey: 'id',
                        iconClassName: 'mdi mdi-eye',
                        btnText: 'View',
                    }
                ]
            }
        ]
    }
    ....

    acactionCallBack(e: any) {
        //e.type, e.data
        alert(e.type + ' button is clicked'); //view-more button is clicked
    }
}

option[sort]

sort: {
    columnId: "name",//string
    value: 1,//number (1 = asc,-1 = desc)
}