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

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

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.

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

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

<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	Tipo	Descripción

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

Propiedad	Tipo	Descripción
filters

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

Componentes relativos a tablas

Table

Implementación con contenido

Implementación con parámetros

Table advanced