0.1.2 • Published 7 years ago
recon-components v0.1.2
recon
Dependencies
Installation
To install this library, run:
$ npm install recon-components --save
Consuming the library
You can import the library in any Angular application by running:
$ npm install recon-components
and then from your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { ReconModule } from 'recon-components';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify the library as an import
ReconModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Once the library is imported, you can use its components, directives and pipes in your Angular application:
<!-- You can now use the library component in app.component.html -->
<recon-grid [allowSearch]=false
[customCls]="customCls"
[columnConfig]="columnConfig"
[gridData]="gridData"
[editable]=true
[addOnFooter]=true
[disableAddNew]=true
[disableAddButton]=true
[checkAddForm]=true
[newRecord]="newRecord"
(actionHandler)="actionHandler($event)"></recon-grid>
Properties
- allowSearch: boolean => True if you want search form. (Default: false)
- customCls: string => Custom class for the grid.
- columnConfig: ReconGridColumnModel[] => Columns configuration, how each columns is going to behave.
- gridData: any => Store of data that is going to be displayed in the table. (gridData._data is taken)
- editable: boolean => True if you want to edit the current column. (Default: false)
- addOnFooter: boolean => True if you want to have add form in the bottom of the table. (Default: false)
- disableAddNew: boolean => True if you want to disable the add form. (Default: false)
- disableAddButton: boolean => True if you want to disable the add button. (Default: false)
- checkAddForm: boolean => True if you want to have change event on input in add form. (Default: false)
- newRecord: any => Simple record to have as template for the new one to be added.
Events
- actionHandler => Event response to every action. (click, keyup,...)
Column Config
ReconGridColumnModel: {
// id used for sorting the table (Default: '')
id: string;
// title of the column in the table and used as placeholder of add form (Default: '')
title: string;
// icon from font-awesome for header or body of the table (Default: null)
icon: string;
// True if the column is sortable (Default: true)
sortable: boolean;
// True if the column is the default sorting column (Default: false)
defaultSort: boolean;
// Direction of the sorting - asc for ascending direction and desc for descending direction (Default: 'asc')
sortDirection: string;
// True if the column is included in the search filter (Default: true)
filterable: boolean;
// True if the column has actionColumn Class (Default: false)
actionColumn: boolean;
// Custom class applied to the table (Default: '')
customCls: string;
// Field to be filtered (Default: data: null)
filter: Object = {
data: null
};
// Column content config
content: Object = {
// Type of column (Default: 'text')
type: 'text',
// Field of the array containing data (Default: '')
data: '',
// Custom function to transform data (Default: null) TODO
dataFn: null,
// Custom config for special columns
customConfig: {
// Text used in button column (Default: '')
text: '',
// Custom action code identifying the action propagated (Default: '')
action: '',
// Custom parameter used to show commaSeparatedReference column (Default: '')
wildcard: '',
// Reference store from where data is taken (Default: {})
referenceStore: {},
// Reference store field that is used to find a record (Default: '')
referenceField: '',
// Reference store field displayed (Default: '')
displayProperty: '',
// True if special event is propagated (Default: false)
eventEmit: false,
// True if column is hidden (Default: true)
isShowed: true,
// Custom search config
customSearch: {
// True if custom search is used (Default: false)
isCustomSearch: false,
// Reference field to search (Default: '')
referenceSearchField: ''
},
all: '',
activeState: '',
// Options in selector type column
options: []
}
};
// True if the column can be edited (Default: false)
editable: boolean = false;
// Edition config
editor: Object = {
// Column type when in editing mode
type: 'text',
text: '',
// Action to perform when finishing edition
action: '',
// Options in selector type column
options: [],
// Add form config
add: {
type: null,
text: null,
action: null
}
};
constructor(id: string, config: Object);
}
License
MIT © Fernando