Componentes relativos a tablas

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

Table

<desy-table ...>...</desy-table>

Permite representar una tabla

Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
rows	Array<CellData[]>	Contiene la información relativa a cada celda.	Si
head	CellData[]	Contiene la información relativa a la lista de cabeceras de la tabla.
id	string	Identificador del elemento <div>.
caption	string	Contenido del caption.
captionClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <caption>. Si se incluye el elemento <desy-caption> como contenido, se utilizará en su lugar la propiedad de dicho elemento.
firstCellIsHeader	boolean	Cuando es true, intercambia la primera celda de las filas de la tabla de <td> a <th>.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <table>.
wrapper	WrapperData	Permite configurar el elemento que contiene a la tabla. Si no se especifica, no se incluirá este elemento envolvente.

Objeto CellData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
classes	string	Classes CSS separadas por espacio que se aplicarán sobre los objetos de este tipo
colspan	number	Especifica el número de columnas que se extiende una celda
rowspan	number	Especifica el numero de filas que se extiende una celda

Objeto WrapperData

Propiedad	Tipo	Descripción	Obligatorio
classes	string	Classes CSS separadas por espacio que se aplicarán sobre el elemento envolvente.

Propiedades de accesibilidad

El componente Table y cada CellData admiten los siguientes parámetros de accesibilidad.

Contenido

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

TableCaptionComponent

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

Permite especificar el caption. Admite la propiedad classes.

TableHeaderComponent

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

Permite agrupar las celdas de la cabecera.

TableRowComponent

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

Permite agrupar las celdas de cada fila.

TableCellComponent

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

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

Ejemplos

Implementación con contenido

<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

<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

<desy-table-advanced ...></desy-table-advanced>

Permite representar una tabla con elementos de búsqueda, ordenación y selección.

Propiedades de entrada

Propiedad	Tipo	Descripción
rows	RowData[]	Contiene la información relativa a cada fila. Admite double-binding.
head	HeadCellData[]	Contiene la información relativa a la lista de cabeceras de la tabla.
id	string	Identificador del elemento.
idPrefix	string	Prefijo a usar para los identificadores
caption	string	Contenido del caption
captionClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <caption>
firstCellIsHeader	boolean	Cuando es true, intercambia la primera celda de las filas de la tabla de <td> a <th>
hasCheckboxes	boolean	Indica si la primera columna se muestran checkbox de selección.
checkboxClasses	string	Clases CSS separadas por espacio que se aplicarán sobre todas las celdas de la columna de los checkbox.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <table>
wrapper	WrapperData	Permite configurar el elemento que contiene a la tabla. Si no se especifica, no se incluirá este elemento envolvente.

Objeto HeadCellData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
classes	string	Classes CSS separadas por espacio que se aplicarán sobre los objetos de este tipo
colspan	number	Especifica el número de columnas que se extiende una celda
rowspan	number	Especifica el numero de filas que se extiende una celda
hasFilter	boolean	Indica si tiene esta columna una barra de buscador.
filterClasses	string	Clases css a aplicar al buscador de la columna
orderBy	string	Indica si esa columna tiene ordenación y cual es su valor inicial. Posibles valores: none, asc o desc.
hasSelect	boolean	Indica si esta columna tiene un seleccionable

Objeto RowData

Propiedad

Tipo

Descripción

Obligatorio

id

string

Identificador de la fila.

Este identificador se usara en el evento emitido de selección.

Si, cuando tiene checkboxes.

cellsList

CellData[]

Contiene la información relativa a cada celda.

Si

checked

boolean

Permite indicar si la fila está seleccionada. Debe de estar habilitada la opción hasCheckboxes en el componente.

Objeto CellData

Propiedad	Tipo	Descripción	Obligatorio
id	string	Identificador
text	string	Contenido del texto en formato texto plano. No se aplicará cuando se especifique la propiedad html.	Si, cuando no se especifica html.
html	string	Contenido del texto en formato HTML.	Si, cuando no se especifica text.
classes	string	Classes CSS separadas por espacio que se aplicarán sobre los objetos de este tipo
colspan	number	Especifica el número de columnas que se extiende una celda
rowspan	number	Especifica el numero de filas que se extiende una celda

Objeto WrapperData

Propiedad	Tipo	Descripción	Obligatorio
classes	string	Classes CSS separadas por espacio que se aplicarán sobre el elemento envolvente.

Propiedades de accesibilidad

El componente, cada CellData y HeadCellData admiten los siguientes parámetros de accesibilidad.

Contenido

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

TableCaptionComponent

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

Permite especificar el caption. Admite la propiedad classes.

TableAdvancedHeaderComponent

<desy-table-advanced-header>...</desy-table-advanced-header>

Permite agrupar las celdas de la cabecera.

TableAdvancedHeaderCellComponent

<desy-table-advanced-header-cell ...>...</desy-table-advanced-header-cell>

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

Nota: Para introducir texto o contenido HTML en la cabecera mediante contenido, habrá que utilizar la etiqueta <desy-content>…</desy-content>

TableAdvancedSelectComponent

<desy-table-advanced-select ...>...</desy-table-advanced-select>

Permite añadir un componente seleccionable a la cabecera de la columna, al que se le podrá pasar por contenido (etiqueta <desy-option>) los elementos seleccionables. Tiene los siguientes parámetros de entrada:

Propiedad	Tipo	Descripción
classes	string	Permite añadir clases CSS al componente Select
disabled	boolean	Indica si el selector está deshabilitado
formGroupClasses	string	Clases CSS separadas por espacio que se aplicarán sobre el form group.

TableAdvancedRowComponent

<desy-table-advanced-row ...>...</desy-table-advanced-row>

Permite agrupar las celdas de cada fila. Admite los mismos parámetros de entrada que el objeto RowData. El parámetro checked admite double-binding, así como detectar un cambio mediante el evento checkedChange.

TableAdvancedRowCellComponent

<desy-table-advanced-row-cell ...>...</desy-table-advanced-row-cell>

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

Evento de salida

Evento

Tipo

Descripción

rowsChecked

Se emite los nombres de los identificadores de cada fila con un booleano que indica si esta seleccionado.

{ string: boolean, …}

Ej: { "identificador1": false, "identificador2": true, "identificador3": false }

Se emite cada vez que se selecciona o deselecciona una fila.

Al buscar, la selección se desmarca.

rowsChange

RowData[]

Indica cuando se ha producido un cambio interno en los elementos de la tabla, generalmente al seleccionarse una fila.

Sólo se emite si se especifica el parámetro de entrada rows.

recalculateTable

RecalculateTableParams

Se emite cuando debe recalcularse el contenido de la tabla (por ejemplo al modificar la ordenación o realizar una búsqueda).

La función que gestione este evento deberá realizar el filtrado y ordenación, pues sobrescribirá el comportamiento por defecto del componente.

Objeto RecalculateTableParams

Propiedad

Tipo

Descripción

filters

{ columnIndex: number, filterText: string }

Lista de filtros a aplicar. Cada filtro está compuesto por los siguientes elementos:

columnIndex: número de columna en la que se ha especificado el filtro.
filterText: texto que el usuario ha introducido en el filtro.

sort

{ columnIndex: number, order: OrderBy }

Ordenación a aplicar. Si no se ha especificado ordenación, el objeto vendrá a null. Está compuesto por los siguientes elementos:

columnIndex: número de columna en la que se ha especificado la ordenación.
order: indica la dirección en la que debe ordenarse.

Ejemplos

Implementación completa con contenido

<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

<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

...

@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

<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

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

Parámetro	Atributo de accesibilidad equivalente

Parámetro	Atributo de accesibilidad equivalente
role	role
ariaLabel	aria-label
ariaDescribedBy	aria-describedby
ariaLabelledBy	aria-labelledby
ariaHidden	aria-hidden
ariaDisabled	aria-disabled
ariaControls	aria-controls
ariaCurrent	aria-current
ariaLive	aria-live
ariaExpanded	aria-expanded
ariaErrorMessage	aria-errormessage
ariaHasPopup	aria-haspopup
ariaModal	aria-modal
tabindex	tabindex

desy-angular v6.0 - Manual de integración DesyTablesModule