From 84cb4d01b5dc4289386bdc9f1080bcd048410968 Mon Sep 17 00:00:00 2001
From: Antonino Bonanno <bonanno@net-serv.it>
Date: Mon, 13 Mar 2023 18:17:48 +0100
Subject: [PATCH] docs: table component

---
 .../core/table/table.component.html           |   2 +-
 .../components/core/table/table.component.ts  |   9 +-
 src/app/app-routing.module.ts                 |   1 +
 .../table-alignment-example.component.html    |  23 ++++
 .../table-alignment-example.component.spec.ts |  23 ++++
 .../table-alignment-example.component.ts      |   8 ++
 .../table-bordered-example.component.html     |  35 +++++
 .../table-bordered-example.component.spec.ts  |  23 ++++
 .../table-bordered-example.component.ts       |   9 ++
 .../table-borderless-example.component.html   |  66 +++++++++
 ...table-borderless-example.component.spec.ts |  23 ++++
 .../table-borderless-example.component.ts     |   9 ++
 .../table-caption-example.component.html      |  71 ++++++++++
 .../table-caption-example.component.scss      |   0
 .../table-caption-example.component.spec.ts   |  23 ++++
 .../table-caption-example.component.ts        |  10 ++
 .../table-compact-example.component.html      |  35 +++++
 .../table-compact-example.component.spec.ts   |  23 ++++
 .../table-compact-example.component.ts        |   9 ++
 .../table-example.component.html              |  68 +++++++++
 .../table-example.component.spec.ts           |  23 ++++
 .../table-example/table-example.component.ts  |  12 ++
 .../table-examples.component.spec.ts          |  23 ++++
 .../table-examples.component.tpl              | 130 ++++++++++++++++++
 .../table-examples.component.ts               |   9 ++
 .../table-footer-example.component.html       |  44 ++++++
 .../table-footer-example.component.spec.ts    |  23 ++++
 .../table-footer-example.component.ts         |   9 ++
 .../table-header-example.component.html       |  66 +++++++++
 .../table-header-example.component.spec.ts    |  23 ++++
 .../table-header-example.component.ts         |   9 ++
 .../table-hover-example.component.html        |  67 +++++++++
 .../table-hover-example.component.spec.ts     |  23 ++++
 .../table-hover-example.component.ts          |   9 ++
 .../table-index/table-index.component.html    |  12 ++
 .../table-index/table-index.component.spec.ts |  23 ++++
 .../table-index/table-index.component.ts      |  14 ++
 src/app/table/table-routing.module.ts         |  14 ++
 .../table-striped-example.component.html      |  67 +++++++++
 .../table-striped-example.component.spec.ts   |  23 ++++
 .../table-striped-example.component.ts        |   9 ++
 src/app/table/table.module.ts                 |  43 ++++++
 src/assets/table-of-content.json              |   4 +
 43 files changed, 1144 insertions(+), 5 deletions(-)
 create mode 100644 src/app/table/table-alignment-example/table-alignment-example.component.html
 create mode 100644 src/app/table/table-alignment-example/table-alignment-example.component.spec.ts
 create mode 100644 src/app/table/table-alignment-example/table-alignment-example.component.ts
 create mode 100644 src/app/table/table-bordered-example/table-bordered-example.component.html
 create mode 100644 src/app/table/table-bordered-example/table-bordered-example.component.spec.ts
 create mode 100644 src/app/table/table-bordered-example/table-bordered-example.component.ts
 create mode 100644 src/app/table/table-borderless-example/table-borderless-example.component.html
 create mode 100644 src/app/table/table-borderless-example/table-borderless-example.component.spec.ts
 create mode 100644 src/app/table/table-borderless-example/table-borderless-example.component.ts
 create mode 100644 src/app/table/table-caption-example/table-caption-example.component.html
 create mode 100644 src/app/table/table-caption-example/table-caption-example.component.scss
 create mode 100644 src/app/table/table-caption-example/table-caption-example.component.spec.ts
 create mode 100644 src/app/table/table-caption-example/table-caption-example.component.ts
 create mode 100644 src/app/table/table-compact-example/table-compact-example.component.html
 create mode 100644 src/app/table/table-compact-example/table-compact-example.component.spec.ts
 create mode 100644 src/app/table/table-compact-example/table-compact-example.component.ts
 create mode 100644 src/app/table/table-example/table-example.component.html
 create mode 100644 src/app/table/table-example/table-example.component.spec.ts
 create mode 100644 src/app/table/table-example/table-example.component.ts
 create mode 100644 src/app/table/table-examples/table-examples.component.spec.ts
 create mode 100644 src/app/table/table-examples/table-examples.component.tpl
 create mode 100644 src/app/table/table-examples/table-examples.component.ts
 create mode 100644 src/app/table/table-footer-example/table-footer-example.component.html
 create mode 100644 src/app/table/table-footer-example/table-footer-example.component.spec.ts
 create mode 100644 src/app/table/table-footer-example/table-footer-example.component.ts
 create mode 100644 src/app/table/table-header-example/table-header-example.component.html
 create mode 100644 src/app/table/table-header-example/table-header-example.component.spec.ts
 create mode 100644 src/app/table/table-header-example/table-header-example.component.ts
 create mode 100644 src/app/table/table-hover-example/table-hover-example.component.html
 create mode 100644 src/app/table/table-hover-example/table-hover-example.component.spec.ts
 create mode 100644 src/app/table/table-hover-example/table-hover-example.component.ts
 create mode 100644 src/app/table/table-index/table-index.component.html
 create mode 100644 src/app/table/table-index/table-index.component.spec.ts
 create mode 100644 src/app/table/table-index/table-index.component.ts
 create mode 100644 src/app/table/table-routing.module.ts
 create mode 100644 src/app/table/table-striped-example/table-striped-example.component.html
 create mode 100644 src/app/table/table-striped-example/table-striped-example.component.spec.ts
 create mode 100644 src/app/table/table-striped-example/table-striped-example.component.ts
 create mode 100644 src/app/table/table.module.ts

diff --git a/projects/design-angular-kit/src/lib/components/core/table/table.component.html b/projects/design-angular-kit/src/lib/components/core/table/table.component.html
index 3c67d6a0..95f9ce00 100644
--- a/projects/design-angular-kit/src/lib/components/core/table/table.component.html
+++ b/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"
diff --git a/projects/design-angular-kit/src/lib/components/core/table/table.component.ts b/projects/design-angular-kit/src/lib/components/core/table/table.component.ts
index c5ef8d34..6ead59e5 100644
--- a/projects/design-angular-kit/src/lib/components/core/table/table.component.ts
+++ b/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 {
 
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d0d80ca6..7b78e19d 100644
--- a/src/app/app-routing.module.ts
+++ b/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) },
diff --git a/src/app/table/table-alignment-example/table-alignment-example.component.html b/src/app/table/table-alignment-example/table-alignment-example.component.html
new file mode 100644
index 00000000..daabfa16
--- /dev/null
+++ b/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>
diff --git a/src/app/table/table-alignment-example/table-alignment-example.component.spec.ts b/src/app/table/table-alignment-example/table-alignment-example.component.spec.ts
new file mode 100644
index 00000000..c3dff6d6
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/table/table-alignment-example/table-alignment-example.component.ts b/src/app/table/table-alignment-example/table-alignment-example.component.ts
new file mode 100644
index 00000000..1fcb569e
--- /dev/null
+++ b/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 {
+}
diff --git a/src/app/table/table-bordered-example/table-bordered-example.component.html b/src/app/table/table-bordered-example/table-bordered-example.component.html
new file mode 100644
index 00000000..6b78b65d
--- /dev/null
+++ b/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>
diff --git a/src/app/table/table-bordered-example/table-bordered-example.component.spec.ts b/src/app/table/table-bordered-example/table-bordered-example.component.spec.ts
new file mode 100644
index 00000000..821ec61f
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/table/table-bordered-example/table-bordered-example.component.ts b/src/app/table/table-bordered-example/table-bordered-example.component.ts
new file mode 100644
index 00000000..c07995fa
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/table/table-borderless-example/table-borderless-example.component.html b/src/app/table/table-borderless-example/table-borderless-example.component.html
new file mode 100644
index 00000000..3e075f99
--- /dev/null
+++ b/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>
diff --git a/src/app/table/table-borderless-example/table-borderless-example.component.spec.ts b/src/app/table/table-borderless-example/table-borderless-example.component.spec.ts
new file mode 100644
index 00000000..55b50354
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/table/table-borderless-example/table-borderless-example.component.ts b/src/app/table/table-borderless-example/table-borderless-example.component.ts
new file mode 100644
index 00000000..f48e3e67
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/table/table-caption-example/table-caption-example.component.html b/src/app/table/table-caption-example/table-caption-example.component.html
new file mode 100644
index 00000000..9ba78319
--- /dev/null
+++ b/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>
diff --git a/src/app/table/table-caption-example/table-caption-example.component.scss b/src/app/table/table-caption-example/table-caption-example.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/table/table-caption-example/table-caption-example.component.spec.ts b/src/app/table/table-caption-example/table-caption-example.component.spec.ts
new file mode 100644
index 00000000..c2304548
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/table/table-caption-example/table-caption-example.component.ts b/src/app/table/table-caption-example/table-caption-example.component.ts
new file mode 100644
index 00000000..f598ce66
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/table/table-compact-example/table-compact-example.component.html b/src/app/table/table-compact-example/table-compact-example.component.html
new file mode 100644
index 00000000..5dcb494b
--- /dev/null
+++ b/src/app/table/table-compact-example/table-compact-example.component.html
@@ -0,0 +1,35 @@
+<h3>Tabella compatta</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>
+  </it-table>
+
+</div>
diff --git a/src/app/table/table-compact-example/table-compact-example.component.spec.ts b/src/app/table/table-compact-example/table-compact-example.component.spec.ts
new file mode 100644
index 00000000..5789ea5a
--- /dev/null
+++ b/src/app/table/table-compact-example/table-compact-example.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableCompactExampleComponent } from './table-compact-example.component';
+
+describe('TableCompactExampleComponent', () => {
+  let component: TableCompactExampleComponent;
+  let fixture: ComponentFixture<TableCompactExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableCompactExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableCompactExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-compact-example/table-compact-example.component.ts b/src/app/table/table-compact-example/table-compact-example.component.ts
new file mode 100644
index 00000000..f2b3a704
--- /dev/null
+++ b/src/app/table/table-compact-example/table-compact-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-compact-example',
+  templateUrl: './table-compact-example.component.html'
+})
+export class TableCompactExampleComponent {
+
+}
diff --git a/src/app/table/table-example/table-example.component.html b/src/app/table/table-example/table-example.component.html
new file mode 100644
index 00000000..4a88421f
--- /dev/null
+++ b/src/app/table/table-example/table-example.component.html
@@ -0,0 +1,68 @@
+<div class="bd-example">
+  <it-table [color]="color">
+    <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 class="form-check">
+    <h5>Colorazione</h5>
+    <div class="row">
+      <div class="form-check col-5">
+        <it-radio-button id="table-color-none" [(ngModel)]="color"
+                         name="selectedColor" [value]="undefined" label="None"></it-radio-button>
+        <it-radio-button id="table-color-primary" [(ngModel)]="color"
+                         name="selectedColor" value="primary" label="Primary"></it-radio-button>
+        <it-radio-button id="table-color-secondary" [(ngModel)]="color"
+                         name="selectedColor" value="secondary" label="Secondary"></it-radio-button>
+      </div>
+      <div class="form-check col-4">
+        <it-radio-button id="table-color-success" [(ngModel)]="color"
+                         name="selectedColor" value="success" label="Success"></it-radio-button>
+        <it-radio-button id="table-color-warning" [(ngModel)]="color"
+                         name="selectedColor" value="warning" label="Warning"></it-radio-button>
+        <it-radio-button id="table-color-danger" [(ngModel)]="color"
+                         name="selectedColor" value="danger" label="Danger"></it-radio-button>
+      </div>
+      <div class="form-check col-3">
+        <it-radio-button id="table-color-info" [(ngModel)]="color"
+                         name="selectedColor" value="info" label="Info"></it-radio-button>
+        <it-radio-button id="table-color-light" [(ngModel)]="color"
+                         name="selectedColor" value="light" label="Light"></it-radio-button>
+        <it-radio-button id="table-color-dark" [(ngModel)]="color"
+                         name="selectedColor" value="dark" label="Dark"></it-radio-button>
+      </div>
+    </div>
+  </div>
+
+  <p>
+    Per la colorazione su singole righe o celle, fare riferimento alla documentazione <a href="https://italia.github.io/bootstrap-italia/docs/organizzare-i-contenuti/tabelle/#varianti">Bootstrap Italia</a>
+  </p>
+</div>
+
diff --git a/src/app/table/table-example/table-example.component.spec.ts b/src/app/table/table-example/table-example.component.spec.ts
new file mode 100644
index 00000000..51e43ca2
--- /dev/null
+++ b/src/app/table/table-example/table-example.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableExampleComponent } from './table-example.component';
+
+describe('TableExampleComponent', () => {
+  let component: TableExampleComponent;
+  let fixture: ComponentFixture<TableExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-example/table-example.component.ts b/src/app/table/table-example/table-example.component.ts
new file mode 100644
index 00000000..bbe19e45
--- /dev/null
+++ b/src/app/table/table-example/table-example.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { TableColor } from '../../../../projects/design-angular-kit/src/lib/interfaces/core';
+
+@Component({
+  selector: 'it-table-example',
+  templateUrl: './table-example.component.html'
+})
+export class TableExampleComponent {
+
+  color?: TableColor;
+
+}
diff --git a/src/app/table/table-examples/table-examples.component.spec.ts b/src/app/table/table-examples/table-examples.component.spec.ts
new file mode 100644
index 00000000..32b77444
--- /dev/null
+++ b/src/app/table/table-examples/table-examples.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableExamplesComponent } from './table-examples.component';
+
+describe('TableExamplesComponent', () => {
+  let component: TableExamplesComponent;
+  let fixture: ComponentFixture<TableExamplesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableExamplesComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableExamplesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-examples/table-examples.component.tpl b/src/app/table/table-examples/table-examples.component.tpl
new file mode 100644
index 00000000..5227d4c0
--- /dev/null
+++ b/src/app/table/table-examples/table-examples.component.tpl
@@ -0,0 +1,130 @@
+{% from "../../macro.template.njk" import sanitize as sanitize %}
+
+{% set html %}
+  {% include "../table-example/table-example.component.html" %}
+{% endset %}
+
+{% set typescript %}
+  {% include "../table-example/table-example.component.ts" %}
+{% endset %}
+
+<it-table-example></it-table-example>
+
+<it-source-display html="{$ sanitize(html) $}" typescript="{$ sanitize(typescript) $}"></it-source-display>
+
+
+{% set htmlStriped %}
+  {% include "../table-striped-example/table-striped-example.component.html" %}
+{% endset %}
+
+{% set typescriptStriped %}
+  {% include "../table-striped-example/table-striped-example.component.ts" %}
+{% endset %}
+
+<it-table-striped-example></it-table-striped-example>
+
+<it-source-display html="{$ sanitize(htmlStriped) $}" typescript="{$ sanitize(typescriptStriped) $}"></it-source-display>
+
+
+{% set htmlHover %}
+  {% include "../table-hover-example/table-hover-example.component.html" %}
+{% endset %}
+
+{% set typescriptHover %}
+  {% include "../table-hover-example/table-hover-example.component.ts" %}
+{% endset %}
+
+<it-table-hover-example></it-table-hover-example>
+
+<it-source-display html="{$ sanitize(htmlHover) $}" typescript="{$ sanitize(typescriptHover) $}"></it-source-display>
+
+
+{% set htmlBordered %}
+  {% include "../table-bordered-example/table-bordered-example.component.html" %}
+{% endset %}
+
+{% set typescriptBordered %}
+  {% include "../table-bordered-example/table-bordered-example.component.ts" %}
+{% endset %}
+
+<it-table-bordered-example></it-table-bordered-example>
+
+<it-source-display html="{$ sanitize(htmlBordered) $}" typescript="{$ sanitize(typescriptBordered) $}"></it-source-display>
+
+
+{% set htmlBorderless %}
+  {% include "../table-borderless-example/table-borderless-example.component.html" %}
+{% endset %}
+
+{% set typescriptBorderless %}
+  {% include "../table-borderless-example/table-borderless-example.component.ts" %}
+{% endset %}
+
+<it-table-borderless-example></it-table-borderless-example>
+
+<it-source-display html="{$ sanitize(htmlBorderless) $}" typescript="{$ sanitize(typescriptBorderless) $}"></it-source-display>
+
+
+{% set htmlCompact %}
+  {% include "../table-compact-example/table-compact-example.component.html" %}
+{% endset %}
+
+{% set typescriptCompact %}
+  {% include "../table-compact-example/table-compact-example.component.ts" %}
+{% endset %}
+
+<it-table-compact-example></it-table-compact-example>
+
+<it-source-display html="{$ sanitize(htmlCompact) $}" typescript="{$ sanitize(typescriptCompact) $}"></it-source-display>
+
+
+{% set htmlAlignment %}
+  {% include "../table-alignment-example/table-alignment-example.component.html" %}
+{% endset %}
+
+{% set typescriptAlignment %}
+  {% include "../table-alignment-example/table-alignment-example.component.ts" %}
+{% endset %}
+
+<it-table-alignment-example></it-table-alignment-example>
+
+<it-source-display html="{$ sanitize(htmlAlignment) $}" typescript="{$ sanitize(typescriptAlignment) $}"></it-source-display>
+
+
+{% set htmlHeader %}
+  {% include "../table-header-example/table-header-example.component.html" %}
+{% endset %}
+
+{% set typescriptHeader %}
+  {% include "../table-header-example/table-header-example.component.ts" %}
+{% endset %}
+
+<it-table-header-example></it-table-header-example>
+
+<it-source-display html="{$ sanitize(htmlHeader) $}" typescript="{$ sanitize(typescriptHeader) $}"></it-source-display>
+
+
+{% set htmlFooter %}
+  {% include "../table-footer-example/table-footer-example.component.html" %}
+{% endset %}
+
+{% set typescriptFooter %}
+  {% include "../table-footer-example/table-footer-example.component.ts" %}
+{% endset %}
+
+<it-table-footer-example></it-table-footer-example>
+
+<it-source-display html="{$ sanitize(htmlFooter) $}" typescript="{$ sanitize(typescriptFooter) $}"></it-source-display>
+
+
+{% set htmlCaption %}
+  {% include "../table-caption-example/table-caption-example.component.html" %}
+{% endset %}
+
+{% set typescriptCaption %}
+  {% include "../table-caption-example/table-caption-example.component.ts" %}
+{% endset %}
+
+<it-table-caption-example></it-table-caption-example>
+
+<it-source-display html="{$ sanitize(htmlCaption) $}" typescript="{$ sanitize(typescriptCaption) $}"></it-source-display>
diff --git a/src/app/table/table-examples/table-examples.component.ts b/src/app/table/table-examples/table-examples.component.ts
new file mode 100644
index 00000000..fd3bc6b3
--- /dev/null
+++ b/src/app/table/table-examples/table-examples.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-examples',
+  templateUrl: './table-examples.component.html'
+})
+export class TableExamplesComponent {
+
+}
diff --git a/src/app/table/table-footer-example/table-footer-example.component.html b/src/app/table/table-footer-example/table-footer-example.component.html
new file mode 100644
index 00000000..36495220
--- /dev/null
+++ b/src/app/table/table-footer-example/table-footer-example.component.html
@@ -0,0 +1,44 @@
+<h3>Footer</h3>
+<div class="bd-example">
+  <it-table>
+    <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 tfoot>
+      <tr>
+        <td>Footer</td>
+        <td>Footer</td>
+        <td>Footer</td>
+        <td>Footer</td>
+      </tr>
+    </ng-container>
+  </it-table>
+
+</div>
diff --git a/src/app/table/table-footer-example/table-footer-example.component.spec.ts b/src/app/table/table-footer-example/table-footer-example.component.spec.ts
new file mode 100644
index 00000000..c7e17c54
--- /dev/null
+++ b/src/app/table/table-footer-example/table-footer-example.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableFooterExampleComponent } from './table-footer-example.component';
+
+describe('TableFooterExampleComponent', () => {
+  let component: TableFooterExampleComponent;
+  let fixture: ComponentFixture<TableFooterExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableFooterExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableFooterExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-footer-example/table-footer-example.component.ts b/src/app/table/table-footer-example/table-footer-example.component.ts
new file mode 100644
index 00000000..94da38ed
--- /dev/null
+++ b/src/app/table/table-footer-example/table-footer-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-footer-example',
+  templateUrl: './table-footer-example.component.html'
+})
+export class TableFooterExampleComponent {
+
+}
diff --git a/src/app/table/table-header-example/table-header-example.component.html b/src/app/table/table-header-example/table-header-example.component.html
new file mode 100644
index 00000000..b2368276
--- /dev/null
+++ b/src/app/table/table-header-example/table-header-example.component.html
@@ -0,0 +1,66 @@
+<h3>Intestazione</h3>
+<div class="bd-example">
+  <it-table headColor="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>
+
+  <it-table headColor="light">
+    <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>
diff --git a/src/app/table/table-header-example/table-header-example.component.spec.ts b/src/app/table/table-header-example/table-header-example.component.spec.ts
new file mode 100644
index 00000000..ee4b30b1
--- /dev/null
+++ b/src/app/table/table-header-example/table-header-example.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableHeaderExampleComponent } from './table-header-example.component';
+
+describe('TableHeaderExampleComponent', () => {
+  let component: TableHeaderExampleComponent;
+  let fixture: ComponentFixture<TableHeaderExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableHeaderExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableHeaderExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-header-example/table-header-example.component.ts b/src/app/table/table-header-example/table-header-example.component.ts
new file mode 100644
index 00000000..a20c2c38
--- /dev/null
+++ b/src/app/table/table-header-example/table-header-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-header-example',
+  templateUrl: './table-header-example.component.html'
+})
+export class TableHeaderExampleComponent {
+
+}
diff --git a/src/app/table/table-hover-example/table-hover-example.component.html b/src/app/table/table-hover-example/table-hover-example.component.html
new file mode 100644
index 00000000..5d661dc3
--- /dev/null
+++ b/src/app/table/table-hover-example/table-hover-example.component.html
@@ -0,0 +1,67 @@
+<h3>Righe ed hover</h3>
+<div class="bd-example">
+  <it-table hover="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 hover="true" striped="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>
diff --git a/src/app/table/table-hover-example/table-hover-example.component.spec.ts b/src/app/table/table-hover-example/table-hover-example.component.spec.ts
new file mode 100644
index 00000000..a2bac587
--- /dev/null
+++ b/src/app/table/table-hover-example/table-hover-example.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableHoverExampleComponent } from './table-hover-example.component';
+
+describe('TableHoverExampleComponent', () => {
+  let component: TableHoverExampleComponent;
+  let fixture: ComponentFixture<TableHoverExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableHoverExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableHoverExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-hover-example/table-hover-example.component.ts b/src/app/table/table-hover-example/table-hover-example.component.ts
new file mode 100644
index 00000000..c1009340
--- /dev/null
+++ b/src/app/table/table-hover-example/table-hover-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-hover-example',
+  templateUrl: './table-hover-example.component.html'
+})
+export class TableHoverExampleComponent {
+
+}
diff --git a/src/app/table/table-index/table-index.component.html b/src/app/table/table-index/table-index.component.html
new file mode 100644
index 00000000..f69c78dc
--- /dev/null
+++ b/src/app/table/table-index/table-index.component.html
@@ -0,0 +1,12 @@
+<h1 class="bd-title">Tabelle</h1>
+<p class="bd-lead">Documentazione ed esempi per lo stile delle tabelle.</p>
+
+<it-tab-container>
+  <it-tab-item id="example" label="Esempi" active="true" class="pt-3">
+    <it-table-examples></it-table-examples>
+  </it-tab-item>
+  <it-tab-item id="api" label="API" class="pt-3">
+    <h3>TableComponent</h3>
+    <it-api-parameters [component]="component"></it-api-parameters>
+  </it-tab-item>
+</it-tab-container>
diff --git a/src/app/table/table-index/table-index.component.spec.ts b/src/app/table/table-index/table-index.component.spec.ts
new file mode 100644
index 00000000..829dff28
--- /dev/null
+++ b/src/app/table/table-index/table-index.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableIndexComponent } from './table-index.component';
+
+describe('TableIndexComponent', () => {
+  let component: TableIndexComponent;
+  let fixture: ComponentFixture<TableIndexComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableIndexComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-index/table-index.component.ts b/src/app/table/table-index/table-index.component.ts
new file mode 100644
index 00000000..e885a2f7
--- /dev/null
+++ b/src/app/table/table-index/table-index.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import Documentation from '../../../assets/documentation.json';
+
+@Component({
+  selector: 'it-table-index',
+  templateUrl: './table-index.component.html'
+})
+export class TableIndexComponent {
+  component: any;
+
+  constructor() {
+    this.component = (<any>Documentation).components.find(component => component.name === 'TableComponent');
+  }
+}
diff --git a/src/app/table/table-routing.module.ts b/src/app/table/table-routing.module.ts
new file mode 100644
index 00000000..0387c521
--- /dev/null
+++ b/src/app/table/table-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { TableIndexComponent } from './table-index/table-index.component';
+
+const routes: Routes = [
+  { path: '', component: TableIndexComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TableRoutingModule {
+}
diff --git a/src/app/table/table-striped-example/table-striped-example.component.html b/src/app/table/table-striped-example/table-striped-example.component.html
new file mode 100644
index 00000000..da53aab5
--- /dev/null
+++ b/src/app/table/table-striped-example/table-striped-example.component.html
@@ -0,0 +1,67 @@
+<h3>Righe striate</h3>
+<div class="bd-example">
+  <it-table striped="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 striped="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>
diff --git a/src/app/table/table-striped-example/table-striped-example.component.spec.ts b/src/app/table/table-striped-example/table-striped-example.component.spec.ts
new file mode 100644
index 00000000..839498b0
--- /dev/null
+++ b/src/app/table/table-striped-example/table-striped-example.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableStripedExampleComponent } from './table-striped-example.component';
+
+describe('TableSripedExampleComponent', () => {
+  let component: TableStripedExampleComponent;
+  let fixture: ComponentFixture<TableStripedExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableStripedExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableStripedExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/table/table-striped-example/table-striped-example.component.ts b/src/app/table/table-striped-example/table-striped-example.component.ts
new file mode 100644
index 00000000..9eeaff37
--- /dev/null
+++ b/src/app/table/table-striped-example/table-striped-example.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-table-striped-example',
+  templateUrl: './table-striped-example.component.html'
+})
+export class TableStripedExampleComponent {
+
+}
diff --git a/src/app/table/table.module.ts b/src/app/table/table.module.ts
new file mode 100644
index 00000000..efa56b0e
--- /dev/null
+++ b/src/app/table/table.module.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedModule } from '../shared/shared.module';
+import { TableRoutingModule } from './table-routing.module';
+import { TableIndexComponent } from './table-index/table-index.component';
+import { TableExamplesComponent } from './table-examples/table-examples.component';
+import { TableExampleComponent } from './table-example/table-example.component';
+import { FormsModule } from '@angular/forms';
+import { TableStripedExampleComponent } from './table-striped-example/table-striped-example.component';
+import { TableHoverExampleComponent } from './table-hover-example/table-hover-example.component';
+import { TableBorderedExampleComponent } from './table-bordered-example/table-bordered-example.component';
+import { TableBorderlessExampleComponent } from './table-borderless-example/table-borderless-example.component';
+import { TableCompactExampleComponent } from './table-compact-example/table-compact-example.component';
+import { TableAlignmentExampleComponent } from './table-alignment-example/table-alignment-example.component';
+import { TableHeaderExampleComponent } from './table-header-example/table-header-example.component';
+import { TableFooterExampleComponent } from './table-footer-example/table-footer-example.component';
+import { TableCaptionExampleComponent } from './table-caption-example/table-caption-example.component';
+
+
+
+@NgModule({
+  declarations: [
+    TableIndexComponent,
+    TableExamplesComponent,
+    TableExampleComponent,
+    TableStripedExampleComponent,
+    TableHoverExampleComponent,
+    TableBorderedExampleComponent,
+    TableBorderlessExampleComponent,
+    TableCompactExampleComponent,
+    TableAlignmentExampleComponent,
+    TableHeaderExampleComponent,
+    TableFooterExampleComponent,
+    TableCaptionExampleComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    TableRoutingModule,
+    FormsModule
+  ]
+})
+export class TableModule { }
diff --git a/src/assets/table-of-content.json b/src/assets/table-of-content.json
index 2dcb756f..e9e51c9a 100644
--- a/src/assets/table-of-content.json
+++ b/src/assets/table-of-content.json
@@ -102,6 +102,10 @@
           "label": "Rating",
           "link": "/componenti/rating"
         },
+        {
+          "label": "Table",
+          "link": "/componenti/table"
+        },
         {
           "label": "Textarea",
           "link": "/componenti/textarea"