Ruc-lib NPM | npm.io

RucLib

This library was generated with Angular CLI version 12.2.0.

Code scaffolding

Note: Don't forget to add --project ruc-lib or else it will be added to the default project in your angular.json file.

Build

Run ng build ruc-lib to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ruc-lib, go to the dist folder cd dist/ruc-lib and run npm publish.

Running unit tests

Run ng test ruc-lib to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

How to use data grid component

import { RucDataGridModule } from 'ruc-lib/ruc-data-grid';

and then add below tag in HTML template where you want to use it <ruc-data-grid dataSource="dataSource" rucInputData = "rucInputData" (rucEvent)="passEvent($event)" customTheme = "customTheme">

Where dataSource is the input that user gives, rucInputData is the config we need to pass this. Please see below an example:

In the component.ts file

this.dataSource =[ {Tags: 'Tag 1', position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {Tags: [], position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, {Tags: [], position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'} ]

this.rucInputData = { columnDefs: { headerName: 'Tags', field: 'Tags', type: 'icon' , icon: 'local_offer', tooltip: true, cellStyle:{}, iconStyle: {}, headerStyle:{}, tooltipVal: '', }, {headerName: 'Position Name', field: 'Position' }, { headerName: 'Name', field: 'Name' }, { headerName: 'Weight', field: 'Weight', }, { headerName: 'Symbol', field: 'Symbol', } , defaultColConfig: { hasTooltip: false, tooltipVal: '', sortArrowPos: 'after', headerStyle: { 'color': 'red' } }, sortConfig: { hasSort: true, sortedAt: 'Position', sortOrder: 'desc', sortMode: 'auto' }, filterConfig: { hasFilter: true, filterMode: 'auto' }, paginationConfig: { hasPagination: true, paginationMode: 'custom', defaultRowSet: 10, paginationStyle:{'float':'right'}, customeModeDataCount: 100 //Required if mode is custom }, hasHighlightTextOnSearch: true, highlightText: '', hasSelectionBox: true, hasStickyHeader: true, hasStickyDisclaimer: true, disclaimer: 'This is disclaimer text. Please ignore.', height: '400px', hasRowContextMenu: true, hasColumnContextMenu: false, hasHighLightedRowOnSelect: true, rowHighlightColor: '#d3d3d3', rowHeight: '40px', contextMenuStyle: {}, headerRowStyle: { 'position': 'sticky' }, noRowOverlayMsg: "No Rows To Show", hasSuppressNoRowsOverlay: false, tableStyle: {}, uniqueCol: 'Symbol', searchBoxStyle: { 'float': 'right' }, contextMenuData: { label: 'Delete', value: 'Delete', disable: false }, { label: 'Select', value: 'Select', icon: '', disable: false, style: {} }, { label: 'Add', value: 'Add', icon: '', disable: false, style: {} }, { label: 'Update', value: 'Update', icon: '', disable: false, style: {} }, }

Grid Input Specifications:

dataSource: (type: array) pass the data in an array of object format, each element of array represents a row data with key as column unique identifier.

Grid Config Specifications:

columnDefs: (type: array) This is an array Of Objects, for every column that has to be displayed in Data Grid , should be part of this array as an object. If any field is coming in gridData but dosn't hold position in columnDefs, that won't appear in Data Grid. a) headerName: (type: string) Name To be displayed as Column Header Name, b) field:(type: string) Unique Identifier Of Column , should be same as coming in Grid Data, for mapping, c) type: (type: string, options: Icon/TextWithIcon) Type Of Column Field, by default considered to be TextWithIcon, d) icon: If Type is 'icon' then icon should have mat icon value, which has to be displayed in Column, e) tooltip: (type: boolean) Flag to identify if Column would have toolTip enabled or not, f) cellStyle:(type: object) This would have styles to be applied in Column Cells, for particular column(td),, g) iconStyle: (type: object) This would have styles to be applied in Column Icon, if type is 'icon', for particular column, h) headerStyle:(type: object) This would have styles to be applied in Column Header Cell, for particular column(th), i) tooltipVal: (type: string) If 'tooltip' is true, then this value would be displayed as ToolTip In Column Cells, j) toolTipPosition: (type: string, options: after/before/top/bottom/left/right) This would accept position where ToolTip is required to be displayed with respect to reference.
defaultColConfig: (type: object) This can have any of the property as defined under columnDefs above, any property given in defaultColConfig would be applied in all Columns (If there is no specific value for that property in columnDef for that Column). For IconStyle/HeaderStyle/CellStyle, anything given in DefaultColConfig would be appended with specific styling given in columnDefs.
SortConfig: Object => a) hasSort: (type:boolean) pass true to enable sorting feature in Data Grid b) sortedAt: Name Of The Column On which default sorting should be applied c) sortOrder: asc/desc d) sortMode: auto/custom : Auto: If default Sorting has to be applied Custom: If default sorting has to be stopped, and sort event would be emitted.
filterConfig: Object => a) hasFilter: (type:boolean) pass false if you dont't want a search box for filtering the data in grid, default is True b) filterMode: auto/custom : If default FIltering has to be applied Custom: If default sorting has to be stopped, and filter event would be emitted.
paginationConfig: Object => a) hasPagination : (type:boolean) pass true if you want large data to be displayed in pagination format, default is false b) paginationMode: auto/custom : If default Pagination has to be applied Custom: If default Pagination has to be stopped, and pagination event would be emitted. c) defaultRowSet: Number of rows in a page d) paginationStyle: Styling to be applied to paginator e) customeModeDataCount: Total Length of grid, is required when Mode is custom
hasSelectionBox: (type:boolean) if true then add checkboxes to each row and have the functionality of selecting and deselecting the rows, further it emits the selected rows an each checkbox click, by default false.
hasStickyHeader: (type:boolean) if true then make the header stick on the top in case of table vertical scroll, by default false
hasStickyDisclaimer : (type: boolean) if true then the disclaimer row will stick to the bottom of the table, by default false
disclaimer: (type: string) any string to be visible at the bottom of the table
height: (type:string) pass the height of the table in px in string format for example '500px' by default it is auto
hasRowContextMenu : (type: boolean) Pass True to enable Context Menu on Rows Event (as specified by developer)
hasColumnContextMenu: (type: boolean) Pass True to enable Context Menu on Column Headers (as specified by developer)
defaultRowSet: (type: number) Number Of Rows that has to be visible in one Grid Page
hasHighLightedRowOnSelect: (type: boolean) This parameter identifies row needs to be highlighted on click, default is true
rowHighlightColor: (type: string) This parameter expects a background color for highlighted row , if highLightRowOnSelect is true
rowHeight: (type: string, options: Expected in px only) To identify what would be row Height Of Each Row In Grid ,by default its 30px.
contextMenuStyle: (type: object, options: CSS style params in Object) This object expects any styles to be applied to Context Menu on Row Click.
headerRowStyle: (type: object, options: CSS style params in Object ) This object expects any styles to be applied to Grid Header Row
hasSuppressNoRowsOverlay: (type: boolean) This identifies that if there are no rows in Grid then No Rows Message has to be displayed or not, false by default
noRowOverlayMsg: (type: string) The message that has to be displayed when data Grid is empty, if suppressNoRowsOverlay is false.
hasHighlightTextOnSearch: (type: boolean) This identifies that search results should be highlighed in table with yellow mark.
highlightText: (type: string) This identifies the static text that has to be highlighted in data grid.
contextMenuData: (type: array) This is also an array Of Objects, this is to send Context Menu Options required on right/left click. a) label: Option to be displayed in Menu b) value: Unique Identifier of the Option c) icon: If any Icon has to be displayed along with Menu Option d) disable: Menu Option can be enabled/disabled e) style: Styling for Menu Option can be changed f) submenu: For Each Menu Option Submenu can also be present, Submenu Option again is an array Of Objects amd each object has same structure as contextMenuData.

24.tableStyle : (type: object) This object expects any styles to be applied to table.

uniqueCol: (type: string) This attribute should have name of any column which would have unique value like id
searchBoxStyle : (type: object) This object expects any style to be applied on search box, if hasFilter flag is true.

APIs Exposed:

deleteRows(row) Input: Expects the Row Object which has to be deleted. Action: Delete the row from Grid and updated Data Source Object Of Grid
addRows(rowArr) Input: Expects array Of Row Objects which has to be added to Grid Action: Add the rows in Grid and also updates Data Source Object of Grid
loadRows(rowArr) Input: Expects array of Row Objects Action: Refreshes Grid with given set Of Rows
showContextMenu(event, data) Input: Event where it has to be triggered, Data that has to be shown in Context Menu Action: Triggers Context Menu on the row specified
highLightRow(event) Input: Event with Row which has to be highlighted Action: Highlights the Row with background color given by developer
selectRow(event) Input:Event with Row which has to be selected Action: Selects the Row, if check box functionality is enabled for Grid
unSelectRow(event) Input:Event with Row which has to be Unselected Action: Uncheck or unselect the row which is already checked.
unhighLightRow(event) Input: Event with Row which has to be unhighlighted Action: Unhighlight Row present in event of the grid
clearAllHighLights() Action: Clear All highlighted rows of a grid
setRowHeight(event) Input: Event with input as new Height for each Row of grid ,{event: Event, data:string} Action: Sets height for each row of Grid
toggleRowSelect() Input:Event with Row which has to be toggled selection, {event: Event, row:object} Action: Toggles Selection of the row.
updateRow() Input:Event with Row which has to be toggled selection Action: Toggles Selection of the row.
searchData() Input: Event to support Search Action: this.dgService.searchData({text: 'Hyd'});
sortData() Input: Event to support Sort Action: this.dgService.sortData({text: 'Hyd'});
paginateData() Input: Event to support Search Action: this.dgService.paginateData({text: 'Hyd'});