Componentes relativos a tablas

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

Table

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

Permite representar una tabla

Propiedad	Tipo	Descripción	Obligatorio

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

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

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.

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

Permite agrupar las celdas de cada fila.

TableCellComponent

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

Implementación con contenido

Implementación con parámetros

Table advanced

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

Propiedad	Tipo	Descripción	Obligatorio

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

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

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

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

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.

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

TableCaptionComponent

Permite especificar el caption. Admite la propiedad classes.

TableAdvancedHeaderComponent

Permite agrupar las celdas de la cabecera.

TableAdvancedHeaderCellComponent

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

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

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

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

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

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

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

Área de empleados públicos e Integradores

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