Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...

...

...

...

titleControl de versiones

...

Version

...

Fecha

...

Editor

...

Cambios

...

4.0.0

...

...

Roberto Clemente

...

Table of Contents
minLevel2
maxLevel2

...

Vamos a ver como se usa cada uno de los componentes.

Table

...

Code Block
languagexml
<desy-table ...>...</desy-table>

...

Expand
titleContenido

Se permite proyectar contenido dentro de table para facilitar su uso. Para ello se facilitan los siguientes sub-componentes:

TableCaptionComponent

Code Block
<desy-table-caption ...>...</desy-table-caption>

Permite especificar el caption. Admite la propiedad classes.

TableHeaderComponent

Code Block
<desy-table-header>...</desy-table-header>

Permite agrupar las celdas de la cabecera.

TableRowComponent

Code Block
<desy-table-row>...</desy-table-row>

Permite agrupar las celdas de cada fila.

TableCellComponent

Code Block
<desy-table-cell ...>...</desy-table-cell>

Permite especificar una celda. Admite los mismos parámetros de entrada que el objeto CellData.

Expand
titleEjemplos
Image RemovedImage Added
Implementación con contenido
Code Block
languagexml
<desy-table>
  <desy-table-caption [classes]="'mb-base font-bold text-left text-lg'">Caption 1: Months and rates</desy-table-caption>
  <desy-table-header>
    <desy-table-cell>Month you apply</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">Rate for bicycles</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">Rate for vehicles</desy-table-cell>
  </desy-table-header>
  <desy-table-row>
    <desy-table-cell>January</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">85€</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">95€</desy-table-cell>
  </desy-table-row>
  <desy-table-row>
    <desy-table-cell>February</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">75€</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">55€</desy-table-cell>
  </desy-table-row>
  <desy-table-row>
    <desy-table-cell>March</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">165€</desy-table-cell>
    <desy-table-cell [classes]="'text-right'">125€</desy-table-cell>
  </desy-table-row>
</desy-table>

Image RemovedImage Added

Implementación con parámetros
Code Block
languagexml
<desy-table caption="Caption 1: Months and rates" captionClasses="mb-base font-bold text-left text-lg"
            [head]="[{'text':'Month you apply'},{'text':'Rate for bicycles','classes':'text-right'},{'text':'Rate for vehicles','classes':'text-right'}]"
            [rows]="[[{'text':'January'},{'text':'85€','classes':'text-right'},{'text':'95€','classes':'text-right'}],
                        [{'text':'February'},{'text':'75€','classes':'text-right'},{'text':'55€','classes':'text-right'}],
                        [{'text':'March'},{'text':'165€','classes':'text-right'},{'text':'125€','classes':'text-right'}]]">
</desy-table>


Table advanced

...

Code Block
languagexml
<desy-table-advanced ...></desy-table-advanced>

...

Expand
titleEjemplos
Implementación completa con contenido

Code Block
languagexml
<desy-table-advanced [classes]="'min-w-full'" [idPrefix]="'table-with-all'" [hasCheckboxes]="true"  [firstCellIsHeader]="true">
  <desy-table-caption [classes]="'mb-base font-bold text-left text-lg'">Caption 1: Months and rates</desy-table-caption>
  <desy-table-advanced-header>
    <desy-table-advanced-header-cell>Row number</desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true">Month you apply</desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true" [classes]="'text-right'">Rate for bicycles</desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true" [classes]="'text-right'">Rate for vehicles</desy-table-advanced-header-cell>
  </desy-table-advanced-header>
  <desy-table-advanced-row [id]="'identificador1'" [(checked)]="firstRowChecked">
    <desy-table-advanced-row-cell>First row</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell>January</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">85€</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">95€</desy-table-advanced-row-cell>
  </desy-table-advanced-row>
  <desy-table-advanced-row [id]="'identificador2'">
    <desy-table-advanced-row-cell>Second row</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell>February</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">75€</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">55€</desy-table-advanced-row-cell>
  </desy-table-advanced-row>
  <desy-table-advanced-row [id]="'identificador3'">
    <desy-table-advanced-row-cell>Second row</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell>March</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">165€</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">125€</desy-table-advanced-row-cell>
  </desy-table-advanced-row>
</desy-table-advanced>

Implementación sobrescribiendo el filtrado y la ordenación + componente pagination:

Template

Code Block
languagexml
<desy-table-advanced [id]="id" [idPrefix]="idPrefix" [classes]="'min-w-full mb-base'" [hasCheckboxes]="hasCheckboxes" [firstCellIsHeader]="firstCellIsHeader"
                     (recalculateTable)="handleRecalculateCompanyTable($event)">
  <desy-table-advanced-header>
    <desy-table-advanced-header-cell [orderBy]="'asc'" [hasFilter]="true">Indice</desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true">Nombre</desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true">Texto aleatorio</desy-table-advanced-header-cell>
  </desy-table-advanced-header>
  <desy-table-advanced-row *ngFor="let company of pageCompanyList">
    <desy-table-advanced-row-cell>{{ company.initialIndex }}</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell>{{ company.name }}</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell>{{ company.randomText }}</desy-table-advanced-row-cell>
  </desy-table-advanced-row>
</desy-table-advanced>
<desy-pagination [itemsPerPage]="companyPageElems" [totalItems]="visibleCompanyList ? visibleCompanyList.length : 0" [id]="'paginador'"
                 [(currentPage)]="currentCompanyPage" (currentPageChange)="handleCompanyPagChange($event)"></desy-pagination>

Componente

Code Block
languagexml
...

@Component({
  selector: '...',
  templateUrl: '...'
})
export class ExampleTableAdvancedComponent implements OnInit {
  // Datos de la tabla
  companyList = [ { name: 'Bsh electrodomesticos españa sa', initialIndex: 0, randomText: '' }, { name: 'Sociedad anonima industrias celulosa aragonesa', initialIndex: 0, randomText: '' }, { name: 'Esprinet iberica sl', initialIndex: 0, randomText: '' }, { name: 'Fujikura automotive europe sau', initialIndex: 0, randomText: '' }, { name: 'Adidas españa sau', initialIndex: 0, randomText: '' }, { name: 'Schindler, sa', initialIndex: 0, randomText: '' }, { name: 'Trans sese sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Amplifon iberica sau', initialIndex: 0, randomText: '' }, { name: 'Saica pack sl', initialIndex: 0, randomText: '' }, { name: 'Novapet sa', initialIndex: 0, randomText: '' }, { name: 'Argal alimentacion sa.', initialIndex: 0, randomText: '' }, { name: 'Carreras grupo logistico sa.', initialIndex: 0, randomText: '' }, { name: 'Megasider zaragoza sa', initialIndex: 0, randomText: '' }, { name: 'Caladero sl', initialIndex: 0, randomText: '' }, { name: 'Lecitrailer sa', initialIndex: 0, randomText: '' }, { name: 'Saica natur sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Daniel aguilo panisello sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Bebinter sa', initialIndex: 0, randomText: '' }, { name: 'Cuarte sl', initialIndex: 0, randomText: '' }, { name: 'Mann-hummel iberica sa', initialIndex: 0, randomText: '' }, { name: 'Valeo termico sau', initialIndex: 0, randomText: '' }, { name: 'Tereos starch & sweeteners iberia s.a.u.', initialIndex: 0, randomText: '' }, { name: 'Proclinic sa', initialIndex: 0, randomText: '' }, { name: 'Lozano transportes sau', initialIndex: 0, randomText: '' }, { name: 'Saltoki logistica zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Distribuciones agropecuarias de aragon sl', initialIndex: 0, randomText: '' }, { name: 'Agreda automovil, sa', initialIndex: 0, randomText: '' }, { name: 'La zaragozana sa', initialIndex: 0, randomText: '' }, { name: 'Punt roma sl', initialIndex: 0, randomText: '' }, { name: 'Multienergia verde sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Linamar light metals zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Nurel sa', initialIndex: 0, randomText: '' }, { name: 'Industrias quimicas del ebro, sa', initialIndex: 0, randomText: '' }, { name: 'Aves nobles y derivados sl', initialIndex: 0, randomText: '' }, { name: 'Hiab cranes sl', initialIndex: 0, randomText: '' }, { name: 'Vian as automobile sl', initialIndex: 0, randomText: '' }, { name: 'Productos porcinos secundarios sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Industrias aragonesas del aluminio sa', initialIndex: 0, randomText: '' }, { name: 'Enterprise solutions outsourcing españa sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Garda servicios de seguridad sa', initialIndex: 0, randomText: '' }, { name: 'Bergner europe, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Generos de punto victrix sl', initialIndex: 0, randomText: '' }, { name: 'Cables rct sa', initialIndex: 0, randomText: '' }, { name: 'Servisar servicios sociales sl', initialIndex: 0, randomText: '' }, { name: 'Politours sa (en liquidacion)', initialIndex: 0, randomText: '' }, { name: 'Electrical components international slu', initialIndex: 0, randomText: '' }, { name: 'Jorge pork meat slu', initialIndex: 0, randomText: '' }, { name: 'Minera de santa marta sa', initialIndex: 0, randomText: '' }, { name: 'Servigas s xxi sa', initialIndex: 0, randomText: '' }, { name: 'Automoviles sanchez, sa', initialIndex: 0, randomText: '' }, { name: 'Farmhispania s.a.', initialIndex: 0, randomText: '' }, { name: 'Cables de comunicaciones zaragoza sl', initialIndex: 0, randomText: '' }, { name: 'Valorista sl.', initialIndex: 0, randomText: '' }, { name: 'Ibercaja mediacion de seguros sa', initialIndex: 0, randomText: '' }, { name: 'Celulosa fabril sa', initialIndex: 0, randomText: '' }, { name: 'Frutaria agricultura sl.', initialIndex: 0, randomText: '' }, { name: 'Aragocias, sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Vitalia home sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Cerro murillo sa', initialIndex: 0, randomText: '' }, { name: 'Aragon wagen sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Saltoki suministros zaragoza, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Zalux sa', initialIndex: 0, randomText: '' }, { name: 'Zarsol sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Ehisa construcciones y obras sa', initialIndex: 0, randomText: '' }, { name: 'Arquisocial sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Wittur elevator components sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Master distancia sa', initialIndex: 0, randomText: '' }, { name: 'Fertinagro agrovip sl.', initialIndex: 0, randomText: '' }, { name: 'Construcciones mariano lopez navarro sa', initialIndex: 0, randomText: '' }, { name: 'Distribuidora internacional carmen sa', initialIndex: 0, randomText: '' }, { name: 'Destilerias mg sl', initialIndex: 0, randomText: '' }, { name: 'Dexiberica soluciones industriales sau', initialIndex: 0, randomText: '' }, { name: 'Velpiri sau.', initialIndex: 0, randomText: '' }, { name: 'Airtex products sa', initialIndex: 0, randomText: '' }, { name: 'Oviaragon s.c.l.', initialIndex: 0, randomText: '' }, { name: 'Sociedad aragonesa de gestion agroambiental sl.', initialIndex: 0, randomText: '' }, { name: 'Vitalia suite, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'International casing products slu', initialIndex: 0, randomText: '' }, { name: 'Scanfisk seafood sl', initialIndex: 0, randomText: '' }, { name: 'Molinos del ebro sa', initialIndex: 0, randomText: '' }, { name: 'Euroarce mineria s.a.', initialIndex: 0, randomText: '' }, { name: 'Solitium sl.', initialIndex: 0, randomText: '' }, { name: 'Comercial salgar sl', initialIndex: 0, randomText: '' }, { name: 'Insonorizantes pelzer sa', initialIndex: 0, randomText: '' }, { name: 'Maetel instalaciones y servicios industriales sa.', initialIndex: 0, randomText: '' }, { name: 'Ringo valvulas sl', initialIndex: 0, randomText: '' }, { name: 'Trox españa sa', initialIndex: 0, randomText: '' }, { name: 'Teltronic sa', initialIndex: 0, randomText: '' }, { name: 'Brilen sa', initialIndex: 0, randomText: '' }, { name: 'Keter iberia sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Business telecommunications services europe sa.', initialIndex: 0, randomText: '' }, { name: 'Bm sportech ib sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Chemieuro sl', initialIndex: 0, randomText: '' }, { name: 'Deutschland autos slu (extinguida)', initialIndex: 0, randomText: '' }, { name: 'Laboratorios saphir sa', initialIndex: 0, randomText: '' }, { name: 'Avanza zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Valfondo inmuebles sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Fersa bearings sa', initialIndex: 0, randomText: '' }, { name: 'Brass & fittings sl', initialIndex: 0, randomText: '' }, { name: 'Mas prevencion servicio de prevencion sociedad limitada.', initialIndex: 0, randomText: '' }, ];
  visibleCompanyList = this.companyList; // Elementos filtrados
  pageCompanyList = this.companyList; // Elementos a mostrar en la página
  
  // Datos de paginación
  currentCompanyPage = 1; // página actual
  companyPageElems = 7; // elementos a mostrar en la tabla
  
  ngOnInit(): void {
    this.companyList.forEach((c, i) => c.initialIndex = i);
    this.companyList.forEach((c, i) => c.randomText = this.generateRandomText(20)); // 
    this.handleCompanyPagChange(this.currentCompanyPage);
  }
  
  /**
   * Recalcula los elementos a mostrar en la tabla
   */
  handleRecalculateCompanyTable(recalculateParams: RecalculateTableParams): void {
    let rows = this.companyList;
    
    // Realiza el filtrado
    recalculateParams.filters.forEach(filter => {
      rows = rows.filter(row =>
          this.containsAnyWordFrom(this.getCellString(row, filter.columnIndex) + '', filter.filterText));
    });

    // Sobre los datos filtrados, se realiza la ordenación
    if (recalculateParams.sort) {
      const columnIndex = recalculateParams.sort.columnIndex;
      const isAsc = recalculateParams.sort.order === OrderBy.asc;
      rows = rows.sort((a, b) =>
          this.compareCellContent(this.getCellString(a, columnIndex), this.getCellString(b, columnIndex), isAsc));
    }

    this.visibleCompanyList = rows;
    
    // Se obtienen los elementros a mostrar en la tabla según la página seleccionada
    this.pageCompanyList = this.visibleCompanyList.slice((this.currentCompanyPage - 1) * this.companyPageElems,
      Math.min(this.currentCompanyPage * this.companyPageElems, this.companyList.length));
  }
  
  /**
   * Gestiona un cambio de página
   */
  handleCompanyPagChange(page: number): void {
    this.pageCompanyList = this.visibleCompanyList.slice((page - 1) * this.companyPageElems,
        Math.min(page * this.companyPageElems, this.companyList.length));
    this.currentCompanyPage = page;
  }

  
  getCellString(row, columnIndex: number): string {
    if (columnIndex === 0) {
      return row.initialIndex + '';
    } else if (columnIndex === 1) {
      return row.name;
    } else if (columnIndex === 2) {
      return row.randomText;
    }
  }
  
  /*
   * Se omite el contenido de las siguientes funciones para no sobrecargar el ejemplo.
   * Puede verse un ejemplo completo en https://bitbucket.org/sdaragon/desy-angular/src/master/projects/demo/src/app/components/demo-table-advanced/
   */
  
  // Genera texto aleatorio de la longitud especificada
  generateRandomText(length: number): string {
     ...
  }
  
  // Devuelve true si el texto target pasa el filtro del texto definido en text
  containsAnyWordFrom(target: string, text: string, fullWord?: boolean): boolean {
     ...
  }
  
  // Compara dos celdas para especificar la ordenación
  compareCellContent(a: string, b: string, isAsc: boolean): number {
     ...
  }
}

Implementación completa con parámetros

Code Block
languagexml
<desy-table-advanced classes="min-w-full" idPrefix="table-with-all" hasCheckboxes="true"  firstCellIsHeader="true" (rowsChecked)="handlerRows($event)" 
    caption="Caption 1: Months and rates" captionClasses="mb-base font-bold text-left text-lg"
    [head]="[{'text':'Row number'},{'text':'Month you apply','orderBy':'none','hasFilter':true},{'text':'Rate for bicycles','orderBy':'none','classes':'text-right','hasFilter':true},{'text':'Rate for vehicles','orderBy':'none','classes':'text-right','hasFilter':true}]"
    [rows]="[{'id':'identificador1','cellsList':[{'text':'First row'},{'text':'January'},{'text':'85€','classes':'text-right'},{'text':'95€','classes':'text-right'}]},{'id':'identificador2','cellsList':[{'text':'Second row'},{'text':'February'},{'text':'75€','classes':'text-right'},{'text':'55€','classes':'text-right'}]},{'id':'identificador3','cellsList':[{'text':'Third row'},{'text':'March'},{'text':'165€','classes':'text-right'},{'text':'125€','classes':'text-right'}]}]">
  </desy-table-advanced>


Implementación sencilla

Code Block
languagexml
<desy-table-advanced classes="min-w-full" 
    [rows]="[{'cellsList':[{'text':'January'},{'text':'85€','classes':'text-right'},{'text':'95€','classes':'text-right'}]},{'cellsList':[{'text':'February'},{'text':'75€','classes':'text-right'},{'text':'55€','classes':'text-right'}]},{'cellsList':[{'text':'March'},{'text':'165€','classes':'text-right'},{'text':'125€','classes':'text-right'}]}]">
</desy-table-advanced>


Accesibilidad

...

En todos los componentes se han tenido en cuenta los siguiente parámetros de accesibilidad. Se detalla en cada componente.

...