Page Comparison

Table of Contents

minLevel	2
maxLevel	2

...

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

Table

...

Code Block

language	xml

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

...

Expand

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

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

Propiedades de accesibilidad

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

Expand

title	Ejemplos

Image Removed

Image Added

Implementación con false y null

Code Block

language	xml

<desy-table [rows]="[[{'text':'January'},{'text':'85€','classes':'text-right'},{'text':'95€','classes':'text-right'}],false,null,
                        [{'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>

Image RemovedImage Added

Con head y caption

Code Block

language	xml

<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

language	xml

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

...

Expand

title	Propiedades de entrada

Propiedad	Tipo	Descripción	Obligatorio
rows	Array<RowData>	Contiene la información relativa a cada fila.	Si
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.
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <table>

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.

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

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

Propiedades de accesibilidad

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

Expand

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

Expand

title	Ejemplos

Implementación sencilla

Code Block

language	xml

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

Implementación completa

Code Block

language	xml

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

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

Versions Compared

Old Version 1

New Version Current

Key

Table

Implementación con false y null

Con head y caption

Table advanced

Implementación sencilla

Implementación completa

Accesibilidad