Generic UI Angular Grid API
In this section you will find a list of Inputs and Outputs that are used in the grid configuration.
In order to build the grid you need to have a specified data source and defined columns. The source and the columns need to work together, therefore the columns have to be bound with the data source. The basic section contains an easy guide on how to do this.
Generic UI is completely editable. You can specify:
- width and max height,
- different themes, such as: Fabric, Material, Light, Dark,
- header placed at the top and/or bottom of the grid,
- disabled or enabled vertical and horizontal lines,
- row color,
- loading indicator.
Generic UI also provides output options that post information whenever:
- a page changes,
- a page size changes,
- a grid row is selected.
Input
| Input name | Type | Default value | Description |
|---|---|---|---|
| source | Array<any> | [ ] | Binds data to the grid based on format defined in column source. |
| columns | Array<GuiColumn> | [ ] | Creates columns inside the grid. Columns should be defined by at least header name and source name. |
| maxHeight | number | auto | Sets grid max height. |
| width | number | auto | Sets grid width. |
| columnHeaderTop | boolean | true | Places columns header on top of the grid. |
| columnHeaderBottom | boolean | false | Places columns header in the bottom of the grid. |
| autoResizeWidth | boolean | true | When true, this will set columns width to fill available space e.g. cover entire web page. |
| paging | boolean | GuiPagingConfig | false | Enables or disables pagination. Default value is set to false. |
| verticalGrid | boolean | true | Enables vertical lines that separate columns within the grid. |
| horizontalGrid | boolean | true | Enables horizontal lines that separate rows within the grid. |
| theme | string | GuiTheme | GuiTheme.FABRIC | Changes Grid theme. Available themes: Fabric, Material, Dark, Light. |
| rowColoring | string | GuiRowColoring | GuiRowColoring.EVEN | Applies colored shading to the grid rows. Available shading options: Even, Odd, None. |
| loading | boolean | false | Enables or disables loading indicator. Default value is set to false. |
| virtualScroll | boolean | false | Enables to display big sets of data. |
| sorting | boolean | GuiSorting | false | Sorts column cell values in ascending or descending manner. |
| infoPanel | boolean | false | Displays total number of rows. |
Experimental features
| Input name | Type | Default value | Description |
|---|---|---|---|
| filtering | boolean | GuiFiltering | false | Filters columns values based on applied specification. |
| quickFilters | boolean | GuiQuickFilters | false | Filters columns based on a text provided in quickFilter column header. |
| searching | boolean | GuiSearching | false | A search tool that allows finding specific words in the grid. |
| editMode | boolean | false | Enables edit mode |
| cellEditing | boolean | false | Enables modifying data directly from the grid. |
| aggregation | GuiAggregation | aggregation: any = {
enabled: true
} | Displays total cell values, also minimal, maximum value, median and average. |
Output
| Output name | Type | Description |
|---|---|---|
| pageChanged | EventEmitter<number> | Emits information whenever page has been changed |
| pageSizeChanged | EventEmitter<number> | Emits information whenever page size has been changed |
| itemsSelected | EventEmitter<any> | Emits information whenever item has been selected |
| columnsChanged | EventEmitter<void> | Emits information whenever grid columns change |
| containerWidthChanged | EventEmitter<number> | Emits information whenever grid changes width |
| sourceEdited | EventEmitter<{after: any, before: any}> | Emits value after and before change. |
| cellEditEntered | EventEmitter<void> | Emits information whenever specific cell entered cellEdit mode. |
| cellEditCanceled | EventEmitter<void> | Emits information whenever cellEdit mode has been canceled. |
| cellEditSubmitted | EventEmitter<void> | Emits information whenever cell value has been changed. |