extentia-grid v1.0.14

This is extentia grid component.

Usage:-

npm i extentia-grid --save

For Angular project :: Add following lines in angular.json file

"scripts": "./node_modules/extentia-grid/extentia-grid.js"

"styles": "./node_modules/extentia-grid/extentia-grid-style.css"

Add NO_ERRORS_SCHEMA in schemas of app.module.ts

Example:

Add tag in your html file.

<extentia-grid *ngIf="tableData && displayedColumns" data = "data" displayedColumns = "displayedColumns" displayEditDeleteColumns = "editDeleteColumnValues" PaginationOptions= "pagignationOption" styleOption="styleOption" theme="dark-theme" (editValue) = "getEditValue($event)" (deleteValue) = "getDeleteValue($event)">

data: array of objects displayedColumns: array of object displayEditDeleteColumns: object PaginationOptions: object styleOption: object editValue: EventEmmiter; which takes data of edit value deleteValue: EventEmmiter; which takes data of delete value theme: string

data = { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' }, { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' }, { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }, { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C' }, { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N' }, { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O' }, { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F' }, { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne' } ; displayedColumns = { headerName: 'position', sort: false, filter: true }, { headerName: 'name', sort: true, filter: false }, { headerName: 'weight', sort: false, filter: false }, { headerName: 'symbol', sort: true, filter: false }; editDeleteColumnValues = { displayEdit: true, displayDelete: true }; pagignationOption = { enablePagination: true, pageSize: 5, pageSizeOptions : 5,10,15,20 };

displayedColumns : displayedColumns is a array of object here you have to pass column name that you want to display in grid Example: displayedColumns = { headerName: 'position', sort: true, filter: true } ; here headerName is your column name if you want sort and filter for that column just pass sort: true and filter: true both are optional

editDeleteColumnValues: editDeleteColumnValues = { displayEdit: true, displayDelete: true }; if you want edit and delete functionality in your grid just pass displayEdit: true, displayDelete: true in editDeleteColumnValues object

pagignationOption: pagignationOption = { enablePagination: true, pageSize: 5, pageSizeOptions : 5,10,15,20 }; In you want pagination in your grid passed pagignationOption as object. In that object you have to pass three property enablePagination, pageSize,pageSizeOptions see in above example enablePagination if you want pagignation then pass true if not pass false pageSize : its number of row display per page pageSizeOptions: it is array of number.The paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via pageSizeOptions

styleOption: styleOption = { headerStyle: { headersyleparams: (params) => {} headerClass: 'headercss',

}, rowstyleOption: { rowstyle: { columnName: 'name', class: 'nameColumn', }, , rowstyleParams: (params) => {

}, }, }; you can see styleOption is a object has two property headerStyle,rowstyleOption both are optional

headerStyle has two property headersyleparams ,headerClass both are optional. In headerClass you have to pass your custom css class name and css will be applied to header In headersyleparams you will get column name from parameter,if you want specific column in your custom color then you have to pass class name for exmaple headersyleparams: (params) => { if (params.id === 'weight') { return 'customclass'; } }, In rowstyleOption has also two property rowstyle, rowstyleParams and both are optional. rowstyle is a array of object where you have to pass className and column name that you want to style particular column. For example: rowstyle: { columnName: 'name', class: 'nameColumn', }, ,

rowstyleParams is function if you want to style specific column and row according to your requirement.you can implement your logic under this function , in params parameter you get row data and colum name. Example:

rowstyleParams: (params) => { return params.row.symbol === 'H' && params.column === 'symbol' ? 'rowclass' : null; },

editValue: This event is execute or call when you click on edit button and you will get row data.

deleteValue : This event is execute or call when ypu click on delete button and particular row will delete from grid

Theming: theme="dark-theme" right now there are only two theme available light theme and dark-theme, light theme is by default if you want to use dark theme you have pass dark-theme as string