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.

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. TableFooterComponent <desy-table-footer>...</desy-table-footer> Permite agrupar las celdas del footer. 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-footer *ngIf="hasFooter"> <desy-table-cell>Suma</desy-table-cell> <desy-table-cell [classes]="'text-right'">325€</desy-table-cell> <desy-table-cell [classes]="'text-right'">275€</desy-table-cell> </desy-table-footer> </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'}]" [foot]="[{'text':'Suma'},{'text':'325€','classes':'text-right'},{'text':'275€','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>

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

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

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

Implementación completa con contenido <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> <desy-table-advanced-row [id]="'identificador1'" [(checked)]="firstRowChecked"> <desy-table-advanced-row-cell>First row</desy-table-advanced-row-cell> <desy-table-advanced-row-cell>January</desy-table-advanced-row-cell> <desy-table-advanced-row-cell [classes]="'text-right'">85€</desy-table-advanced-row-cell> <desy-table-advanced-row-cell [classes]="'text-right'">95€</desy-table-advanced-row-cell> </desy-table-advanced-row> <desy-table-advanced-row [id]="'identificador2'"> <desy-table-advanced-row-cell>Second row</desy-table-advanced-row-cell> <desy-table-advanced-row-cell>February</desy-table-advanced-row-cell> <desy-table-advanced-row-cell [classes]="'text-right'">75€</desy-table-advanced-row-cell> <desy-table-advanced-row-cell [classes]="'text-right'">55€</desy-table-advanced-row-cell> </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> <desy-table-advanced-row-cell [classes]="'text-right'">125€</desy-table-advanced-row-cell> </desy-table-advanced-row> <desy-table-advanced-footer [checked]="itemFoot.checked" [id]="itemFoot.id"> <desy-table-advanced-footer-cell> First footer row </desy-table-advanced-footer-cell> <desy-table-advanced-footer-cell> Suma </desy-table-advanced-footer-cell> <desy-table-advanced-footer-cell [classes]="'text-right'"> 325€ </desy-table-advanced-footer-cell> <desy-table-advanced-footer-cell [classes]="'text-right'"> 275€ </desy-table-advanced-footer-cell> </desy-table-advanced-footer> </desy-table-advanced> Implementación sobrescribiendo el filtrado y la ordenación + componente pagination: Template <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-header-cell [orderBy]="'asc'" [hasFilter]="true">Indice</desy-table-advanced-header-cell> <desy-table-advanced-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-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 ... @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: 'Amplifon iberica sau', initialIndex: 0, randomText: '' }, { name: 'Saica pack sl', initialIndex: 0, randomText: '' }, { name: 'Novapet sa', initialIndex: 0, randomText: '' }, { name: 'Argal alimentacion sa.', initialIndex: 0, randomText: '' }, { name: 'Carreras grupo logistico sa.', initialIndex: 0, randomText: '' }, { name: 'Megasider zaragoza sa', initialIndex: 0, randomText: '' }, { name: 'Caladero sl', initialIndex: 0, randomText: '' }, { name: 'Lecitrailer sa', initialIndex: 0, randomText: '' }, { name: 'Saica natur sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Daniel aguilo panisello sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Bebinter sa', initialIndex: 0, randomText: '' }, { name: 'Cuarte sl', initialIndex: 0, randomText: '' }, { name: 'Mann-hummel iberica sa', initialIndex: 0, randomText: '' }, { name: 'Valeo termico sau', initialIndex: 0, randomText: '' }, { name: 'Tereos starch & sweeteners iberia s.a.u.', initialIndex: 0, randomText: '' }, { name: 'Proclinic sa', initialIndex: 0, randomText: '' }, { name: 'Lozano transportes sau', initialIndex: 0, randomText: '' }, { name: 'Saltoki logistica zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Distribuciones agropecuarias de aragon sl', initialIndex: 0, randomText: '' }, { name: 'Agreda automovil, sa', initialIndex: 0, randomText: '' }, { name: 'La zaragozana sa', initialIndex: 0, randomText: '' }, { name: 'Punt roma sl', initialIndex: 0, randomText: '' }, { name: 'Multienergia verde sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Linamar light metals zaragoza sa.', initialIndex: 0, randomText: '' }, { name: 'Nurel sa', initialIndex: 0, randomText: '' }, { name: 'Industrias quimicas del ebro, sa', initialIndex: 0, randomText: '' }, { name: 'Aves nobles y derivados sl', initialIndex: 0, randomText: '' }, { name: 'Hiab cranes sl', initialIndex: 0, randomText: '' }, { name: 'Vian as automobile sl', initialIndex: 0, randomText: '' }, { name: 'Productos porcinos secundarios sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Industrias aragonesas del aluminio sa', initialIndex: 0, randomText: '' }, { name: 'Enterprise solutions outsourcing españa sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Garda servicios de seguridad sa', initialIndex: 0, randomText: '' }, { name: 'Bergner europe, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Generos de punto victrix sl', initialIndex: 0, randomText: '' }, { name: 'Cables rct sa', initialIndex: 0, randomText: '' }, { name: 'Servisar servicios sociales sl', initialIndex: 0, randomText: '' }, { name: 'Politours sa (en liquidacion)', initialIndex: 0, randomText: '' }, { name: 'Electrical components international slu', initialIndex: 0, randomText: '' }, { name: 'Jorge pork meat slu', initialIndex: 0, randomText: '' }, { name: 'Minera de santa marta sa', initialIndex: 0, randomText: '' }, { name: 'Servigas s xxi sa', initialIndex: 0, randomText: '' }, { name: 'Automoviles sanchez, sa', initialIndex: 0, randomText: '' }, { name: 'Farmhispania s.a.', initialIndex: 0, randomText: '' }, { name: 'Cables de comunicaciones zaragoza sl', initialIndex: 0, randomText: '' }, { name: 'Valorista sl.', initialIndex: 0, randomText: '' }, { name: 'Ibercaja mediacion de seguros sa', initialIndex: 0, randomText: '' }, { name: 'Celulosa fabril sa', initialIndex: 0, randomText: '' }, { name: 'Frutaria agricultura sl.', initialIndex: 0, randomText: '' }, { name: 'Aragocias, sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Vitalia home sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Cerro murillo sa', initialIndex: 0, randomText: '' }, { name: 'Aragon wagen sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Saltoki suministros zaragoza, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Zalux sa', initialIndex: 0, randomText: '' }, { name: 'Zarsol sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Ehisa construcciones y obras sa', initialIndex: 0, randomText: '' }, { name: 'Arquisocial sociedad limitada', initialIndex: 0, randomText: '' }, { name: 'Wittur elevator components sociedad anonima', initialIndex: 0, randomText: '' }, { name: 'Master distancia sa', initialIndex: 0, randomText: '' }, { name: 'Fertinagro agrovip sl.', initialIndex: 0, randomText: '' }, { name: 'Construcciones mariano lopez navarro sa', initialIndex: 0, randomText: '' }, { name: 'Distribuidora internacional carmen sa', initialIndex: 0, randomText: '' }, { name: 'Destilerias mg sl', initialIndex: 0, randomText: '' }, { name: 'Dexiberica soluciones industriales sau', initialIndex: 0, randomText: '' }, { name: 'Velpiri sau.', initialIndex: 0, randomText: '' }, { name: 'Airtex products sa', initialIndex: 0, randomText: '' }, { name: 'Oviaragon s.c.l.', initialIndex: 0, randomText: '' }, { name: 'Sociedad aragonesa de gestion agroambiental sl.', initialIndex: 0, randomText: '' }, { name: 'Vitalia suite, sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'International casing products slu', initialIndex: 0, randomText: '' }, { name: 'Scanfisk seafood sl', initialIndex: 0, randomText: '' }, { name: 'Molinos del ebro sa', initialIndex: 0, randomText: '' }, { name: 'Euroarce mineria s.a.', initialIndex: 0, randomText: '' }, { name: 'Solitium sl.', initialIndex: 0, randomText: '' }, { name: 'Comercial salgar sl', initialIndex: 0, randomText: '' }, { name: 'Insonorizantes pelzer sa', initialIndex: 0, randomText: '' }, { name: 'Maetel instalaciones y servicios industriales sa.', initialIndex: 0, randomText: '' }, { name: 'Ringo valvulas sl', initialIndex: 0, randomText: '' }, { name: 'Trox españa sa', initialIndex: 0, randomText: '' }, { name: 'Teltronic sa', initialIndex: 0, randomText: '' }, { name: 'Brilen sa', initialIndex: 0, randomText: '' }, { name: 'Keter iberia sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Business telecommunications services europe sa.', initialIndex: 0, randomText: '' }, { name: 'Bm sportech ib sociedad limitada.', initialIndex: 0, randomText: '' }, { name: 'Chemieuro sl', initialIndex: 0, randomText: '' }, { name: 'Deutschland autos slu (extinguida)', 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 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 tabla */ handleRecalculateCompanyTable(recalculateParams: RecalculateTableParams): void { let rows = this.companyList; // Realiza el filtrado recalculateParams.filters.forEach(filter => { rows = rows.filter(row => this.containsAnyWordFrom(this.getCellString(row, filter.columnIndex) + '', filter.filterText)); }); // Sobre los datos filtrados, se realiza la ordenación if (recalculateParams.sort) { const columnIndex = recalculateParams.sort.columnIndex; const isAsc = recalculateParams.sort.order === OrderBy.asc; rows = rows.sort((a, b) => this.compareCellContent(this.getCellString(a, columnIndex), this.getCellString(b, columnIndex), isAsc)); } this.visibleCompanyList = rows; // Se obtienen los elementros a mostrar en la tabla según la página seleccionada this.pageCompanyList = this.visibleCompanyList.slice((this.currentCompanyPage - 1) * this.companyPageElems, Math.min(this.currentCompanyPage * this.companyPageElems, this.companyList.length)); } /** * Gestiona un cambio de página */ handleCompanyPagChange(page: number): void { this.pageCompanyList = this.visibleCompanyList.slice((page - 1) * this.companyPageElems, Math.min(page * this.companyPageElems, this.companyList.length)); this.currentCompanyPage = page; } getCellString(row, columnIndex: number): string { if (columnIndex === 0) { return row.initialIndex + ''; } else if (columnIndex === 1) { return row.name; } else if (columnIndex === 2) { return row.randomText; } } /* * Se omite el 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/ */ // Genera texto aleatorio de la longitud especificada generateRandomText(length: number): string { ... } // Devuelve true si el texto target pasa el filtro del texto definido en text containsAnyWordFrom(target: string, text: string, fullWord?: boolean): boolean { ... } // Compara dos celdas para especificar la ordenación compareCellContent(a: string, b: string, isAsc: boolean): number { ... } } Implementación completa con parámetros <desy-table-advanced classes="min-w-full" idPrefix="table-with-all" hasCheckboxes="true" firstCellIsHeader="true" (rowsChecked)="rowsChecked = $event" caption="Caption 1: Months and rates" captionClasses="mb-base font-bold text-left text-lg" [wrapper]="{ classes: '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':'March'},{'text':'165€','classes':'text-right'},{'text':'125€','classes':'text-right'}]}]" [foot]="[{'cellsList':[{'text':'First footer row'},{'text':'Suma'},{'text':'325€','classes':'text-right'},{'text':'275€','classes':'text-right'}]}]"> </desy-table-advanced> Implementación sencilla <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': 'Month you apply'},{'text': 'Rate for bicycles','classes': 'text-right'},{'text': 'Rate for vehicles','classes': 'text-right'}]" [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>