satreci-ngx-query-table v1.2.6

satreci-ngx-query-table

• Angular 용 gql 기반의 리치 테이블 모듈
• Angular CLI 1.7.4 버전 기준
  

demo

• ng serve 수행 후 http://localhost:4200에서 확인

Getting started

1. install satreci-ngx-query-table module
   npm i -S satreci-ngx-query-table

2. import module

   import { QueryTableModule } from 'satreci-ngx-query-table';
   
   @NgModule({
       declarations: [AppComponent],
       imports: [QueryTableModule],
       bootstrap: [AppComponent]
   })
   export class AppModule {}

3. install third-party modules

   • "@ng-select/ng-select": "^1.5.2"
   • "antlr4ts": "^0.4.1-alpha.0"
   • "bootstrap": "^4.1.3"
   • "satreci-ngx-query-table": "0.0.0"
   • "jquery": "^3.3.1"
   • "ngx-drag-drop": "^1.0.3"
   • "ngx-pagination": "^3.2.0"
   • "popper.js": "^1.14.4"
4. include angular-cli.json

   "styles": [
        ...
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/@ng-select/ng-select/themes/default.theme.css",
        "../node_modules/satreci-ngx-query-table/src/assets/style.css"
    ],
    "scripts": [
        ...
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
    ],

5. change typescript target
   edit tsconfig.json file

   ...
   target: "es6",
   ...

Features

• 검색 모드 확장
• 테이블 도구 기능 확장
• GQL 검색
• 컬럼 토글
• 컬럼 위치 변경
• 컬럼 별 정렬
• 페이지네이션
• 체크박스를 통한 다중 처리
• 각 구성 요소 별 이벤트 처리