Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel2
maxLevel2

Componentes relativos a tablas

...

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

 

Table

...

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

...

Expand
titleEjemplos
Implementación con contenido
Code Block
<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>

 

Implementación con parámetros
Code Block
<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
<desy-table-advanced ...></desy-table-advanced>

...

Expand
titleEjemplos
Implementación completa con contenido

 

Code Block
<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>
      <desy-content>Row number</desy-content>
    </desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true">
      <desy-content>Month you apply</desy-content>
    </desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasSelect]="true" [classes]="'text-right'">
      <desy-content>Rate for bicycles</desy-content>
      <desy-table-advanced-select>
        <desy-option [selected]="true" [value]="''">Selecciona una opción</desy-option>
        <desy-option *ngFor="let item of selectItemsCol3" [value]="item.value">{{item.text}}</desy-option>
      </desy-table-advanced-select>
    </desy-table-advanced-header-cell>
    <desy-table-advanced-header-cell [orderBy]="'none'" [hasFilter]="true" [hasSelect]="true" [classes]="'text-right'">
      <desy-content>
        Rate for vehicles
      </desy-content>
      <desy-table-advanced-select>
        <desy-option [selected]="true" [value]="''">Selecciona una opción</desy-option>
        <desy-option *ngFor="let item of selectItemsCol3" [value]="item.value">{{item.text}}</desy-option>
      </desy-table-advanced-select>
    </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
<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
...

@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
<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
<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.

...