Skip to content
Branch: master
Find file History
generic-ui
generic-ui Release 0.5.5
Latest commit f2c366c Jan 19, 2020
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
bundles Release 0.5.5 Jan 19, 2020
common/cdk Release 0.5.2 Dec 26, 2019
esm2015 Release 0.5.5 Jan 19, 2020
esm5 Release 0.5.5 Jan 19, 2020
fesm2015 Release 0.5.5 Jan 19, 2020
fesm5 Release 0.5.5 Jan 19, 2020
gui/grid Release 0.5.4 Jan 12, 2020
lib/structure Release 0.5.5 Jan 19, 2020
README.md Release 0.5.2 Dec 26, 2019
generic-ui-ngx-grid.d.ts Release 0.5.5 Jan 19, 2020
generic-ui-ngx-grid.metadata.json Release 0.5.5 Jan 19, 2020
grid.index.d.ts Release 0.5.4 Jan 12, 2020
package.json Release 0.5.5 Jan 19, 2020
public-api.d.ts Release 0.5.1 Dec 1, 2019

README.md

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. 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.

demo

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.

demo

The creation of an gui-grid will be done in these simple steps:

Setup template

Specify columns and source in grid component Include GridModule 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$'
}, {
    name: 'Shoes',
    type: 'footwear',
    price: '100$'
}, {
    name: 'Ball cap',
    type: 'headgear',
    price: '50$'
}];

Include GridModule

The only thing that is left is to include GridModule in app.module.ts and we are done.

app.module.ts

import { GridModule } from '@generic-ui/ngx-grid';

@NgModule({
	imports: [
		GridModule
	]
})
export class BasicModule {
}

Installation

First you need to install @generic-ui/ngx-grid package with all it's peer dependencies.

Npm installation:

npm install @generic-ui/ngx-grid element-resize-detector@1.1.14

Yarn installation:

yarn add @generic-ui/ngx-grid element-resize-detector@1.1.14

Make sure that you use Angular in version at least 6.1.10 and Rxjs in version greater than 6.0.0.

Grid API

In this section you can find list of Inputs and Outputs that configures gui-grid.

In order to build the grid you need to have data source specified and defined columns. Source and columns need to work together, therefor columns have to be bound with data source. The basic section got an easy guide how to do it.

Generic UI is completely editable. You can specify:

  • width and height,
  • different theme like: Fabric, Material, Light, Dark,
  • header placed at the top and/or bottom of the grid,
  • disabled or enabled vertical and horizontal lines,
  • rows color,
  • loading indicator.

Generic UI also provides the output options that posts information anytime when:

  • page changes,
  • page size changes,
  • grid row is selected.

Contact

Feel free to contact us with any questions or issues, as FAQ will be published in the near future. We will really appreciate it you letting us know how do you use this angular grid library. If you find any bug, let us know about it through Report an issue.

License:

Code released under the MIT license.

You can’t perform that action at this time.