release: cut(9.4.0)

Author: Sebastian Superczynski

cypress/integration/column-class.spec.ts

@@ -0,0 +1,21 @@
+/// <reference types="Cypress" />
+
+context('Column class', () => {
+  before(() => {
+      cy.visit('http://127.0.0.1:4201/#/column-class');
+    },
+  );
+  it('by default "Company" column has class "blue"', () => {
+    cy
+      .get('#table > thead > tr:nth-child(1) > th:nth-child(3)').should('not.have.class', 'blue')
+      .get('#table > tbody > tr:nth-child(1) > td:nth-child(3)').should('have.class', 'blue')
+    ;
+  });
+  it('by default "Level" column has class "pink" including header', () => {
+    cy
+      .get('#table > thead > tr:nth-child(1) > th:nth-child(4)').should('have.class', 'pink')
+      .get('#table > thead > tr:nth-child(2) > th:nth-child(4)').should('have.class', 'pink')
+      .get('#table > tbody > tr:nth-child(1) > td:nth-child(4)').should('have.class', 'pink')
+    ;
+  });
+});

cypress/integration/pin.spec.ts

@@ -26,15 +26,4 @@ context('Pinned column', () => {
       .get('#table > tbody > tr:nth-child(1) > td:nth-child(2)').should('have.class', 'pinned-left')
     ;
   });
-  // TODO implement pin API
-  // it('uses API to set 2nd column pinned', () => {
-  //   cy
-  //     .get('#setColumn2Pinned').click()
-  //     .get('#table > tbody > tr:nth-child(1) > td:nth-child(1)').should('have.class', 'pinned-left')
-  //     .get('#table > tbody > tr:nth-child(1) > td:nth-child(2)').should('have.class', 'pinned-left')
-  //     .get('#setColumn2UnPinned').click()
-  //     .get('#table > tbody > tr:nth-child(1) > td:nth-child(1)').should('have.class', 'pinned-left')
-  //     .get('#table > tbody > tr:nth-child(1) > td:nth-child(2)').should('have.class', 'ngx-table__header-cell')
-  //   ;
-  // });
 });

projects/ngx-easy-table/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-easy-table",
-  "version": "9.4.0-rc.1",
+  "version": "9.4.0",
   "description": "Angular easy table",
   "typings": "index.ts",
   "repository": "https://github.com/ssuperczynski/ngx-easy-table.git",

projects/ngx-easy-table/package.json

@@ -23,7 +23,7 @@ export const DefaultConfig: Config = {
   checkboxes: false,
   resizeColumn: false,
   fixedColumnWidth: true,
-  horizontalScroll: true,
+  horizontalScroll: false,
   draggable: false,
   logger: false,
   showDetailsArrow: false,

projects/ngx-easy-table/src/lib/services/config-service.ts

@@ -40,6 +40,7 @@ export class AppComponent implements OnInit {
       { link: 'persist-state', name: 'Persist state' },
       { link: 'context-menu', name: 'Context menu', experimental: true },
       { link: 'pinned', name: 'Pinned column' },
+      { link: 'column-class', name: 'Column Class' },
     ],
     templates: [
       { link: 'template', name: 'Basic template' },

src/app/app.component.ts

@@ -64,7 +64,7 @@ import {
   BootstrapComponent,
   DocComponent,
   InstallationComponent,
-  PinnedComponent,
+  PinnedComponent, ColumnClassComponent,
 } from './demo';
 import { TableModule } from 'ngx-easy-table';
 
@@ -133,6 +133,7 @@ import { TableModule } from 'ngx-easy-table';
     DocComponent,
     InstallationComponent,
     PinnedComponent,
+    ColumnClassComponent,
   ],
   bootstrap: [AppComponent],
   providers: [],

src/app/app.module.ts

@@ -0,0 +1,9 @@
+<div class="columns">
+  <div class="column col-12">
+    <ngx-table
+      [configuration]="configuration"
+      [data]="data"
+      [columns]="columns">
+    </ngx-table>
+  </div>
+</div>

src/app/demo/column-class/column-class.component.html

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Company, data } from '../../../assets/data';
+import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
+
+@Component({
+  selector: 'app-column-class',
+  templateUrl: './column-class.component.html',
+  styleUrls: ['./column-class.component.scss'],
+})
+export class ColumnClassComponent implements OnInit {
+  public columns: Columns[];
+  public data: Company[] = [];
+  public configuration: Config;
+
+  ngOnInit(): void {
+    this.configuration = DefaultConfig;
+    this.configuration.searchEnabled = true;
+    this.data = data;
+    this.columns = [
+      { key: 'phone', title: 'Phone' },
+      { key: 'age', title: 'Age' },
+      { key: 'company', title: 'Company', cssClass: { includeHeader: false, name: 'blue' } },
+      { key: 'level', title: 'Level', cssClass: { includeHeader: true, name: 'pink' } },
+      { key: 'address.number', title: 'Number' },
+      { key: 'name', title: 'Name' },
+      { key: 'isActive', title: 'STATUS' },
+    ];
+  }
+}

src/app/demo/column-class/column-class.component.scss

@@ -49,3 +49,4 @@ export * from './bootstrap/bootstrap.component';
 export * from './doc/doc.component';
 export * from './installation/installation.component';
 export * from './pinned/pinned.component';
+export * from './column-class/column-class.component';

src/app/demo/column-class/column-class.component.ts

@@ -3,7 +3,6 @@
     <ngx-table
       [configuration]="configuration"
       [data]="data"
-      #table
       [columns]="columns">
     </ngx-table>
   </div>

src/app/demo/index.ts

@@ -1,3 +0,0 @@
-.phone {
-  color: #28a745;
-}

src/app/demo/pinned/pinned.component.html

@@ -1,6 +1,6 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Company, data } from '../../../assets/data';
-import { Columns, Config, DefaultConfig, APIDefinition } from 'ngx-easy-table';
+import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
 
 @Component({
   selector: 'app-pinned',
@@ -11,7 +11,6 @@ export class PinnedComponent implements OnInit {
   public columns: Columns[];
   public data: Company[] = [];
   public configuration: Config;
-  @ViewChild('table') table: APIDefinition;
 
   ngOnInit(): void {
     this.configuration = DefaultConfig;

src/app/demo/pinned/pinned.component.scss

@@ -52,6 +52,7 @@ import {
   DocComponent,
   InstallationComponent,
   PinnedComponent,
+  ColumnClassComponent,
 } from './demo';
 
 export const routes = [
@@ -106,6 +107,7 @@ export const routes = [
   { path: 'api-doc', component: ApiDocComponent },
   { path: 'installation', component: InstallationComponent },
   { path: 'pinned', component: PinnedComponent },
+  { path: 'column-class', component: ColumnClassComponent },
   { path: '**', component: BasicComponent },
 ];