docs: table component

projects/design-angular-kit/src/lib/components/core/table/table.component.html

@@ -1,5 +1,5 @@
 <div [class]="responsive ? 'table-' + responsive : undefined">
-  <table class="table{{color ? ' table-' + color : '' }}"
+  <table class="table{{color ? ' table-' + color : '' }}{{alignment ? ' ' + alignment : '' }}"
          [class.table-striped]="isStriped"
          [class.table-hover]="isHover"
          [class.table-bordered]="isBordered"

projects/design-angular-kit/src/lib/components/core/table/table.component.ts

@@ -1,11 +1,12 @@
-import {Component, Input} from '@angular/core';
-import {TableColor, TableHeadColor, TableResponsive, VerticalAlignment} from "../../../interfaces/core";
-import {BooleanInput, isTrueBooleanInput} from "../../../utils/boolean-input";
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { TableColor, TableHeadColor, TableResponsive, VerticalAlignment } from '../../../interfaces/core';
+import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input';
 
 @Component({
   selector: 'it-table',
   templateUrl: './table.component.html',
-  styleUrls: ['./table.component.scss']
+  styleUrls: ['./table.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TableComponent {
 

src/app/app-routing.module.ts

@@ -33,6 +33,7 @@ const routes: Routes = [
     { path: 'select', loadChildren: () => import('src/app/select/select.module').then(m => m.SelectModule) },
     { path: 'notifications', loadChildren: () => import('src/app/notifications/notifications.module').then(m => m.NotificationsModule) },
     { path: 'rating', loadChildren: () => import('src/app/rating/rating.module').then(m => m.RatingModule) },
+    { path: 'table', loadChildren: () => import('src/app/table/table.module').then(m => m.TableModule) },
     { path: 'textarea', loadChildren: () => import('src/app/textarea/textarea.module').then(m => m.TextareaModule) },
     { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
     { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },

src/app/table/table-alignment-example/table-alignment-example.component.html

@@ -0,0 +1,23 @@
+<h3>Allineamento verticale</h3>
+<div class="bd-example">
+  <it-table alignment="align-middle">
+    <ng-container thead>
+      <tr>
+        <th scope="col" class="w-25">Intestazione 1</th>
+        <th scope="col" class="w-25">Intestazione 2</th>
+        <th scope="col" class="w-25">Intestazione 3</th>
+        <th scope="col" class="w-25">Intestazione 4</th>
+      </tr>
+    </ng-container>
+
+    <ng-container tbody>
+      <tr>
+        <td>Valore 1</td>
+        <td>Valore 2</td>
+        <td>Valore 3</td>
+        <td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td>
+      </tr>
+    </ng-container>
+  </it-table>
+
+</div>

src/app/table/table-alignment-example/table-alignment-example.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableAlignmentExampleComponent } from './table-alignment-example.component';
+
+describe('TableAlignmentExampleComponent', () => {
+  let component: TableAlignmentExampleComponent;
+  let fixture: ComponentFixture<TableAlignmentExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableAlignmentExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableAlignmentExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/table/table-alignment-example/table-alignment-example.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-alignment-example',
+  templateUrl: './table-alignment-example.component.html'
+})
+export class TableAlignmentExampleComponent {
+}

src/app/table/table-bordered-example/table-bordered-example.component.html

@@ -0,0 +1,35 @@
+<h3>Tabella con bordi</h3>
+<div class="bd-example">
+  <it-table bordered="true">
+    <ng-container thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Nome</th>
+        <th scope="col">Cognome</th>
+        <th scope="col">Username</th>
+      </tr>
+    </ng-container>
+
+    <ng-container tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mario</td>
+        <td>Verdi</td>
+        <td>mario.verdi</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Francesco</td>
+        <td>Bianchi</td>
+        <td>francesco.bianchi</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Alessandro</td>
+        <td>Rossi</td>
+        <td>alessandro.rossi</td>
+      </tr>
+    </ng-container>
+  </it-table>
+
+</div>

src/app/table/table-bordered-example/table-bordered-example.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableBorderedExampleComponent } from './table-bordered-example.component';
+
+describe('TableBorderedExampleComponent', () => {
+  let component: TableBorderedExampleComponent;
+  let fixture: ComponentFixture<TableBorderedExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableBorderedExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableBorderedExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/table/table-bordered-example/table-bordered-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-bordered-example',
+  templateUrl: './table-bordered-example.component.html'
+})
+export class TableBorderedExampleComponent {
+
+}

src/app/table/table-borderless-example/table-borderless-example.component.html

@@ -0,0 +1,66 @@
+<h3>Tabella senza bordi</h3>
+<div class="bd-example">
+  <it-table borderless="true">
+    <ng-container thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Nome</th>
+        <th scope="col">Cognome</th>
+        <th scope="col">Username</th>
+      </tr>
+    </ng-container>
+
+    <ng-container tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mario</td>
+        <td>Verdi</td>
+        <td>mario.verdi</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Francesco</td>
+        <td>Bianchi</td>
+        <td>francesco.bianchi</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Alessandro</td>
+        <td>Rossi</td>
+        <td>alessandro.rossi</td>
+      </tr>
+    </ng-container>
+  </it-table>
+
+  <it-table borderless="true" color="dark">
+    <ng-container thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Nome</th>
+        <th scope="col">Cognome</th>
+        <th scope="col">Username</th>
+      </tr>
+    </ng-container>
+
+    <ng-container tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mario</td>
+        <td>Verdi</td>
+        <td>mario.verdi</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Francesco</td>
+        <td>Bianchi</td>
+        <td>francesco.bianchi</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Alessandro</td>
+        <td>Rossi</td>
+        <td>alessandro.rossi</td>
+      </tr>
+    </ng-container>
+  </it-table>
+</div>

src/app/table/table-borderless-example/table-borderless-example.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableBorderlessExampleComponent } from './table-borderless-example.component';
+
+describe('TableBorderlessExampleComponent', () => {
+  let component: TableBorderlessExampleComponent;
+  let fixture: ComponentFixture<TableBorderlessExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableBorderlessExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableBorderlessExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/table/table-borderless-example/table-borderless-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-borderless-example',
+  templateUrl: './table-borderless-example.component.html'
+})
+export class TableBorderlessExampleComponent {
+
+}

src/app/table/table-caption-example/table-caption-example.component.html

@@ -0,0 +1,71 @@
+<h3>Caption</h3>
+<div class="bd-example">
+  <it-table compact="true">
+    <ng-container thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Nome</th>
+        <th scope="col">Cognome</th>
+        <th scope="col">Username</th>
+      </tr>
+    </ng-container>
+
+    <ng-container tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mario</td>
+        <td>Verdi</td>
+        <td>mario.verdi</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Francesco</td>
+        <td>Bianchi</td>
+        <td>francesco.bianchi</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Alessandro</td>
+        <td>Rossi</td>
+        <td>alessandro.rossi</td>
+      </tr>
+    </ng-container>
+
+    <ng-container caption>Lista degli utenti</ng-container>
+  </it-table>
+
+  <it-table compact="true" captionTop="true">
+    <ng-container thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">Nome</th>
+        <th scope="col">Cognome</th>
+        <th scope="col">Username</th>
+      </tr>
+    </ng-container>
+
+    <ng-container tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mario</td>
+        <td>Verdi</td>
+        <td>mario.verdi</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Francesco</td>
+        <td>Bianchi</td>
+        <td>francesco.bianchi</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>Alessandro</td>
+        <td>Rossi</td>
+        <td>alessandro.rossi</td>
+      </tr>
+    </ng-container>
+
+    <ng-container caption>Lista degli utenti</ng-container>
+  </it-table>
+
+</div>

src/app/table/table-caption-example/table-caption-example.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableCaptionExampleComponent } from './table-caption-example.component';
+
+describe('TableCaptionExampleComponent', () => {
+  let component: TableCaptionExampleComponent;
+  let fixture: ComponentFixture<TableCaptionExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableCaptionExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableCaptionExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/table/table-caption-example/table-caption-example.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-caption-example',
+  templateUrl: './table-caption-example.component.html',
+  styleUrls: ['./table-caption-example.component.scss']
+})
+export class TableCaptionExampleComponent {
+
+}