{"_id":"@alameer/ngx-fancy-grid","_rev":"2-7eb6f40144872c1d790315c2ad86bce8","name":"@alameer/ngx-fancy-grid","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@alameer/ngx-fancy-grid","version":"0.0.1","peerDependencies":{"@angular/common":"^13.0.0","@angular/core":"^13.0.0"},"dependencies":{"tslib":"^2.3.0"},"module":"fesm2015/alameer-ngx-fancy-grid.mjs","es2020":"fesm2020/alameer-ngx-fancy-grid.mjs","esm2020":"esm2020/alameer-ngx-fancy-grid.mjs","fesm2020":"fesm2020/alameer-ngx-fancy-grid.mjs","fesm2015":"fesm2015/alameer-ngx-fancy-grid.mjs","typings":"alameer-ngx-fancy-grid.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./alameer-ngx-fancy-grid.d.ts","esm2020":"./esm2020/alameer-ngx-fancy-grid.mjs","es2020":"./fesm2020/alameer-ngx-fancy-grid.mjs","es2015":"./fesm2015/alameer-ngx-fancy-grid.mjs","node":"./fesm2015/alameer-ngx-fancy-grid.mjs","default":"./fesm2020/alameer-ngx-fancy-grid.mjs"},"./src":{"types":"./src/alameer-ngx-fancy-grid-src.d.ts","esm2020":"./esm2020/src/alameer-ngx-fancy-grid-src.mjs","es2020":"./fesm2020/alameer-ngx-fancy-grid-src.mjs","es2015":"./fesm2015/alameer-ngx-fancy-grid-src.mjs","node":"./fesm2015/alameer-ngx-fancy-grid-src.mjs","default":"./fesm2020/alameer-ngx-fancy-grid-src.mjs"}},"sideEffects":false,"description":"This library based on a code design I found on [ColorLib](https://colorlib.com/etc/tb/Table_Fixed_Header/index.html), I found it very amazing and very fancy to be used in Angular application witgh an easy to use configurations.","_id":"@alameer/ngx-fancy-grid@0.0.1","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-pQbR8VBwTEALqzMx9fRa0/z82hXFZmavS9i6Go3gAlKpqIsH7oAy72ncom2ARD/A/bf6iWaa4Lho6CvLKJZSbA==","shasum":"25c572960c47d16cc44953f933d1ab8245efe0cb","tarball":"https://registry.npmjs.org/@alameer/ngx-fancy-grid/-/ngx-fancy-grid-0.0.1.tgz","fileCount":149,"unpackedSize":11829352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3L3KCRA9TVsSAnZWagAAkkMQAJA2/xkhlcut7TACrB0L\nc2kwBI+bp3lWVhsq3nTtiJQJ/yo71CFLG7E055pfhphukanauhIsCwZZEhyh\nl0DehwoX6RFAom1DlljhZsXQ/HNsRkdphw9ks7+DIj01ApoG80x2JICKo8Ue\nI5HQgImZ0ct/TL5h1UN5NsGTP5YPfG4V93G4jYEZx+6dRF8xgEH+zrZAqST0\n65xwSoyAJPoI6M7cLcOLyb+Jr5cF9zxDR9HvOT27a2pqlO1X5nfIgSJGU+71\n3VjpIfR2CH/TbEqFT70DoAzirHm6InshHWIxi52qeIK5QoCINItwkNh8Jbz0\nUVVnB4KxqSsbQMVELKHdCNg1KnPPVziHNPG3bgREpPIACZmkOy0I2dy8lYtQ\n2CQhnt73VoyOdJvb04eOZhYRia4aZhPY4QEpOaD/whAVw2kx+snwooIfxOB5\nacSIQzMOcvIF3qfJhFMabInttM2bLyWVCqfsm9oYo5Yeq0EfMeuADImjrJt7\naEdUFXuuNjvAntcxqHhucK5/UbuhqHVIP2rF8vXf5qnxYKh9Ar2cSq3s/Elh\nLDXx4S9cN0DltiSK9XXb2gl32qCG8DF6a/cHjSNwBVclFzpYZzSVCjRGQuZ0\naPGmJgRaf9D7B6prS5MYIpVLcseUoliewhEflSubGbTDQm2i0/o9mZL1BiD+\niENz\r\n=IFqQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPESE1iBc+CEL2aqtvmH4AqQ7u6n8PkCnvDm548aJGtgIhAP2R0iWSF6rS0JwaCkiBZ4clh/kW4W5fmV/nMUA06nMR"}]},"_npmUser":{"name":"alameer","email":"alamiir.ashraf@gmail.com"},"directories":{},"maintainers":[{"name":"alameer","email":"alamiir.ashraf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-fancy-grid_0.0.1_1641856458057_0.023314325973113892"},"_hasShrinkwrap":false},"0.0.2":{"name":"@alameer/ngx-fancy-grid","version":"0.0.2","peerDependencies":{"@angular/common":"^13.0.0","@angular/core":"^13.0.0"},"dependencies":{"tslib":"^2.3.0"},"repository":{"type":"git","url":"git+https://github.com/AlameerAshraf/ngx-fancy-grid.git"},"module":"fesm2015/alameer-ngx-fancy-grid.mjs","es2020":"fesm2020/alameer-ngx-fancy-grid.mjs","esm2020":"esm2020/alameer-ngx-fancy-grid.mjs","fesm2020":"fesm2020/alameer-ngx-fancy-grid.mjs","fesm2015":"fesm2015/alameer-ngx-fancy-grid.mjs","typings":"alameer-ngx-fancy-grid.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./alameer-ngx-fancy-grid.d.ts","esm2020":"./esm2020/alameer-ngx-fancy-grid.mjs","es2020":"./fesm2020/alameer-ngx-fancy-grid.mjs","es2015":"./fesm2015/alameer-ngx-fancy-grid.mjs","node":"./fesm2015/alameer-ngx-fancy-grid.mjs","default":"./fesm2020/alameer-ngx-fancy-grid.mjs"},"./src":{"types":"./src/alameer-ngx-fancy-grid-src.d.ts","esm2020":"./esm2020/src/alameer-ngx-fancy-grid-src.mjs","es2020":"./fesm2020/alameer-ngx-fancy-grid-src.mjs","es2015":"./fesm2015/alameer-ngx-fancy-grid-src.mjs","node":"./fesm2015/alameer-ngx-fancy-grid-src.mjs","default":"./fesm2020/alameer-ngx-fancy-grid-src.mjs"}},"sideEffects":false,"description":"This library based on a code design I found on [ColorLib](https://colorlib.com/etc/tb/Table_Fixed_Header/index.html), I found it very amazing and very fancy to be used in Angular application witgh an easy to use configurations.","bugs":{"url":"https://github.com/AlameerAshraf/ngx-fancy-grid/issues"},"homepage":"https://github.com/AlameerAshraf/ngx-fancy-grid#readme","_id":"@alameer/ngx-fancy-grid@0.0.2","_nodeVersion":"14.17.0","_npmVersion":"6.14.13","dist":{"integrity":"sha512-tLc/7d2ykqRIKdzVUaUDPrZuaJm5hwhVM7GL4k9/YpKdShfU0e5heKe+AX4rYREfW66oY3qwToBylZ7FAGZQ+A==","shasum":"997272581dd434de3f61918a29dd95ebe7d95c05","tarball":"https://registry.npmjs.org/@alameer/ngx-fancy-grid/-/ngx-fancy-grid-0.0.2.tgz","fileCount":149,"unpackedSize":11829456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3L8TCRA9TVsSAnZWagAA9PoQAJOioqhTwUZWT0belh0b\nZF5UIBYlq/Z7O9pQn6PDs/MFVEUJxIglsaXnyIVfNoUcm/646nTjdBC855Gz\neuFMYlnWTqo9ouj1P2YIM1CsnJGuv1XSWdUiuEOiDxmbBjMko04qeH6ujep/\n/3QG545dGChtNiITMG9HvRHOnk2RydJr1Or/YtGtXSOj0EtEI3G1x483Rmdf\npp+64tZWBxgmYzC3+znDYwgNM/ZGbcYrJwLEYV9YqXBiH0LxM5ZmFkg/Q0aw\nOUNp8FoyhC+Q9CVyJAhKzmwBb5H8XlF/KplQ8Pk8cWBlydP+hahsZ826L2Ch\n/KI1BVfMu1ZL57d86VNV6ESy8hJtHFy706UOkVY4o+u7tpXAOb+ITHYO2agE\n6KLFFEWN4YyLHc511FnWsGJpQO32ioK10CFfizUsA+WpZ08Ce0UZDkdosHz/\nUDK88zdEYnzWK3JX5TwtSiR1Em+oXg0lWK5Q/kVi5/StBGCmRYgzpFJbh4m7\nEh++lLiEUYxp/ot9HvCrLfrlwSEPmca5+3tywucp/rNTQbxI8tgMZJgFPXIL\nfksIgYU6XTKJhWv7YHAPBJyuue5G57bTkcCcB1y6VT4/dc7ni4eTdW/Nxm+v\nDhC2fHf7XGtS984awZ/t5GvEk2rwmU3NBuTxEbSUSNgUZr+6HVkqSG/XJoXh\nQGfQ\r\n=Gvn6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDySGQ0fiusri0XXy1JgfG5R19rpYVdIaYEQCqD36POoAIhAPykuXhmKMl12qFX4165f2ilAQJ+IDRvWTLzSfjzMEze"}]},"_npmUser":{"name":"alameer","email":"alamiir.ashraf@gmail.com"},"directories":{},"maintainers":[{"name":"alameer","email":"alamiir.ashraf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-fancy-grid_0.0.2_1641856787491_0.0955684113055566"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-10T23:14:18.019Z","0.0.1":"2022-01-10T23:14:18.383Z","modified":"2022-04-04T12:32:52.568Z","0.0.2":"2022-01-10T23:19:47.769Z"},"maintainers":[{"name":"alameer","email":"alamiir.ashraf@gmail.com"}],"description":"This library based on a code design I found on [ColorLib](https://colorlib.com/etc/tb/Table_Fixed_Header/index.html), I found it very amazing and very fancy to be used in Angular application witgh an easy to use configurations.","readme":"# @alameer/ngx-fancy-grid 🎉\n\nThis library based on a code design I found on [ColorLib](https://colorlib.com/etc/tb/Table_Fixed_Header/index.html), I found it very amazing and very fancy to be used in Angular application witgh an easy to use configurations.\n\n## Designs\n<a href=\"https://ibb.co/BHpJV2H\"><img src=\"https://i.ibb.co/wZkqNhZ/image.png\" alt=\"image\" border=\"0\"></a>\n\n\n`npm install @alameer/ngx-fancy-grid --save`\n\n## Styles and Scripts Configuration\n\nTo your `angular.json` add the following lines in the <strong> scripts section </strong>:\n\n```JavaScript\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/jquery/jquery-3.2.1.min.js\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/bootstrap/js/popper.min.js\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/bootstrap/js/bootstrap.min.js\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/perfect-scrollbar/perfect-scrollbar.min.js\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/js/main.js\"\n```\n\nand in the styles section add the following code: \n\n\n```JavaScript\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/bootstrap/css/bootstrap.min.css\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/animate/animate.css\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/vendor/perfect-scrollbar/perfect-scrollbar.css\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/css/main.css\",\n\"./node_modules/@alameer/ngx-fancy-grid/assets/css/util.css\"\n```\n\n\n## In your module\nimport `NgxFancyGridModule` in your module, in which the grid will be used.\n\n```JavaScript\nimport { NgxFancyGridModule  } from '@alameer/ngx-fancy-grid';\n```\n\n```JavaScript\nimports: [\n    BrowserModule,\n    NgxFancyGridModule\n],\n```\n\n## In your component - in .ts file\nSelect the design that you love, from set of an amazign designs as you will find here in [ColorLib](https://colorlib.com/etc/tb/Table_Fixed_Header/index.html).\n\n```JavaScript \n    design = \"Elegant\"; // Select one from this set: Elegant, Red, Blue, Hacker, Hover \n```\n\nTo identify the yoru grid headers you need to import the `NGXheader` model and create an arry of it, define the names of the grid headers and the width in %.\n\n\n```JavaScript\nimport { NGXheaders } from '@alameer/ngx-fancy-grid';\n\n\n gridHeaders : NGXheaders[] = [\n    {\n      name: \"Name\",\n      width: 25\n    },\n    {\n      name: \"National ID\",\n      width: 25\n    },\n    {\n      name: \"Salary\",\n      width: 25\n    },\n    {\n      name: \"Discount Val.\",\n      width: 25\n    }\n  ];\n``` \n\nThen create an array of data that will be presented in the grid, create your object with type `any[]`.\n\n> make sure that your objects attributes have the same name that you gave to your headers, because ngx-fancy-grid is using the attributes names to bind the data to the grid.\n\nThis is an example for the data:\n\n```JavaScript\n  data = [\n    {\n      \"Name\": \"Alameer Ashraf\",\n      \"National ID\" : \"2434344532323\",\n      \"Salary\" : \"2332\",\n      \"Discount\" : \"20%\"\n    },\n        {\n      \"Name\": \"Mayan Alameer Ashraf\",\n      \"National ID\" : \"23234657645\",\n      \"Salary\" : \"342213\",\n      \"Discount\" : \"20%\"\n    }\n  ];\n```\n\n> Mayan is my daughter, she is the perfect human that I've ever met 😍. \n\n## In your HTML file - .HTML \nIn your html code, use the ngx-fancy-grid as below:\n\n```HTML\n<ngx-fancy-grid [design]=\"design\" [headers]=\"gridHeaders\" [data]=\"data\"></ngx-fancy-grid>\n```\n\n\n> @alameer/ngx-fancy-grid development roadmap:\n> - [X] Dynamically bind data to the grid.\n> - [ ] Pagination \n> - [ ] Data Search.\n> - [ ] Data Export as HTML, PDF, EXCEL.\n> - [ ] New (4) grid designs.\n> - [ ] Sorting grid data. \n","readmeFilename":"README.md","homepage":"https://github.com/AlameerAshraf/ngx-fancy-grid#readme","repository":{"type":"git","url":"git+https://github.com/AlameerAshraf/ngx-fancy-grid.git"},"bugs":{"url":"https://github.com/AlameerAshraf/ngx-fancy-grid/issues"}}