{"_id":"k-datatable","_rev":"20-ad707132a1069f8e83bf5bdf84081d70","time":{"0.0.1":"2021-11-17T17:50:16.229Z","created":"2021-11-20T10:09:15.089Z","0.0.2":"2021-11-20T10:09:15.271Z","modified":"2022-05-07T02:35:15.359Z","0.0.3":"2021-11-20T10:36:28.203Z","0.0.4":"2021-11-20T11:33:14.450Z","0.0.5":"2021-11-20T11:39:27.848Z","0.0.6":"2021-11-20T12:07:46.781Z","0.0.9":"2021-11-20T14:09:40.162Z","1.0.0":"2021-11-20T14:17:20.980Z","1.0.1":"2021-11-20T15:01:17.725Z","1.0.2":"2021-11-22T18:39:34.949Z"},"name":"k-datatable","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.1":{"name":"k-datatable","version":"1.0.1","license":"MIT","description":"K-datatable is an Angular package that allows you to display your JSON data in an HTML table and edit, filter, sort or display it in many pages.","keywords":["datatable, table, data, pagination, filter, order"],"author":{"name":"ABBACI Khaled","email":"abbacikhaled@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/KPM-Libraries/k-datatable.git"},"peerDependencies":{"@angular/common":"~13.0.2","@angular/compiler":"~13.0.2"},"dependencies":{"tslib":"^2.1.0"},"module":"fesm2015/k-datatable.mjs","es2020":"fesm2020/k-datatable.mjs","esm2020":"esm2020/k-datatable.mjs","fesm2020":"fesm2020/k-datatable.mjs","fesm2015":"fesm2015/k-datatable.mjs","typings":"k-datatable.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./k-datatable.d.ts","esm2020":"./esm2020/k-datatable.mjs","es2020":"./fesm2020/k-datatable.mjs","es2015":"./fesm2015/k-datatable.mjs","node":"./fesm2015/k-datatable.mjs","default":"./fesm2020/k-datatable.mjs"}},"sideEffects":false,"bugs":{"url":"https://github.com/KPM-Libraries/k-datatable/issues"},"homepage":"https://github.com/KPM-Libraries/k-datatable#readme","_id":"k-datatable@1.0.1","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-/HHJT/9c6So+LrTErWQ4nAuhNaLma6hUnGQlrXosLQMTzk64WVeviCJrqlH+JWltVy4djr9ZubJ6/LTQOCYXjg==","shasum":"5b5e92e58849db5c6f40ee7c0d02b7b39ba82a71","tarball":"https://registry.npmjs.org/k-datatable/-/k-datatable-1.0.1.tgz","fileCount":16,"unpackedSize":306557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhmQ29CRA9TVsSAnZWagAACnsP/1qLjdT46qS8M3FujCQ0\nzbfEiVW1MXIC6HLI49r67XdPkArzEiD5YS4JgmsDxaEbrFcAOPsKxOKBvyFV\n5MUciw+RuxIZSWLeXrcpKJLTTtDNMDZQTpVsddpLsGZE3TVM/FuRirUxwJmI\ngIP5meBrbo7Roxyw74FqwDYzV/wzpGP2XJH1SLecWPbFcztOK8mKIhh6o4jQ\n3EE4d3E32L3Md5Ygxp1tF8hKW2+W3lTNBvtLZafZZADW19qfJuj4Z6uHCi+c\ncwMmdJpTIGZFQdtzcS/wzx26wyG/R0XmxpnQEQuagbJ0pgr4Nt9qtP0Z4/IF\nJkT12SboGn/u+ZPfe44sUQr3pTgrCUoDih0xQ4WP6J6Ocz0jnGA97q/Uq42p\nB/wKt3lixpyAL37ypZuFy2kgkDq3r8xgOo9mge45zKDovT1sPEwMXjpQ1glP\nYRW8CAUDv8+WkrXltOXfadlllYW6yEa1FRaDgN0cEZZJDxD6+CN+CX3fZ02e\nmBfTW02AW6u1SUtoJuoAZPxDpo2bpiXDFY/DAyeSig+X7NpousXmVjqXxzca\nGWjQAcPOmWmBAJ6e7I1z/hk8oKgDAb4so6CUwxXlGzrZ34Da7dal0G8RhNPY\nQuy1dx56fLa1gl6BFLWavZAOC6kqqR82kunRzcyjC/ywlPwUwLRiTzpP6qS+\nhdOi\r\n=Gatk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQokBxtR98aGDRFnSgrX5dUSt1MunkY795VpacoqaLkwIgNISSHR2eCh7y74OpNeRcnRYgOu04GLrG6PMp4h6K15A="}]},"_npmUser":{"name":"khaledabbaci","email":"abbacikhaled@gmail.com"},"directories":{},"maintainers":[{"name":"khaledabbaci","email":"abbacikhaled@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/k-datatable_1.0.1_1637420477548_0.35022615457942163"},"_hasShrinkwrap":false},"1.0.2":{"name":"k-datatable","version":"1.0.2","license":"MIT","description":"K-datatable is an Angular package that allows you to display your JSON data in an HTML table and edit, filter, sort or display it in many pages.","keywords":["datatable, table, data, pagination, filter, order"],"author":{"name":"ABBACI Khaled","email":"abbacikhaled@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/KPM-Libraries/k-datatable.git"},"peerDependencies":{"@angular/common":"~13.0.2","@angular/compiler":"~13.0.2"},"dependencies":{"tslib":"^2.1.0"},"module":"fesm2015/k-datatable.mjs","es2020":"fesm2020/k-datatable.mjs","esm2020":"esm2020/k-datatable.mjs","fesm2020":"fesm2020/k-datatable.mjs","fesm2015":"fesm2015/k-datatable.mjs","typings":"k-datatable.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./k-datatable.d.ts","esm2020":"./esm2020/k-datatable.mjs","es2020":"./fesm2020/k-datatable.mjs","es2015":"./fesm2015/k-datatable.mjs","node":"./fesm2015/k-datatable.mjs","default":"./fesm2020/k-datatable.mjs"}},"sideEffects":false,"bugs":{"url":"https://github.com/KPM-Libraries/k-datatable/issues"},"homepage":"https://github.com/KPM-Libraries/k-datatable#readme","_id":"k-datatable@1.0.2","_nodeVersion":"14.15.5","_npmVersion":"6.14.11","dist":{"integrity":"sha512-0pfP9LWBQvJe5fyAdnwylUaPanlp6UD1dZ7TSOpenPPRnpHzsheAEs3/6nObvjRDx32L7alOunjRyyN649HXaA==","shasum":"8d350423bba2b37c65363ba3c4bd52f485e58c20","tarball":"https://registry.npmjs.org/k-datatable/-/k-datatable-1.0.2.tgz","fileCount":16,"unpackedSize":306559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm+PmCRA9TVsSAnZWagAAEwoP+QAnJMwythwnnciUAVJj\nT/d4WANzHRw0clYXgs3KcqmgVbWaSEEJgsGBtwRNqpw+aFeuwDUaX9gS77Qy\nZn6r4btvDDkSoa2C6MV14Ge4Uja3UYOCcYcUG3Ce7sALhEHFwcSkUgFmSfWi\nIinaMPJbiLp18aoR5tUv75AAgwvwfIaCL0mFwgfVj13xx/BqAFkqfhhg/4gh\nZo4UC/fcuOIx84ITqKruUGuq0dkBjRXpAWIYkvUYihhz0r2IBbkfheBpOJcm\nshLqENkCCFgrq8RmEeP+aw/6kRfdj9fozQIMM3iBLfsJpqe1EnagBeionDz5\nWpEBZKmNQnk4k5vy2Z7oHO2YBiS6OKFx/nEqxPp+DUDRkZv5ocwIAlHhTIXR\nZRoh9IN02cPRVXAv2NheX9auY25Ky2vr9nmTVB/idTmI0ApGtrXxNhT6RYIO\nxq7JnHdI9EWvRK/AWZTsouUJY4lH1zdyDqdwx5lAAQXu7ol0K0XSjS3lmvig\nkHtFDy2IDI1CgTilWnPOve81PQQ3Pg9P1fhJwmkBA3bIfjAFzpTyEfqgf1s+\ntdXGZrYGq8hSX+HuUybU0VsG4Qth8iSatY58d96B6GAXXAw+tELZ/8w1NhPz\nCjwFtM2K3878wbo6m9keqxNJBz2LW9Ggpi8lBLz2TauOHdOypZsdP+hSoxro\nQkt+\r\n=+Vo7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwFhtYiWd4KA8DsPEvzYnXQKVlKiMO/uF8rC5LDKRmXgIhAPZ2D1Jmp1BYp7J/RfL8lKW4Qwr+hnbDPeyl5DTRzvon"}]},"_npmUser":{"name":"khaledabbaci","email":"abbacikhaled@gmail.com"},"directories":{},"maintainers":[{"name":"khaledabbaci","email":"abbacikhaled@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/k-datatable_1.0.2_1637606374744_0.29210946775892377"},"_hasShrinkwrap":false}},"maintainers":[{"name":"khaledabbaci","email":"abbacikhaled@gmail.com"}],"description":"K-datatable is an Angular package that allows you to display your JSON data in an HTML table and edit, filter, sort or display it in many pages.","homepage":"https://github.com/KPM-Libraries/k-datatable#readme","keywords":["datatable, table, data, pagination, filter, order"],"repository":{"type":"git","url":"git+https://github.com/KPM-Libraries/k-datatable.git"},"author":{"name":"ABBACI Khaled","email":"abbacikhaled@gmail.com"},"bugs":{"url":"https://github.com/KPM-Libraries/k-datatable/issues"},"readme":"# K-Datatable Angular Package\n\nK-datatable is an Angular package that allows you to display your JSON data in an HTML table and edit, filter, sort or display it in many pages.\n\n## Demo\n\n### Live preview\n\n<a href=\"https://k-datatabe.netlify.app/\" target=\"_blank\">Netlify</a>\n\n<img style=\"width: 100%;\" src=\"https://k-datatabe.netlify.app/assets/images/preview.gif\" />\n\n### GitHub demo source code\n\n<a href=\"https://github.com/AbbaciKhaled/K-Datatable-Demo\">Demo source code</a>\n\n## Install\n\nTo install this library with npm, run below command:\n\n`npm i k-datatable`\n\nThen import KDatatableModule module in your app.module.ts\n\n```ts\nimport { KDatatableModule } from 'k-datatable';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...\n    KDatatableModule,\n    ...\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\nSetup your component as below :\n\nFirst prepare your data in your component TS file\n\n```ts\nimport { Component, OnInit } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\n\nexport class AppComponent implements OnInit {\n  \n  // Your JSON data\n  jsonData = [\n    {\n        \"id\": \"619789b2fa489d7014d5c263\",\n        \"reference\": 829251,\n        \"name\": \"Stevenson Reid\",\n        \"createdAt\": \"Sat Nov 14 1987 10:55:59 GMT+0100 (UTC+01:00)\"\n    },\n    {\n        \"id\": \"619789b2e138b5f384b8277e\",\n        \"reference\": 694281,\n        \"name\": \"Banks Whitley\",\n        \"createdAt\": \"Sun Nov 15 1992 12:42:53 GMT+0100 (UTC+01:00)\"\n    },\n    {\n        \"id\": \"619789b2d5bdffbb30b1ef82\",\n        \"reference\": 884637,\n        \"name\": \"Carla Faulkner\",\n        \"createdAt\": \"Wed Feb 15 2012 14:27:52 GMT+0100 (UTC+01:00)\"\n    }\n  ]\n  \n  // Initialize data table data\n  data = {\n    addItem: true,\n    header: [\n      {\n        name: \"Reference\",\n        type: \"number\",\n        sort: true,\n        filter: false\n      },\n      {\n        name: \"Name\",\n        type: \"text\",\n        sort: false,\n        filter: true\n      },\n      {\n        name: \"Created at\",\n        type: \"date\",\n        sort: true,\n        filter: true\n      },\n      {\n        type: \"buttons\",\n        sort: false,\n        filter: false\n      }\n    ],\n    footer: [\"Reference\", \"Name\", \"Created at\", \"\"],\n    items: new Array()\n  }\n\n  constructor() { }\n\n  ngOnInit(): void {\n    // Initialize data table with your json data\n    for (let i of this.jsonData) {\n      this.data.items.push({\n        inputData: item,\n        data: [\n          {\n            content: item?.reference\n          },\n          {\n            content: item?.name\n          },\n          {\n            content: {\n              value: new Date(item?.createdAt).toLocaleDateString(\"en-En\"),\n              date: new Date(item?.createdAt)\n            }\n          },\n          {\n            content: [\n              {\n                title: \"Update\",\n                event: \"update\"\n              },\n              {\n                title: \"Delete\",\n                event: \"delete\"\n              }\n            ]\n          }\n        ]\n      })\n    }\n    \n  }\n  \n  // Declare your data table event function\n  event(event: any) {\n    switch (event?.name) {\n      case 'add':\n        //add a new item to your json object\n        break;\n      case 'update':\n        // update an item from your json object\n        // use event?.outputData to get item data\n        break;\n      case 'delete':\n        // delete an item from your json object\n        // use event?.outputData to get item data\n        break;\n    }\n  }\n\n}\n```\n\nThen add ```<k-datatable>``` component to your component HTML file\n  \n```html\n<k-datatable [data]=\"data\" (event)=\"event($event)\"></k-datatable>\n```\n\n## Options\n\n### Data options\n\nOption | Description | Values | Default value\n--- | --- | --- | ---\ntranslation | Text fields translation | See the 'translation' section | { }\nstyle | CSS style of table |  See the 'style' section | { }\nview | Showed items options |  See the 'view' section | { }\naddItem | Add items option | Boolean | false\nheader | Table header options | See the 'header' section | [ ]\nfooter | Name of columns in table footer | Array of String | [ ]\nitems | Table rows | Array of item options (see the 'items' section) | [ ]\n\n#### translation\n\nOption | Description | Values | Default value\n--- | --- | --- | ---\nadd | Add button title | String | Add\nfilter | Filter button title | String | Filter\nallItems | All items select option text | String | All\ntotalItems | Total number of items text | String | Total items\nshow | Show items select field text | String | Show\n\n\n#### style\n\nOption | Description | Values | Default value\n--- | --- | --- | ---\nwidth | Table width | Number (pixels) or 'full' (100%) | auto\nheight | Table width | Number (pixels) or 'full' (100vh) | auto\noverflowX | Horizontal overflow | String (CSS overflow options) | auto\noverflowY | Vertical overflow | String (CSS overflow options) | auto\nstickyHeader | Header sticky position | Boolean | false\nstickyFooter | Footer sticky position | Boolean | false\ntextAlign | Text alignment | String (CSS text-align options) | left\n\n#### view\n\nOption | Description | Values | Default value\n--- | --- | --- | ---\nitemsPerPage | Number of showed items per page | Number | 10\nshowedItems | Number of showed items per page select options | Array of Number | [10, 20, 30, 50, 100]\n\n### Header options\nOption | Description | Values | Default value\n--- | --- | --- | ---\nname | Name of column | String | Empty\ntype | Type of column data | Enumerate | ['number', 'text', 'bold', 'badge', 'date', 'email', 'link', 'progress', 'image', 'buttons', 'mini-buttons']\nfilter | Apply filter in column | Boolean | false\nsort | Sort data by column data | Boolean | false\nwidth | Column width | Number (pixels) | auto\n\n### Items options\nOption | Description | Values\n--- | --- | ---\ninputData | Input data that will be retrieved in variable outputData when an event is triggered from data table. | Any\ndata | Data table rows data | Array of item (see the 'item' json object section)\ncondition | Row display condition | String (Value instance example : \"columns[0].content != 'Lorum'\")\n\n#### item\n\n```ts\n// for number, text, bold, badge, email or progress column type\n{ \n  content: string, // Cell value\n  styleClass: string, // Your CSS class or K-Datatable CSS class,\n  condition: string // Column display condition (Value instance example : \"columns[0].content != 'Lorum'\")\n}\n\n// for date column type\n{\n  content: {\n    value: string, // Displayed value of the date\n    date: Date // Date value\n  },\n  styleClass: string,\n  condition: string\n}\n\n// for link column type\n{\n  content: {\n    value: string, // Displayed value of the link\n    url: Date // url value\n  },\n  styleClass: string,\n  condition: string\n}\n\n// for image column type\n{\n  content: {\n    src: string, // Url of the image\n    width: number, // Image width (pixels)\n    height: number, // Image height (pixels)\n    alt: string, // Image alternative attribute\n  },\n  styleClass: string,\n  condition: string\n}\n\n// for buttons or mini-buttons column type\n{\n  content: [\n    {\n      title: string, // Button title\n      event: string, // Name of the event that will be triggered by clicking on the button\n      styleClass: string\n    }\n  ],\n  condition: string\n}\n```\n\n## CSS classes\n\nClass | Description\n--- | ---\nk-color-colorValue | Color\nk-bg-colorValue | Background color\nk-border-colorValue | Border color\n\n### Color values\n\n- ![#007495](https://via.placeholder.com/15/007495/000000?text=+) primary \n- ![#18cb81](https://via.placeholder.com/15/18cb81/000000?text=+) success\n- ![#f3cb12](https://via.placeholder.com/15/f3cb12/000000?text=+) warning\n- ![#cc3f52](https://via.placeholder.com/15/cc3f52/000000?text=+) danger\n- ![#1a3c55](https://via.placeholder.com/15/1a3c55/000000?text=+) dark\n- ![#dae8f5](https://via.placeholder.com/15/dae8f5/000000?text=+) light\n\n## Custom CSS classes\n\nYou can define your own CSS classes and use them in the styleClass parameter. In some cases custom classes require the use of ` ::ng-deep ` and ` !important ` options.\n\n## GitHub Page\n\n<a href=\"https://github.com/KPM-Libraries/k-datatable\" target=\"_blank\">GitHub</a>","readmeFilename":"README.md","license":"MIT"}