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

Ejemplos

Implementación con false y null

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

Con head y caption

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

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.

Ejemplos

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>

Implementación completa

<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

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