{"_id":"@aabegg/table","_rev":"2-946ba1938ad029485987ff7cba45384f","name":"@aabegg/table","description":"Tabellenkomponenten und Services","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aabegg/table","version":"1.0.0","description":"Tabellenkomponenten und Services","main":"build/index.js","scripts":{"scss":"node-sass src/ --output-style compressed -o tmp/ |:","ngc":"ngc","replaceLinks":"sed -i -- 's/.scss/.css/g' tmp/*.ts","inline":"npm run scss & npm run replaceLinks && ng2-inline -o tmp/ -f -c -b tmp/ tmp/**/*","build":"npm install && npm run cleanBefore && npm run copyTmp && npm run inline && npm run ngc && npm run copyGlobal && npm run cleanAfter","copyTmp":"mkdir -p tmp && cp src/* tmp/","copyGlobal":"cp src/*.global.scss build/ |:","cleanBefore":"rm -rf build/","cleanAfter":"rm -rf tmp/ & rm -rf node_modules/@angular |:","test":"echo \"Error: no test specified\" && exit 1"},"types":"build/index.d.ts","author":{"name":"apmatic GmbH"},"license":"ISC","dependencies":{"@angular/core":"4.0.0-rc.2","@angular/animations":"4.0.0-rc.2","@aabegg/broadcaster":"1.0.4","@aabegg/auth-http":"1.0.0","rxjs":"5.2.0","@ngrx/core":"1.2.0","@ngrx/store":"2.2.1"},"devDependencies":{"@angular/compiler":"4.0.0-rc.2","@angular/compiler-cli":"4.0.0-rc.2","@angular/platform-server":"4.0.0-rc.2","typescript":"2.2.1"},"_id":"@aabegg/table@1.0.0","_shasum":"8eda60d06f6170b6326aadceab93cc5a58bf1e38","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.7.1","_npmUser":{"name":"aabegg","email":"andreas.abegg@apmatic.ch"},"dist":{"shasum":"8eda60d06f6170b6326aadceab93cc5a58bf1e38","tarball":"https://registry.npmjs.org/@aabegg/table/-/table-1.0.0.tgz","integrity":"sha512-YEcx3cCRfM5QFdEtmJ3tP2q2awbaEJfulhxMPRS8w6Y+QDzsHNX48UOPog4jg4cCIUW7+rAh9dUaw4OoNoU5sg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+agFmHT7wm/78/Mi9beKlwfE57qMLrg8c2nN1P4k+AAiEAjdkIhA41SklyVIDe9cDE6MAGbEtaYuE8Tp2oEroYYts="}]},"maintainers":[{"name":"aabegg","email":"andreas.abegg@apmatic.ch"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/table-1.0.0.tgz_1489398956587_0.9310803543776274"}}},"readme":"## Installation\n\n```sh\nnpm install @aabegg/table\n```\n---\n\n## TableSettings\n\nDer `TableSettingsService` muss im AppModule eingebunden werden.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { TableSettingsService } from '@aabegg/table';\n\n@NgModule({\n declarations: [],\n imports: [],\n providers: [TableSettingsService]\n})\nexport class AppModule { }\n```\n\n##### Funktionen\n- **clickhandler** (Einstellung für den Context-Clickhandler - click oder contextmenu)\n- **init(Array)** (Setzt die Standard-Werte der Tabellen - Benutzer unabhängig)\n- **update(Array)** (Aktuallisiert die Werte)\n\n\n\n## Table\nDas `TableModule` muss im AppModule (MainModule) eingebunden werden.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { TableModule } from '@aabegg/table';\n\n@NgModule({\n declarations: [],\n imports: [TableModule],\n providers: []\n})\nexport class AppModule { }\n```\n\nFolgende Directiven stehen danach zur Verfügung:\n- **NgTableFor**\n- **TableFilterSelect**\n- **TableFilterInput**\n- **TableSort**\n- **TableContextComponent**\n\n#### NgTableFor\n\nDie `NgTableFor` Direktive wird fast identisch angewandt wie die normale `ngFor` Direktive.\n\n```html\n\n \n \n \n \n \n \n
{{employee.name}}{{employee.firstname}}
\n```\n\n`NgForTable` hat folgende Attribute:\n- **rowHeight** (Die ausgewählte Zeilenhöhe - 43, 55, 80)\n- **context** (Die Referenz zum Context-Menu)\n\n\n#### TableContext\n\nDer `table-context` Komponent ist wie folgt aufgebaut:\n\n```html\n\n \n\n \n \n \n\n```\n\nDas aktive Menu hat immer Zugriff auf die context-Variable. Diese entspricht immer dem angeklickten Item.\n\n\n#### Sortierung\n\nFür die Sortierung einer Spalte müssen zwei Attribut-Direktiven angewandt werden:\n- **sortField=\"name\"** (Entspricht dem Namen des Feldes in der Datenbank)\n- **sortTable=\"demotable\"** (Entspricht dem Name der zu sortierenden Tabelle)\n\nDiese Direktiven können an ein `th`-Tag der Überschrift angebracht werden.\n\nBeispiel:\n```html\nName\n```\n \n \n#### Filterung Input\n\nFür die Filterung einer Spalte müssen zwei Attribut-Direktiven angewandt werden:\n- **filterInput=\"name\"** (Entspricht dem Namen des Feldes in der Datenbank)\n- **filterTable=\"demotable\"** (Entspricht dem Name der zu sortierenden Tabelle)\n\nDiese Direktiven können an ein `input` angebracht werden.\n\nBeispiel:\n```html\n\n```\n\n\n#### Filterung Select\n\nFür die Filterung einer Spalte mit einem Select-Menü, müssen drei Attribut-Direktiven angewandt werden:\n- **filterSelect=\"department\"** (Entspricht dem Namen des Feldes in der Datenbank)\n- **filterTable=\"demotable\"** (Entspricht dem Name der zu sortierenden Tabelle)\n- **(FilterSaved)=\"savedDepartment = $event\"** (Wird ausgelöst wenn ein gefilterter Wert zuvor in den Tabelleneinstellungen gespeichert wurde)\n\nBeispiel:\n```html\n\n \n Alle\n Administration\n Verkauf\n Entwicklung\n \n\n```\n\n\n\n\n\n---\n\n## Versionen\n\n### 1.0.0\n- Initiale Version\n","maintainers":[{"name":"aabegg","email":"andreas.abegg@apmatic.ch"}],"time":{"modified":"2022-06-12T14:13:26.651Z","created":"2017-03-13T09:55:57.153Z","1.0.0":"2017-03-13T09:55:57.153Z"},"author":{"name":"apmatic GmbH"},"license":"ISC","readmeFilename":"README.md"}