{"_id":"@elvis11235/ngx-generic-table","_rev":"3-7bc02ed4f4591cc3cb68ca90e3aad617","name":"@elvis11235/ngx-generic-table","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.1":{"name":"@elvis11235/ngx-generic-table","version":"1.0.1","peerDependencies":{"@angular/animations":"^15.0.2","@angular/cdk":"^15.2.5","@angular/common":"^15.0.2","@angular/compiler":"^15.0.2","@angular/core":"^15.0.2","@angular/forms":"^15.0.2","@angular/material":"^15.2.5","@angular/platform-browser":"^15.0.2","@angular/platform-browser-dynamic":"^15.0.2","@angular/router":"^15.0.2","rxjs":"~7.5.0","zone.js":"~0.11.4"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2015/elvis11235-ngx-generic-table.mjs","es2020":"fesm2020/elvis11235-ngx-generic-table.mjs","esm2020":"esm2020/elvis11235-ngx-generic-table.mjs","fesm2020":"fesm2020/elvis11235-ngx-generic-table.mjs","fesm2015":"fesm2015/elvis11235-ngx-generic-table.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elvis11235-ngx-generic-table.mjs","es2020":"./fesm2020/elvis11235-ngx-generic-table.mjs","es2015":"./fesm2015/elvis11235-ngx-generic-table.mjs","node":"./fesm2015/elvis11235-ngx-generic-table.mjs","default":"./fesm2020/elvis11235-ngx-generic-table.mjs"}},"description":"This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0.","_id":"@elvis11235/ngx-generic-table@1.0.1","_integrity":"sha512-ConZW3/jlt4RIaICBRWED49uZ2BmQ6Nsm4DANS4KSzg/mLKyHDQwtL3poS61xyWE2uhcijV7h1CydLso97V4XQ==","_resolved":"C:\\Code\\generic-table-byElvis\\dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.1.tgz","_from":"file:dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.1.tgz","_nodeVersion":"20.1.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-ConZW3/jlt4RIaICBRWED49uZ2BmQ6Nsm4DANS4KSzg/mLKyHDQwtL3poS61xyWE2uhcijV7h1CydLso97V4XQ==","shasum":"ab284fb9bd1480efa2d97075dc08ebf8879df3f8","tarball":"https://registry.npmjs.org/@elvis11235/ngx-generic-table/-/ngx-generic-table-1.0.1.tgz","fileCount":44,"unpackedSize":2956161,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOkcHn3apXz+wiFDylsvFG+4GbFIpE42kJBbB8BDNEIgIgdGhM8PRe/q20RKMeoKL0421czoYN5vJdEClZj3Gi1Mw="}]},"_npmUser":{"name":"elvis11235","email":"elvis.sehic2@gmail.com"},"directories":{},"maintainers":[{"name":"elvis11235","email":"elvis.sehic2@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-generic-table_1.0.1_1684088708714_0.1877442691006621"},"_hasShrinkwrap":false},"1.0.2":{"name":"@elvis11235/ngx-generic-table","version":"1.0.2","peerDependencies":{"@angular/animations":"^15.0.2","@angular/cdk":"^15.2.5","@angular/common":"^15.0.2","@angular/compiler":"^15.0.2","@angular/core":"^15.0.2","@angular/forms":"^15.0.2","@angular/material":"^15.2.5","@angular/platform-browser":"^15.0.2","@angular/platform-browser-dynamic":"^15.0.2","@angular/router":"^15.0.2","rxjs":"~7.5.0","zone.js":"~0.11.4"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2015/elvis11235-ngx-generic-table.mjs","es2020":"fesm2020/elvis11235-ngx-generic-table.mjs","esm2020":"esm2020/elvis11235-ngx-generic-table.mjs","fesm2020":"fesm2020/elvis11235-ngx-generic-table.mjs","fesm2015":"fesm2015/elvis11235-ngx-generic-table.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elvis11235-ngx-generic-table.mjs","es2020":"./fesm2020/elvis11235-ngx-generic-table.mjs","es2015":"./fesm2015/elvis11235-ngx-generic-table.mjs","node":"./fesm2015/elvis11235-ngx-generic-table.mjs","default":"./fesm2020/elvis11235-ngx-generic-table.mjs"}},"description":"Implementation of @elvis11235/ngx-generic-table library. Showcase example on how this strongly typed generic table library can be used https://github.com/Elvis112358/testGenericTable","_id":"@elvis11235/ngx-generic-table@1.0.2","_integrity":"sha512-S+A2Um9ALzvac71Z6kw9TdQe+Y7lithdL+0yLyA5m9A6QyjmDK7i4GJRLgphT8Cxh2BdqiXeyS5LXxqvoQv8UQ==","_resolved":"C:\\Code\\generic-table-byElvis\\dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.2.tgz","_from":"file:dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.2.tgz","_nodeVersion":"20.1.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-S+A2Um9ALzvac71Z6kw9TdQe+Y7lithdL+0yLyA5m9A6QyjmDK7i4GJRLgphT8Cxh2BdqiXeyS5LXxqvoQv8UQ==","shasum":"69ca3399db4d7ad1355e10c4850962dfe2a2d162","tarball":"https://registry.npmjs.org/@elvis11235/ngx-generic-table/-/ngx-generic-table-1.0.2.tgz","fileCount":44,"unpackedSize":2960497,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX5wrFp4wDm5A6OybCs3sVyELaxtlq9pzlTD5EC4THMwIhANM/wRNc9wrr8ZPEEl6XCY++rQSHCPZgcYwHdzzQgPVq"}]},"_npmUser":{"name":"elvis11235","email":"elvis.sehic2@gmail.com"},"directories":{},"maintainers":[{"name":"elvis11235","email":"elvis.sehic2@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-generic-table_1.0.2_1685873218140_0.6851856042209279"},"_hasShrinkwrap":false},"1.0.3":{"name":"@elvis11235/ngx-generic-table","version":"1.0.3","peerDependencies":{"@angular/animations":"^15.0.2","@angular/cdk":"^15.2.5","@angular/common":"^15.0.2","@angular/compiler":"^15.0.2","@angular/core":"^15.0.2","@angular/forms":"^15.0.2","@angular/material":"^15.2.5","@angular/platform-browser":"^15.0.2","@angular/platform-browser-dynamic":"^15.0.2","@angular/router":"^15.0.2","rxjs":"~7.5.0","zone.js":"~0.11.4"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2015/elvis11235-ngx-generic-table.mjs","es2020":"fesm2020/elvis11235-ngx-generic-table.mjs","esm2020":"esm2020/elvis11235-ngx-generic-table.mjs","fesm2020":"fesm2020/elvis11235-ngx-generic-table.mjs","fesm2015":"fesm2015/elvis11235-ngx-generic-table.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elvis11235-ngx-generic-table.mjs","es2020":"./fesm2020/elvis11235-ngx-generic-table.mjs","es2015":"./fesm2015/elvis11235-ngx-generic-table.mjs","node":"./fesm2015/elvis11235-ngx-generic-table.mjs","default":"./fesm2020/elvis11235-ngx-generic-table.mjs"}},"description":"ngx-generic-table is a library for creating customizable strongly typed tables in Angular applications. It has filtering, sorting, and paging option both for server and client side","_id":"@elvis11235/ngx-generic-table@1.0.3","_integrity":"sha512-FfzCykgYZ5LgyS3XWfE6w84OsxY2eGXM6xEHyUVu7bn26oKf5jcOiwpe7NLYiBiIhab8HTaMgLI1PaG3zzeweA==","_resolved":"C:\\Code\\generic-table-byElvis\\dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.3.tgz","_from":"file:dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.3.tgz","_nodeVersion":"20.1.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-FfzCykgYZ5LgyS3XWfE6w84OsxY2eGXM6xEHyUVu7bn26oKf5jcOiwpe7NLYiBiIhab8HTaMgLI1PaG3zzeweA==","shasum":"f9e938a3f3dc957ba0ff05bcddb61f798daca4c4","tarball":"https://registry.npmjs.org/@elvis11235/ngx-generic-table/-/ngx-generic-table-1.0.3.tgz","fileCount":44,"unpackedSize":2959729,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHssx6N0iXkcooFvvGUeLbn/pXg/DVB4pdHc72laMfDQIgFYeAeBx8JlE2K81p99l3Z0tMQq2fysk7G+LznlT/V00="}]},"_npmUser":{"name":"elvis11235","email":"elvis.sehic2@gmail.com"},"directories":{},"maintainers":[{"name":"elvis11235","email":"elvis.sehic2@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-generic-table_1.0.3_1685903557077_0.22283812704901762"},"_hasShrinkwrap":false},"1.0.4":{"name":"@elvis11235/ngx-generic-table","version":"1.0.4","peerDependencies":{"@angular/animations":"^15.0.2","@angular/cdk":"^15.2.5","@angular/common":"^15.0.2","@angular/compiler":"^15.0.2","@angular/core":"^15.0.2","@angular/forms":"^15.0.2","@angular/material":"^15.2.5","@angular/platform-browser":"^15.0.2","@angular/platform-browser-dynamic":"^15.0.2","@angular/router":"^15.0.2","rxjs":"~7.5.0","zone.js":"~0.11.4"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2015/elvis11235-ngx-generic-table.mjs","es2020":"fesm2020/elvis11235-ngx-generic-table.mjs","esm2020":"esm2020/elvis11235-ngx-generic-table.mjs","fesm2020":"fesm2020/elvis11235-ngx-generic-table.mjs","fesm2015":"fesm2015/elvis11235-ngx-generic-table.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/elvis11235-ngx-generic-table.mjs","es2020":"./fesm2020/elvis11235-ngx-generic-table.mjs","es2015":"./fesm2015/elvis11235-ngx-generic-table.mjs","node":"./fesm2015/elvis11235-ngx-generic-table.mjs","default":"./fesm2020/elvis11235-ngx-generic-table.mjs"}},"description":"ngx-generic-table is a library for creating customizable strongly typed tables in Angular applications. It has filtering, sorting, and paging option both for server and client side","_id":"@elvis11235/ngx-generic-table@1.0.4","_integrity":"sha512-bBMdhSoWlFAm2hFWbHClZat3tRgbOzoDvKciUpjd6ne63PwYxvILNYQ0XcpyNW/IMWjkuEMd/YJ95U+19om98A==","_resolved":"C:\\Code\\generic-table-byElvis\\dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.4.tgz","_from":"file:dist\\ngx-generic-table\\elvis11235-ngx-generic-table-1.0.4.tgz","_nodeVersion":"20.1.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-bBMdhSoWlFAm2hFWbHClZat3tRgbOzoDvKciUpjd6ne63PwYxvILNYQ0XcpyNW/IMWjkuEMd/YJ95U+19om98A==","shasum":"b10c60f5081ff80a31743ff913d8391ad45d2b19","tarball":"https://registry.npmjs.org/@elvis11235/ngx-generic-table/-/ngx-generic-table-1.0.4.tgz","fileCount":44,"unpackedSize":2963150,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxacNFaTSPTt/g3tLKyX3AhxGhkQLSC0H0aTpOF6ObDwIgJ7E+eDYF29djp7dGd0Dt7E1h0F8yaudmC30rL8JMbAs="}]},"_npmUser":{"name":"elvis11235","email":"elvis.sehic2@gmail.com"},"directories":{},"maintainers":[{"name":"elvis11235","email":"elvis.sehic2@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-generic-table_1.0.4_1686088196149_0.7507635506834478"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-14T18:25:08.650Z","1.0.1":"2023-05-14T18:25:08.997Z","modified":"2023-06-06T21:49:56.632Z","1.0.2":"2023-06-04T10:06:58.463Z","1.0.3":"2023-06-04T18:32:37.308Z","1.0.4":"2023-06-06T21:49:56.528Z"},"maintainers":[{"name":"elvis11235","email":"elvis.sehic2@gmail.com"}],"description":"ngx-generic-table is a library for creating customizable strongly typed tables in Angular applications. It has filtering, sorting, and paging option both for server and client side","readme":"# Strongly typed Table component with sorting, filtering and paging for angular\n## Description\n\nngx-generic-table is a library for creating customizable strongly typed tables in Angular applications. It has filtering, sorting, and paging option both for server and client side\n\n## Installation\n\nTo install the library, run the following command:\n\n```bash\nnpm install @elvis11235/ngx-generic-table\n```\n\nList of peerdependencies\n```bash\n \"@angular/animations\": \"^15.0.2\",\n \"@angular/cdk\": \"^15.2.5\",\n \"@angular/common\": \"^15.0.2\",\n \"@angular/compiler\": \"^15.0.2\",\n \"@angular/core\": \"^15.0.2\",\n \"@angular/forms\": \"^15.0.2\",\n \"@angular/material\": \"^15.2.5\",\n \"@angular/platform-browser\": \"^15.0.2\",\n \"@angular/platform-browser-dynamic\": \"^15.0.2\",\n \"@angular/router\": \"^15.0.2\",\n \"rxjs\": \"~7.5.0\",\n \"tslib\": \"^2.3.0\",\n \"zone.js\": \"~0.11.4\"\n```\nImport the necessary modules in your Angular module file (app.module.ts or any relevant module file). Add the following import statements:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { NgxGenericTableModule } from '@elvis11235/ngx-generic-table';\n\n@NgModule({\n imports: [\n // Other imports...\n NgxGenericTableModule\n ],\n // Other module configurations...\n})\nexport class AppModule { }\n```\n## API Interface\n### lib-ngx-generic-table\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
OptionsTypeDefaultDescription
dataUser Defined Class Type[]REQUIRED - Array of data to be shown in table
totalElementsnumber0REQUIRED - Total number of retrieved data. Used for calculating number of pages for client side paging
pageSizenumber10REQUIRED - Number of elements per page
pagingTypeenum PagingTypePagingType.SERVER_SIDEREQUIRED - Selecting server side or client side option for paging and sorting
pageChangeEventEmitter<number>1Subscribe to page change event
sortingEventEmitter<Sorting>undefinedEmit Sorting with properties column and sort direction
filteringEventEmitter<Filter>undefinedEmit filter with properties field, value, filter operation
\n\nInterfaces, Classes and Enums\n```typescript\nexport enum PagingType {\n SERVER_SIDE,\n CLIENT_SIDE,\n}\n\nexport class Sorting {\n column: string | undefined;\n sortDirection!: SortingType | undefined;\n\n constructor(\n column: string | undefined = undefined,\n sortDirection: SortingType | undefined = undefined\n ) {\n this.column = column;\n this.sortDirection = sortDirection;\n }\n}\n\nexport enum SortingType {\n ASC = 'ASC',\n DESC = 'DESC',\n}\n\nexport class Filter {\n field: string | undefined;\n value: string | string[] | number | Date | Date[] | undefined;\n filterOperation: FilterOperation| FilterOperation[] | undefined;\n constructor(\n field: string | undefined = undefined,\n value: string | number | Date | Date[] | undefined = undefined,\n filterOperation: FilterOperation | FilterOperation[] | undefined = undefined\n ) {\n this.field = field;\n this.value = value;\n this.filterOperation = filterOperation;\n }\n}\n\nexport enum FilterOperation {\n EQUALS = '=',\n RANGE_LOWER = '_gte',\n RANGE_HIGHER = '_lte',\n EXCLUDE = '_ne',\n LIKE = '_like',\n}\n\n```\n\n### app-dg-column\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
OptionsTypeDefaultDescription
fieldstring''REQUIRED -Property of Class type of given data, that we want to show in given column
headerstring''REQUIRED - Column header
widthnumber | stringOPTIONAL - width of column
minWidthnumberOPTIONAL - minimal width of column
sortablebooleanfalseOPTIONAL - sort option for column enabled/disabled
textAlignstring'center'align column items to the left, right or center
dataTypeFilterDataTypeFilterDataType.TEXTFilter properties field, value, filter operation
filterOptOnbooleanfalseEnable/disable filtering option for given column
selectFilterOptionsArray[]OPTIONAL - provide select options for select filter
fixedFixedPositionOPTIONAL - if property exists fix column to the left or right position depending on FixedPosition
\n\nInterfaces, Classes and Enums\n```typescript\nexport enum FilterDataType {\n TEXT = 'text',\n NUMBER = 'number',\n DATE = 'DateTime',\n SELECT = 'select'\n}\n\nexport class SelectFilterOptions {\n id?: string | number;\n text?: string | number;\n constructor(id: string | number, text: string | number ) {\n this.id = id;\n this.text = text;\n }\n}\n\nexport enum FixedPosition {\n LEFT,\n RIGHT,\n}\n\n```\n\n## Useage od @elvis11235/ngx-generic-table\nUse the library component in your template\n```html\n\n \n \n \n \n \n\n```\nCustomize the app-dg-column components based on your requirements:\n```html\n\n\n\n```\nIf you want more custom table column, provide template to app-dg-column, for example like this:\n\n```html\n\n \n
\n

Position {{rowData.position}}

\n
\n \"employee-image\"\n
\n
\n
\n \n
\n \n\n```\n\n## Example\nImplementation of @elvis11235/ngx-generic-table library. Showcase example on how this strongly typed generic table library can be used https://github.com/Elvis112358/testGenericTable\n\nFor more details check test-table-example.component.ts\n### Strongly Typed\nIf a developer tries to access or modify properties that are not defined in the provided data class, the compiler or linter will raise an error, indicating that the property does not exist.\n\n![strongly_type_class_example](https://github.com/Elvis112358/testGenericTable/assets/89360370/7b11243a-f328-4b18-9b86-27b034920748)\n\n","readmeFilename":"README.md"}