Table change

Yarik
1 parent 05b0b5d8
Showing 16 changed files with 1468 additions and 9 deletions Show diff stats
config/head-config.common.js
config/webpack.common.js
package.json
src/app/app.module.ts
src/app/pages/statements/ag-grid.css
src/app/pages/statements/components/busStop2/busStop2.component.ts
src/app/pages/statements/components/busStop2/busStop2.html
src/app/pages/statements/components/busStop2/busStop2.scss
src/app/pages/statements/components/busStop2/busStop2.service.ts
src/app/pages/statements/components/busStop2/busStop2.ts
src/app/pages/statements/components/busStop2/index.ts
src/app/pages/statements/statements.component.ts
src/app/pages/statements/statements.module.ts
src/app/pages/statements/statements.routing.ts
src/app/pages/statements/theme-bootstrap.css
src/index.html
@@ -32,8 +32,7 @@ module.exports = {
     /** <link> tags for favicons **/
     { rel: 'icon', type: 'image/png', sizes: '32x32', href: 'assets/icon/favicon-32x32.png' },
     { rel: 'icon', type: 'image/png', sizes: '96x96', href: 'assets/icon/favicon-96x96.png' },
-    { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'assets/icon/favicon-16x16.png' }
-
+    { rel: 'icon', type: 'image/png', sizes: '16x16', href: 'assets/icon/favicon-16x16.png' },
   ],
   meta: [
     { name: 'msapplication-TileColor', content: '#ffffff' },
@@ -31,7 +31,6 @@ const METADATA = {
   baseUrl: '/',
   isDevServer: helpers.isWebpackDevServer()
 };
-
 /*
  * Webpack configuration
  *
@@ -49,7 +49,10 @@
     "reflect-metadata": "^0.1.9",
     "rxjs": "~5.0.2",
     "tether": "^1.2.4",
-    "zone.js": "~0.7.4"
+    "zone.js": "~0.7.4",
+    "ag-grid": "7.2.x",
+    "ag-grid-enterprise": "7.2.x",
+    "ag-grid-ng2": "7.2.x"
   },
   "devDependencies": {
     "@angular/compiler-cli": "2.4.4",
@@ -46,7 +46,7 @@ export type StoreType = {
     ReactiveFormsModule,
     NgaModule.forRoot(),
     PagesModule,
-    routing
+    routing,
   ],
   providers: [ // expose our Services and Providers into Angular's dependency injection
     ENV_PROVIDERS,
+ag-grid-ng2 {
+  display: inline-block;
+}
+.ag-rtl {
+  direction: rtl;
+}
+.ag-ltr {
+  direction: ltr;
+}
+.ag-select-agg-func-popup {
+  position: absolute;
+}
+.ag-body-no-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ag-root {
+/* set to relative, so absolute popups appear relative to this */
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+/* was getting some 'should be there' scrolls, this sorts it out */
+  overflow: hidden;
+}
+.ag-font-style {
+  cursor: default;
+/* disable user mouse selection */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ag-no-scrolls {
+  white-space: nowrap;
+  display: inline-block;
+}
+.ag-scrolls {
+  height: 100%;
+}
+.ag-popup-backdrop {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.ag-header {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  white-space: nowrap;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+}
+.ag-pinned-left-header {
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+}
+.ag-pinned-right-header {
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+}
+.ag-header-viewport {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 100%;
+}
+.ag-scrolls .ag-header-row {
+  position: absolute;
+}
+.ag-scrolls .ag-header-container {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  white-space: nowrap;
+  height: 100%;
+}
+.ag-no-scrolls .ag-header-container {
+  white-space: nowrap;
+}
+.ag-header-overlay {
+  display: block;
+  position: absolute;
+}
+.ag-header-cell {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  vertical-align: bottom;
+  text-align: center;
+  display: inline-block;
+  height: 100%;
+  position: absolute;
+}
+.ag-dnd-ghost {
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: absolute;
+  background: #e5e5e5;
+  border: 1px solid #000;
+  cursor: move;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  padding: 3px;
+  line-height: 1.4;
+}
+.ag-dnd-ghost-icon {
+  display: inline-block;
+  float: left;
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.ag-dnd-ghost-label {
+  display: inline-block;
+}
+.ag-header-group-cell {
+  height: 100%;
+  display: inline-block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: absolute;
+}
+.ag-header-group-cell-label {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ag-header-cell-label {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ag-header-cell-resize {
+  height: 100%;
+  width: 4px;
+  cursor: col-resize;
+}
+.ag-ltr .ag-header-cell-resize {
+  float: right;
+}
+.ag-ltr .ag-pinned-right-header .ag-header-cell-resize {
+  float: left;
+}
+.ag-rtl .ag-header-cell-resize {
+  float: left;
+}
+.ag-rtl .ag-pinned-left-header .ag-header-cell-resize {
+  float: right;
+}
+.ag-header-expand-icon {
+  padding-left: 4px;
+}
+.ag-header-cell-menu-button {
+  float: right;
+}
+.ag-overlay-panel {
+  display: table;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.ag-overlay-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+.ag-bl-overlay {
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+}
+.ag-bl-full-height {
+  height: 100%;
+  overflow: auto;
+  position: relative;
+}
+.ag-bl-full-height-west {
+  height: 100%;
+  float: left;
+}
+.ag-bl-full-height-east {
+  height: 100%;
+  float: right;
+}
+.ag-bl-full-height-center {
+  height: 100%;
+}
+.ag-bl-normal {
+  height: 100%;
+  position: relative;
+}
+.ag-bl-normal-center-row {
+  height: 100%;
+  overflow: hidden;
+}
+.ag-bl-normal-west {
+  height: 100%;
+  float: left;
+}
+.ag-bl-normal-east {
+  height: 100%;
+  float: right;
+}
+.ag-bl-normal-center {
+  height: 100%;
+}
+.ag-bl-dont-fill {
+  position: relative;
+}
+.ag-body {
+  height: 100%;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: absolute;
+}
+.ag-floating-top {
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  white-space: nowrap;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.ag-pinned-left-floating-top {
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+.ag-pinned-right-floating-top {
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+.ag-floating-top-viewport {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 100%;
+}
+.ag-floating-top-container {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  white-space: nowrap;
+}
+.ag-floating-bottom {
+  position: absolute;
+  left: 0px;
+  width: 100%;
+  white-space: nowrap;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.ag-pinned-left-floating-bottom {
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+.ag-pinned-right-floating-bottom {
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  height: 100%;
+  position: relative;
+}
+.ag-floating-bottom-viewport {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 100%;
+}
+.ag-floating-bottom-container {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  white-space: nowrap;
+}
+.ag-pinned-left-cols-viewport {
+  float: left;
+}
+.ag-pinned-left-cols-container {
+  display: inline-block;
+  position: relative;
+}
+.ag-pinned-right-cols-viewport {
+  float: right;
+}
+.ag-ltr .ag-pinned-right-cols-viewport {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.ag-ltr .ag-pinned-left-cols-viewport {
+  overflow: hidden;
+}
+.ag-rtl .ag-pinned-right-cols-viewport {
+  overflow: hidden;
+}
+.ag-rtl .ag-pinned-left-cols-viewport {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.ag-pinned-right-cols-container {
+  display: inline-block;
+  position: relative;
+}
+.ag-body-viewport-wrapper {
+  height: 100%;
+}
+.ag-body-viewport {
+  overflow-x: auto;
+  overflow-y: auto;
+  height: 100%;
+}
+.ag-full-width-viewport {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: inline;
+  pointer-events: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.ag-full-width-container {
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.ag-floating-bottom-full-width-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
+  overflow: hidden;
+  display: inline;
+}
+.ag-floating-top-full-width-container {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
+  overflow: hidden;
+  display: inline;
+}
+.ag-full-width-row {
+  pointer-events: all;
+  overflow: hidden;
+}
+.ag-scrolls .ag-body-container {
+  position: relative;
+  display: inline-block;
+}
+.ag-row-animation {
+  -webkit-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+  -moz-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+  -o-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+  -ms-transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+  transition: top 0.4s, height 0.4s, background-color 0.1s, opacity 0.2s;
+}
+.ag-row-no-animation {
+  -webkit-transition: background-color 0.1s;
+  -moz-transition: background-color 0.1s;
+  -o-transition: background-color 0.1s;
+  -ms-transition: background-color 0.1s;
+  transition: background-color 0.1s;
+}
+.ag-row {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ag-scrolls .ag-row {
+  white-space: nowrap;
+  position: absolute;
+  width: 100%;
+}
+.ag-no-scrolls .ag-row {
+  position: relative;
+}
+.ag-column-drop {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ag-column-drop-vertical .ag-column-drop-cell {
+  display: block;
+}
+.ag-column-drop-vertical .ag-column-drop-empty-message {
+  display: block;
+}
+.ag-column-drop-vertical .ag-column-drop-cell-button {
+  line-height: 16px;
+}
+.ag-ltr .ag-column-drop-vertical .ag-column-drop-cell-button {
+  float: right;
+}
+.ag-rtl .ag-column-drop-vertical .ag-column-drop-cell-button {
+  float: left;
+}
+.ag-column-drop-horizontal {
+  white-space: nowrap;
+}
+.ag-column-drop-horizontal .ag-column-drop-cell {
+  display: inline-block;
+}
+.ag-column-drop-horizontal .ag-column-drop-empty-message {
+  display: inline-block;
+}
+.ag-cell {
+  display: inline-block;
+  white-space: nowrap;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  position: absolute;
+}
+.ag-value-slide-out {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  margin-right: 5px;
+  -webkit-transition: opacity 3s, margin-right 3s;
+  -moz-transition: opacity 3s, margin-right 3s;
+  -o-transition: opacity 3s, margin-right 3s;
+  -ms-transition: opacity 3s, margin-right 3s;
+  transition: opacity 3s, margin-right 3s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  -ms-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.ag-value-slide-out-end {
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  margin-right: 10px;
+}
+.ag-opacity-zero {
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+}
+.ag-cell-edit-input {
+  width: 100%;
+  height: 100%;
+}
+.ag-group-cell-entire-row {
+  width: 100%;
+  display: inline-block;
+  white-space: nowrap;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ag-footer-cell-entire-row {
+  width: 100%;
+  display: inline-block;
+  white-space: nowrap;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.ag-large .ag-root {
+  font-size: 20px;
+}
+.ag-popup-editor {
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ag-menu {
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ag-menu-column-select-wrapper {
+  width: 200px;
+  height: 300px;
+  overflow: auto;
+}
+.ag-menu-list {
+  display: table;
+  border-collapse: collapse;
+}
+.ag-menu-option {
+  display: table-row;
+}
+.ag-menu-option-text {
+  display: table-cell;
+}
+.ag-menu-option-shortcut {
+  display: table-cell;
+}
+.ag-menu-option-icon {
+  display: table-cell;
+}
+.ag-menu-option-popup-pointer {
+  display: table-cell;
+}
+.ag-menu-separator {
+  display: table-row;
+}
+.ag-menu-separator-cell {
+  display: table-cell;
+}
+.ag-virtual-list-viewport {
+  overflow-x: auto;
+  height: 100%;
+  width: 100%;
+}
+.ag-virtual-list-container {
+  position: relative;
+  overflow: hidden;
+}
+.ag-rich-select {
+  outline: none;
+}
+.ag-rich-select-list {
+  width: 200px;
+  height: 200px;
+}
+.ag-set-filter-list {
+  width: 200px;
+  height: 200px;
+}
+.ag-set-filter-item {
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ag-virtual-list-item {
+  position: absolute;
+  width: 100%;
+}
+.ag-filter-filter {
+  width: 170px;
+  margin: 4px;
+}
+.ag-filter-select {
+  width: 110px;
+  margin: 4px 4px 0px 4px;
+}
+.ag-no-vertical-scroll .ag-scrolls {
+  height: unset;
+}
+.ag-no-vertical-scroll .ag-body {
+  height: unset;
+}
+.ag-no-vertical-scroll .ag-body-viewport-wrapper {
+  height: unset;
+}
+.ag-no-vertical-scroll .ag-body-viewport {
+  height: unset;
+}
+.ag-list-selection {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
+.ag-tool-panel {
+  width: 200px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default;
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.ag-column-select-indent {
+  display: inline-block;
+}
+.ag-column-select-column {
+  white-space: nowrap;
+}
+.ag-ltr .ag-column-select-column {
+  margin-left: 14px;
+}
+.ag-rtl .ag-column-select-column {
+  margin-right: 14px;
+}
+.ag-column-select-column-group {
+  white-space: nowrap;
+}
+.ag-hidden {
+  display: none !important;
+}
+.ag-faded {
+  opacity: 0.3;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+  filter: alpha(opacity=30);
+}
+.ag-width-half {
+  width: 50%;
+  display: inline-block;
+}
+.ag-shake-left-to-right {
+  -webkit-animation-name: ag-shake-left-to-right;
+  -moz-animation-name: ag-shake-left-to-right;
+  -o-animation-name: ag-shake-left-to-right;
+  -ms-animation-name: ag-shake-left-to-right;
+  animation-name: ag-shake-left-to-right;
+  -webkit-animation-duration: 0.2s;
+  -moz-animation-duration: 0.2s;
+  -o-animation-duration: 0.2s;
+  -ms-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+  -moz-animation-direction: alternate;
+  -o-animation-direction: alternate;
+  -ms-animation-direction: alternate;
+  animation-direction: alternate;
+}
+@-moz-keyframes ag-shake-left-to-right {
+  from {
+    padding-left: 6px;
+    padding-right: 2px;
+  }
+  to {
+    padding-left: 2px;
+    padding-right: 6px;
+  }
+}
+@-webkit-keyframes ag-shake-left-to-right {
+  from {
+    padding-left: 6px;
+    padding-right: 2px;
+  }
+  to {
+    padding-left: 2px;
+    padding-right: 6px;
+  }
+}
+@-o-keyframes ag-shake-left-to-right {
+  from {
+    padding-left: 6px;
+    padding-right: 2px;
+  }
+  to {
+    padding-left: 2px;
+    padding-right: 6px;
+  }
+}
+@keyframes ag-shake-left-to-right {
+  from {
+    padding-left: 6px;
+    padding-right: 2px;
+  }
+  to {
+    padding-left: 2px;
+    padding-right: 6px;
+  }
+}
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { BusStop2Service } from './busStop2.service';
+
+import { LocalDataSource } from 'ng2-smart-table';
+import { GridOptions } from 'ag-grid/main';
+
+@Component({
+  selector: 'statement-table',
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./busStop2.scss'],
+  templateUrl: './busStop2.html',
+})
+export class BusStop2 {
+  source: LocalDataSource = new LocalDataSource();
+
+  public showGrid: boolean;
+  public rowData: any[];
+  public rowCount: string;
+  private gridOptions: GridOptions;
+  private columnDefs: any[];
+
+
+  constructor(protected service: BusStop2Service) {
+    this.gridOptions = <GridOptions>{};
+    // this.gridOptions.rowModelType = 'virtual';
+    this.service.getData().then((data) => {
+      this.source.load(data);
+      this.rowData = data;
+    });
+    this.createColumnDefs();
+    this.showGrid = true;
+  }
+
+  onDeleteConfirm(event): void {
+    if (window.confirm('Вы уверены что хотите удалить??')) {
+      event.confirm.resolve();
+    } else {
+      event.confirm.reject();
+    }
+  }
+
+  private createColumnDefs() {
+    this.columnDefs = [
+      {
+        headerName: '#',
+        width: 30,
+        checkboxSelection: true,
+        suppressSorting: true,
+        suppressMenu: true,
+        pinned: true
+      },
+      {
+        headerName: 'ID',
+        field: 'id',
+        editable: true,
+        width: 150
+      },
+      {
+        headerName: 'Назва дороги',
+        field: 'road',
+        editable: true,
+        width: 150
+      },
+      {
+        headerName: 'Область',
+        field: 'region',
+        editable: true,
+        width: 150
+      },
+      {
+        headerName: 'Місцезнаходження, км+ справа',
+        field: 'locationRight',
+        editable: true,
+        width: 150
+      },
+      {
+        headerName: 'Місцезнаходження, км+ зліва',
+        field: 'locationLeft',
+        editable: true,
+        width: 150
+      },
+      {
+        headerName: 'Технічний стан',
+        field: 'state',
+        editable: true,
+        width: 150
+      }
+    ];
+  }
+}
+<div class="widgets">
+
+  <div class="row">
+    <ba-card title="Автобусні зупинки" baCardClass="with-scroll">
+      <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-bootstrap"
+                     [gridOptions]="gridOptions"
+                     [columnDefs]="columnDefs"
+                     [rowData]="rowData"
+
+                     enableColResize
+                     enableSorting
+                     enableFilter
+                     groupHeaders
+                     suppressRowClickSelection
+                     toolPanelSuppressGroups
+                     toolPanelSuppressValues
+                     debug
+                     rowHeight="22"
+                     rowSelection="multiple"
+      >
+        </ag-grid-ng2>
+    </ba-card>
+  </div>
+
+</div>
+@import "../../../../theme/sass/conf/conf";
+
+.ng2-smart-table-container table.ng2-smart-table {
+  th, td {
+    border: 1px solid $border-light !important;
+    line-height: 35px;
+    vertical-align: middle;
+  }
+
+  color: $default-text;
+
+  input {
+    line-height: 1.5 !important;
+  }
+
+  tbody {
+    tr:hover {
+      background: rgba(0, 0, 0, 0.03);
+    }
+  }
+
+  a.ng2-smart-sort-link {
+    font-size: 14px !important;
+    color: $default-text;
+    font-weight: $font-bolder;
+    &.sort {
+      font-weight: $font-bolder !important;
+
+      &::after {
+        border-bottom-color: $default-text !important;
+      }
+    }
+  }
+
+  .ng2-smart-actions {
+    width: 70px;
+    text-align: center;
+    .actions {
+      float: none;
+      text-align: center;
+    }
+  }
+
+  a.ng2-smart-action {
+    font-size: 14px !important;
+    color: $default-text;
+    padding: 0 5px;
+    display: inline-block;
+
+    &.ng2-smart-action-add-add {
+      font-size: 25px !important;
+    }
+  }
+}
+
+nav.ng2-smart-pagination-nav {
+  display: flex;
+  justify-content: center;
+}
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { BusStop2 } from './busStop2';
+
+@Injectable()
+export class BusStop2Service {
+  private url = 'http://localhost:5000/busstop';
+  private headers = new Headers({'Content-Type': 'application/json'});
+  constructor(private http: Http) { }
+  getData(): Promise<BusStop2[]> {
+    let busStops: BusStop2[] = [{
+      id: 1,
+      road: 'Test',
+      region: 'Test',
+      locationLeft: '1',
+      locationRight: '1',
+      state: 'Test'
+    }];
+    return Promise.resolve(busStops);
+    // return this.http.get(this.url)
+    //   .toPromise()
+    //   .then(response => response.json().busStopListDsM as BusStop2[])
+    //   .catch(this.handleError);
+  }
+  private handleError(error: any): Promise<any> {
+    console.error('An error occured', error);
+    return Promise.reject(error.message || error);
+  }
+}
+export class BusStop2 {
+    id: number;
+    road: string;
+    region: string;
+    locationRight: string;
+    locationLeft: string;
+    state: string;
+}
+export * from './busStop2.component';
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
  
 @Component({
   selector: 'statements',
-  styles: [],
+  styles: [ ],
   template: `<router-outlet></router-outlet>`
 })
 export class Statements {
@@ -3,11 +3,14 @@ import { CommonModule }  from &#39;@angular/common&#39;;
 import { FormsModule } from '@angular/forms';
 import { NgaModule } from '../../theme/nga.module';
 import { Ng2SmartTableModule } from 'ng2-smart-table';
+import { AgGridModule } from 'ag-grid-ng2/main';
  
 import { routing }       from './statements.routing';
 import { Statements } from './statements.component';
 import { BusStop } from './components/busStop/busStop.component';
+import { BusStop2 } from './components/busStop2/busStop2.component';
 import { BusStopService } from './components/busStop/busStop.service';
+import { BusStop2Service } from './components/busStop2/busStop2.service';
  
 @NgModule({
   imports: [
@@ -16,13 +19,18 @@ import { BusStopService } from &#39;./components/busStop/busStop.service&#39;;
     NgaModule,
     routing,
     Ng2SmartTableModule,
+    AgGridModule.withComponents([
+      BusStop2
+    ]),
   ],
   declarations: [
     Statements,
     BusStop,
+    BusStop2
   ],
   providers: [
     BusStopService,
+    BusStop2Service
   ]
 })
 export class StatementsModule {
@@ -2,6 +2,7 @@ import { Routes, RouterModule }  from &#39;@angular/router&#39;;
  
 import { Statements } from './statements.component';
 import { BusStop } from './components/busStop/busStop.component';
+import { BusStop2 } from './components/busStop2/busStop2.component';
  
 // noinspection TypeScriptValidateTypes
 const routes: Routes = [
@@ -9,7 +10,8 @@ const routes: Routes = [
     path: '',
     component: Statements,
     children: [
-      { path: 'bus-stop', component: BusStop }
+      { path: 'bus-stop', component: BusStop },
+      { path: 'bus-stop-2', component: BusStop2 }
     ]
   }
 ];
+.ag-bootstrap {
+  line-height: 1.4;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  color: #000;
+/* this is for the rowGroupPanel, that appears along the top of the grid */
+/* this is for the column drops that appear in the toolPanel */
+}
+.ag-bootstrap img {
+  vertical-align: middle;
+  border: 0;
+}
+.ag-bootstrap .ag-root {
+  border: none;
+}
+.ag-bootstrap .ag-cell-not-inline-editing {
+  padding: 4px;
+}
+.ag-bootstrap .ag-cell-range-selected-1:not(.ag-cell-focus) {
+  background-color: rgba(120,120,120,0.4);
+}
+.ag-bootstrap .ag-cell-range-selected-2:not(.ag-cell-focus) {
+  background-color: rgba(80,80,80,0.4);
+}
+.ag-bootstrap .ag-cell-range-selected-3:not(.ag-cell-focus) {
+  background-color: rgba(40,40,40,0.4);
+}
+.ag-bootstrap .ag-cell-range-selected-4:not(.ag-cell-focus) {
+  background-color: rgba(0,0,0,0.4);
+}
+.ag-bootstrap .ag-column-moving .ag-cell {
+  -webkit-transition: left 0.2s;
+  -moz-transition: left 0.2s;
+  -o-transition: left 0.2s;
+  -ms-transition: left 0.2s;
+  transition: left 0.2s;
+}
+.ag-bootstrap .ag-column-moving .ag-header-cell {
+  -webkit-transition: left 0.2s;
+  -moz-transition: left 0.2s;
+  -o-transition: left 0.2s;
+  -ms-transition: left 0.2s;
+  transition: left 0.2s;
+}
+.ag-bootstrap .ag-column-moving .ag-header-group-cell {
+  -webkit-transition: left 0.2s;
+  -moz-transition: left 0.2s;
+  -o-transition: left 0.2s;
+  -ms-transition: left 0.2s;
+  transition: left 0.2s;
+}
+.ag-bootstrap .ag-cell-focus {
+  border: 2px solid #217346;
+}
+.ag-bootstrap .ag-cell-no-focus {
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+.ag-bootstrap .ag-ltr .ag-cell-no-focus {
+  border-right: none;
+  border-left: 1px solid transparent;
+}
+.ag-bootstrap .ag-rtl .ag-cell-no-focus {
+  border-right: 1px solid transparent;
+  border-left: none;
+}
+.ag-bootstrap .ag-rtl .ag-cell-first-right-pinned {
+  border-left: none;
+}
+.ag-bootstrap .ag-ltr .ag-cell-first-right-pinned {
+  border-left: none;
+}
+.ag-bootstrap .ag-rtl .ag-cell-last-left-pinned {
+  border-right: none;
+}
+.ag-bootstrap .ag-ltr .ag-cell-last-left-pinned {
+  border-right: none;
+}
+.ag-bootstrap .ag-cell-highlight {
+  border: 1px solid #006400;
+}
+.ag-bootstrap .ag-cell-highlight-animation {
+  -webkit-transition: border 1s;
+  -moz-transition: border 1s;
+  -o-transition: border 1s;
+  -ms-transition: border 1s;
+  transition: border 1s;
+}
+.ag-bootstrap .ag-value-change-delta {
+  padding-right: 2px;
+}
+.ag-bootstrap .ag-value-change-delta-up {
+  color: #006400;
+}
+.ag-bootstrap .ag-value-change-delta-down {
+  color: #8b0000;
+}
+.ag-bootstrap .ag-value-change-value {
+  background-color: transparent;
+  border-radius: 1px;
+  padding-left: 1px;
+  padding-right: 1px;
+  -webkit-transition: background-color 1s;
+  -moz-transition: background-color 1s;
+  -o-transition: background-color 1s;
+  -ms-transition: background-color 1s;
+  transition: background-color 1s;
+}
+.ag-bootstrap .ag-value-change-value-highlight {
+  background-color: #cec;
+  -webkit-transition: background-color 0.1s;
+  -moz-transition: background-color 0.1s;
+  -o-transition: background-color 0.1s;
+  -ms-transition: background-color 0.1s;
+  transition: background-color 0.1s;
+}
+.ag-bootstrap .ag-rich-select {
+  font-size: 14px;
+  border: none;
+  background-color: #fff;
+}
+.ag-bootstrap .ag-rich-select-value {
+  padding: 2px;
+}
+.ag-bootstrap .ag-rich-select-list {
+  border-top: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-rich-select-row {
+  padding: 2px;
+}
+.ag-bootstrap .ag-rich-select-row-selected {
+  background-color: #bde2e5;
+}
+.ag-bootstrap .ag-large-text {
+  border: none;
+}
+.ag-bootstrap .ag-header {
+  color: #000;
+  background: none;
+  border-bottom: none;
+  font-weight: 600;
+}
+.ag-bootstrap .ag-header-icon {
+  color: #000;
+  stroke: none;
+  fill: #000;
+}
+.ag-bootstrap .ag-no-scrolls .ag-header-container {
+  background: none;
+  border-bottom: none;
+}
+.ag-bootstrap .ag-ltr .ag-header-cell {
+  border-right: none;
+}
+.ag-bootstrap .ag-rtl .ag-header-cell {
+  border-left: none;
+}
+.ag-bootstrap .ag-header-cell-moving .ag-header-cell-label {
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  filter: alpha(opacity=50);
+}
+.ag-bootstrap .ag-header-cell-moving {
+  background-color: #bebebe;
+}
+.ag-bootstrap .ag-ltr .ag-header-group-cell {
+  border-right: none;
+}
+.ag-bootstrap .ag-rtl .ag-header-group-cell {
+  border-left: none;
+}
+.ag-bootstrap .ag-header-group-cell-with-group {
+  border-bottom: none;
+}
+.ag-bootstrap .ag-header-cell-label {
+  padding: 4px 2px 4px 2px;
+}
+.ag-bootstrap .ag-header-cell-text {
+  padding-left: 2px;
+}
+.ag-bootstrap .ag-header-group-cell-label {
+  padding: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-header-group-cell-label {
+  padding-left: 10px;
+}
+.ag-bootstrap .ag-rtl .ag-header-group-cell-label {
+  padding-right: 10px;
+}
+.ag-bootstrap .ag-rtl .ag-header-group-text {
+  margin-left: 2px;
+}
+.ag-bootstrap .ag-ltr .ag-header-group-text {
+  margin-right: 2px;
+}
+.ag-bootstrap .ag-header-cell-menu-button {
+  padding: 2px;
+  margin-top: 4px;
+  margin-left: 1px;
+  margin-right: 1px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  -webkit-box-sizing: content-box /* When using bootstrap, box-sizing was set to 'border-box' */;
+  -moz-box-sizing: content-box /* When using bootstrap, box-sizing was set to 'border-box' */;
+  box-sizing: content-box /* When using bootstrap, box-sizing was set to 'border-box' */;
+  line-height: 0px /* normal line height, a space was appearing below the menu button */;
+}
+.ag-bootstrap .ag-ltr .ag-pinned-right-header {
+  border-left: none;
+}
+.ag-bootstrap .ag-rtl .ag-pinned-left-header {
+  border-right: none;
+}
+.ag-bootstrap .ag-header-cell-menu-button:hover {
+  border: none;
+}
+.ag-bootstrap .ag-body {
+  background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-row-odd {
+  background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-row-even {
+  background-color: #fff;
+}
+.ag-bootstrap .ag-row-selected {
+  background-color: #b0e0e6;
+}
+.ag-bootstrap .ag-floating-top .ag-row {
+  background-color: #f0f0f0;
+}
+.ag-bootstrap .ag-floating-bottom .ag-row {
+  background-color: #f0f0f0;
+}
+.ag-bootstrap .ag-overlay-loading-wrapper {
+  background-color: rgba(255,255,255,0.5);
+}
+.ag-bootstrap .ag-overlay-loading-center {
+  background-color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px;
+  color: #000;
+}
+.ag-bootstrap .ag-overlay-no-rows-center {
+  background-color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px;
+}
+.ag-bootstrap .ag-group-cell-entire-row {
+  background-color: #f6f6f6;
+  padding: 4px;
+}
+.ag-bootstrap .ag-footer-cell-entire-row {
+  background-color: #f6f6f6;
+  padding: 4px;
+}
+.ag-bootstrap .ag-group-cell {
+  font-style: italic;
+}
+.ag-bootstrap .ag-ltr .ag-group-expanded {
+  padding-right: 4px;
+}
+.ag-bootstrap .ag-rtl .ag-group-expanded {
+  padding-left: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-group-contracted {
+  padding-right: 4px;
+}
+.ag-bootstrap .ag-rtl .ag-group-contracted {
+  padding-left: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-group-value {
+  padding-right: 2px;
+}
+.ag-bootstrap .ag-rtl .ag-group-value {
+  padding-left: 2px;
+}
+.ag-bootstrap .ag-ltr .ag-group-checkbox {
+  padding-right: 2px;
+}
+.ag-bootstrap .ag-rtl .ag-group-checkbox {
+  padding-left: 2px;
+}
+.ag-bootstrap .ag-group-child-count {
+  display: inline-block;
+}
+.ag-bootstrap .ag-footer-cell {
+  font-style: italic;
+}
+.ag-bootstrap .ag-menu {
+  border: 1px solid #808080;
+  background-color: #f6f6f6;
+  cursor: default;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+}
+.ag-bootstrap .ag-menu .ag-tab-header {
+  background-color: #e6e6e6;
+}
+.ag-bootstrap .ag-menu .ag-tab {
+  padding: 6px 8px 6px 8px;
+  margin: 2px 2px 0px 2px;
+  display: inline-block;
+  border-right: 1px solid transparent;
+  border-left: 1px solid transparent;
+  border-top: 1px solid transparent;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.ag-bootstrap .ag-menu .ag-tab-selected {
+  background-color: #f6f6f6;
+  border-right: 1px solid #d3d3d3;
+  border-left: 1px solid #d3d3d3;
+  border-top: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-menu-separator {
+  border-top: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-menu-option-active {
+  background-color: #bde2e5;
+}
+.ag-bootstrap .ag-menu-option-icon {
+  padding: 2px 4px 2px 4px;
+  vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-text {
+  padding: 2px 4px 2px 4px;
+  vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-shortcut {
+  padding: 2px 2px 2px 2px;
+  vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-popup-pointer {
+  padding: 2px 4px 2px 4px;
+  vertical-align: middle;
+}
+.ag-bootstrap .ag-menu-option-disabled {
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  filter: alpha(opacity=50);
+}
+.ag-bootstrap .ag-menu-column-select-wrapper {
+  margin: 2px;
+}
+.ag-bootstrap .ag-filter-checkbox {
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+.ag-bootstrap .ag-filter-header-container {
+  border-bottom: 1px solid #d3d3d3;
+}
+.ag-bootstrap .ag-filter-apply-panel {
+  border-top: 1px solid #d3d3d3;
+  padding: 2px;
+}
+.ag-bootstrap .ag-filter-value {
+  margin-left: 4px;
+}
+.ag-bootstrap .ag-ltr .ag-selection-checkbox {
+  padding-right: 4px;
+}
+.ag-bootstrap .ag-rtl .ag-selection-checkbox {
+  padding-left: 4px;
+}
+.ag-bootstrap .ag-paging-panel {
+  padding: 4px;
+}
+.ag-bootstrap .ag-paging-button {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.ag-bootstrap .ag-paging-row-summary-panel {
+  display: inline-block;
+  width: 300px;
+}
+.ag-bootstrap .ag-tool-panel {
+  background-color: #f6f6f6;
+  border-bottom: none;
+  border-top: none;
+  color: #000;
+}
+.ag-bootstrap .ltr .ag-tool-panel {
+  border-right: none;
+}
+.ag-bootstrap .rtl .ag-tool-panel {
+  border-left: none;
+}
+.ag-bootstrap .ag-status-bar {
+  color: #000;
+  background-color: #f6f6f6;
+  font-size: 14px;
+  height: 22px;
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  padding: 2px;
+}
+.ag-bootstrap .ag-status-bar-aggregations {
+  float: right;
+}
+.ag-bootstrap .ag-status-bar-item {
+  padding-left: 10px;
+}
+.ag-bootstrap .ag-column-drop-cell {
+  background: none;
+  color: #000;
+  border: 1px solid #808080;
+}
+.ag-bootstrap .ag-column-drop-cell-ghost {
+  opacity: 0.5;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+  filter: alpha(opacity=50);
+}
+.ag-bootstrap .ag-column-drop-cell-text {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.ag-bootstrap .ag-column-drop-cell-button {
+  border: 1px solid transparent;
+  padding-left: 2px;
+  padding-right: 2px;
+  border-radius: 3px;
+}
+.ag-bootstrap .ag-column-drop-cell-button:hover {
+  border: none;
+}
+.ag-bootstrap .ag-column-drop-empty-message {
+  padding-left: 2px;
+  padding-right: 2px;
+  color: #808080;
+}
+.ag-bootstrap .ag-column-drop-icon {
+  margin: 3px;
+}
+.ag-bootstrap .ag-column-drop {
+  background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-column-drop-horizontal {
+  padding: 2px;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+}
+.ag-bootstrap .ag-column-drop-vertical {
+  padding: 4px 4px 10px 4px;
+  border-bottom: none;
+}
+.ag-bootstrap .ag-column-drop-vertical .ag-column-drop-cell {
+  margin-top: 2px;
+}
+.ag-bootstrap .ag-column-drop-vertical .ag-column-drop-empty-message {
+  text-align: center;
+  padding: 5px;
+}
+.ag-bootstrap .ag-pivot-mode {
+  border-bottom: none;
+  padding: 4px;
+  background-color: #f6f6f6;
+}
+.ag-bootstrap .ag-tool-panel .ag-column-select-panel {
+  border-bottom: none;
+}
+.ag-bootstrap .ag-select-agg-func-popup {
+  cursor: default;
+  position: absolute;
+  font-size: 14px;
+  background-color: #fff;
+  border: none;
+}
+.ag-bootstrap .ag-select-agg-func-item {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.ag-bootstrap .ag-select-agg-func-item:hover {
+  background-color: #bde2e5;
+}
@@ -7,8 +7,9 @@
  
   <title><%= htmlWebpackPlugin.options.title %></title>
  
+  <link rel="stylesheet" href="/app/pages/statements/ag-grid.css">
+  <link rel="stylesheet" href="/app/pages/statements/theme-bootstrap.css">
   <meta name="description" content="<%= htmlWebpackPlugin.options.metadata.description %>">
-
   <% if (webpackConfig.htmlElements.headTags) { %>
   <!-- Configured Head Tags  -->
   <%= webpackConfig.htmlElements.headTags %>