npm i angular5-table
- 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
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.
<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 {Angular5TableModule} from 'angular5-table';
<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.
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
This table has been completely tested with chrome. The main support of the browser are:
- Chrome
- IE 10 - 11
- Firefox