libey-ng-component-library 0.0.32 → 0.0.34

package/src/lib/table/libey-ng-table.component.css

@@ -0,0 +1,249 @@
+.libey-table {
+  table {
+    font-size: 1.077rem;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+  }
+
+  .table-container {
+    width: 100%;
+    overflow-x: auto;
+  }
+  td, th {
+    height: 30px;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+    vertical-align: middle;
+  }
+  th {
+    padding: 0rem 1rem;
+  }
+  /* NO FUNCIONA PARA ICONOS DE "NO SE PRESENTÓ" */
+  /* td lib-libey-ng-icons {
+    height: 30px;
+  } */
+  th {
+    font-weight: 400;
+    color: #1087E8;
+    border-top: 0.077rem solid #D6DEE5;
+    background-color: #EEF5FC;
+    border-right: 0.077rem solid #fff;
+  }
+  th:last-child {
+    border-right: 0.077rem solid #D6DEE5;
+  }
+  td {
+    vertical-align: middle;
+    border-bottom: 0.077rem solid #D6DEE5;
+    border-style: none none solid none;
+    text-transform: uppercase;
+    padding: 0.2rem 1rem;
+    line-height: normal;
+  }
+
+  tr td:last-child {
+    border-right: 0.077rem solid #D6DEE5;
+  }
+  tr td:first-child {
+    border-left: 0.077rem solid #D6DEE5;
+  }
+
+  th.sortable {
+    cursor: pointer;
+  }
+
+  .th-fixed{
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 1 !important;
+  }
+
+  .th-fixed::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .table-actions {
+    margin-bottom: 0.769rem;
+    display: flex;
+    justify-content: space-between;
+  }
+  .table-pagination {
+    margin-top: 0.769rem;
+    display: flex;
+    justify-content: space-between;
+  }
+  .pagination-controls {
+    border-radius: 0.769rem;
+    justify-content: space-between;
+    border: 0.077rem solid #D6DEE5;
+    padding: 0 1.154rem;
+    display: flex;
+    align-items: center;
+    margin-top: 0.769rem;
+    gap: 0.385rem;
+    height: 2.308rem;
+  }
+  button {
+    font-size: 1.077rem;
+    border: 0.077rem solid transparent;
+    border-radius: 0.308rem;
+    cursor: pointer;
+    min-width: 1.692rem;
+    margin: 0.077rem;
+    justify-content: center;
+    height: 1.692rem;
+    background-color: transparent;
+    padding: 0 0.231rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  button.active {
+    border: 0.077rem solid #38E8C6;
+    background-color: #38E8C6;
+    font-weight: 600;
+    color: #FFF;
+  }
+  button:disabled {
+    cursor: default;
+  }
+
+  button:hover.numbers {
+    border: 0.077rem solid #38E8C6 !important;
+    border-radius: 0.308rem;
+  }
+
+  tr:first-child th:first-child {
+    border-top-left-radius: 0.769rem;
+    border-left: 0.077rem solid #D6DEE5;
+  }
+  tr:first-child th:last-child {
+    border-top-right-radius: 0.769rem;
+    border-right: 0.077rem solid #D6DEE5;
+  }
+
+  tr:last-child td:first-child {
+    border-bottom-left-radius: 0.769rem;
+  }
+  tr:last-child td:last-child {
+    border-bottom-right-radius: 0.769rem;
+  }
+
+  .d-align-center {
+    display: flex !important;
+    align-items: center !important;
+  }
+
+  .me-20px{
+    margin-right: 1.538rem;
+  }
+
+  /* BOTONES GENERALES */
+
+
+  /* ICONOS DE PAGINACION */
+  .icon-first-page {
+    background-repeat: no-repeat;
+    display: block;
+    width: 0.923rem;
+    height: 0.769rem;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0922 0.292893C10.4827 -0.0976311 11.1159 -0.0976311 11.5064 0.292893C11.8969 0.683417 11.8969 1.31658 11.5064 1.70711L8.21353 5L11.5064 8.29289C11.8969 8.68342 11.8969 9.31658 11.5064 9.70711C11.1159 10.0976 10.4827 10.0976 10.0922 9.70711L6.09221 5.70711C5.70169 5.31658 5.70169 4.68342 6.09221 4.29289L10.0922 0.292893ZM4.49211 0.292893C4.88264 -0.0976311 5.5158 -0.0976311 5.90633 0.292893C6.29685 0.683417 6.29685 1.31658 5.90633 1.70711L2.61343 5L5.90633 8.29289C6.29685 8.68342 6.29685 9.31658 5.90633 9.70711C5.5158 10.0976 4.88264 10.0976 4.49211 9.70711L0.492111 5.70711C0.101587 5.31658 0.101587 4.68342 0.492111 4.29289L4.49211 0.292893Z' fill='%2338E8C6'/%3E%3C/svg%3E%0A");
+  }
+  button:disabled .icon-first-page {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0922 0.292893C10.4827 -0.0976311 11.1159 -0.0976311 11.5064 0.292893C11.8969 0.683417 11.8969 1.31658 11.5064 1.70711L8.21353 5L11.5064 8.29289C11.8969 8.68342 11.8969 9.31658 11.5064 9.70711C11.1159 10.0976 10.4827 10.0976 10.0922 9.70711L6.09221 5.70711C5.70169 5.31658 5.70169 4.68342 6.09221 4.29289L10.0922 0.292893ZM4.49211 0.292893C4.88264 -0.0976311 5.5158 -0.0976311 5.90633 0.292893C6.29685 0.683417 6.29685 1.31658 5.90633 1.70711L2.61343 5L5.90633 8.29289C6.29685 8.68342 6.29685 9.31658 5.90633 9.70711C5.5158 10.0976 4.88264 10.0976 4.49211 9.70711L0.492111 5.70711C0.101587 5.31658 0.101587 4.68342 0.492111 4.29289L4.49211 0.292893Z' fill='%23D0D0D0'/%3E%3C/svg%3E%0A");
+  }
+
+  .icon-previous-page {
+    background-repeat: no-repeat;
+    display: block;
+    width: 0.538rem;
+    height: 0.769rem;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90681 0.292893C6.29734 0.683417 6.29734 1.31658 5.90681 1.70711L2.61392 5L5.90681 8.29289C6.29734 8.68342 6.29734 9.31658 5.90681 9.70711C5.51629 10.0976 4.88312 10.0976 4.4926 9.70711L0.4926 5.70711C0.102076 5.31658 0.102076 4.68342 0.4926 4.29289L4.4926 0.292893C4.88312 -0.0976311 5.51629 -0.0976311 5.90681 0.292893Z' fill='%2338E8C6'/%3E%3C/svg%3E%0A");
+  }
+  button:disabled .icon-previous-page {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.90681 0.292893C6.29734 0.683417 6.29734 1.31658 5.90681 1.70711L2.61392 5L5.90681 8.29289C6.29734 8.68342 6.29734 9.31658 5.90681 9.70711C5.51629 10.0976 4.88312 10.0976 4.4926 9.70711L0.4926 5.70711C0.102076 5.31658 0.102076 4.68342 0.4926 4.29289L4.4926 0.292893C4.88312 -0.0976311 5.51629 -0.0976311 5.90681 0.292893Z' fill='%23D0D0D0'/%3E%3C/svg%3E%0A");
+  }
+
+  .icon-next-page {
+    background-repeat: no-repeat;
+    display: block;
+    width: 0.538rem;
+    height: 0.769rem;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.4926 0.292893C0.102076 0.683417 0.102076 1.31658 0.4926 1.70711L3.78549 5L0.4926 8.29289C0.102076 8.68342 0.102076 9.31658 0.4926 9.70711C0.883124 10.0976 1.51629 10.0976 1.90681 9.70711L5.90681 5.70711C6.29734 5.31658 6.29734 4.68342 5.90681 4.29289L1.90681 0.292893C1.51629 -0.0976311 0.883124 -0.0976311 0.4926 0.292893Z' fill='%2338E8C6'/%3E%3C/svg%3E%0A");
+  }
+  button:disabled .icon-next-page {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.4926 0.292893C0.102076 0.683417 0.102076 1.31658 0.4926 1.70711L3.78549 5L0.4926 8.29289C0.102076 8.68342 0.102076 9.31658 0.4926 9.70711C0.883124 10.0976 1.51629 10.0976 1.90681 9.70711L5.90681 5.70711C6.29734 5.31658 6.29734 4.68342 5.90681 4.29289L1.90681 0.292893C1.51629 -0.0976311 0.883124 -0.0976311 0.4926 0.292893Z' fill='%23D0D0D0'/%3E%3C/svg%3E%0A");
+  }
+
+  .icon-last-page {
+    background-repeat: no-repeat;
+    display: block;
+    width: 0.923rem;
+    height: 0.769rem;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.10701 0.292893C1.71648 -0.0976311 1.08332 -0.0976311 0.692796 0.292893C0.302271 0.683417 0.302271 1.31658 0.692796 1.70711L3.98569 5L0.692796 8.29289C0.302271 8.68342 0.302271 9.31658 0.692796 9.70711C1.08332 10.0976 1.71648 10.0976 2.10701 9.70711L6.10701 5.70711C6.49753 5.31658 6.49753 4.68342 6.10701 4.29289L2.10701 0.292893ZM7.70711 0.292893C7.31658 -0.0976311 6.68342 -0.0976311 6.29289 0.292893C5.90237 0.683417 5.90237 1.31658 6.29289 1.70711L9.58579 5L6.29289 8.29289C5.90237 8.68342 5.90237 9.31658 6.29289 9.70711C6.68342 10.0976 7.31658 10.0976 7.70711 9.70711L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289L7.70711 0.292893Z' fill='%2338E8C6'/%3E%3C/svg%3E%0A");
+  }
+  button:disabled .icon-last-page {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.10701 0.292893C1.71648 -0.0976311 1.08332 -0.0976311 0.692796 0.292893C0.302271 0.683417 0.302271 1.31658 0.692796 1.70711L3.98569 5L0.692796 8.29289C0.302271 8.68342 0.302271 9.31658 0.692796 9.70711C1.08332 10.0976 1.71648 10.0976 2.10701 9.70711L6.10701 5.70711C6.49753 5.31658 6.49753 4.68342 6.10701 4.29289L2.10701 0.292893ZM7.70711 0.292893C7.31658 -0.0976311 6.68342 -0.0976311 6.29289 0.292893C5.90237 0.683417 5.90237 1.31658 6.29289 1.70711L9.58579 5L6.29289 8.29289C5.90237 8.68342 5.90237 9.31658 6.29289 9.70711C6.68342 10.0976 7.31658 10.0976 7.70711 9.70711L11.7071 5.70711C12.0976 5.31658 12.0976 4.68342 11.7071 4.29289L7.70711 0.292893Z' fill='%23D0D0D0'/%3E%3C/svg%3E%0A");
+  }
+
+  .resize-handle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 0.385rem;
+    cursor: col-resize;
+    background-color: transparent;
+  }
+
+  /* DISEÑO SCROLL */
+  ::-webkit-scrollbar {
+    width: 0.7rem;
+    height: 0.7rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #d9d9d9 !important; /* color of the scroll thumb */
+    border-radius: 1.538rem !important; /* roundness of the scroll thumb */
+    border: 0.231rem solid #d9d9d9 !important; /* creates padding around scroll thumb */
+  }
+
+  /* ICONOS */
+  .icon-arrow-up {
+    background-repeat: no-repeat;
+    display: block;
+    width: 0.923rem;
+    height: 0.615rem;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.347794 9.61517C0.825615 10.1134 1.6169 10.13 2.11517 9.65221L9.07106 2.98186L16.0269 9.65221C16.5252 10.13 17.3165 10.1134 17.7943 9.61517C18.2721 9.11689 18.2556 8.32561 17.7573 7.84779L9.93623 0.347793C9.45266 -0.115931 8.68946 -0.115931 8.20589 0.347793L0.38483 7.84779C-0.113445 8.32561 -0.130027 9.11689 0.347794 9.61517Z' fill='%23224051'/%3E%3C/svg%3E%0A");
+  }
+
+  .icon-arrow-down {
+    background-repeat: no-repeat;
+    display: block;
+    width: 0.923rem;
+    height: 0.615rem;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.6234 0.387653C17.1213 -0.129218 16.3073 -0.129218 15.8051 0.387653L9 7.39295L2.19485 0.387652C1.69275 -0.129219 0.878679 -0.129219 0.376577 0.387651C-0.125527 0.904522 -0.125527 1.74253 0.376577 2.25941L8.09086 10.2006C8.59296 10.7175 9.40703 10.7175 9.90914 10.2006L17.6234 2.25941C18.1255 1.74254 18.1255 0.904523 17.6234 0.387653Z' fill='%23224051'/%3E%3C/svg%3E%0A");
+  }
+
+  .text-center {
+    text-align: center !important;
+  }
+
+  .cursor-pointer{
+    cursor: pointer;
+  }
+}
+
+button:disabled svg path {
+  fill: #ABBED1 !important;
+}
+button:disabled svg rect {
+  fill: transparent !important;
+}

package/src/lib/table/libey-ng-table.component.html

@@ -0,0 +1,122 @@
+<div class="table-container"  #tableContainer [style.height]="height == null ? 'auto':(height + 'px')">
+  <!-- <table cdkDropList (cdkDropListDropped)="drop($event)"> -->
+  <table #table [ngClass]="class">
+    <thead>
+      <tr>
+        <th *ngIf="expandable" [ngClass]="headerfixed == true ? 'th-fixed':''" style="width: 25px;"></th>
+        <ng-container *ngFor="let column of columns; let i = index">
+          <th *ngIf="column.view" [style.width]="column.width ? (column.width + 'px') : 'auto'"
+              [ngClass]="headerfixed == true ? (column.classHeader + ' th-fixed'): column.classHeader">
+            <!-- Custom header template -->
+            <ng-container *ngIf="column.headerTemplate; else defaultHeader">
+              <ng-container [ngTemplateOutlet]="column.headerTemplate"
+                          [ngTemplateOutletContext]="{ column: column, index: i }">
+              </ng-container>
+            </ng-container>
+            <ng-template #defaultHeader>
+              <span style="white-space: nowrap;">{{ column.header }}</span>
+            </ng-template>
+            <div class="resize-handle" (mousedown)="onResizeStart(i, $event)"></div>
+          </th>
+        </ng-container>
+      </tr>
+    </thead>
+    <tbody>
+      <ng-container *ngIf="_data.length == 0">
+        <tr>
+          <td [colSpan]="expandable ? (columns.length + 1) : (columns.length)" class="text-center">
+            No existen datos disponibles
+          </td>
+        </tr>
+      </ng-container>
+      <ng-container *ngIf="paginatedData.length != 0">
+        <ng-container *ngFor="let item of paginatedData; let a = index">
+          <tr>
+            <td *ngIf="expandable">
+              <button (click)="toggleRow(a)">
+                <i [ngClass]="rowExpandable[a] ? 'icon-arrow-up':'icon-arrow-down'"></i>
+              </button>
+            </td>
+            <ng-container *ngFor="let column of columns; let i = index">
+              <td
+              *ngIf="column.view && (column.isRowspan && column.rowspan(item) > 0)"
+              [attr.rowspan]="column.rowspan(item)"
+              [ngClass]="column.class" (click)="toggleRowDetail(i, a, column, item)" [class]="column.expandable ? 'cursor-pointer': ''">
+                <ng-container
+                    [ngTemplateOutlet]="detailTd"
+                    [ngTemplateOutletContext]="{item:item, column:column, indexData:a, indexColumn:i}">
+                </ng-container>
+              </td>
+              <td
+              *ngIf="column.view && column.isRowspan != true"
+              [ngClass]="column.class" (click)="toggleRowDetail(i, a, column, item)" [class]="column.expandable ? 'cursor-pointer': ''">
+                <ng-container
+                    [ngTemplateOutlet]="detailTd"
+                    [ngTemplateOutletContext]="{item:item, column:column, indexData:a, indexColumn:i}">
+                </ng-container>
+              </td>
+            </ng-container>
+          </tr>
+          <ng-container *ngIf="viewRowExpandableDetail(a)">
+            <ng-container *ngTemplateOutlet="findRowExpandableDetail(a); context: { $implicit: item }"></ng-container>
+          </ng-container>
+          <tr *ngIf="rowExpandable[a]">
+            <td [attr.colspan]="columns.length + (expandable ? 1 : 0)">
+              <ng-container [ngTemplateOutlet]="childTableTemplate"
+                            [ngTemplateOutletContext]="{ parentRow: item }">
+              </ng-container>
+            </td>
+          </tr>
+        </ng-container>
+      </ng-container>
+    </tbody>
+  </table>
+</div>
+<div *ngIf="viewPaginate && _data.length != 0" class="pagination-controls">
+  <div class="d-align-center">
+    <label class="lbl-footer me-20px"># Registros: {{this.totalSize}}</label>
+    <label class="lbl-footer"># Filas: {{this.pageSize}}</label>
+  </div>
+  <div class="d-align-center">
+    <button (click)="goToPage(1)" [disabled]="currentPage === 1">
+      <i class="icon-first-page"></i>
+    </button>
+    <button (click)="goToPage(currentPage - 1)" [disabled]="currentPage === 1">
+      <i class="icon-previous-page"></i>
+    </button>
+    <ng-container *ngFor="let page of pageRange()">
+      <button class="numbers"
+        (click)="goToPage(page)"
+        [class.active]="currentPage === page"
+        [disabled]="currentPage === page">
+        {{ page }}
+      </button>
+    </ng-container>
+    <button (click)="goToPage(currentPage + 1)" [disabled]="currentPage === totalPages">
+      <i class="icon-next-page"></i>
+    </button>
+    <button (click)="goToPage(totalPages)" [disabled]="currentPage === totalPages">
+      <i class="icon-last-page"></i>
+    </button>
+  </div>
+</div>
+<ng-template #detailTd let-item="item" let-column="column" let-indexData="indexData" let-indexColumn="indexColumn">
+  <ng-container *ngIf="column.getCellTemplate(); else defaultCell">
+    <div style="display: flex; justify-content: space-between; white-space: nowrap; align-items: center;">
+      <ng-container [ngTemplateOutlet]="column.getCellTemplate()"
+                              [ngTemplateOutletContext]="{ $implicit: item, column: column, index: indexData }">
+      </ng-container>
+      <button *ngIf="column.expandable">
+        <i [ngClass]="existRowExpandableDetail(indexColumn, indexData) ? 'icon-arrow-up':'icon-arrow-down'"></i>
+      </button>
+    </div>
+  </ng-container>
+  <ng-template #defaultCell>
+    <div style="display: flex; justify-content: space-between; white-space: nowrap; align-items: center;">
+      {{ getCellValue(item, column) }}
+      <button *ngIf="column.expandable">
+        <i [ngClass]="existRowExpandableDetail(indexColumn, indexData) ? 'icon-arrow-up':'icon-arrow-down'"></i>
+      </button>
+    </div>
+  </ng-template>
+</ng-template>

package/src/lib/table/libey-ng-table.component.ts

@@ -0,0 +1,234 @@
+import { AfterViewInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { LibeyColumnDirective } from './directives/libey-column.directive';
+interface IDataKey {
+  key: number;
+  dataKey: number;
+  childTableTemplate: TemplateRef<any>;
+  data: any[];
+  autoClose: boolean;
+}
+
+class DataKey implements IDataKey {
+  key: number;
+  dataKey: number;
+  childTableTemplate: TemplateRef<any>;
+  data: any[];
+  autoClose: boolean;
+  rowspan: number;
+}
+
+@Component({
+  selector: 'libey-ng-table',
+  templateUrl: './libey-ng-table.component.html',
+  styleUrls: ['./libey-ng-table.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+
+export class LibeyNgTableComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input() set data(value: any[]) {
+    this._data = value;
+  }
+  get data(): any[] {
+    return this._data;
+  }
+  @Input() pageSize: number = 10;
+  @Input() totalSize: number = 0;
+  @Input() maxPageButtons: number = 5;
+  @Input() height: number;
+  @Input() expandable: boolean = false;
+  @Input() viewPaginate: boolean = true;
+  @Input() childTableTemplate!: TemplateRef<any>;
+  @Input() headerfixed: boolean = false;
+  @Input() class: string;
+  @Input() internalPagination: boolean = true;
+  @Input() currentPage: number = 1;
+  @Output() pageChange = new EventEmitter<number>();
+  
+  @ContentChildren(LibeyColumnDirective) columns!: QueryList<LibeyColumnDirective>;
+
+  rowExpandable: boolean[] = [];
+  rowExpandableDetail: IDataKey[] = [];
+  paginatedData: any[] = [];
+  _data: any[] = [];
+  columnWidths: number[] = [];
+  resizingColumnIndex: number | null = null;
+  startX: number = 0;
+  startWidth: number = 0;
+  @ViewChild('tableContainer') tableContainer!: ElementRef;
+  @ViewChild('table') tableElement!: ElementRef;
+  constructor(private cdr: ChangeDetectorRef) {}
+  ngOnChanges(changes: SimpleChanges): void {
+    if(changes.data && changes.data.previousValue){
+      changes.data.currentValue.forEach((value, index) => {
+        var findData = this.rowExpandableDetail.find(x => x.dataKey == index);
+        if(findData != null)
+          findData.autoClose = value.autoClose;
+      });
+      this._data = changes.data.currentValue;
+      this.updatePaginatedData();
+      if(this.columns){
+        this.initializeExpandedRows();
+      }
+    }
+  }
+  ngOnInit(): void {
+    this.updatePaginatedData();
+  }
+  ngAfterViewInit() {
+    this.initializeColumnWidths();
+    this.initializeExpandedRows();
+    // this.adjustTableWidth()
+    this.cdr.detectChanges();
+  }
+
+  private initializeExpandedRows(): void {
+    this.columns.forEach((column, columnIndex) => {
+      if(column.expandable){
+        this.paginatedData.forEach((item, rowIndex) => {
+          if(column.expandedByDefault(item) && !this.existRowExpandableDetail(columnIndex, rowIndex)){
+            var entry = new DataKey();
+            entry.key = columnIndex;
+            entry.dataKey = rowIndex;
+            entry.childTableTemplate = column.childTableTemplate;
+            entry.autoClose = column.isAutoClose(item);
+            this.rowExpandableDetail.push(entry);
+          }
+        });
+      }
+    });
+  }
+
+  initializeColumnWidths() {
+    var padding = 31
+    var widthDefault = 150
+    this.columnWidths = this.columns.map(column => column.width);
+    const containerWidth = this.tableContainer.nativeElement.offsetWidth;
+    const autoColumns = this.columns.filter(column => column.width == null);
+    const totalFixedWidth = this.columns.reduce((sum, column) =>
+      column.width != null ? (sum + this.getWidthValue(column.width)) : sum, 0);
+    const remainingWidth = containerWidth - (totalFixedWidth + (((this.columns.length - autoColumns.length) * padding)+ (this.expandable ? 61 : 0)));
+
+    if (autoColumns.length > 0) {
+      var autoColumnWidth = 0;
+      if(remainingWidth < widthDefault)
+        autoColumnWidth = widthDefault;
+      else
+        autoColumnWidth = Math.max(0, remainingWidth / autoColumns.length);
+      autoColumns.forEach(column => column.width = autoColumnWidth- padding);
+    }
+    this.columnWidths = this.columns.map(column => column.width);
+  }
+  // adjustTableWidth() {
+  //   const totalWidth = this.columns.reduce((sum, column) => sum + this.getWidthValue(column.width), 0);
+  //   this.tableElement.nativeElement.style.width = `${totalWidth}px`;
+  // }
+  getWidthValue(width: number): number {
+    return width === null ? 100 : width;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalSize / this.pageSize);
+  }
+
+  getCellValue(item: any, column: LibeyColumnDirective): string {
+    const value = this.getNestedValue(item, column.property);
+    if (Array.isArray(value) && column.arrayMap) {
+      return value.map(v => this.getNestedValue(v, column.arrayMap!)).join(', ');
+    }
+    return value;
+  }
+
+  private getNestedValue(obj: any, path: string): any {
+    return path.split('.').reduce((o, key) => {
+      if (o && typeof o === 'object' && key in o) {
+        return o[key];
+      }
+      return undefined;
+    }, obj);
+  }
+
+  private updatePaginatedData(): void {
+    if(this.viewPaginate && this.internalPagination){
+      const start = (this.currentPage - 1) * this.pageSize;
+      const end = start + this.pageSize;
+      this.paginatedData = this.data.slice(start, end);
+    }else{
+      this.paginatedData = this.data;
+    }    
+  }
+  pageRange(): number[] {
+    const start = Math.max(1, this.currentPage - Math.floor(this.maxPageButtons / 2));
+    const end = Math.min(this.totalPages, start + this.maxPageButtons - 1);
+    const startPreFinish = end - this.maxPageButtons + 1;
+    const startFinish = startPreFinish < 1 ? 1 : startPreFinish;
+    return Array.from({length: end - startFinish + 1}, (_, i) => startFinish + i);
+  }
+  goToPage(page: number): void {
+    this.currentPage = Math.max(1, Math.min(page, this.totalPages));
+    if(this.internalPagination){      
+      this.updatePaginatedData();      
+    }else{
+      this.pageChange.emit(this.currentPage);
+    }
+  }
+  // hasChildren(row: any): boolean{
+  //   return Array.isArray(row.child) && row.child.length > 0;
+  // }
+  toggleRow(index: number){
+    this.rowExpandable[index] = !this.rowExpandable[index];
+  }
+  toggleRowDetail(key: number, indexData: number, column: LibeyColumnDirective, data: any){
+    if(column.expandable){
+      var exist = this.rowExpandableDetail.find(x => x.key == key && x.dataKey == indexData);
+      if(exist == null){
+        this.rowExpandableDetail = this.rowExpandableDetail.filter(x => (x.key != key || x.dataKey != indexData) && x.autoClose == false);
+        var item = new DataKey();
+        item.key = key;
+        item.dataKey = indexData;
+        item.childTableTemplate = column.childTableTemplate;
+        item.autoClose = column.isAutoClose(data);
+        this.rowExpandableDetail.push(item);
+      }else{
+        this.rowExpandableDetail = this.rowExpandableDetail.filter(x => x.key != key || x.dataKey != indexData);
+      }
+    }
+  }
+  getChildren(fila: any): any[] {
+    return fila.hijos || [];
+  }
+  onResizeStart(index: number, event: MouseEvent) {
+    this.resizingColumnIndex = index;
+    this.startX = event.pageX;
+    this.startWidth = this.columnWidths[index];
+    document.addEventListener('mousemove', this.onResizeMove);
+    document.addEventListener('mouseup', this.onResizeEnd);
+  }
+  onResizeMove = (event: MouseEvent) => {
+    if (this.resizingColumnIndex !== null) {
+      const diff = event.pageX - this.startX;
+      this.columnWidths[this.resizingColumnIndex] = Math.max(this.startWidth + diff, 50);
+
+    }
+  }
+  onResizeEnd = () => {
+    this.resizingColumnIndex = null;
+    document.removeEventListener('mousemove', this.onResizeMove);
+    document.removeEventListener('mouseup', this.onResizeEnd);
+  }
+  existRowExpandableDetail(key: number, indexData: number) : boolean{
+    return this.rowExpandableDetail.filter(x => x.key == key && x.dataKey == indexData).length > 0;
+  }
+  viewRowExpandableDetail(indexData: number) :boolean{
+    return this.rowExpandableDetail.filter(x => x.dataKey == indexData).length > 0;
+  }
+  findRowExpandableDetail(indexData: number) :TemplateRef<any>{
+    var find = this.rowExpandableDetail.find(x => x.dataKey == indexData);
+    if(find)
+      return find.childTableTemplate; 
+    else
+      return null;
+  }
+  getRowSpan(column: LibeyColumnDirective, data: any){
+    return column.rowspan(data);
+  }
+}

package/src/lib/table/libey-ng-table.module.ts

@@ -0,0 +1,13 @@
+// table.module.ts
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LibeyColumnDirective } from './directives/libey-column.directive';
+import { FormsModule } from '@angular/forms';
+import { LibeyNgTableComponent } from './libey-ng-table.component';
+
+@NgModule({
+  declarations: [LibeyNgTableComponent, LibeyColumnDirective],
+  imports: [CommonModule,FormsModule],
+  exports: [LibeyNgTableComponent, LibeyColumnDirective]
+})
+export class LibeyNgTableModule { }

package/{public-api.d.ts → src/public-api.ts}

@@ -1,3 +1,7 @@
+/*
+ * Public API Surface of libey-ng-component-library
+ */
+
 export * from './lib/libey-ng-component-library.service';
 export * from './lib/libey-ng-component-library.component';
 export * from './lib/libey-ng-component-library.module';

package/src/test.ts

@@ -0,0 +1,28 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+  { teardown: { destroyAfterEach: true }},
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);