jayvdb / angular5-Table

Angular5Table

A simple way to display data in a table with angular !!

Installation

    npm i angular5-table

Configuration step

• Insert in your index.html the cdn link of bootstrap 4 or include the CSS style into angular-cli.json
• Import in your module the angular5TableModule.
• Insert the the angular5Table selector tag when you need insert it
• Configure the options data

Usage and sample

If your want use npm for install bootsrap use:

npm install bootstrap@4.0.0 font-awesome@4.7.0

and set the scrip into angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ]

This component require the css link and the font-awesome link of bootstrap 4. You can import this link in your index.html

Click Here for visit the bootstrap site and copy the cdn file.

bootstrap css and font-awesome link

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

import module

import {Angular5TableModule} from 'angular5-table';

selector tag

<angular5Table 
    [dataTable]="data"
    [dataColumn]="column"
    [itemsForPage]="10"
    [options]="options"
    [pagination]="true"
    [filter]="true"
    [sortable]="true"
    [functionDefault]="yourFunction">
</angular5Table>

Attribute	Description
dataTable	are the data to be displayed in the data
dataColumn	are the data column to be show in the data header
itemsForPage	are the number of items to display per page
options	this attribute is used to specify any additional columns, you can specify columns to add icons or buttons
pagination	is the option to display data pagination
sortable	is the option to use if your want data ordering asc/ desc
functionDefault	associating a function to this attribute if you want to interact with the data in the data, the associated function returns the oparations that will be performed with any icons or buttons included in the options

The option attribute is an array of object. The object contains this keys:

• Name, that specific the name of the element
• type, that specific the type of the element
• class, for assign a specific style
• url, for pass the icon url

this.options = [
      {name: 'download', type: 'img', class: 'img-table', url: 'test.png'},
      {name: 'edit', type: 'img', class: 'btn-table', url: '../assets/test.png'},
      {name: 'delete', type: 'img', class: 'btn-table', url: '../assets/test.png'},
      {name: 'button', type: 'button', class: 'form-control', url: ''},
    ];

The function default attribute, is a function that manage the click event of a icons or button for this table.

Example

When you click edit icon the event return 4 params. You can pass function to selector attribute [functionDefault]="yourFunction" :

 yourFunction(index: number, type: any, item: any, option: any){
   // ... 
 }

• index, is a row index
• type, is a type of a operation (edit,download,delete)
• Item, is a row data item
• option, return the option of a row click

Browser Support

This table has been completely tested with chrome. The main support of the browser are:

• Chrome
• IE 10 - 11
• Firefox