├── src ├── assets │ └── .gitkeep ├── favicon.ico ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── app │ ├── app.component.css │ ├── app.component.spec.ts │ ├── app.module.ts │ ├── app.component.html │ └── app.component.ts ├── tsconfig.app.json ├── styles.css ├── index.html ├── tsconfig.spec.json ├── tslint.json ├── browserslist ├── main.ts ├── test.ts ├── karma.conf.js └── polyfills.ts ├── .vscode └── settings.json ├── tips.txt ├── projects └── ngx-magic-table │ ├── src │ ├── lib │ │ ├── ngx-column-template │ │ │ ├── ngx-column-template.component.css │ │ │ ├── ngx-column-template.component.html │ │ │ └── ngx-column-template.component.ts │ │ ├── models │ │ │ ├── enum.ts │ │ │ ├── Paging-input.ts │ │ │ ├── cells-info.ts │ │ │ ├── sort-input.ts │ │ │ ├── interface.ts │ │ │ ├── boolean-filter.ts │ │ │ ├── enum-filter.ts │ │ │ ├── numeric-filter.ts │ │ │ ├── string-filter.ts │ │ │ ├── header-item.ts │ │ │ ├── header-cell.ts │ │ │ └── multiselect.model.ts │ │ ├── ngx-enum-filter │ │ │ ├── ngx-enum-filter.component.css │ │ │ ├── ngx-enum-filter.component.html │ │ │ └── ngx-enum-filter.component.ts │ │ ├── ngx-boolean-filter │ │ │ ├── ngx-boolean-filter.component.css │ │ │ ├── ngx-boolean-filter.component.html │ │ │ └── ngx-boolean-filter.component.ts │ │ ├── ngx-numeric-filter │ │ │ ├── ngx-numeric-filter.component.css │ │ │ ├── ngx-numeric-filter.component.html │ │ │ └── ngx-numeric-filter.component.ts │ │ ├── ngx-string-filter │ │ │ ├── ngx-string-filter.component.css │ │ │ ├── ngx-string-filter.component.html │ │ │ └── ngx-string-filter.component.ts │ │ ├── sort │ │ │ ├── sort.pipe.spec.ts │ │ │ └── sort.pipe.ts │ │ ├── pipe │ │ │ └── reverse-array.ts │ │ ├── ngx-named-template │ │ │ ├── ngx-named-template.directive.spec.ts │ │ │ └── ngx-named-template.directive.ts │ │ ├── ngx-multiselect-dropdown │ │ │ ├── list-filter.pipe.ts │ │ │ ├── click-outside.directive.ts │ │ │ ├── ngx-multiselect-dropdown.component.html │ │ │ ├── ngx-multiselect-dropdown.component.scss │ │ │ └── ngx-multiselect-dropdown.component.ts │ │ ├── ngx-magic-table │ │ │ ├── ngx-magic-table-change.directive.ts │ │ │ ├── ngx-direction-column.directive.ts │ │ │ ├── ngx-magic-table.component.css │ │ │ ├── ngx-magic-table.component.html │ │ │ └── ngx-magic-table.component.ts │ │ ├── ngx-magic-table.module.ts │ │ └── README.md │ ├── public_api.ts │ └── test.ts │ ├── ng-package.prod.json │ ├── ng-package.json │ ├── tsconfig.spec.json │ ├── tslint.json │ ├── tsconfig.lib.json │ ├── package.json │ ├── karma.conf.js │ └── README.md ├── .angulardoc.json ├── e2e ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts ├── tsconfig.e2e.json └── protractor.conf.js ├── .editorconfig ├── .github └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── tsconfig.json ├── .travis.yml ├── .gitignore ├── LICENSE ├── package.json ├── CODE_OF_CONDUCT.md ├── tslint.json ├── angular.json └── README.md /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /tips.txt: -------------------------------------------------------------------------------- 1 | --registry=https://registry.npmjs.org/ 2 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-column-template/ngx-column-template.component.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-column-template/ngx-column-template.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/noushmac/ngx-magic-table/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /.angulardoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "repoId": "332ef181-f5ea-48f9-83e2-0c5a4716424e", 3 | "lastSync": 0 4 | } -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/enum.ts: -------------------------------------------------------------------------------- 1 | export enum OrderDirection { 2 | Unspecified = -1, 3 | Ascending = 0, 4 | Descending = 1, 5 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/Paging-input.ts: -------------------------------------------------------------------------------- 1 | import { IPagingInput } from './interface'; 2 | export class PagingInput implements IPagingInput { 3 | page: number; 4 | pageSize: number; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .rowClass1 { 2 | background-color: green; 3 | } 4 | 5 | .rowClass2 { 6 | background-color: bisque; 7 | } 8 | 9 | .rowClass2 td { 10 | border:1px solid gray !important; 11 | } 12 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/ng-package.prod.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-magic-table", 4 | "lib": { 5 | "entryFile": "src/public_api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-enum-filter/ngx-enum-filter.component.css: -------------------------------------------------------------------------------- 1 | .input-group { 2 | width: 300px; 3 | } 4 | .input-group-addon { 5 | display: inline-flex; 6 | } 7 | .form-control { 8 | display: inline-flex; 9 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-boolean-filter/ngx-boolean-filter.component.css: -------------------------------------------------------------------------------- 1 | .input-group { 2 | width: 300px; 3 | } 4 | .input-group-addon { 5 | display: inline-flex; 6 | } 7 | .form-control { 8 | display: inline-flex; 9 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-numeric-filter/ngx-numeric-filter.component.css: -------------------------------------------------------------------------------- 1 | .input-group { 2 | width: 300px; 3 | } 4 | .input-group-addon { 5 | display: inline-flex; 6 | } 7 | .form-control { 8 | display: inline-flex; 9 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-string-filter/ngx-string-filter.component.css: -------------------------------------------------------------------------------- 1 | .input-group { 2 | width: 300px; 3 | } 4 | .input-group-addon { 5 | display: inline-flex; 6 | } 7 | .form-control { 8 | display: inline-flex; 9 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ngx-magic-table", 4 | "deleteDestPath": false, 5 | "lib": { 6 | "entryFile": "src/public_api.ts" 7 | } 8 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/cells-info.ts: -------------------------------------------------------------------------------- 1 | export class CellsInfo { 2 | index: number; 3 | name: string; 4 | cellWidth: number; 5 | draggble: boolean; 6 | sortable: boolean; 7 | parent: string; 8 | visible: boolean; 9 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/sort-input.ts: -------------------------------------------------------------------------------- 1 | import { ISortInput } from './interface'; 2 | import {OrderDirection} from './enum'; 3 | 4 | export class SortInput implements ISortInput { 5 | sort: string; 6 | direction: OrderDirection; 7 | 8 | } 9 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/sort/sort.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { SortPipe } from './sort.pipe'; 2 | 3 | describe('SortPipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new SortPipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "types": [] 7 | }, 8 | "exclude": [ 9 | "src/test.ts", 10 | "**/*.spec.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/interface.ts: -------------------------------------------------------------------------------- 1 | import {OrderDirection} from './enum'; 2 | export interface IPagingInput { 3 | page: number; 4 | pageSize: number; 5 | } 6 | 7 | export interface ISortInput { 8 | sort: string; 9 | direction: OrderDirection; 10 | } 11 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/pipe/reverse-array.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ name: 'reverse' }) 4 | 5 | export class ReverseArray implements PipeTransform { 6 | transform(value) { 7 | return value.slice().reverse(); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | .rowClass1 { 3 | background-color: green !important; 4 | } 5 | 6 | .rowClass2 { 7 | background-color: bisque !important; 8 | } 9 | 10 | .rowClass2 td { 11 | border:1px solid gray !important; 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/boolean-filter.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export namespace BooleanFilter { 4 | 5 | export enum filters { 6 | equals = 'equals', 7 | } 8 | export function values() { 9 | return Object.keys(filters).filter( 10 | (type) => isNaN(type) && type !== 'values' 11 | ); 12 | } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | }); 12 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgxMagic 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-named-template/ngx-named-template.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { NamedTemplateDirective } from './ngx-named-template.directive'; 2 | 3 | describe('NamedTemplateDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new NamedTemplateDirective('test name', null); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to ngx-magic!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts", 13 | "polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/enum-filter.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export namespace EnumFilter { 4 | 5 | export enum filters { 6 | equals = 'equals', 7 | notEquals = 'not equals', 8 | } 9 | export function values() { 10 | return Object.keys(filters).filter( 11 | (type) => isNaN(type) && type !== 'values' 12 | ); 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-named-template/ngx-named-template.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Attribute, Inject, TemplateRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | 5 | selector: 'ng-template[name]' 6 | }) 7 | export class NamedTemplateDirective { 8 | 9 | constructor( 10 | @Attribute('name') public name, 11 | @Inject(TemplateRef) public template: TemplateRef 12 | ) { 13 | } 14 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/public_api.ts: -------------------------------------------------------------------------------- 1 | import { from } from 'rxjs'; 2 | 3 | /* 4 | * Public API Surface of ngx-magic-table 5 | */ 6 | 7 | export * from './lib/ngx-magic-table/ngx-magic-table.component'; 8 | export * from './lib/ngx-column-template/ngx-column-template.component'; 9 | export * from './lib/ngx-magic-table.module'; 10 | export * from './lib/models/cells-info'; 11 | export * from './lib/models/interface'; 12 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "lib", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "lib", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/numeric-filter.ts: -------------------------------------------------------------------------------- 1 | export namespace NumericFilter { 2 | 3 | export enum filters { 4 | equals = 'equals', 5 | notEquals = 'not equals', 6 | greaterThan = 'greater than', 7 | notGreaterThan = 'not greater than', 8 | smallerThan = 'smaller than', 9 | notSmallerThan = 'not smaller than' 10 | 11 | } 12 | export function values() { 13 | return Object.keys(filters).filter( 14 | (type) => isNaN(type) && type !== 'values' 15 | ); 16 | } 17 | } 18 | 19 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-boolean-filter/ngx-boolean-filter.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 7 |
8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 4 | import { AppComponent } from './app.component'; 5 | import { NgxMagicTableModule } from 'projects/ngx-magic-table/src/public_api'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent], 10 | imports: [ 11 | BrowserModule, 12 | NgxMagicTableModule, 13 | NgbModule.forRoot() 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent], 17 | exports: [ 18 | ] 19 | }) 20 | export class AppModule { } 21 | 22 | 23 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/string-filter.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | export namespace StringFilter { 4 | 5 | export enum filters { 6 | equals = 'equals', 7 | notEquals = 'not equals', 8 | startsWith = 'starts with', 9 | notStartsWith = 'not starts with', 10 | endsWith = 'ends with', 11 | notEndsWith = 'not ends with', 12 | contains = 'contains', 13 | notContains = 'not contains' 14 | 15 | } 16 | export function values() { 17 | return Object.keys(filters).filter( 18 | (type) => isNaN(type) && type !== 'values' 19 | ); 20 | } 21 | } 22 | 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2017", 17 | "dom" 18 | ], 19 | "paths": { 20 | "ngx-magic-table": [ 21 | "dist/ngx-magic-table" 22 | ], 23 | "ngx-magic-table/*": [ 24 | "dist/ngx-magic-table/*" 25 | ] 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | dist: trusty 4 | node_js: 5 | - 'node' 6 | 7 | addons: 8 | code_climate: 9 | repo_token: 8b2790e99fb9db4d56209c72af8f1087062b5eea27ee63c1056179d4c9e4f38d 10 | chrome: stable 11 | 12 | before_install: 13 | - export CHROME_BIN=chromium-browser 14 | - export DISPLAY=:99.0 15 | - sh -e /etc/init.d/xvfb start 16 | 17 | install: 18 | - npm install 19 | - npm install codeclimate-test-reporter 20 | 21 | before_script: 22 | - "sudo chown root /opt/google/chrome/chrome-sandbox" 23 | - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox" 24 | 25 | after_script: 26 | - codeclimate-test-reporter < coverage/lcov.info 27 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | /.vs 41 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * In development mode, to ignore zone related error stack frames such as 11 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 12 | * import the following file, but please comment it out in production mode 13 | * because it will have performance impact when throw error 14 | */ 15 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 16 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/header-item.ts: -------------------------------------------------------------------------------- 1 | import { NgxColumnTemplateComponent } from '../ngx-column-template/ngx-column-template.component'; 2 | 3 | export class HeaderItem { 4 | public Width: number; 5 | public Visible: boolean; 6 | public Name: string; 7 | public Title: string; 8 | public Index: number; 9 | public Childs: HeaderItem[]; 10 | public Sortable: boolean; 11 | public Template: NgxColumnTemplateComponent; 12 | public constructor(init?: Partial) { 13 | Object.assign(this, init); 14 | this.Title = ''; 15 | this.Index = 0; 16 | this.Sortable = true; 17 | this.Width = 100; 18 | this.Visible = true; 19 | this.Childs = new Array(); 20 | 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'core-js/es7/reflect'; 4 | import 'zone.js/dist/zone'; 5 | import 'zone.js/dist/zone-testing'; 6 | import { getTestBed } from '@angular/core/testing'; 7 | import { 8 | BrowserDynamicTestingModule, 9 | platformBrowserDynamicTesting 10 | } from '@angular/platform-browser-dynamic/testing'; 11 | 12 | declare const require: any; 13 | 14 | // First, initialize the Angular testing environment. 15 | getTestBed().initTestEnvironment( 16 | BrowserDynamicTestingModule, 17 | platformBrowserDynamicTesting() 18 | ); 19 | // Then we find all the tests. 20 | const context = require.context('./', true, /\.spec\.ts$/); 21 | // And load the modules. 22 | context.keys().map(context); 23 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/header-cell.ts: -------------------------------------------------------------------------------- 1 | import { NgxColumnTemplateComponent } from '../ngx-column-template/ngx-column-template.component'; 2 | import { HeaderItem } from './header-item'; 3 | 4 | export class HeaderCell { 5 | public cellWidth: number; 6 | public visible: boolean; 7 | public name: string; 8 | public title: string; 9 | public index: number; 10 | public colSpan: number; 11 | public rowSpan: number; 12 | public sortable: any; 13 | public template: NgxColumnTemplateComponent; 14 | public HeaderItem: HeaderItem; 15 | public constructor(init?: Partial) { 16 | Object.assign(this, init); 17 | this.title = ''; 18 | this.index = 0; 19 | this.colSpan = 1; 20 | this.rowSpan = 1; 21 | this.sortable = true; 22 | this.visible = true; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-multiselect-dropdown/list-filter.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { ListItemDropdown } from '../models/multiselect.model'; 3 | 4 | 5 | @Pipe({ 6 | name: 'ng2ListFilter', 7 | pure: false 8 | }) 9 | export class ListFilterPipe implements PipeTransform { 10 | transform(items: ListItemDropdown[], filter: ListItemDropdown): ListItemDropdown[] { 11 | if (!items || !filter) { 12 | return items; 13 | } 14 | return items.filter((item: ListItemDropdown) => this.applyFilter(item, filter)); 15 | } 16 | 17 | applyFilter(item: ListItemDropdown, filter: ListItemDropdown): boolean { 18 | return !(filter.text && item.text && item.text.toLowerCase().indexOf(filter.text.toLowerCase()) === -1); 19 | } 20 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-numeric-filter/ngx-numeric-filter.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 6 | 7 | 10 |
11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-string-filter/ngx-string-filter.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 6 | 7 | 10 |
11 | 12 | 15 | 16 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-multiselect-dropdown/click-outside.directive.ts: -------------------------------------------------------------------------------- 1 | import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[clickOutside]' 5 | }) 6 | export class ClickOutsideDirective { 7 | constructor(private _elementRef: ElementRef) { 8 | } 9 | 10 | @Output() 11 | public clickOutside = new EventEmitter(); 12 | 13 | @HostListener('document:click', ['$event', '$event.target']) 14 | public onClick(event: MouseEvent, targetElement: HTMLElement): void { 15 | if (!targetElement) { 16 | return; 17 | } 18 | 19 | const clickedInside = this._elementRef.nativeElement.contains(targetElement); 20 | if (!clickedInside) { 21 | this.clickOutside.emit(event); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /projects/ngx-magic-table/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../out-tsc/lib", 5 | "target": "es2015", 6 | "module": "es2015", 7 | "moduleResolution": "node", 8 | "declaration": true, 9 | "sourceMap": true, 10 | "inlineSources": true, 11 | "emitDecoratorMetadata": true, 12 | "experimentalDecorators": true, 13 | "importHelpers": true, 14 | "types": [], 15 | "lib": [ 16 | "dom", 17 | "es2015" 18 | ] 19 | }, 20 | "angularCompilerOptions": { 21 | "annotateForClosureCompiler": true, 22 | "skipTemplateCodegen": true, 23 | "strictMetadataEmit": true, 24 | "fullTemplateTypeCheck": true, 25 | "strictInjectionParameters": true, 26 | "flatModuleId": "AUTOGENERATED", 27 | "flatModuleOutFile": "AUTOGENERATED" 28 | }, 29 | "exclude": [ 30 | "src/test.ts", 31 | "**/*.spec.ts" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-enum-filter/ngx-enum-filter.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 6 | 9 | 12 |
13 | 14 | 17 | 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 1. Go to '...' 13 | 2. Click on '....' 14 | 3. Scroll down to '....' 15 | 4. See error 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Desktop (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Smartphone (please complete the following information):** 29 | - Device: [e.g. iPhone6] 30 | - OS: [e.g. iOS8.1] 31 | - Browser [e.g. stock browser, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-magic-table/ngx-magic-table-change.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, EventEmitter, OnDestroy, Output } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[domChange]' 5 | }) 6 | export class DomChangeDirective implements OnDestroy { 7 | private changes: MutationObserver; 8 | 9 | 10 | @Output() 11 | public domChange = new EventEmitter(); 12 | 13 | constructor(private elementRef: ElementRef) { 14 | const element = this.elementRef.nativeElement; 15 | 16 | this.changes = new MutationObserver((mutations: MutationRecord[]) => { 17 | // mutations.forEach((mutation: MutationRecord) => this.domChange.emit(mutation)); 18 | this.domChange.emit(this.elementRef); 19 | } 20 | 21 | ); 22 | 23 | this.changes.observe(element, { 24 | attributes: true, 25 | childList: true, 26 | characterData: true, 27 | 28 | attributeOldValue: true 29 | 30 | }); 31 | } 32 | 33 | ngOnDestroy(): void { 34 | this.changes.disconnect(); 35 | } 36 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-magic-table", 3 | "author": "rezakhan", 4 | "version": "1.0.17", 5 | "keywords": [ 6 | "angular", 7 | "datatable", 8 | "template", 9 | "angular 6", 10 | "sort", 11 | "smart table" 12 | ], 13 | "private": false, 14 | "description": "Angular 6 smart Datatable, provides sort, arrange column, custom header and cells templating, grouping columns", 15 | "license": "MIT", 16 | "peerDependencies": { 17 | "@angular/common": "^6.0.0-rc.0 || ^6.0.0", 18 | "@angular/core": "^6.0.0-rc.0 || ^6.0.0", 19 | "ngx-pagination": "^3.1.1", 20 | "angular-uid": "^0.1.1" 21 | }, 22 | "repository": { 23 | "type": "git", 24 | "url": "git+https://github.com/noushmac/ngx-magic-table.git" 25 | }, 26 | "bugs": { 27 | "url": "https://github.com/noushmac/ngx-magic-table/issues" 28 | }, 29 | "homepage": "https://github.com/noushmac/ngx-magic-table#readme", 30 | "main": "karma.conf.js", 31 | "scripts": { 32 | "test": "echo \"Error: no test specified\" && exit 1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-magic-table/ngx-direction-column.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, Input, Renderer2, ElementRef } from '@angular/core'; 2 | import {OrderDirection} from './../models/enum'; 3 | 4 | 5 | @Directive({ 6 | selector: '[setDirection]' 7 | }) 8 | export class DirectionDirective { 9 | constructor(private renderer: Renderer2, private el: ElementRef) { } 10 | _direction: number; 11 | @Input('setDirection') 12 | set direction(direction: number) { 13 | this._direction = direction; 14 | this.renderer.removeClass(this.el.nativeElement, 'ion-arrow-down-b'); 15 | this.renderer.removeClass(this.el.nativeElement, 'ion-arrow-up-b'); 16 | if (this._direction != null) { 17 | if (this._direction === OrderDirection.Descending) { 18 | this.renderer.addClass(this.el.nativeElement, 'ion-arrow-up-b'); 19 | } 20 | if (this._direction === OrderDirection.Ascending) { 21 | this.renderer.addClass(this.el.nativeElement, 'ion-arrow-down-b'); 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; 32 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/models/multiselect.model.ts: -------------------------------------------------------------------------------- 1 | export class ListItemDropdown { 2 | id: String; 3 | text: String; 4 | parent: String; 5 | public constructor(source: any) { 6 | if (typeof source === 'string') { 7 | this.id = this.text = source; 8 | this.parent=''; 9 | } 10 | if (typeof source === 'object') { 11 | this.id = source.id; 12 | this.text = source.text; 13 | this.parent=source.parent; 14 | } 15 | } 16 | } 17 | 18 | export interface IDropdownSettings { 19 | singleSelection?: boolean; 20 | idField?: string; 21 | textField?: string; 22 | parentField?: string; 23 | enableCheckAll?: boolean; 24 | selectAllText?: string; 25 | unSelectAllText?: string; 26 | allowSearchFilter?: boolean; 27 | clearSearchFilter?: boolean; 28 | maxHeight?: number; 29 | itemsShowLimit?: number; 30 | limitSelection?: number; 31 | searchPlaceholderText?: string; 32 | noDataAvailablePlaceholderText?: string; 33 | closeDropDownOnSelection?: boolean; 34 | showSelectedItemsAtTop?: boolean; 35 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Muhammad Vakili 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/sort/sort.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { OrderDirection } from '../models/enum'; 3 | 4 | @Pipe({ 5 | name: 'sort' 6 | }) 7 | export class SortPipe implements PipeTransform { 8 | 9 | transform(rows: any[], args: any): any[] { 10 | const field = args.field; 11 | const active = args.active || true; 12 | const direction = args.direction; 13 | if (rows === undefined) { 14 | rows = []; 15 | } 16 | if (active) { 17 | if (direction === OrderDirection.Ascending) { 18 | rows.sort((a: any, b: any) => { 19 | if (a[field] < b[field]) { 20 | return -1; 21 | } else if (a[field] > b[field]) { 22 | return 1; 23 | } else { 24 | return 0; 25 | } 26 | }); 27 | } else { 28 | rows.sort((a: any, b: any) => { 29 | if (a[field] > b[field]) { 30 | return -1; 31 | } else if (a[field] < b[field]) { 32 | return 1; 33 | } else { 34 | return 0; 35 | } 36 | }); 37 | } 38 | } 39 | return rows; 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-string-filter/ngx-string-filter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 2 | import { HeaderCell } from '../models/header-cell'; 3 | import { StringFilter } from '../models/string-filter'; 4 | @Component({ 5 | selector: 'ngx-string-filter', 6 | templateUrl: './ngx-string-filter.component.html', 7 | styleUrls: ['./ngx-string-filter.component.css'] 8 | }) 9 | export class NgxStringFilterComponent implements OnInit { 10 | @Input() rows: any[]; 11 | @Input() cell: HeaderCell; 12 | 13 | @Output() filterChange= new EventEmitter(); 14 | 15 | public StringFilter = StringFilter; 16 | public filterValue = []; 17 | constructor() { } 18 | 19 | ngOnInit() { 20 | this.addRow(); 21 | } 22 | 23 | public removeRow(index: number) { 24 | this.filterValue.splice(index, 1); 25 | this.apply(); 26 | } 27 | public addRow() { 28 | this.filterValue.push({filterType: StringFilter.filters.contains, filterValue: ''}) 29 | this.apply(); 30 | } 31 | public apply() { 32 | const f = this.filterValue.filter(i => i.filterType != undefined && i.filterValue != ''); 33 | this.cell.template.filters = f; 34 | this.filterChange.emit({name: this.cell.name, filters: f}); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-enum-filter/ngx-enum-filter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 2 | import { HeaderCell } from '../models/header-cell'; 3 | import { EnumFilter } from '../models/enum-filter'; 4 | @Component({ 5 | selector: 'ngx-enum-filter', 6 | templateUrl: './ngx-enum-filter.component.html', 7 | styleUrls: ['./ngx-enum-filter.component.css'] 8 | }) 9 | export class NgxEnumFilterComponent implements OnInit { 10 | @Input() rows: any[]; 11 | @Input() cell: HeaderCell; 12 | @Input() items: any[]; 13 | 14 | @Output() filterChange= new EventEmitter(); 15 | 16 | public EnumFilter = EnumFilter; 17 | public filterValue = []; 18 | constructor() { } 19 | 20 | ngOnInit() { 21 | this.addRow(); 22 | } 23 | 24 | public removeRow(index: number) { 25 | this.filterValue.splice(index, 1); 26 | this.apply(); 27 | } 28 | public addRow() { 29 | this.filterValue.push({filterType: EnumFilter.filters.equals, filterValue: ''}) 30 | this.apply(); 31 | } 32 | public apply() { 33 | const f = this.filterValue.filter(i => i.filterType != undefined && i.filterValue != ''); 34 | this.cell.template.filters = f; 35 | this.filterChange.emit({name: this.cell.name, filters: f}); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-numeric-filter/ngx-numeric-filter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 2 | import { HeaderCell } from '../models/header-cell'; 3 | import { NumericFilter } from '../models/numeric-filter'; 4 | @Component({ 5 | selector: 'ngx-numeric-filter', 6 | templateUrl: './ngx-numeric-filter.component.html', 7 | styleUrls: ['./ngx-numeric-filter.component.css'] 8 | }) 9 | export class NgxNumericFilterComponent implements OnInit { 10 | @Input() rows: any[]; 11 | @Input() cell: HeaderCell; 12 | 13 | @Output() filterChange = new EventEmitter(); 14 | 15 | public NumericFilter = NumericFilter; 16 | public filterValue = []; 17 | constructor() { } 18 | 19 | ngOnInit() { 20 | this.addRow(); 21 | } 22 | 23 | public removeRow(index: number) { 24 | this.filterValue.splice(index, 1); 25 | this.apply(); 26 | } 27 | public addRow() { 28 | this.filterValue.push({filterType: NumericFilter.filters.equals, filterValue: ''}); 29 | this.apply(); 30 | } 31 | public apply() { 32 | const f = this.filterValue.filter(i => i.filterType !== undefined && i.filterValue !== ''); 33 | this.cell.template.filters = f; 34 | this.filterChange.emit({name: this.cell.name, filters: f}); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-boolean-filter/ngx-boolean-filter.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 2 | import { HeaderCell } from '../models/header-cell'; 3 | import { BooleanFilter } from '../models/boolean-filter'; 4 | @Component({ 5 | selector: 'ngx-boolean-filter', 6 | templateUrl: './ngx-boolean-filter.component.html', 7 | styleUrls: ['./ngx-boolean-filter.component.css'] 8 | }) 9 | export class NgxBooleanFilterComponent implements OnInit { 10 | @Input() rows: any[]; 11 | @Input() cell: HeaderCell; 12 | @Input() items: any[]; 13 | 14 | @Output() filterChange= new EventEmitter(); 15 | 16 | public BooleanFilter = BooleanFilter; 17 | public filterValue = []; 18 | constructor() { } 19 | 20 | ngOnInit() { 21 | this.addRow(); 22 | } 23 | 24 | public removeRow(index: number) { 25 | this.filterValue.splice(index, 1); 26 | this.apply(); 27 | } 28 | public addRow() { 29 | this.filterValue.push({filterType: BooleanFilter.filters.equals, filterValue: ''}) 30 | this.apply(); 31 | } 32 | public apply() { 33 | const f = this.filterValue.filter(i => i.filterType != undefined && i.filterValue != ''); 34 | this.cell.template.filters = f; 35 | this.filterChange.emit({name: this.cell.name, filters: f}); 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ngx-magic", 3 | "version": "1.0.18", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test --project=ngx-magic-table --watch=false", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "^6.0.3", 15 | "@angular/common": "^6.0.3", 16 | "@angular/compiler": "^6.0.3", 17 | "@angular/core": "^6.0.3", 18 | "@angular/forms": "^6.0.3", 19 | "@angular/http": "^6.0.3", 20 | "@angular/platform-browser": "^6.0.3", 21 | "@angular/platform-browser-dynamic": "^6.0.3", 22 | "@angular/router": "^6.0.3", 23 | "@ng-bootstrap/ng-bootstrap": "^2.1.1", 24 | "uuid": "^8.3.2", 25 | "bootstrap": "^4.3.1", 26 | "core-js": "^2.5.4", 27 | "font-awesome": "^4.7.0", 28 | "ngx-pagination": "^3.1.1", 29 | "rxjs": "^6.0.0", 30 | "yarn": "^1.22.0", 31 | "zone.js": "^0.8.26" 32 | }, 33 | "devDependencies": { 34 | "@angular-devkit/build-angular": "^0.13.8", 35 | "@angular-devkit/build-ng-packagr": "^0.13.8", 36 | "@angular/cli": "~6.0.7", 37 | "@angular/compiler-cli": "^6.0.3", 38 | "@angular/language-service": "^6.0.3", 39 | "@types/jasmine": "~2.8.6", 40 | "@types/jasminewd2": "~2.0.3", 41 | "@types/node": "~8.9.4", 42 | "codelyzer": "~4.2.1", 43 | "jasmine-core": "~2.99.1", 44 | "jasmine-spec-reporter": "~4.2.1", 45 | "karma": "~1.7.1", 46 | "karma-chrome-launcher": "~2.2.0", 47 | "karma-coverage-istanbul-reporter": "~2.0.0", 48 | "karma-jasmine": "~1.1.1", 49 | "karma-jasmine-html-reporter": "^0.2.2", 50 | "ng-packagr": "^3.0.0-rc.2", 51 | "node-sass": "^4.14.1", 52 | "protractor": "~5.3.0", 53 | "ts-node": "~5.0.1", 54 | "tsickle": ">=0.25.5", 55 | "tslib": "^1.7.1", 56 | "tslint": "~5.9.1", 57 | "typescript": "~2.7.2" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-column-template/ngx-column-template.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, Input, Output, EventEmitter, ContentChildren, 3 | TemplateRef, QueryList, SimpleChanges, AfterContentInit, OnChanges 4 | } from '@angular/core'; 5 | import { NamedTemplateDirective } from './../ngx-named-template/ngx-named-template.directive'; 6 | 7 | @Component({ 8 | selector: 'ngx-column-template', 9 | templateUrl: './ngx-column-template.component.html', 10 | styleUrls: ['./ngx-column-template.component.css'] 11 | }) 12 | export class NgxColumnTemplateComponent implements AfterContentInit, OnChanges { 13 | @Input() name: string; 14 | @Input() parent: string; 15 | @Input() title: string; 16 | @Input() index: number; 17 | @Input() sortable: boolean; 18 | @Input() draggable: boolean; 19 | @Input() collection: string; 20 | @Input() visible: boolean; 21 | @Input() cellWidth: number; 22 | 23 | @Output() changed = new EventEmitter(); 24 | 25 | 26 | public filters: any[] = []; 27 | @ContentChildren(NamedTemplateDirective) templates: QueryList; 28 | 29 | public header: TemplateRef; 30 | public body: TemplateRef; 31 | public filter: TemplateRef; 32 | public footer: TemplateRef; 33 | 34 | public constructor() { 35 | this.name = ''; 36 | this.parent = ''; 37 | this.title = ''; 38 | this.index = 0; 39 | this.cellWidth = 0; 40 | this.sortable = true; 41 | this.draggable = true; 42 | this.visible = true; 43 | this.collection = ''; 44 | } 45 | 46 | static normalizeIndexes(templates: NgxColumnTemplateComponent[]) { 47 | templates.sort((first, second) => { 48 | if (first.parent < second.parent) { return -1; } 49 | if (first.parent > second.parent) { return 1; } 50 | 51 | if (first.index < second.index) { return -1; } 52 | if (first.index > second.index) { return 1; } 53 | return 0; 54 | }).forEach((t, index) => { 55 | t.index = index; 56 | }); 57 | } 58 | 59 | ngAfterContentInit() { 60 | const h = this.templates.find(t => t.name === 'header'); 61 | this.header = h ? h.template : undefined; 62 | const b = this.templates.find(t => t.name === 'body'); 63 | this.body = b ? b.template : undefined; 64 | const f = this.templates.find(t => t.name === 'filter'); 65 | this.filter = f ? f.template : undefined; 66 | const fo = this.templates.find(t => t.name === 'footer'); 67 | this.footer = fo ? fo.template : undefined; 68 | } 69 | 70 | ngOnChanges(changes: SimpleChanges): void { 71 | this.changed.emit(this); 72 | } 73 | 74 | } 75 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-magic-table.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, NO_ERRORS_SCHEMA, Directive, Component, ModuleWithProviders } from '@angular/core'; 2 | import { NgxMagicTableComponent} from './ngx-magic-table/ngx-magic-table.component'; 3 | import { DirectionDirective} from './ngx-magic-table/ngx-direction-column.directive'; 4 | import { DomChangeDirective} from './ngx-magic-table/ngx-magic-table-change.directive'; 5 | import { NamedTemplateDirective } from './ngx-named-template/ngx-named-template.directive'; 6 | import { SortPipe } from './sort/sort.pipe'; 7 | import { ReverseArray } from './pipe/reverse-array'; 8 | import { NgxColumnTemplateComponent } from './ngx-column-template/ngx-column-template.component'; 9 | import { NgxPaginationModule } from 'ngx-pagination'; 10 | import { CommonModule } from '@angular/common'; 11 | import { NgxNumericFilterComponent } from './ngx-numeric-filter/ngx-numeric-filter.component'; 12 | import { NgxStringFilterComponent } from './ngx-string-filter/ngx-string-filter.component'; 13 | import { NgxEnumFilterComponent } from './ngx-enum-filter/ngx-enum-filter.component'; 14 | import { NgxBooleanFilterComponent } from './ngx-boolean-filter/ngx-boolean-filter.component'; 15 | import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 16 | import { FormsModule } from '@angular/forms'; 17 | import { NgxMultiselectDropdownComponent } from './ngx-multiselect-dropdown/ngx-multiselect-dropdown.component'; 18 | import { ListFilterPipe } from './ngx-multiselect-dropdown/list-filter.pipe'; 19 | import { ClickOutsideDirective } from './ngx-multiselect-dropdown/click-outside.directive'; 20 | // import { NgxMultiselectDropdownComponent } from './ngx-multiselect-dropdown/ngx-multiselect-dropdown.component'; 21 | 22 | @NgModule({ 23 | imports: [ 24 | NgxPaginationModule, 25 | CommonModule, 26 | NgbModule, 27 | FormsModule, 28 | ], 29 | declarations: [NgxMagicTableComponent, 30 | NamedTemplateDirective, 31 | SortPipe, 32 | ReverseArray, 33 | NgxColumnTemplateComponent, 34 | NgxNumericFilterComponent, 35 | NgxStringFilterComponent, 36 | NgxEnumFilterComponent, 37 | DirectionDirective, 38 | DomChangeDirective, 39 | NgxBooleanFilterComponent, 40 | NgxMultiselectDropdownComponent, 41 | ClickOutsideDirective, 42 | ListFilterPipe], 43 | 44 | exports: [NgxMagicTableComponent, 45 | NgxColumnTemplateComponent, 46 | NamedTemplateDirective, 47 | NgxStringFilterComponent, 48 | DirectionDirective, 49 | DomChangeDirective, 50 | NgxNumericFilterComponent, 51 | NgxBooleanFilterComponent, 52 | NgxMultiselectDropdownComponent, 53 | NgxEnumFilterComponent], 54 | 55 | schemas: [ NO_ERRORS_SCHEMA ] 56 | }) 57 | export class NgxMagicTableModule { } 58 | 59 | // export class NgxMultiselectDropdownComponent { 60 | // static forRoot(): ModuleWithProviders { 61 | // return { 62 | // ngModule: NgxMultiselectDropdownComponent 63 | // }; 64 | // } 65 | // } 66 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-multiselect-dropdown/ngx-multiselect-dropdown.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 20 | 21 |
22 |
23 |
    24 | 29 |
  • 32 | 33 |
    {{ _settings.selectAllText}}
    34 |
    • 35 |
  • 36 | 38 |
    • 39 |
40 |
    41 |
  • 43 | 45 |
    {{item.text}}
    46 |
    • 47 |
  • 48 |
    {{_settings.noDataAvailablePlaceholderText}}
    49 |
    • 50 |
51 |
52 |
53 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at m.vakili95@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-shadowed-variable": true, 69 | "no-string-literal": false, 70 | "no-string-throw": true, 71 | "no-switch-case-fall-through": true, 72 | "no-trailing-whitespace": true, 73 | "no-unnecessary-initializer": true, 74 | "no-unused-expression": true, 75 | "no-use-before-declare": true, 76 | "no-var-keyword": true, 77 | "object-literal-sort-keys": false, 78 | "one-line": [ 79 | true, 80 | "check-open-brace", 81 | "check-catch", 82 | "check-else", 83 | "check-whitespace" 84 | ], 85 | "prefer-const": true, 86 | "quotemark": [ 87 | true, 88 | "single" 89 | ], 90 | "radix": true, 91 | "semicolon": [ 92 | true, 93 | "always" 94 | ], 95 | "triple-equals": [ 96 | true, 97 | "allow-null-check" 98 | ], 99 | "typedef-whitespace": [ 100 | true, 101 | { 102 | "call-signature": "nospace", 103 | "index-signature": "nospace", 104 | "parameter": "nospace", 105 | "property-declaration": "nospace", 106 | "variable-declaration": "nospace" 107 | } 108 | ], 109 | "unified-signatures": true, 110 | "variable-name": false, 111 | "whitespace": [ 112 | true, 113 | "check-branch", 114 | "check-decl", 115 | "check-operator", 116 | "check-separator", 117 | "check-type" 118 | ], 119 | "no-output-on-prefix": true, 120 | "use-input-property-decorator": true, 121 | "use-output-property-decorator": true, 122 | "use-host-property-decorator": true, 123 | "no-input-rename": true, 124 | "no-output-rename": true, 125 | "use-life-cycle-interface": true, 126 | "use-pipe-transform-interface": true, 127 | "component-class-suffix": true, 128 | "directive-class-suffix": true 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Web Animations `@angular/platform-browser/animations` 51 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 52 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 53 | **/ 54 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 55 | 56 | /** 57 | * By default, zone.js will patch all possible macroTask and DomEvents 58 | * user can disable parts of macroTask/DomEvents patch by setting following flags 59 | */ 60 | 61 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 62 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 63 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 64 | 65 | /* 66 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 67 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 68 | */ 69 | // (window as any).__Zone_enable_cross_context_check = true; 70 | 71 | /*************************************************************************************************** 72 | * Zone JS is required by default for Angular itself. 73 | */ 74 | import 'zone.js/dist/zone'; // Included with Angular CLI. 75 | 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 |
11 |
14 | 15 | 20 | 21 | 22 | {{cell.name}} --> 23 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | تلفن همراه 34 | 35 | 36 | {{row.Phone}} 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | {{row.Id}} 45 | 46 | {{cell.name}} 47 | 48 | 49 | 50 | 51 | 52 | 53 | {{row.Type[index]}} 54 | {{cell.name}} 55 | 56 | 57 | 58 | 59 | 60 | 61 | {{row.Size[index]}} 62 | {{cell.name}} 63 | 64 | 65 | 66 | {{row.Sum}} 67 | 68 | 69 | 70 | {{row.Name}} 71 | {{cell.name}} 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | {{row.Title}} 81 | 82 | 83 | 84 | 85 | 86 |
87 |
88 | 89 | 90 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from "@angular/core"; 2 | import { CellsInfo, IPagingInput, ISortInput } from "projects/ngx-magic-table/src/public_api"; 3 | 4 | @Component({ 5 | selector: "app-root", 6 | templateUrl: "./app.component.html", 7 | styleUrls: ["./app.component.css"], 8 | }) 9 | export class AppComponent { 10 | public table: Array = [ 11 | { 12 | cellWidth: 600, 13 | draggble: true, 14 | index: 0, 15 | name: "Numbers", 16 | parent: "", 17 | sortable: false, 18 | visible: true, 19 | }, 20 | { 21 | cellWidth: 266, 22 | draggble: false, 23 | index: 1, 24 | name: "Name", 25 | parent: "", 26 | sortable: true, 27 | visible: true, 28 | }, 29 | { 30 | cellWidth: 150, 31 | draggble: false, 32 | index: 2, 33 | name: "Id", 34 | parent: "Numbers", 35 | sortable: true, 36 | visible: true, 37 | }, 38 | { 39 | cellWidth: 192, 40 | draggble: false, 41 | index: 3, 42 | name: "Type", 43 | parent: "Numbers", 44 | sortable: true, 45 | visible: true, 46 | }, 47 | { 48 | cellWidth: 150, 49 | draggble: false, 50 | index: 4, 51 | name: "Size", 52 | parent: "Numbers", 53 | sortable: true, 54 | visible: false, 55 | }, 56 | { 57 | cellWidth: 210, 58 | draggble: true, 59 | index: 5, 60 | name: "Phone", 61 | parent: "Numbers", 62 | sortable: true, 63 | visible: true, 64 | }, 65 | ]; 66 | 67 | public count: Number = 1; 68 | 69 | public dataFooter: Array = new Array(); 70 | 71 | public data: Array = [ 72 | { 73 | Id: "1", 74 | Name: "Nabi", 75 | Phone: "+12 345 678", 76 | Size: ["small", "medium", "large"], 77 | Type: ["Man", "Woman"], 78 | }, 79 | { 80 | Id: "2", 81 | Name: "Noushmac", 82 | Phone: "+52 221 983", 83 | Size: ["small", "medium", "large", "x large"], 84 | Type: ["Man", "Woman", "Child"], 85 | }, 86 | { 87 | Id: "3", 88 | Name: "Kazim", 89 | Phone: "+80 235 874", 90 | Size: ["small"], 91 | Type: ["Man", "NewBorn"], 92 | }, 93 | { 94 | Id: "4", 95 | Name: "Davood", 96 | Phone: "+73 214 365", 97 | Size: ["small", "large"], 98 | Type: ["Man", "Woman"], 99 | }, 100 | { 101 | Id: "5", 102 | Name: "Mammad", 103 | Phone: "+21 332 236", 104 | Size: ["small", "large", "x small"], 105 | Type: ["Man", "Woman"], 106 | }, 107 | { 108 | Id: "6", 109 | Name: "Sarah", 110 | Phone: "+21 324 236", 111 | Size: ["small"], 112 | Type: ["Woman"], 113 | }, 114 | { 115 | Id: "7", 116 | Name: "Davood", 117 | Phone: "+73 214 365", 118 | Size: ["small", "large"], 119 | Type: ["Man", "Woman"], 120 | }, 121 | { 122 | Id: "8", 123 | Name: "Davood", 124 | Phone: "+73 214 365", 125 | Size: ["small", "large"], 126 | Type: ["Man", "Woman"], 127 | }, 128 | ]; 129 | 130 | pageChanged() {} 131 | 132 | sortChanged() {} 133 | 134 | getRowClass(data: any): string { 135 | if (data.Id < 5) { 136 | return "rowClass1"; 137 | } else { 138 | return "rowClass2"; 139 | } 140 | } 141 | 142 | reload() { 143 | if (this.dataFooter.length > 0) { 144 | this.dataFooter = new Array(); 145 | } else { 146 | this.dataFooter = [ 147 | { 148 | Sum: "8", 149 | Title: "مجموع", 150 | }, 151 | { 152 | Sum: "12", 153 | Title: "کارکرد", 154 | }, 155 | { 156 | Sum: "12", 157 | Title: "عملکرد", 158 | }, 159 | ]; 160 | } 161 | } 162 | 163 | saveTable(array: CellsInfo) { 164 | console.log(array); 165 | } 166 | 167 | logAll(row: any) { 168 | 169 | // alert(JSON.stringify(row)); 170 | } 171 | 172 | selectChanged(row: any) { 173 | // alert(JSON.stringify(row)); 174 | } 175 | doubleClick(row: any) { 176 | // alert(JSON.stringify(row)); 177 | } 178 | pageSizesChange(data: IPagingInput) { 179 | console.log("page:" + data.page + " pageSize:" + data.pageSize); 180 | } 181 | sortChange(data: ISortInput) { 182 | console.log("sort:" + data.sort + " direction:" + data.direction); 183 | } 184 | pageChange(data: IPagingInput) { 185 | console.log("page:" + data.page + " pageSize:" + data.pageSize); 186 | } 187 | columnsArrangeChange(data: any) { 188 | console.log(data); 189 | } 190 | } 191 | 192 | export class SumTest { 193 | Title: string; 194 | Sum: string; 195 | } 196 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-magic-table/ngx-magic-table.component.css: -------------------------------------------------------------------------------- 1 | table thead th { 2 | -webkit-user-select: none; 3 | /* Safari */ 4 | -moz-user-select: none; 5 | /* Firefox */ 6 | -ms-user-select: none; 7 | /* IE10+/Edge */ 8 | user-select: none; 9 | /* Standard */ 10 | } 11 | 12 | [draggable="true"] { 13 | -khtml-user-drag: element; 14 | -webkit-user-drag: element; 15 | } 16 | 17 | select.btn-sm { 18 | padding: 0.1rem; 19 | display: inline-flex; 20 | } 21 | 22 | table { 23 | table-layout: fixed; 24 | } 25 | 26 | /********************************************************************/ 27 | /********************************************************************/ 28 | /* th { 29 | padding: 0px !important; 30 | } 31 | 32 | .th-span { 33 | display: inline-block; 34 | padding: 5px; 35 | width: 97%; 36 | } 37 | .th-section{ 38 | display: flex; 39 | width: 100%; 40 | height: 100%; 41 | } 42 | 43 | table { 44 | table-layout: unset; 45 | } */ 46 | 47 | /* 48 | * angular-table-resize 49 | * https://github.com/tympanix/angular-table-resize 50 | * - minimal stylesheet 51 | */ 52 | 53 | table.rz-table { 54 | display: block; 55 | width: auto; 56 | table-layout: fixed; 57 | border-collapse: collapse; 58 | } 59 | 60 | table.rz-table th { 61 | position: relative; 62 | min-width: 25px; 63 | } 64 | 65 | table.rz-table th .rz-handle { 66 | width: 2px; 67 | height: 100%; 68 | position: absolute; 69 | top: 0; 70 | right: -2px; 71 | cursor: ew-resize !important; 72 | background: repeating-linear-gradient(45deg, 73 | transparent, 74 | transparent 2px, 75 | rgba(0, 0, 0, 0.15) 2px, 76 | rgba(0, 0, 0, 0.15) 4px); 77 | z-index: 999; 78 | } 79 | 80 | 81 | table.rz-table th .rz-handle:hover { 82 | background: repeating-linear-gradient(45deg, 83 | #6c757d00, 84 | #6c757d 2px, 85 | #6c757d 2px, 86 | #6c757d00 4px); 87 | } 88 | 89 | 90 | .rtl table.rz-table th .rz-handle { 91 | right: auto; 92 | left: -2px; 93 | } 94 | 95 | 96 | .rtl { 97 | direction: rtl !important; 98 | /* float: right !important; */ 99 | } 100 | 101 | .ltr { 102 | direction: ltr !important; 103 | /* float: left !important; */ 104 | } 105 | 106 | .mainMagicTable { 107 | overflow: auto; 108 | /* float: inherit; */ 109 | min-height: 300px 110 | } 111 | 112 | .paging { 113 | width: 100%; 114 | /* padding-left: 10px; 115 | padding-right: 10px; 116 | padding-bottom: 10px; */ 117 | padding: 10px; 118 | 119 | } 120 | 121 | .paddingDiv { 122 | padding: 10px; 123 | } 124 | 125 | .ngxThead { 126 | display: block; 127 | width: 100%; 128 | /* border-collapse: separate; 129 | border-spacing: 2px 0px; 130 | background-color: #e9ecef; */ 131 | } 132 | 133 | .ngxTbody { 134 | max-height: -webkit-fill-available; 135 | display: block; 136 | overflow-y: auto; 137 | overflow-x: hidden; 138 | } 139 | 140 | .ltr .ngxTbody { 141 | direction: rtl; 142 | } 143 | 144 | .rtl .ngxTbody { 145 | direction: ltr; 146 | } 147 | 148 | .ltr .ngxThead { 149 | direction: rtl; 150 | } 151 | 152 | .rtl .ngxThead { 153 | direction: ltr; 154 | } 155 | 156 | 157 | .table.rz-table td { 158 | overflow: hidden; 159 | text-overflow: ellipsis; 160 | white-space: nowrap !important; 161 | /* word-break: break-all !important; 162 | white-space: normal !important; */ 163 | } 164 | 165 | .table.rz-table th { 166 | padding: 0.20rem; 167 | /* border: 1px solid #797b7e; */ 168 | text-align: center; 169 | } 170 | 171 | 172 | .table.rz-table td { 173 | /* border: 1px solid #797b7e; */ 174 | border: 1px solid #dee2e6; 175 | } 176 | 177 | .table.rz-table th:last-child, 178 | .table.rz-table td:last-child { 179 | min-width: auto !important; 180 | } 181 | 182 | .table.rz-table>tbody>tr:nth-of-type(odd) { 183 | background-color: #e5ecf1; 184 | } 185 | 186 | .table.rz-table>tbody>tr:nth-of-type(even) { 187 | background-color: rgb(242, 249, 254); 188 | } 189 | 190 | /* .table.rz-table th, 191 | .table.rz-table td { 192 | white-space: nowrap; 193 | width: 1% !important; 194 | } */ 195 | 196 | .savetable { 197 | position: absolute; 198 | top: 5px; 199 | } 200 | 201 | .ltr .savetable { 202 | right: 10px; 203 | } 204 | 205 | .rtl .savetable { 206 | left: 10px; 207 | } 208 | 209 | ul.ngx-pagination { 210 | margin: 0px; 211 | } 212 | 213 | /* .rtl .table td { 214 | padding-left: 0; 215 | } 216 | 217 | .ltr .table td { 218 | padding-right: 0; 219 | } */ 220 | 221 | .rtl .paging { 222 | direction: rtl !important; 223 | } 224 | 225 | .ltr .paging { 226 | direction: ltr !important; 227 | } 228 | 229 | .pagingInline { 230 | display: inline-block; 231 | } 232 | 233 | .th-title { 234 | white-space: nowrap; 235 | overflow: hidden; 236 | text-overflow: ellipsis; 237 | } 238 | 239 | .rtl .th-title, 240 | .rtl .table.rz-table td { 241 | direction: rtl !important; 242 | } 243 | 244 | /* .rtl .table.rz-table td:first-child { 245 | padding-right: 30px; 246 | } */ 247 | 248 | .ltr .th-title, 249 | .ltr .table.rz-table td { 250 | /* direction: ltr !important; */ 251 | } 252 | 253 | /* .ltr .table.rz-table td:first-child { 254 | padding-left: 30px; 255 | } */ 256 | 257 | .magicMessage{ 258 | direction: ltr !important; 259 | margin-left: 5px; 260 | margin-right: 5px 261 | } 262 | 263 | .footerTd { 264 | background-color: lightgray; 265 | font-weight: bold; 266 | } 267 | 268 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "ngx-magic": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/ngx-magic", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 27 | "node_modules/font-awesome/css/font-awesome.css", 28 | "src/styles.css" 29 | ], 30 | "scripts": [] 31 | }, 32 | "configurations": { 33 | "production": { 34 | "fileReplacements": [ 35 | { 36 | "replace": "src/environments/environment.ts", 37 | "with": "src/environments/environment.prod.ts" 38 | } 39 | ], 40 | "optimization": true, 41 | "outputHashing": "all", 42 | "sourceMap": false, 43 | "extractCss": true, 44 | "namedChunks": false, 45 | "aot": true, 46 | "extractLicenses": true, 47 | "vendorChunk": false, 48 | "buildOptimizer": true 49 | } 50 | } 51 | }, 52 | "serve": { 53 | "builder": "@angular-devkit/build-angular:dev-server", 54 | "options": { 55 | "browserTarget": "ngx-magic:build" 56 | }, 57 | "configurations": { 58 | "production": { 59 | "browserTarget": "ngx-magic:build:production" 60 | } 61 | } 62 | }, 63 | "extract-i18n": { 64 | "builder": "@angular-devkit/build-angular:extract-i18n", 65 | "options": { 66 | "browserTarget": "ngx-magic:build" 67 | } 68 | }, 69 | "test": { 70 | "builder": "@angular-devkit/build-angular:karma", 71 | "options": { 72 | "main": "src/test.ts", 73 | "polyfills": "src/polyfills.ts", 74 | "tsConfig": "src/tsconfig.spec.json", 75 | "karmaConfig": "src/karma.conf.js", 76 | "styles": [ 77 | "src/styles.css" 78 | ], 79 | "scripts": [], 80 | "assets": [ 81 | "src/favicon.ico", 82 | "src/assets" 83 | ] 84 | } 85 | }, 86 | "lint": { 87 | "builder": "@angular-devkit/build-angular:tslint", 88 | "options": { 89 | "tsConfig": [ 90 | "src/tsconfig.app.json", 91 | "src/tsconfig.spec.json" 92 | ], 93 | "exclude": [ 94 | "**/node_modules/**" 95 | ] 96 | } 97 | } 98 | } 99 | }, 100 | "ngx-magic-e2e": { 101 | "root": "e2e/", 102 | "projectType": "application", 103 | "architect": { 104 | "e2e": { 105 | "builder": "@angular-devkit/build-angular:protractor", 106 | "options": { 107 | "protractorConfig": "e2e/protractor.conf.js", 108 | "devServerTarget": "ngx-magic:serve" 109 | }, 110 | "configurations": { 111 | "production": { 112 | "devServerTarget": "ngx-magic:serve:production" 113 | } 114 | } 115 | }, 116 | "lint": { 117 | "builder": "@angular-devkit/build-angular:tslint", 118 | "options": { 119 | "tsConfig": "e2e/tsconfig.e2e.json", 120 | "exclude": [ 121 | "**/node_modules/**" 122 | ] 123 | } 124 | } 125 | } 126 | }, 127 | "ngx-magic-table": { 128 | "root": "projects/ngx-magic-table", 129 | "sourceRoot": "projects/ngx-magic-table/src", 130 | "projectType": "library", 131 | "prefix": "lib", 132 | "architect": { 133 | "build": { 134 | "builder": "@angular-devkit/build-ng-packagr:build", 135 | "options": { 136 | "tsConfig": "projects/ngx-magic-table/tsconfig.lib.json", 137 | "project": "projects/ngx-magic-table/ng-package.json" 138 | }, 139 | "configurations": { 140 | "production": { 141 | "project": "projects/ngx-magic-table/ng-package.prod.json" 142 | } 143 | } 144 | }, 145 | "test": { 146 | "builder": "@angular-devkit/build-angular:karma", 147 | "options": { 148 | "main": "projects/ngx-magic-table/src/test.ts", 149 | "tsConfig": "projects/ngx-magic-table/tsconfig.spec.json", 150 | "karmaConfig": "projects/ngx-magic-table/karma.conf.js" 151 | } 152 | }, 153 | "lint": { 154 | "builder": "@angular-devkit/build-angular:tslint", 155 | "options": { 156 | "tsConfig": [ 157 | "projects/ngx-magic-table/tsconfig.lib.json", 158 | "projects/ngx-magic-table/tsconfig.spec.json" 159 | ], 160 | "exclude": [ 161 | "**/node_modules/**" 162 | ] 163 | } 164 | } 165 | } 166 | } 167 | }, 168 | "defaultProject": "ngx-magic" 169 | } -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-multiselect-dropdown/ngx-multiselect-dropdown.component.scss: -------------------------------------------------------------------------------- 1 | $base-color: #337ab7; 2 | $disable-background-color: #eceeef; 3 | 4 | .multiselect-dropdown { 5 | position: relative; 6 | width: 100%; 7 | 8 | .dropdown-btn { 9 | display: inline-block; 10 | border: 1px solid #adadad; 11 | width: 100%; 12 | padding: 6px 12px; 13 | margin-bottom: 0; 14 | font-size: 14px; 15 | font-weight: normal; 16 | line-height: 1.52857143; 17 | text-align: left; 18 | vertical-align: middle; 19 | cursor: pointer; 20 | background-image: none; 21 | border-radius: 4px; 22 | 23 | .selected-item { 24 | border: 1px solid $base-color; 25 | margin-right: 4px; 26 | background: $base-color; 27 | padding: 0px 5px; 28 | color: #fff; 29 | border-radius: 2px; 30 | float: left; 31 | 32 | a { 33 | text-decoration: none; 34 | } 35 | } 36 | 37 | .selected-item:hover { 38 | box-shadow: 1px 1px #959595; 39 | } 40 | 41 | .dropdown-down { 42 | display: inline-block; 43 | top: 10px; 44 | width: 0; 45 | height: 0; 46 | border-top: 10px solid #adadad; 47 | border-left: 10px solid transparent; 48 | border-right: 10px solid transparent; 49 | } 50 | 51 | .dropdown-up { 52 | display: inline-block; 53 | width: 0; 54 | height: 0; 55 | border-bottom: 10px solid #adadad; 56 | border-left: 10px solid transparent; 57 | border-right: 10px solid transparent; 58 | } 59 | } 60 | 61 | .disabled { 62 | &>span { 63 | background-color: $disable-background-color; 64 | } 65 | } 66 | } 67 | 68 | .dropdown-list { 69 | position: absolute; 70 | padding-top: 6px; 71 | // width: 100%; 72 | width: max-content; 73 | bottom: 30px; 74 | padding-bottom: 5px; 75 | margin-bottom: 10px; 76 | z-index: 9999; 77 | border: 1px solid #ccc; 78 | border-radius: 3px; 79 | background: #fff; 80 | margin-top: 10px; 81 | box-shadow: 0px 1px 5px #959595; 82 | 83 | ul { 84 | padding: 0px; 85 | list-style: none; 86 | overflow: auto; 87 | margin: 0px; 88 | } 89 | 90 | li { 91 | padding: 6px 10px; 92 | cursor: pointer; 93 | text-align: left; 94 | } 95 | 96 | .filter-textbox { 97 | border-bottom: 1px solid #ccc; 98 | position: relative; 99 | padding: 10px; 100 | 101 | input { 102 | border: 0px; 103 | width: 100%; 104 | padding: 0px 0px 0px 26px; 105 | } 106 | 107 | input:focus { 108 | outline: none; 109 | } 110 | } 111 | } 112 | 113 | .multiselect-item-checkbox input[type='checkbox'] { 114 | border: 0; 115 | clip: rect(0 0 0 0); 116 | height: 1px; 117 | margin: -1px; 118 | overflow: hidden; 119 | padding: 0; 120 | position: absolute; 121 | width: 1px; 122 | } 123 | 124 | .multiselect-item-checkbox input[type='checkbox']:focus+div:before, 125 | .multiselect-item-checkbox input[type='checkbox']:hover+div:before { 126 | border-color: $base-color; 127 | background-color: #f2f2f2; 128 | } 129 | 130 | .multiselect-item-checkbox input[type='checkbox']:active+div:before { 131 | transition-duration: 0s; 132 | } 133 | 134 | .multiselect-item-checkbox input[type='checkbox']+div { 135 | position: relative; 136 | padding-left: 2em; 137 | vertical-align: middle; 138 | user-select: none; 139 | cursor: pointer; 140 | margin: 0px; 141 | color: #000; 142 | } 143 | 144 | .multiselect-item-checkbox input[type='checkbox']+div:before { 145 | box-sizing: content-box; 146 | content: ''; 147 | color: $base-color; 148 | position: absolute; 149 | top: 50%; 150 | left: 0; 151 | width: 14px; 152 | height: 14px; 153 | margin-top: -9px; 154 | border: 2px solid $base-color; 155 | text-align: center; 156 | transition: all 0.4s ease; 157 | } 158 | 159 | .multiselect-item-checkbox input[type='checkbox']+div:after { 160 | box-sizing: content-box; 161 | content: ''; 162 | background-color: $base-color; 163 | position: absolute; 164 | top: 50%; 165 | left: 4px; 166 | width: 10px; 167 | height: 10px; 168 | margin-top: -5px; 169 | transform: scale(0); 170 | transform-origin: 50%; 171 | transition: transform 200ms ease-out; 172 | } 173 | 174 | .multiselect-item-checkbox input[type='checkbox']:disabled+div:before { 175 | border-color: #cccccc; 176 | } 177 | 178 | .multiselect-item-checkbox input[type='checkbox']:disabled:focus+div:before .multiselect-item-checkbox input[type='checkbox']:disabled:hover+div:before { 179 | background-color: inherit; 180 | } 181 | 182 | .multiselect-item-checkbox input[type='checkbox']:disabled:checked+div:before { 183 | background-color: #cccccc; 184 | } 185 | 186 | .multiselect-item-checkbox input[type='checkbox']+div:after { 187 | background-color: transparent; 188 | top: 50%; 189 | left: 4px; 190 | width: 8px; 191 | height: 3px; 192 | margin-top: -4px; 193 | border-style: solid; 194 | border-color: #ffffff; 195 | border-width: 0 0 3px 3px; 196 | border-image: none; 197 | transform: rotate(-45deg) scale(0); 198 | } 199 | 200 | .multiselect-item-checkbox input[type='checkbox']:checked+div:after { 201 | content: ''; 202 | transform: rotate(-45deg) scale(1); 203 | transition: transform 200ms ease-out; 204 | } 205 | 206 | .multiselect-item-checkbox input[type='checkbox']:checked+div:before { 207 | animation: borderscale 200ms ease-in; 208 | background: $base-color; 209 | } 210 | 211 | .multiselect-item-checkbox input[type='checkbox']:checked+div:after { 212 | transform: rotate(-45deg) scale(1); 213 | } 214 | 215 | @keyframes borderscale { 216 | 50% { 217 | box-shadow: 0 0 0 2px $base-color; 218 | } 219 | } 220 | 221 | .btnReset { 222 | // color: white; 223 | // background-color: transparent !important; 224 | // // border: none; 225 | // // color: black !important; 226 | // font-size: 17px; 227 | // transition: 0.2s all ease-in-out; 228 | // -moz-transition: 0.2s all ease-in-out; 229 | // -webkit-transition: 0.2s all ease-in-out; 230 | // // font-size: 15px !important; 231 | // border: 1px solid #0000001f !important; 232 | // padding: 5px !important; 233 | // margin: 0 5px 0 5px !important; 234 | color: black !important; 235 | width: 80%; 236 | padding: 5px; 237 | cursor: pointer; 238 | } 239 | 240 | // button.btn.btn-warning:hover { 241 | // color: black; 242 | // } 243 | .btnReset:hover { 244 | color: black !important; 245 | transform: scale(1.2); 246 | -o-transform: scale(1.2); 247 | -moz-transform: scale(1.2); 248 | -webkit-transform: scale(1.2); 249 | } 250 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/README.md: -------------------------------------------------------------------------------- 1 | # Magic Table 2 | 3 | [![Build Status](https://api.travis-ci.org/noushmac/ngx-magic-table.svg?branch=master)](https://travis-ci.org/noushmac/ngx-magic-table) 4 | [![Maintainability](https://api.codeclimate.com/v1/badges/9bdb33820bfdaa028c78/maintainability)](https://codeclimate.com/github/noushmac/ngx-magic-table/maintainability) 5 | [![npm version](https://img.shields.io/npm/v/ngx-magic-table.svg)](https://img.shields.io/npm/v/ngx-magic-table.svg) 6 | [![npm total downloads](https://img.shields.io/npm/dt/ngx-magic-table.svg)](https://img.shields.io/npm/dt/ngx-magic-table.svg) 7 | [![npm monthly downloads](https://img.shields.io/npm/dm/ngx-magic-table.svg)](https://img.shields.io/npm/dm/ngx-magic-table.svg) 8 | 9 | 10 | Angular 6 smart DataGrid based on `bootstrap` and `font-awesome` 11 | 12 | ## Features 13 | - Server-side or client-side sorting 14 | - Server-side or client-side pagination 15 | - Arrange columns placement by dragging columns 16 | - Headers custom templates 17 | - Cells custom templates 18 | - Grouping headers 19 | - Grouping rows 20 | - Filtering rows (under development) 21 | - Custom Styling 22 | - Resize column 23 | - Visible column 24 | - List columns 25 | - Save table style 26 | - Load table style 27 | - Auto size table 28 | - Row class renderer 29 | - Add pagination 30 | - Reset table style 31 | - Show message 32 | 33 | 34 | ## Preview 35 | ![Preview](https://imgur.com/V5Sy0HN.jpg) 36 | 37 | ## Demo 38 | 39 | Try the [Demo](https://noushmac.github.io/ngx-magic-table/) 40 | 41 | 42 | ## Getting started 43 | Install package: 44 | ```bash 45 | npm i ngx-magic-table 46 | ``` 47 | Add `NgxMagicTableModule` inside your AppModule 48 | ```typescript 49 | import { NgxMagicTableModule } from 'ngx-magic-table'; 50 | 51 | 52 | @NgModule({ 53 | ... 54 | imports: [ 55 | ... 56 | 57 | NgxMagicTableModule, // import NgxMagicTableModule 58 | 59 | ... 60 | ], 61 | ... 62 | }) 63 | ``` 64 | Make sure you have included `bootstrap` and `font-awesome` styles 65 | ```json 66 | "styles": [ 67 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 68 | "node_modules/font-awesome/css/font-awesome.css" 69 | ], 70 | ``` 71 | 72 | Use `` 73 | ```html 74 | 99 | 100 | 106 | 107 | 111 | {{cell.name}} 112 | 113 | 114 | 115 | 116 | 122 | 123 | 127 | {{cell.name}} 128 | 129 | 130 | 131 | 135 | {{row.Phone}} 136 | 137 | 138 | 139 | 140 | 147 | 151 | {{row.Id}} 152 | 153 | 154 | 158 | {{cell.name}} 159 | 160 | 161 | 162 | 163 | 164 | 172 | 173 | 178 | {{row.Type[index]}} 179 | 180 | 181 | 185 | {{cell.name}} 186 | 187 | 188 | 189 | 190 | 191 | 199 | 200 | 205 | {{row.Size[index]}} 206 | 207 | 208 | 212 | {{cell.name}} 213 | 214 | 215 | 216 | 217 | 218 | 224 | 225 | 229 | {{row.Name}} 230 | 231 | 232 | 236 | {{cell.name}} 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | ``` 249 | 250 | ## Next up 251 | 252 | - Detailed documentation will be ready soon 253 | 254 | ## Issues 255 | 256 | [Github Issues](https://github.com/noushmac/ngx-magic-table/issues) 257 | 258 | ## Contribution 259 | Contribution is welcomed warmly ( specially in writing documentation) 260 | 261 | ## License 262 | [MIT](https://github.com/noushmac/ngx-magic-table/blob/master/LICENSE) 263 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Magic Table 2 | 3 | [![Build Status](https://api.travis-ci.org/noushmac/ngx-magic-table.svg?branch=master)](https://travis-ci.org/noushmac/ngx-magic-table) 4 | [![Maintainability](https://api.codeclimate.com/v1/badges/9bdb33820bfdaa028c78/maintainability)](https://codeclimate.com/github/noushmac/ngx-magic-table/maintainability) 5 | [![npm version](https://img.shields.io/npm/v/ngx-magic-table.svg)](https://img.shields.io/npm/v/ngx-magic-table.svg) 6 | [![npm total downloads](https://img.shields.io/npm/dt/ngx-magic-table.svg)](https://img.shields.io/npm/dt/ngx-magic-table.svg) 7 | [![npm monthly downloads](https://img.shields.io/npm/dm/ngx-magic-table.svg)](https://img.shields.io/npm/dm/ngx-magic-table.svg) 8 | 9 | 10 | Angular 6 smart DataGrid based on `bootstrap` and `font-awesome` 11 | 12 | ## Features 13 | - Server-side or client-side sorting 14 | - Server-side or client-side pagination 15 | - Arrange columns placement by dragging columns 16 | - Headers custom templates 17 | - Cells custom templates 18 | - Grouping headers 19 | - Grouping rows 20 | - Filtering rows (under development) 21 | - Custom Styling 22 | - Resize column 23 | - Visible column 24 | - List columns 25 | - Save table style 26 | - Load table style 27 | - Auto size table 28 | - Row class renderer 29 | - Add pagination 30 | - Reset table style 31 | - Show message 32 | - Set Double Click 33 | 34 | ## Preview 35 | ![Preview](https://imgur.com/V5Sy0HN.jpg) 36 | 37 | ## Demo 38 | 39 | Try the [Demo](https://noushmac.github.io/ngx-magic-table/) 40 | 41 | 42 | ## Getting started 43 | Install package: 44 | ```bash 45 | npm i ngx-magic-table 46 | ``` 47 | Add `NgxMagicTableModule` inside your AppModule 48 | ```typescript 49 | import { NgxMagicTableModule } from 'ngx-magic-table'; 50 | 51 | 52 | @NgModule({ 53 | ... 54 | imports: [ 55 | ... 56 | 57 | NgxMagicTableModule, // import NgxMagicTableModule 58 | 59 | ... 60 | ], 61 | ... 62 | }) 63 | ``` 64 | Make sure you have included `bootstrap` and `font-awesome` styles 65 | ```json 66 | "styles": [ 67 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 68 | "node_modules/font-awesome/css/font-awesome.css" 69 | ], 70 | ``` 71 | 72 | Use `` 73 | ```html 74 | 100 | 101 | 107 | 108 | 112 | {{cell.name}} 113 | 114 | 115 | 116 | 117 | 123 | 124 | 128 | {{cell.name}} 129 | 130 | 131 | 132 | 136 | {{row.Phone}} 137 | 138 | 139 | 140 | 141 | 148 | 152 | {{row.Id}} 153 | 154 | 155 | 159 | {{cell.name}} 160 | 161 | 162 | 163 | 164 | 165 | 173 | 174 | 179 | {{row.Type[index]}} 180 | 181 | 182 | 186 | {{cell.name}} 187 | 188 | 189 | 190 | 191 | 192 | 200 | 201 | 206 | {{row.Size[index]}} 207 | 208 | 209 | 213 | {{cell.name}} 214 | 215 | 216 | 217 | 218 | 219 | 225 | 226 | 230 | {{row.Name}} 231 | 232 | 233 | 237 | {{cell.name}} 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | ``` 250 | 251 | ## Next up 252 | 253 | - Detailed documentation will be ready soon 254 | 255 | ## Issues 256 | 257 | [Github Issues](https://github.com/noushmac/ngx-magic-table/issues) 258 | 259 | ## Contribution 260 | Contribution is welcomed warmly ( specially in writing documentation) 261 | 262 | ## License 263 | [MIT](https://github.com/noushmac/ngx-magic-table/blob/master/LICENSE) 264 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/README.md: -------------------------------------------------------------------------------- 1 | # Magic Table 2 | 3 | [![Build Status](https://api.travis-ci.org/noushmac/ngx-magic-table.svg?branch=master)](https://travis-ci.org/noushmac/ngx-magic-table) 4 | [![Maintainability](https://api.codeclimate.com/v1/badges/9bdb33820bfdaa028c78/maintainability)](https://codeclimate.com/github/noushmac/ngx-magic-table/maintainability) 5 | [![npm version](https://img.shields.io/npm/v/ngx-magic-table.svg)](https://img.shields.io/npm/v/ngx-magic-table.svg) 6 | [![npm total downloads](https://img.shields.io/npm/dt/ngx-magic-table.svg)](https://img.shields.io/npm/dt/ngx-magic-table.svg) 7 | [![npm monthly downloads](https://img.shields.io/npm/dm/ngx-magic-table.svg)](https://img.shields.io/npm/dm/ngx-magic-table.svg) 8 | 9 | 10 | Angular 6 smart DataGrid based on `bootstrap` and `font-awesome` 11 | 12 | ## Features 13 | - Server-side or client-side sorting 14 | - Server-side or client-side pagination 15 | - Arrange columns placement by dragging columns 16 | - Headers custom templates 17 | - Cells custom templates 18 | - Grouping headers 19 | - Grouping rows 20 | - Filtering rows (under development) 21 | - Custom Styling 22 | - Resize column 23 | - Visible column 24 | - List columns 25 | - Save table style 26 | - Load table style 27 | - Auto size table 28 | - Row class renderer 29 | - Add pagination 30 | - Reset table style 31 | - Show message 32 | - Set Double Click 33 | - Show summery in footer table 34 | 35 | 36 | ## Preview 37 | ![Preview](https://imgur.com/V5Sy0HN.jpg) 38 | 39 | ## Demo 40 | 41 | Try the [Demo](https://noushmac.github.io/ngx-magic-table/) 42 | 43 | 44 | ## Getting started 45 | Install package: 46 | ```bash 47 | npm i ngx-magic-table 48 | ``` 49 | Add `NgxMagicTableModule` inside your AppModule 50 | ```typescript 51 | import { NgxMagicTableModule } from 'ngx-magic-table'; 52 | 53 | 54 | @NgModule({ 55 | ... 56 | imports: [ 57 | ... 58 | 59 | NgxMagicTableModule, // import NgxMagicTableModule 60 | 61 | ... 62 | ], 63 | ... 64 | }) 65 | ``` 66 | Make sure you have included `bootstrap` and `font-awesome` styles 67 | ```json 68 | "styles": [ 69 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 70 | "node_modules/font-awesome/css/font-awesome.css" 71 | ], 72 | ``` 73 | 74 | Use `` 75 | ```html 76 | 102 | 103 | 109 | 110 | 114 | {{cell.name}} 115 | 116 | 117 | 118 | 119 | 125 | 126 | 130 | {{cell.name}} 131 | 132 | 133 | 134 | 138 | {{row.Phone}} 139 | 140 | 141 | 142 | 143 | 150 | 154 | {{row.Id}} 155 | 156 | 157 | 161 | {{cell.name}} 162 | 163 | 164 | 165 | 166 | 167 | 175 | 176 | 181 | {{row.Type[index]}} 182 | 183 | 184 | 188 | {{cell.name}} 189 | 190 | 191 | 192 | 193 | 194 | 202 | 203 | 208 | {{row.Size[index]}} 209 | 210 | 211 | 215 | {{cell.name}} 216 | 217 | 218 | 219 | 220 | 221 | 227 | 228 | 232 | {{row.Name}} 233 | 234 | 235 | 239 | {{cell.name}} 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | ``` 252 | 253 | ## Next up 254 | 255 | - Detailed documentation will be ready soon 256 | 257 | ## Issues 258 | 259 | [Github Issues](https://github.com/noushmac/ngx-magic-table/issues) 260 | 261 | ## Contribution 262 | Contribution is welcomed warmly ( specially in writing documentation) 263 | 264 | ## License 265 | [MIT](https://github.com/noushmac/ngx-magic-table/blob/master/LICENSE) 266 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-magic-table/ngx-magic-table.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 7 | 34 | 35 | 36 | 37 | 42 | 43 | 44 | 45 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 |
12 | 13 |
14 |
15 |
16 | 17 | 18 |
19 | 20 |
21 | 25 |
27 |
28 | 29 |
30 |
31 |
32 | 33 |
50 | 51 |
65 | 66 |
82 | 83 |
92 |
93 |
94 |
95 | 98 | 99 |
100 | 103 |
104 |
105 | 107 |
108 |
109 | 110 | 111 |
112 |
113 | {{message}} 114 |
115 |
116 | 117 |        118 |
119 | 122 |
123 |
124 |
125 | 126 |
127 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-multiselect-dropdown/ngx-multiselect-dropdown.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | Component, OnInit, HostListener, Input, Output, EventEmitter, 3 | forwardRef, ChangeDetectorRef, ChangeDetectionStrategy 4 | } from '@angular/core'; 5 | import { ListItemDropdown, IDropdownSettings } from '../models/multiselect.model'; 6 | import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 7 | 8 | export const DROPDOWN_CONTROL_VALUE_ACCESSOR: any = { 9 | provide: NG_VALUE_ACCESSOR, 10 | useExisting: forwardRef(() => NgxMultiselectDropdownComponent), 11 | multi: true 12 | }; 13 | const noop = () => { }; 14 | 15 | @Component({ 16 | selector: 'lib-ngx-multiselect-dropdown', 17 | templateUrl: './ngx-multiselect-dropdown.component.html', 18 | styleUrls: ['./ngx-multiselect-dropdown.component.scss'], 19 | providers: [DROPDOWN_CONTROL_VALUE_ACCESSOR], 20 | changeDetection: ChangeDetectionStrategy.OnPush 21 | }) 22 | export class NgxMultiselectDropdownComponent implements ControlValueAccessor { 23 | 24 | _data: Array = []; 25 | selectedItems: Array = []; 26 | isDropdownOpen = false; 27 | _settings: IDropdownSettings; 28 | _placeholder = 'Select'; 29 | filter: ListItemDropdown = new ListItemDropdown(this.data); 30 | 31 | defaultSettings: IDropdownSettings = { 32 | singleSelection: false, 33 | idField: 'id', 34 | textField: 'text', 35 | parentField: 'parent', 36 | enableCheckAll: true, 37 | selectAllText: 'Select All', 38 | unSelectAllText: 'UnSelect All', 39 | allowSearchFilter: false, 40 | limitSelection: -1, 41 | clearSearchFilter: true, 42 | maxHeight: 197, 43 | itemsShowLimit: 999999999999, 44 | searchPlaceholderText: 'Search', 45 | noDataAvailablePlaceholderText: 'No data available', 46 | closeDropDownOnSelection: false, 47 | showSelectedItemsAtTop: false 48 | }; 49 | 50 | @Output('onFilterChange') onFilterChange: EventEmitter = new EventEmitter(); 51 | @Output('onSelect') onSelect: EventEmitter> = new EventEmitter>(); 52 | @Output('onDeSelect') onDeSelect: EventEmitter> = new EventEmitter>(); 53 | @Output('onSelectAll') onSelectAll: EventEmitter> = new EventEmitter>(); 54 | @Output('onDeSelectAll') onDeSelectAll: EventEmitter> = new EventEmitter>(); 55 | // @Output('onResetTable') onResetTable: EventEmitter> = new EventEmitter>(); 56 | 57 | private onTouchedCallback: () => void = noop; 58 | private onChangeCallback: (_: any) => void = noop; 59 | 60 | @Input() buttonListColumnStyle: string; 61 | @Input() disabled = false; 62 | @Input() 63 | public set placeholder(value: string) { 64 | if (value) { 65 | this._placeholder = value; 66 | } else { 67 | this._placeholder = 'Select'; 68 | } 69 | } 70 | @Input() 71 | public set settings(value: IDropdownSettings) { 72 | if (value) { 73 | this._settings = Object.assign(this.defaultSettings, value); 74 | } else { 75 | this._settings = Object.assign(this.defaultSettings); 76 | } 77 | } 78 | 79 | @Input() 80 | public set data(value: Array) { 81 | if (!value) { 82 | this._data = []; 83 | } else { 84 | // const _items = value.filter((item: any) => { 85 | // if (typeof item === 'string' || (typeof item === 'object' && item && item[this._settings.idField] && item[this._settings.textField])) { 86 | // return item; 87 | // } 88 | // }); 89 | this._data = value.map( 90 | (item: any) => 91 | typeof item === 'string' 92 | ? new ListItemDropdown(item) 93 | : new ListItemDropdown({ 94 | id: item[this._settings.idField], 95 | text: item[this._settings.textField], 96 | parent: item[this._settings.parentField] 97 | }) 98 | ); 99 | } 100 | } 101 | 102 | 103 | 104 | writeValue(obj: any): void { 105 | if (obj !== undefined && obj !== null && obj.length > 0) { 106 | if (this._settings.singleSelection) { 107 | try { 108 | if (obj.length >= 1) { 109 | const firstItem = obj[0]; 110 | this.selectedItems = [ 111 | typeof firstItem === 'string' 112 | ? new ListItemDropdown(firstItem) 113 | : new ListItemDropdown({ 114 | id: firstItem[this._settings.idField], 115 | text: firstItem[this._settings.textField], 116 | parent: firstItem[this._settings.parentField] 117 | }) 118 | ]; 119 | } 120 | } catch (e) { 121 | // console.error(e.body.msg); 122 | } 123 | } else { 124 | const _data = obj.map( 125 | (item: any) => 126 | typeof item === 'string' 127 | ? new ListItemDropdown(item) 128 | : new ListItemDropdown({ 129 | id: item[this._settings.idField], 130 | text: item[this._settings.textField], 131 | parent: item[this._settings.parentField] 132 | }) 133 | ); 134 | if (this._settings.limitSelection > 0) { 135 | this.selectedItems = _data.splice(0, this._settings.limitSelection); 136 | } else { 137 | this.selectedItems = _data; 138 | } 139 | } 140 | } else { 141 | this.selectedItems = []; 142 | } 143 | this.onChangeCallback(obj); 144 | } 145 | registerOnChange(fn: any): void { 146 | this.onChangeCallback = fn; 147 | } 148 | registerOnTouched(fn: any): void { 149 | this.onTouchedCallback = fn; 150 | } 151 | // setDisabledState?(isDisabled: boolean): void { 152 | // throw new Error("Method not implemented."); 153 | // } 154 | 155 | 156 | 157 | 158 | constructor(private cdr: ChangeDetectorRef) { 159 | this.buttonListColumnStyle = "btn btn-outline-info"; 160 | } 161 | 162 | showButton(): boolean { 163 | if (!this._settings.singleSelection) { 164 | if (this._settings.limitSelection > 0) { 165 | return false; 166 | } 167 | // this._settings.enableCheckAll = this._settings.limitSelection === -1 ? true : false; 168 | return true; // !this._settings.singleSelection && this._settings.enableCheckAll && this._data.length > 0; 169 | } else { 170 | // should be disabled in single selection mode 171 | return false; 172 | } 173 | } 174 | 175 | itemShowRemaining(): number { 176 | return this.selectedItems.length - this._settings.itemsShowLimit; 177 | } 178 | 179 | trackByFn(index, item) { 180 | return item.id; 181 | } 182 | // Set touched on blur 183 | @HostListener('blur') 184 | public onTouched() { 185 | this.closeDropdown(); 186 | this.onTouchedCallback(); 187 | } 188 | 189 | closeDropdown() { 190 | this.isDropdownOpen = false; 191 | // clear search text 192 | if (this._settings.clearSearchFilter) { 193 | this.filter.text = ''; 194 | } 195 | } 196 | toggleDropdown(evt) { 197 | evt.preventDefault(); 198 | if (this.disabled && this._settings.singleSelection) { 199 | return; 200 | } 201 | this.isDropdownOpen = !this.isDropdownOpen; 202 | } 203 | 204 | toggleSelectAll() { 205 | if (this.disabled) { 206 | return false; 207 | } 208 | if (!this.isAllItemsSelected()) { 209 | this.selectedItems = this._data.slice(); 210 | this.onSelectAll.emit(this.emittedValue(this.selectedItems)); 211 | } else { 212 | // this.selectedItems = []; 213 | // this.onDeSelectAll.emit(this.emittedValue(this.selectedItems)); 214 | } 215 | this.onChangeCallback(this.emittedValue(this.selectedItems)); 216 | } 217 | 218 | // resetTable() { 219 | // this.onResetTable.emit(this.emittedValue(true)); 220 | // } 221 | 222 | isAllItemsSelected(): boolean { 223 | return this._data.length === this.selectedItems.length; 224 | } 225 | 226 | 227 | emittedValue(val: any): any { 228 | const selected = []; 229 | if (Array.isArray(val)) { 230 | val.map(item => { 231 | if (item.id === item.text) { 232 | selected.push(item.text); 233 | } else { 234 | selected.push(this.objectify(item)); 235 | } 236 | }); 237 | } else { 238 | if (val) { 239 | if (val.id === val.text) { 240 | return val.text; 241 | } else { 242 | return this.objectify(val); 243 | } 244 | } 245 | } 246 | return selected; 247 | } 248 | 249 | objectify(val: ListItemDropdown) { 250 | const obj = {}; 251 | obj[this._settings.idField] = val.id; 252 | obj[this._settings.textField] = val.text; 253 | obj[this._settings.parentField] = val.parent; 254 | return obj; 255 | } 256 | 257 | isLimitSelectionReached(): boolean { 258 | return this._settings.limitSelection === this.selectedItems.length; 259 | } 260 | onFilterTextChange($event) { 261 | this.onFilterChange.emit($event); 262 | } 263 | 264 | onItemClick($event: any, item: ListItemDropdown) { 265 | if (this.disabled) { 266 | return false; 267 | } 268 | const found = this.isSelected(item); 269 | const allowAdd = this._settings.limitSelection === -1 || (this._settings.limitSelection > 0 && this.selectedItems.length < this._settings.limitSelection); 270 | if (!found) { 271 | if (allowAdd) { 272 | this.addSelected(item); 273 | } 274 | } else { 275 | this.removeSelected(item); 276 | } 277 | if (this._settings.singleSelection && this._settings.closeDropDownOnSelection) { 278 | this.closeDropdown(); 279 | } 280 | } 281 | 282 | addSelected(item: ListItemDropdown) { 283 | if (this._settings.singleSelection) { 284 | this.selectedItems = []; 285 | this.selectedItems.push(item); 286 | } else { 287 | var parentItem = this._data.filter(x => x.text === item.parent); 288 | var parentItemseleted = this.selectedItems.filter(x => x.text === item.parent); 289 | if (parentItem.length > 0 && parentItemseleted.length <= 0) { 290 | this.selectedItems.push(parentItem[0]); 291 | } 292 | 293 | var childItem = this._data.filter(x => x.parent === item.text); 294 | var childItemseleted = this.selectedItems.filter(x => x.parent === item.text); 295 | if (childItem.length > 0 && childItemseleted.length <= 0) { 296 | this.selectedItems.push(childItem[0]); 297 | } 298 | 299 | this.selectedItems.push(item); 300 | } 301 | this.onChangeCallback(this.emittedValue(this.selectedItems)); 302 | this.onSelect.emit(this.emittedValue(this.selectedItems)); 303 | } 304 | 305 | removeSelected(itemSel: ListItemDropdown) { 306 | if (this.selectedItems.length > 1) { 307 | this.selectedItems.forEach(item => { 308 | if (itemSel.id === item.id) { 309 | if (this.selectedItems.filter(x => x.parent === item.parent).length > 1) { 310 | this.selectedItems.splice(this.selectedItems.indexOf(item), 1); 311 | var childs = this.selectedItems.filter(x => x.parent === item.text); 312 | for (let index = 0; index < childs.length; index++) { 313 | const element = childs[index]; 314 | if (this.selectedItems.indexOf(element) !== -1 && this.selectedItems.length > 1) { 315 | this.selectedItems.splice(this.selectedItems.indexOf(element), 1); 316 | } 317 | } 318 | } 319 | 320 | } 321 | }); 322 | } 323 | 324 | // let deSelectedItems = Array(); 325 | // for (let i = 0; i < this._data.length; i++) { 326 | // if(this.selectedItems.indexOf(this._data[i]) === -1) 327 | // { 328 | // deSelectedItems.push(this._data[i]); 329 | // } 330 | 331 | // } 332 | 333 | this.onChangeCallback(this.emittedValue(this.selectedItems)); 334 | this.onDeSelect.emit(this.emittedValue(this.selectedItems)); 335 | } 336 | 337 | isSelected(clickedItem: ListItemDropdown) { 338 | let found = false; 339 | this.selectedItems.forEach(item => { 340 | if (clickedItem.id === item.id) { 341 | found = true; 342 | } 343 | }); 344 | return found; 345 | } 346 | 347 | 348 | 349 | } 350 | -------------------------------------------------------------------------------- /projects/ngx-magic-table/src/lib/ngx-magic-table/ngx-magic-table.component.ts: -------------------------------------------------------------------------------- 1 | import { element } from "protractor"; 2 | import { PagingInput } from "../models/Paging-input"; 3 | import { SortInput } from "../models/sort-input"; 4 | import { 5 | Component, 6 | OnInit, 7 | Input, 8 | ContentChildren, 9 | TemplateRef, 10 | QueryList, 11 | AfterContentInit, 12 | ContentChild, 13 | Output, 14 | EventEmitter, 15 | ViewChild, 16 | AfterViewChecked, 17 | AfterContentChecked, 18 | AfterViewInit, 19 | Directive, 20 | ElementRef, 21 | Renderer, 22 | HostListener, 23 | Renderer2, 24 | ViewChildren, 25 | } from "@angular/core"; 26 | import { HeaderItem } from "../models/header-item"; 27 | import { HeaderCell } from "../models/header-cell"; 28 | import { NgxColumnTemplateComponent } from "../ngx-column-template/ngx-column-template.component"; 29 | import { NamedTemplateDirective } from "../ngx-named-template/ngx-named-template.directive"; 30 | import { NgxMultiselectDropdownComponent } from "../ngx-multiselect-dropdown/ngx-multiselect-dropdown.component"; 31 | import { OrderDirection } from "../models/enum"; 32 | 33 | import { v4 as uuidv4 } from "uuid"; 34 | import { IPagingInput, ISortInput } from "../models/interface"; 35 | import { CellsInfo } from "../models/cells-info"; 36 | import { delay } from "q"; 37 | import { ReturnStatement } from "@angular/compiler"; 38 | 39 | import { ReverseArray } from "../pipe/reverse-array"; 40 | 41 | @Component({ 42 | selector: "ngx-magic-table", 43 | templateUrl: "./ngx-magic-table.component.html", 44 | styleUrls: ["./ngx-magic-table.component.css"], 45 | }) 46 | export class NgxMagicTableComponent implements AfterContentInit { 47 | @ContentChildren(NgxColumnTemplateComponent) 48 | set templates(value: QueryList) { 49 | this.templatesArray = value.toArray(); 50 | if (this.templatesArrayBase == null) { 51 | this.templatesArrayBase = new Array(); 52 | for (let index = 0; index < this.templatesArray.length; index++) { 53 | const element = this.templatesArray[index]; 54 | const columntable = new ColumnTable(); 55 | columntable.index = element.index; 56 | columntable.cellWidth = element.cellWidth; 57 | columntable.sortable = element.sortable; 58 | columntable.draggable = element.draggable; 59 | columntable.visible = element.visible; 60 | this.templatesArrayBase.push(columntable); 61 | } 62 | } 63 | } 64 | 65 | @ContentChild("pagination") 66 | pagination: TemplateRef; 67 | 68 | constructor(private renderer: Renderer2, private el: ElementRef) { 69 | this.unsubscribeMouseMove = null; 70 | this.unsubscribeMouseUp = null; 71 | this.tableWidth = 200; 72 | this.mainWidth = 200; 73 | this.isRTL = false; 74 | this.scrollWidth = 0; 75 | this.listcellsInfo = new Array(); 76 | this.buttonListColumnStyle = "btn btn-outline-info"; 77 | this.buttonSaveTableStyle = "btn btn-outline-info"; 78 | this.templatesArray = new Array(); 79 | this.templatesArrayBase = null; 80 | this.autoSize = true; 81 | this.message = ""; 82 | this.rowClassRenderer = (row) => ""; 83 | this.MinWidth = 80; 84 | if (this.pageSize == null) { 85 | this.pageSize = 10; 86 | } 87 | this.rows = new Array(); 88 | this.footerRows = new Array(); 89 | } 90 | 91 | @Input() rows = Array(); 92 | 93 | // @Input() footerRows = Array(); 94 | 95 | public _footerRows = Array(); 96 | 97 | @Input() 98 | set footerRows(footerRows: Array) { 99 | if (!footerRows) { 100 | this._footerRows = []; 101 | } else { 102 | this._footerRows = footerRows; 103 | // this.onLoadTable(); 104 | } 105 | // this.onLoadTable(); 106 | } 107 | 108 | get footerRows(): Array { 109 | return this._footerRows; 110 | } 111 | 112 | // set rows(rows: Array) { 113 | // if (!rows) { 114 | // this.rows = []; 115 | // } else { 116 | // this.rows = rows; 117 | // } 118 | // } 119 | // get rows(): Array { 120 | // return this.rows; 121 | // } 122 | 123 | @Input() 124 | autoSize: Boolean; 125 | 126 | @Input() buttonSaveTableStyle: string; 127 | @Input() buttonListColumnStyle: string; 128 | @Input() 129 | paginated: Boolean = false; 130 | @Input() 131 | customSort: Boolean = true; 132 | @Input() 133 | customPaginate: Boolean = false; 134 | @Input() 135 | totalCount: number = 0; 136 | @Input() 137 | pageSize?: number = 10; 138 | @Input() 139 | currentPage: number = 1; 140 | @Input() 141 | pageSizes: number[] = [10, 20, 50, 100]; 142 | 143 | @Input() 144 | sort: String = ""; 145 | @Input() 146 | sortDirection: OrderDirection = OrderDirection.Ascending; 147 | @Input() 148 | hidden: Boolean = false; 149 | @Input() 150 | selectedClass: String = "table-secondary"; 151 | 152 | @Input() rowSelected: T; 153 | 154 | @Output() 155 | pageChange = new EventEmitter(); 156 | @Output() 157 | sortChange = new EventEmitter(); 158 | @Output() 159 | pageSizeChange = new EventEmitter(); 160 | 161 | @Output() 162 | selectedChange = new EventEmitter(); 163 | @Output() 164 | doubleClick = new EventEmitter(); 165 | @Output() 166 | columnsArrangeChange = new EventEmitter(); 167 | 168 | @Output() saveTable = new EventEmitter>(); 169 | @Output() resetTable = new EventEmitter(); 170 | 171 | @Input() 172 | set loadTable(loadTable: Array) { 173 | if (!loadTable) { 174 | this._loadTable = []; 175 | } else { 176 | this._loadTable = loadTable; 177 | // this.onLoadTable(); 178 | } 179 | this.onLoadTable(); 180 | } 181 | 182 | get loadTable(): Array { 183 | return this._loadTable; 184 | } 185 | 186 | @Input() 187 | isRTL: boolean; 188 | @Input() 189 | rowClassRenderer: (data: T) => string; 190 | @Input() 191 | tableClass: String = "table"; 192 | @Input() 193 | theadClass: String = "thead-light"; 194 | @Input() 195 | tbodyClass: String = ""; 196 | 197 | @Input() 198 | footerCssClass: String = "footerTd"; 199 | 200 | dropdownList = []; 201 | dropdownselectedItems = []; 202 | dropdownSettings = {}; 203 | public listcellsInfo: Array; 204 | public scrollWidth: number; 205 | public tableWidth: number; 206 | public mainWidth: number; 207 | 208 | public _loadTable = Array(); 209 | 210 | // public _rowsFilter = Array(); 211 | public Math = Math; 212 | public Arr = Array; 213 | public templatesArray: NgxColumnTemplateComponent[]; 214 | public templatesArrayBase: ColumnTable[]; 215 | public cells: Array> = new Array>(); 216 | public head: Array = new Array(); 217 | public lowerCells: Array = new Array(); 218 | public depth = 0; 219 | public uid = uuidv4(); 220 | public selectedRow: T; 221 | public draggingCell: HeaderCell; 222 | public sortInput: SortInput = new SortInput(); 223 | public pagingInput: PagingInput = new PagingInput(); 224 | 225 | pixcelXBefore: number; 226 | widthBefore: number; 227 | widthAfter: number; 228 | resizeElement: Element; 229 | unsubscribeMouseMove: () => void; 230 | unsubscribeMouseUp: () => void; 231 | pixcelXAfter: number; 232 | MinWidth: number; 233 | message: string; 234 | 235 | ngAfterContentInit() { 236 | this.onLoadTable(); 237 | } 238 | 239 | public getLcm(row: any): number { 240 | const lcm = this.lcmOfList( 241 | this.lowerCells.map((i) => { 242 | return i.template.collection === "" 243 | ? 1 244 | : row[i.template.collection.toString()] != null 245 | ? Math.max(row[i.template.collection.toString()].length, 1) 246 | : 1; 247 | }) 248 | ); 249 | return lcm; 250 | } 251 | 252 | public gcd(a, b): number { 253 | if (b === 0) { 254 | return a; // so that the recursion does not go on forever 255 | } else { 256 | return this.gcd(b, a % b); 257 | } 258 | } 259 | 260 | public lcmOfList(arr): number { 261 | const d = this; 262 | const t = arr.reduce((a, b) => d.lcm(a, b)); 263 | return t; 264 | } 265 | 266 | public lcm(a, b): number { 267 | return (a * b) / this.gcd(a, b); 268 | } 269 | 270 | public allowDrop(x: any) { 271 | x.preventDefault(); 272 | } 273 | 274 | public drop(x: HeaderCell) { 275 | if (this.draggingCell == null) { 276 | return; 277 | } 278 | if (this.draggingCell.template.parent !== x.template.parent) { 279 | return; 280 | } 281 | 282 | const tmp = x.template.index; 283 | x.template.index = this.draggingCell.template.index; 284 | this.draggingCell.template.index = tmp; 285 | this.draggingCell = null; 286 | 287 | this.generateCells(); 288 | this.columnsArrangeChange.emit( 289 | this.templatesArray.map((t) => { 290 | return { 291 | name: t.name, 292 | parent: t.parent, 293 | index: t.index, 294 | }; 295 | }) 296 | ); 297 | this.setDropdownList(); 298 | } 299 | 300 | public drag(x: HeaderCell) { 301 | this.draggingCell = x; 302 | } 303 | protected generateCells() { 304 | this.head = this.generateHeaders(); 305 | this.tableWidth = this.head 306 | .map((i) => +i.Width) 307 | .reduce((sum, current) => sum + current, 0); 308 | this.depth = Math.max( 309 | ...this.head.map((item) => { 310 | return this.Depth(item); 311 | }) 312 | ); 313 | 314 | this.cells = []; 315 | this.lowerCells = []; 316 | this.createHeaderCells(this.head, 0, this.depth); 317 | } 318 | 319 | mainSize(): number { 320 | let htmlElement = document.getElementById("MainMagicTableId"); 321 | return htmlElement.clientWidth; 322 | } 323 | 324 | protected autoSizeCells(clientWidth: number) { 325 | let rowCount = 0; 326 | for (let index = 0; index < this.templatesArray.length; index++) { 327 | const element = this.templatesArray[index]; 328 | let childs = this.templatesArray.filter((t) => t.parent === element.name); 329 | if (childs.length < 1) { 330 | rowCount++; 331 | } 332 | } 333 | 334 | let cellWidth = clientWidth / rowCount; 335 | if (cellWidth < this.MinWidth) { 336 | cellWidth = this.MinWidth; 337 | } 338 | for (let index = 0; index < this.templatesArray.length; index++) { 339 | const element = this.templatesArray[index]; 340 | let childs = this.templatesArray.filter((t) => t.parent === element.name); 341 | if (childs.length < 1) { 342 | element.cellWidth = cellWidth; 343 | this.templatesArray[index] = element; 344 | } 345 | } 346 | } 347 | 348 | protected generateHeaders(headerName: String = ""): Array { 349 | const result = new Array(); 350 | this.templatesArray 351 | .filter((t) => t.parent === headerName) 352 | .filter((t) => t.visible === true) 353 | .sort((first, second) => { 354 | if (first.index > second.index) { 355 | return -1; 356 | } 357 | if (first.index < second.index) { 358 | return 1; 359 | } 360 | return 0; 361 | }) 362 | .forEach((t) => { 363 | let item: HeaderItem; 364 | item = new HeaderItem(); 365 | item.Title = t.title; 366 | item.Index = +t.index; 367 | item.Sortable = t.sortable; 368 | item.Template = t; 369 | item.Visible = t.visible; 370 | item.Childs = this.generateHeaders(t.name); 371 | item.Width = 372 | item.Childs.length === 0 && item.Visible === true 373 | ? +t.cellWidth 374 | : item.Childs.map((i) => +i.Width).reduce( 375 | (sum, current) => sum + current, 376 | 0 377 | ); 378 | item.Name = t.name; 379 | result.push(item); 380 | this.dropdownselectedItems.push({ 381 | item_id: item.Index, 382 | item_text: item.Name, 383 | parent: headerName, 384 | }); 385 | }); 386 | return result; 387 | } 388 | 389 | protected createHeaderCells( 390 | items: HeaderItem[], 391 | level: number, 392 | depth: number 393 | ) { 394 | if (this.cells.length <= level) { 395 | this.cells.push(new Array()); 396 | } 397 | const row = this.cells[level]; 398 | items 399 | .sort((first, second) => first.Index.valueOf() - second.Index.valueOf()) 400 | .map((h) => { 401 | const c = new HeaderCell(); 402 | c.name = h.Name; 403 | c.index = h.Index; 404 | c.title = h.Title; 405 | c.visible = h.Visible; 406 | c.cellWidth = h.Width; 407 | c.sortable = h.Sortable; 408 | c.template = h.Template; 409 | c.HeaderItem = h; 410 | c.colSpan = this.countHeaders(h); 411 | c.rowSpan = h.Childs.length > 0 ? 1 : depth - level; 412 | row.push(c); 413 | if (h.Childs.length > 0) { 414 | this.createHeaderCells(h.Childs, level + 1, depth); 415 | } else { 416 | if (h.Visible === true) { 417 | this.lowerCells.push(c); 418 | } 419 | } 420 | }); 421 | } 422 | 423 | protected countHeaders(item: HeaderItem): number { 424 | if (item.Childs.length) { 425 | const headerCount = item.Childs.map((child) => { 426 | return this.countHeaders(child); 427 | }); 428 | return headerCount.reduce((a, b) => a + b, 0); 429 | } else { 430 | return 1; 431 | } 432 | } 433 | 434 | protected Depth(item: HeaderItem): number { 435 | if (item.Childs.length) { 436 | const depth = Math.max( 437 | ...item.Childs.map((child) => { 438 | return this.Depth(child); 439 | }) 440 | ); 441 | return depth + 1; 442 | } else { 443 | return 1; 444 | } 445 | } 446 | 447 | public selectRow(row: T) { 448 | this.selectedRow = row; 449 | this.rowSelected = row; 450 | this.selectedChange.emit(this.selectedRow); 451 | } 452 | public doubleSelectRow(row: T) { 453 | this.selectedRow = row; 454 | this.rowSelected = row; 455 | this.doubleClick.emit(this.selectedRow); 456 | } 457 | 458 | public changePerPage(pageSize: number) { 459 | if (this.pageSize === pageSize) { 460 | return; 461 | } 462 | 463 | if (this.customPaginate) { 464 | } else { 465 | this.pageSize = pageSize; 466 | } 467 | 468 | this.pagingInput.page = this.currentPage as number; 469 | this.pagingInput.pageSize = pageSize; 470 | this.pageSizeChange.emit(this.pagingInput); 471 | } 472 | 473 | public selectPage(page: number) { 474 | if (this.currentPage === page) { 475 | return; 476 | } 477 | 478 | if (this.customPaginate) { 479 | } else { 480 | this.currentPage = page; 481 | } 482 | 483 | this.pagingInput.page = page; 484 | this.pagingInput.pageSize = this.pageSize as number; 485 | 486 | this.pageChange.emit(this.pagingInput); 487 | } 488 | 489 | public sortToggle(cell: HeaderCell) { 490 | if (cell.sortable === false) { 491 | return; 492 | } 493 | 494 | let newDirection: OrderDirection; 495 | 496 | if (this.sort === cell.name) { 497 | newDirection = 498 | this.sortDirection === OrderDirection.Ascending 499 | ? OrderDirection.Descending 500 | : OrderDirection.Ascending; 501 | } else { 502 | newDirection = OrderDirection.Ascending; 503 | } 504 | 505 | if (!this.customSort) { 506 | this.sort = cell.name; 507 | this.sortDirection = newDirection; 508 | } 509 | this.sortInput.sort = cell.name as string; 510 | this.sortInput.direction = newDirection; 511 | this.sortChange.emit(this.sortInput); 512 | } 513 | 514 | onDomChange(element: ElementRef): void { 515 | let width = 516 | element.nativeElement.offsetWidth - element.nativeElement.clientWidth; 517 | 518 | this.scrollWidth = width; 519 | } 520 | 521 | public inverseArray(array: Array): Array { 522 | let inverse = new Array(); 523 | for (let i = array.length - 1; i >= 0; i--) { 524 | inverse.push(array[i]); 525 | } 526 | return inverse; 527 | } 528 | 529 | public resizeCell(width: number, index: number): number { 530 | if (index == this.lowerCells.length - 1) { 531 | return width - this.scrollWidth; 532 | } else { 533 | return width; 534 | } 535 | } 536 | 537 | onItemSelect(items: any) { 538 | for (let i = 0; i < items.length; i++) { 539 | const item = items[i]; 540 | let template = this.templatesArray.find((t) => t.index === item.item_id); 541 | let index = this.templatesArray.indexOf(item); 542 | template.visible = true; 543 | this.templatesArray[index] = template; 544 | } 545 | // this.setTableSetting(); 546 | this.generateCells(); 547 | } 548 | onItemDeSelect(items: any) { 549 | for (let j = 0; j < this.templatesArray.length; j++) { 550 | let item = items.filter( 551 | (t) => t.item_id === this.templatesArray[j].index 552 | ); 553 | if (item.length <= 0) { 554 | this.templatesArray[j].visible = false; 555 | this.templatesArray[j] = this.templatesArray[j]; 556 | } 557 | } 558 | // this.setTableSetting(); 559 | this.generateCells(); 560 | } 561 | onSelectAll(items: any) { 562 | for (let i = 0; i < this.templatesArray.length; i++) { 563 | const template = this.templatesArray[i]; 564 | let index = this.templatesArray.indexOf(template); 565 | template.visible = true; 566 | this.templatesArray[index] = template; 567 | } 568 | // this.setTableSetting(); 569 | this.generateCells(); 570 | } 571 | onResetTable() { 572 | this.message = " Reseting Table ... "; 573 | this.resetTable.emit(true); 574 | this.setMessage(" Table Reset Successfully "); 575 | } 576 | 577 | onMainDomChange(element: ElementRef): void { 578 | if (this.autoSize) { 579 | let width = element.nativeElement.clientWidth; 580 | this.autoSizeCells(width); 581 | this.generateCells(); 582 | } 583 | } 584 | 585 | setTableSetting() { 586 | this.listcellsInfo = null; 587 | this.listcellsInfo = new Array(); 588 | for (let i = 0; i < this.templatesArray.length; i++) { 589 | const element = this.templatesArray[i]; 590 | this.listcellsInfo.push({ 591 | index: element.index, 592 | name: element.name, 593 | cellWidth: element.cellWidth, 594 | parent: element.parent, 595 | sortable: element.sortable, 596 | draggble: element.draggable, 597 | visible: element.visible, 598 | }); 599 | } 600 | this.loadTable = this.listcellsInfo; 601 | } 602 | 603 | onsaveTable() { 604 | this.message = " Saving Table ... "; 605 | this.setTableSetting(); 606 | // this.listcellsInfo = null; 607 | // this.listcellsInfo = new Array(); 608 | // for (let i = 0; i < this.templatesArray.length; i++) { 609 | // const element = this.templatesArray[i]; 610 | // this.listcellsInfo.push({ 611 | // index: element.index, name: element.name, cellWidth: element.cellWidth, 612 | // parent: element.parent, sortable: element.sortable, draggble: element.draggable, visible: element.visible 613 | // }); 614 | // } 615 | // this.loadTable = this.listcellsInfo; 616 | this.saveTable.emit(this.listcellsInfo); 617 | this.setMessage(" Table Saved Successfully "); 618 | } 619 | 620 | async setMessage(message: string): Promise { 621 | await delay(3000); 622 | this.message = message; 623 | await delay(3000); 624 | this.message = ""; 625 | } 626 | 627 | onLoadTable() { 628 | if (this.templatesArrayBase != null) { 629 | for (let index = 0; index < this.templatesArrayBase.length; index++) { 630 | const element = this.templatesArrayBase[index]; 631 | this.templatesArray[index].index = element.index; 632 | this.templatesArray[index].cellWidth = element.cellWidth; 633 | this.templatesArray[index].sortable = element.sortable; 634 | this.templatesArray[index].draggable = element.draggable; 635 | this.templatesArray[index].visible = element.visible; 636 | } 637 | } 638 | 639 | if (this.templatesArray.length > 0) { 640 | NgxColumnTemplateComponent.normalizeIndexes(this.templatesArray); 641 | this.templatesArray.forEach((i) => 642 | i.changed.subscribe(() => this.generateCells()) 643 | ); 644 | 645 | let changedTable = false; 646 | 647 | if (this.loadTable != null && this.loadTable.length > 0) { 648 | for (let i = 0; i < this.templatesArray.length; i++) { 649 | let template = this.loadTable.filter( 650 | (x) => x.name === this.templatesArray[i].name 651 | ); 652 | if (template == null || template.length == 0) { 653 | if (this.autoSize) { 654 | this.autoSizeCells(this.mainSize()); 655 | } 656 | this.dropdownselectedItems = []; 657 | this.setDropdownList(); 658 | 659 | this.dropdownSettings = { 660 | singleSelection: false, 661 | idField: "item_id", 662 | textField: "item_text", 663 | selectAllText: "Select All", 664 | unSelectAllText: "UnSelect All", 665 | itemsShowLimit: 2, 666 | allowSearchFilter: true, 667 | }; 668 | this.generateCells(); 669 | this.setMessage( 670 | " The table has changed. Consider the changes you need again " 671 | ); 672 | changedTable = true; 673 | return; 674 | } 675 | } 676 | } 677 | 678 | if (!changedTable) { 679 | for (let i = 0; i < this.loadTable.length; i++) { 680 | const element = this.loadTable[i]; 681 | let template = this.templatesArray.filter( 682 | (x) => x.name === element.name 683 | ); 684 | if (template != null && template.length > 0) { 685 | const index = this.templatesArray.indexOf(template[0]); 686 | 687 | template[0].index = element.index; 688 | template[0].cellWidth = element.cellWidth; 689 | template[0].sortable = element.sortable; 690 | template[0].draggable = element.draggble; 691 | template[0].visible = element.visible; 692 | 693 | this.templatesArray[index] = template[0]; 694 | } 695 | } 696 | this.templatesArray = this.templatesArray.sort((x) => x.index); 697 | // this.generateCells(); 698 | } 699 | 700 | if (this.autoSize) { 701 | this.autoSizeCells(this.mainSize()); 702 | } 703 | 704 | this.dropdownselectedItems = []; 705 | 706 | this.setDropdownList(); 707 | 708 | this.dropdownSettings = { 709 | singleSelection: false, 710 | idField: "item_id", 711 | textField: "item_text", 712 | selectAllText: "Select All", 713 | unSelectAllText: "UnSelect All", 714 | itemsShowLimit: 2, 715 | allowSearchFilter: true, 716 | }; 717 | this.generateCells(); 718 | } 719 | } 720 | 721 | public setDropdownList() { 722 | this.dropdownList = []; 723 | for (let index = 0; index < this.templatesArray.length; index++) { 724 | const element = this.templatesArray[index]; 725 | this.dropdownList.push({ 726 | item_id: element.index, 727 | item_text: element.title, 728 | parent: element.parent, 729 | }); 730 | } 731 | } 732 | 733 | public resizeHandle(cell: HeaderCell, mEvent: MouseEvent, idTbody: string) { 734 | event.preventDefault(); 735 | let tbodyId = idTbody; 736 | const tableWidthTemp = this.tableWidth; 737 | this.pixcelXBefore = mEvent.x; 738 | this.widthBefore = +cell.cellWidth; 739 | const draggable = cell.template.draggable; 740 | const sortable = cell.template.sortable; 741 | let lastHeaderItem = cell.HeaderItem; 742 | while (lastHeaderItem.Childs.length > 0) { 743 | lastHeaderItem = lastHeaderItem.Childs[lastHeaderItem.Childs.length - 1]; 744 | } 745 | const allCells = this.cells.reduce(function (a, b) { 746 | return a.concat(b); 747 | }); 748 | const lastCell = allCells 749 | .filter((t) => t.visible === true) 750 | .find((i) => i.name === lastHeaderItem.Name); 751 | 752 | const widthLastCell = +lastCell.cellWidth; 753 | this.unsubscribeMouseMove = this.renderer.listen( 754 | "document", 755 | "mousemove", 756 | (event) => { 757 | // if (this.isLastColumnMouse) { 758 | // return; 759 | // } 760 | event.preventDefault(); 761 | cell.template.draggable = false; 762 | cell.template.sortable = false; 763 | let WidthAdd = event.x - this.pixcelXBefore; 764 | if (this.isRTL) { 765 | WidthAdd = this.pixcelXBefore - event.x; 766 | } 767 | 768 | if (lastCell.cellWidth >= this.MinWidth) { 769 | cell.cellWidth = this.widthBefore + WidthAdd; 770 | lastCell.cellWidth = widthLastCell + WidthAdd; 771 | this.tableWidth = tableWidthTemp + WidthAdd; 772 | } 773 | } 774 | ); 775 | 776 | this.unsubscribeMouseUp = this.renderer.listen( 777 | "document", 778 | "mouseup", 779 | (event) => { 780 | event.preventDefault(); 781 | if (lastCell.cellWidth < this.MinWidth) { 782 | lastCell.cellWidth = this.MinWidth; 783 | } 784 | lastCell.template.cellWidth = lastCell.cellWidth; 785 | 786 | if (cell.cellWidth < this.MinWidth) { 787 | cell.cellWidth = this.MinWidth; 788 | } 789 | cell.template.cellWidth = cell.cellWidth; 790 | 791 | cell.template.draggable = draggable; 792 | cell.template.sortable = sortable; 793 | 794 | let htmlElement = document.getElementById(tbodyId); 795 | this.scrollWidth = htmlElement.offsetWidth - htmlElement.clientWidth; 796 | if (this.unsubscribeMouseMove) { 797 | this.unsubscribeMouseMove(); 798 | this.unsubscribeMouseMove = null; 799 | this.generateCells(); 800 | } 801 | 802 | if (this.unsubscribeMouseUp) { 803 | this.unsubscribeMouseUp(); 804 | this.unsubscribeMouseUp = null; 805 | } 806 | } 807 | ); 808 | } 809 | } 810 | 811 | export class ColumnTable { 812 | index: number; 813 | cellWidth: number; 814 | sortable: boolean; 815 | draggable: boolean; 816 | visible: boolean; 817 | } 818 | --------------------------------------------------------------------------------