Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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
titlePropiedades 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.

foot

CellData[]

Contiene la información relativa a la lista de footer 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.

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.

TableFooterComponent

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

Permite agrupar las celdas del footer.

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 Removed

Implementación con parámetros
Code Block
languagexml
  <desy-table-footer caption*ngIf="CaptionhasFooter">
1: Months and rates" captionClasses="mb-base font-bold text-left text-lg" <desy-table-cell>Suma</desy-table-cell>
             [head<desy-table-cell [classes]="[{'text':'Month you apply'},{'text':'Rate for bicycles','classes':'text-right'},{'text':'Rate for vehicles','classes':-right'">325€</desy-table-cell>
    <desy-table-cell [classes]="'text-right'}]"">275€</desy-table-cell>
  </desy-table-footer>
</desy-table>

Image Added

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

Table advanced

Code Block
languagexml
<desy-table-advanced
,
                        [{'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
titlePropiedades de entrada

Propiedad

Tipo

Descripción

Obligatorio

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

foot

RowData[]

Contiene la información relativa a la lista de footers 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.

expand
Expand
titleContenido

Se permite proyectar contenido dentro de table-advanced 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.

TableAdvancedHeaderComponent

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

Permite agrupar las celdas de la cabecera.

TableAdvancedHeaderCellComponent

Code Block
<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

Code Block
<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

Obligatorio

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

Code Block
<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

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

TableAdvancedFooterComponent

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

Note

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.

Expand
titleEjemplos
Implementación completa con contenido
Image Removed 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> <desy-content>Row number</desy-content>
Code Block
<desy-table-advanced-footer...>...</desy-table-advanced-footer>

Permite agrupar las celdas de cada fila del footer. 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.

TableAdvancedFooterCellComponent

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

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

Expand
titleEvento 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).

Note

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.

<desy-table-advanced classes="min-w-full"

Expand
titleEjemplos
Implementación completa con contenido
Image Added

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>
      <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-cell>header>
    <desy-table-advanced-header-cellrow [orderByid]="'noneidentificador1'" [hasFilter(checked)]="truefirstRowChecked">

     <desy-content>Month you apply</desy-content>
    <table-advanced-row-cell>First row</desy-table-advanced-headerrow-cell>
    <desy-table-advanced-row-header-cell [orderBy]="'none'" [hasSelect]="true" [classes]="'text-right'">
      <desy-content>Rate for bicycles</desy-content>cell>January</desy-table-advanced-row-cell>
      <desy-table-advanced-select>
        <desy-optionrow-cell [selectedclasses]="true" [value]="''">Selecciona una opción</desy-option>
  'text-right'">85€</desy-table-advanced-row-cell>
     <desy-option *ngFor="let item of selectItemsCol3" [value]="item.value">{{item.text}}</desy-option>
      <table-advanced-row-cell [classes]="'text-right'">95€</desy-table-advanced-row-select>cell>
    </desy-table-advanced-header-cell>
row>
   <desy-table-advanced-header-cellrow [orderByid]="'noneidentificador2'" [hasFilter]="true" [hasSelect]="true" [classes]="'text-right'">

     <desy-content>
table-advanced-row-cell>Second row</desy-table-advanced-row-cell>
       Rate for vehicles
      </desy-content>
 <desy-table-advanced-row-cell>February</desy-table-advanced-row-cell>
    <desy-table-advanced-select>
        <desy-optionrow-cell [selectedclasses]="true" [value]="''">Selecciona una opción</desy-option>
   'text-right'">75€</desy-table-advanced-row-cell>
    <desy-option *ngFor="let item of selectItemsCol3" [value]="item.value">{{item.text}}</desy-option>
      </desy-table-advanced-select>
    <-table-advanced-row-cell [classes]="'text-right'">55€</desy-table-advanced-headerrow-cell>
  </desy-table-advanced-header>row>
  <desy-table-advanced-row [id]="'identificador1identificador3'" [(checked)]="firstRowChecked">
    <desy-table-advanced-row-cell>Firstcell>Second row</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell>January<cell>March</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">85€<>165€</desy-table-advanced-row-cell>
    <desy-table-advanced-row-cell [classes]="'text-right'">95€<>125€</desy-table-advanced-row-cell>
  </desy-table-advanced-row>
  <desy-table-advanced-rowfooter [checked]="itemFoot.checked" [id]="'identificador2'itemFoot.id">
    <desy-table-advanced-row-cell>Second row<footer-cell>
      First footer row
     </desy-table-advanced-rowfooter-cell>
    <desy-table-advanced-row-cell>February<footer-cell>
     Suma
    </desy-table-advanced-rowfooter-cell>
    <desy-table-advanced-rowfooter-cell [classes]="'text-right'">75€<>
     325€    
    </desy-table-advanced-rowfooter-cell>
    <desy-table-advanced-rowfooter-cell [classes]="'text-right'">55€<>
     275€
    </desy-table-advanced-rowfooter-cell>
  </desy-table-advanced-footer>
</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>table-advanced>

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

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-
row
header-cell [
classes
orderBy]="'
text-right
asc'"
>125€<
 [hasFilter]="true">Indice</desy-table-advanced-
row
header-cell>
   
</desy
 <desy-table-advanced-
row> </desy-table-advanced>
Implementación sobrescribiendo el filtrado y la ordenación + componente pagination:
Image Removed

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>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-headerrow-cell [orderBy]="'asc'" [hasFilter]="true">Indice<cell>{{ company.name }}</desy-table-advanced-headerrow-cell>
    <desy-table-advanced-headerrow-cell [orderBy]="'none'" [hasFilter]="true">Nombre<cell>{{ company.randomText }}</desy-table-advanced-headerrow-cell>
    <desy</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 sarow>
</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: 'SociedadAmplifon anonima industrias celulosa aragonesaiberica sau', initialIndex: 0, randomText: '' }, { name: 'EsprinetSaica ibericapack sl', initialIndex: 0, randomText: '' }, { name: 'Fujikura automotive europe sauNovapet sa', initialIndex: 0, randomText: '' }, { name: 'AdidasArgal españaalimentacion sausa.', initialIndex: 0, randomText: '' }, { name: 'Schindler,Carreras grupo logistico sa.', initialIndex: 0, randomText: '' }, { name: 'TransMegasider sese sociedad limitada.zaragoza sa', initialIndex: 0, randomText: '' }, { name: 'AmplifonCaladero iberica sausl', initialIndex: 0, randomText: '' }, { name: 'SaicaLecitrailer pack slsa', initialIndex: 0, randomText: '' }, { name: 'Novapet saSaica natur sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Argal alimentacion sa.Daniel aguilo panisello sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Carreras grupoBebinter logistico sa.', initialIndex: 0, randomText: '' }, { name: 'MegasiderCuarte zaragoza sasl', initialIndex: 0, randomText: '' }, { name: 'Caladero slMann-hummel iberica sa', initialIndex: 0, randomText: '' }, { name: 'LecitrailerValeo termico sasau', initialIndex: 0, randomText: '' }, { name: 'Saica natur sociedad limitadaTereos starch & sweeteners iberia s.a.u.', initialIndex: 0, randomText: '' }, { name: 'Daniel aguilo panisello sociedad anonimaProclinic sa', initialIndex: 0, randomText: '' }, { name: 'BebinterLozano transportes sasau', initialIndex: 0, randomText: '' }, { name: 'Cuarte slSaltoki logistica zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Mann-hummel iberica saDistribuciones agropecuarias de aragon sl', initialIndex: 0, randomText: '' }, { name: 'ValeoAgreda termicoautomovil, sausa', initialIndex: 0, randomText: '' }, { name: 'TereosLa starch & sweeteners iberia s.a.u.zaragozana sa', initialIndex: 0, randomText: '' }, { name: 'ProclinicPunt roma sasl', initialIndex: 0, randomText: '' }, { name: 'LozanoMultienergia verde transportessociedad saulimitada.', initialIndex: 0, randomText: '' }, { name: 'SaltokiLinamar light logisticametals zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Distribuciones agropecuarias de aragon slNurel sa', initialIndex: 0, randomText: '' }, { name: 'Agreda automovilIndustrias quimicas del ebro, sa', initialIndex: 0, randomText: '' }, { name: 'La zaragozana saAves nobles y derivados sl', initialIndex: 0, randomText: '' }, { name: 'PuntHiab romacranes sl', initialIndex: 0, randomText: '' }, { name: 'MultienergiaVian verdeas sociedadautomobile limitada.sl', initialIndex: 0, randomText: '' }, { name: 'LinamarProductos lightporcinos metalssecundarios zaragozasociedad sa.anonima', initialIndex: 0, randomText: '' }, { name: 'NurelIndustrias aragonesas del aluminio sa', initialIndex: 0, randomText: '' }, { name: 'IndustriasEnterprise solutions quimicasoutsourcing delespaña ebro,sociedad salimitada.', initialIndex: 0, randomText: '' }, { name: 'AvesGarda noblesservicios yde derivadosseguridad slsa', initialIndex: 0, randomText: '' }, { name: 'Hiab cranes slBergner europe, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'VianGeneros de aspunto automobilevictrix sl', initialIndex: 0, randomText: '' }, { name: 'ProductosCables porcinos secundarios sociedad anonimarct sa', initialIndex: 0, randomText: '' }, { name: 'IndustriasServisar aragonesasservicios delsociales aluminio sasl', initialIndex: 0, randomText: '' }, { name: 'EnterprisePolitours solutionssa outsourcing españa sociedad limitada.(en liquidacion)', initialIndex: 0, randomText: '' }, { name: 'GardaElectrical servicioscomponents deinternational seguridad saslu', initialIndex: 0, randomText: '' }, { name: 'BergnerJorge europe,pork sociedadmeat limitada.slu', initialIndex: 0, randomText: '' }, { name: 'GenerosMinera de puntosanta victrixmarta slsa', initialIndex: 0, randomText: '' }, { name: 'CablesServigas s rctxxi sa', initialIndex: 0, randomText: '' }, { name: 'ServisarAutomoviles servicios sociales slsanchez, sa', initialIndex: 0, randomText: '' }, { name: 'Politours sa (en liquidacion)Farmhispania s.a.', initialIndex: 0, randomText: '' }, { name: 'ElectricalCables de componentscomunicaciones internationalzaragoza slusl', initialIndex: 0, randomText: '' }, { name: 'Jorge pork meat sluValorista sl.', initialIndex: 0, randomText: '' }, { name: 'MineraIbercaja mediacion de santa martaseguros sa', initialIndex: 0, randomText: '' }, { name: 'ServigasCelulosa s xxifabril sa', initialIndex: 0, randomText: '' }, { name: 'AutomovilesFrutaria sanchez,agricultura sasl.', initialIndex: 0, randomText: '' }, { name: 'Farmhispania s.a.Aragocias, sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'CablesVitalia dehome comunicaciones zaragoza slsociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Valorista sl.Cerro murillo sa', initialIndex: 0, randomText: '' }, { name: 'IbercajaAragon mediacionwagen de seguros sasociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Celulosa fabril saSaltoki suministros zaragoza, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Frutaria agricultura sl.Zalux sa', initialIndex: 0, randomText: '' }, { name: 'Aragocias,Zarsol sociedad anonimalimitada', initialIndex: 0, randomText: '' }, { name: 'VitaliaEhisa construcciones homey sociedadobras limitada.sa', initialIndex: 0, randomText: '' }, { name: 'CerroArquisocial murillosociedad salimitada', initialIndex: 0, randomText: '' }, { name: 'AragonWittur elevator wagencomponents sociedad limitada.anonima', initialIndex: 0, randomText: '' }, { name: 'SaltokiMaster suministros zaragoza, sociedad limitada.distancia sa', initialIndex: 0, randomText: '' }, { name: 'Zalux saFertinagro agrovip sl.', initialIndex: 0, randomText: '' }, { name: 'Zarsol sociedad limitadaConstrucciones mariano lopez navarro sa', initialIndex: 0, randomText: '' }, { name: 'Ehisa construccionesDistribuidora yinternacional obrascarmen sa', initialIndex: 0, randomText: '' }, { name: 'ArquisocialDestilerias sociedadmg limitadasl', initialIndex: 0, randomText: '' }, { name: 'WitturDexiberica elevatorsoluciones componentsindustriales sociedad anonimasau', initialIndex: 0, randomText: '' }, { name: 'Master distancia saVelpiri sau.', initialIndex: 0, randomText: '' }, { name: 'FertinagroAirtex agrovipproducts sl.sa', initialIndex: 0, randomText: '' }, { name: 'Construcciones mariano lopez navarro saOviaragon s.c.l.', initialIndex: 0, randomText: '' }, { name: 'Distribuidora internacional carmen saSociedad aragonesa de gestion agroambiental sl.', initialIndex: 0, randomText: '' }, { name: 'Destilerias mg slVitalia suite, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'DexibericaInternational solucionescasing industrialesproducts sauslu', initialIndex: 0, randomText: '' }, { name: 'Velpiri sau.Scanfisk seafood sl', initialIndex: 0, randomText: '' }, { name: 'AirtexMolinos del productsebro sa', initialIndex: 0, randomText: '' }, { name: 'OviaragonEuroarce mineria s.c.la.', initialIndex: 0, randomText: '' }, { name: 'Sociedad aragonesa de gestion agroambiental Solitium sl.', initialIndex: 0, randomText: '' }, { name: 'VitaliaComercial suite, sociedad limitada.salgar sl', initialIndex: 0, randomText: '' }, { name: 'InternationalInsonorizantes casingpelzer products slusa', initialIndex: 0, randomText: '' }, { name: 'Scanfisk seafood slMaetel instalaciones y servicios industriales sa.', initialIndex: 0, randomText: '' }, { name: 'MolinosRingo delvalvulas ebro sasl', initialIndex: 0, randomText: '' }, { name: 'EuroarceTrox mineria s.a.españa sa', initialIndex: 0, randomText: '' }, { name: 'SolitiumTeltronic sl.sa', initialIndex: 0, randomText: '' }, { name: 'ComercialBrilen salgar slsa', initialIndex: 0, randomText: '' }, { name: 'InsonorizantesKeter iberia pelzersociedad salimitada.', initialIndex: 0, randomText: '' }, { name: 'MaetelBusiness instalacionestelecommunications yservices servicioseurope industriales sa.', initialIndex: 0, randomText: '' }, { name: 'Ringo valvulas slBm sportech ib sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'TroxChemieuro españa sasl', initialIndex: 0, randomText: '' }, { name: 'Teltronic saDeutschland autos slu (extinguida)', initialIndex: 0, randomText: '' }, { name: 'BrilenLaboratorios saphir sa', initialIndex: 0, randomText: '' }, { name: 'KeterAvanza iberiazaragoza sociedad limitadasa.', initialIndex: 0, randomText: '' }, { name: 'BusinessValfondo telecommunicationsinmuebles services europe sa.sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'BmFersa sportech ib sociedad limitada.bearings sa', initialIndex: 0, randomText: '' }, { name: 'ChemieuroBrass & fittings sl', initialIndex: 0, randomText: '' }, { name: 'Deutschland autos slu (extinguida)Mas prevencion servicio de prevencion sociedad limitada.', 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 ];
  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 páginatabla
     /*/
Datos de paginación
  currentCompanyPage = 1; // página actual
  companyPageElems = 7; // elementos a mostrar en la tablahandleRecalculateCompanyTable(recalculateParams: RecalculateTableParams): void {
    let rows = this.companyList;
    
     ngOnInit(): void {// Realiza el filtrado
    thisrecalculateParams.companyListfilters.forEach((c, i)filter => c.initialIndex = i);{
      rows = thisrows.companyList.forEach((c, i) filter(row =>
 c.randomText = this.generateRandomText(20)); //      this.handleCompanyPagChangecontainsAnyWordFrom(this.currentCompanyPage);
  }getCellString(row, filter.columnIndex) + '', filter.filterText));
    });

/**    *// RecalculaSobre los elementosdatos afiltrados, mostrarse enrealiza la tablaordenación
   */  if handleRecalculateCompanyTable(recalculateParams: RecalculateTableParams): void {.sort) {
      letconst rowscolumnIndex = thisrecalculateParams.sort.companyListcolumnIndex;
      const isAsc  // Realiza el filtrado
    = recalculateParams.filterssort.forEach(filterorder ===> {OrderBy.asc;
      rows = rows.filter(rowsort((a, b) =>
          this.containsAnyWordFromcompareCellContent(this.getCellString(rowa, filter.columnIndex) + '', filter.filterText, this.getCellString(b, columnIndex), isAsc));
    });

    // Sobre los datos filtrados, se realiza la ordenación

   if (recalculateParamsthis.sort)visibleCompanyList {= rows;
    
const columnIndex = recalculateParams.sort.columnIndex;
      const isAsc = recalculateParams.sort.order === OrderBy.asc;
  // Se obtienen los elementros a mostrar en la tabla según la página seleccionada
    rowsthis.pageCompanyList = rowsthis.visibleCompanyList.sortslice((a, bthis.currentCompanyPage - 1) =>
* this.companyPageElems,
         this.compareCellContentMath.min(this.getCellString(a, columnIndex),currentCompanyPage * this.getCellString(bcompanyPageElems, columnIndex), isAscthis.companyList.length));
  }
 } 
    this.visibleCompanyList = rows;
    
/**
   * Gestiona un cambio de página
   *//
Se obtienen los elementros a mostrar en la tabla según la página seleccionada
    handleCompanyPagChange(page: number): void {
    this.pageCompanyList = this.visibleCompanyList.slice((this.currentCompanyPagepage - 1) * this.companyPageElems,
        Math.min(this.currentCompanyPagepage * this.companyPageElems, this.companyList.length));
    this.currentCompanyPage = page;
  }

  
  getCellString(row, columnIndex: number): string {
 }   if (columnIndex  /**
=== 0) {
  * Gestiona un cambio dereturn páginarow.initialIndex + '';
 */   handleCompanyPagChange(page: number): void {
    this.pageCompanyList = this.visibleCompanyList.slice((page - 1) * this.companyPageElems,} else if (columnIndex === 1) {
      return row.name;
    } else if (columnIndex  Math.min(page * this.companyPageElems, this.companyList.length));=== 2) {
      return thisrow.currentCompanyPagerandomText;
= page;   }
  }
  
getCellString(row, columnIndex: number): string { /*
   * Se omite ifel (columnIndex === 0) {
      return row.initialIndex + '';
    } else if (columnIndex === 1) {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/
   */
  
  // return row.name;
    } else if (columnIndex === 2)Genera texto aleatorio de la longitud especificada
  generateRandomText(length: number): string {
      return row.randomText;...
    }
  }
  // Devuelve true /*si el texto target *pasa Seel omitefiltro eldel contenidotexto dedefinido lasen siguientestext
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/
   */containsAnyWordFrom(target: string, text: string, fullWord?: boolean): boolean {
     ...
  }
  
  // GeneraCompara dos textoceldas aleatoriopara deespecificar la longitud especificada
  generateRandomText(length: number): string ordenación
  compareCellContent(a: string, b: string, isAsc: boolean): number {
     ...
  }
}

Implementación completa con parámetros
Image Added

Code Block
languagexml
<desy-table-advanced classes="min-w-full" idPrefix="table-with-all" hasCheckboxes="true"  

// Devuelve true si el texto target pasa el filtro del texto definido en text containsAnyWordFrom(target: string, text: string, fullWord?: boolean): boolean {

firstCellIsHeader="true" (rowsChecked)="rowsChecked = $event"  caption="Caption 1: Months and rates" captionClasses="mb-base font-bold text-left text-lg"
              

...

   

}

    [wrapper]="{ classes: 

// Compara dos celdas para especificar la ordenación compareCellContent(a: string, b: string, isAsc: boolean): number { ... } }
Implementación completa con parámetros
Image Removed

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'overflow-x-auto' }"
    [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':'Rate for bicyclesMarch'},{'orderBytext':'none165€','classes':'text-right','hasFilter':true},{'text':'Rate for vehicles125€','orderBy':'none','classes':'text-right','hasFilter':true}]}]"
    [rowsfoot]="[{'id':'identificador1','cellsList':[{'text':'First footer row'},{'text':'January'},{'text':'85€','classes':'text-rightSuma'},{'text':'95€325€','classes':'text-right'}]},{'idtext':'identificador2275€','cellsListclasses':[{'text':'Second row'},{'text':'February'},{'text':'75€','classes':'text-right'},{'text':'55€','classes':'text-right'}]},{'id':'identificador3','cellsList':-right'}]}]">
  </desy-table-advanced>

Implementación sencilla

Image Added

Code Block
languagexml
<desy-table-advanced classes="min-w-full"
                     [wrapper]="{ classes: 'overflow-x-auto' }"
                     [caption]="'Caption de la tabla'" [captionClasses]="'sr-only mb-base font-bold text-left text-lg'"
                     [head]="[{'text': 'ThirdMonth you rowapply'},{'text': 'MarchRate for bicycles'},{'text':'165€','classes': 'text-right'},{'text': '125€Rate for vehicles','classes': 'text-right'}]}]">
           </desy-table-advanced>

Implementación sencilla

Image Removed
Code Block
languagexml
          [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'}]}]"
                     [foot]="[{'cellsList':[{'text':'Suma'},{'text':'325€','classes':'text-right'},{'text':'275€','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.

...