README
Generic UI - Grid for Angular
Grid component
Generic UI Grid is one of the best free angular grid library. It offers many built-in features that work out of the box: editing, sorting, pagination, theming, summaries, column configuration, and many more. Performance is the main focus point, grid is able to present huge sets of data up to 1 000 000 rows. It greatly integrates with the best javascript framework there is Angular. All of that makes this library a great free to use Angular data table plugin.
Quick Example
Generic UI is easy to use, all you need to do is specify columns and source. Below is simple use of our grid with three columns and three items.
The creation of an gui-grid will be done in these simple steps:
Setup template
Specify columns and source in grid component
Include GuiGridModule
Setup template
Add code below to you html template. Notice that <gui-grid> has two input [columns] and [source]. These will help you specify the shape of the grid and the data you wish to bind.
app.component.html:
<gui-grid [columns]="columns"
[source]="source">
</gui-grid>
Specify columns and source
Now write a variable inside app.component.ts named as columns, with it we will create column headers. In this example we are using two attributes:
- header represents displayed header name,
- field binds data from source.
You can find more column options in a columns section
app.component.ts:
columns: Array<GuiColumn> = [{
header: 'Name',
field: 'name'
}, {
header: 'Type',
field: 'type'
}, {
header: 'Price',
field: 'price'
}];
We got columns specified, now we need to bind it with source.
Create new variable called source in app.component.ts and copy code below.
Inside source are three items each has three values: name, type, price. These values are names of our columns fields.
app.component.ts
source: Array<any> = [{
name: 'T-shirt',
type: 'clothes',
price: '15