Jcyl-tablas NPM

(Actualización del paquete tablas )

Esta librería está basada en la guía de estilos de la Junta de Castilla y León para implementar los estilos mediante un componente Angular.

Con este componente podemos generar tablas de los tipos A,B y C.

Demo online: StackBlitz

Instalación

Debemos descargar desde el Repositorio de la junta de Castilla y León las carpetas de la guía de estilos, para poder importar los css, js, fuentes, etc.

Copiar todo dentro de assets, dejando la estructura así:

assets
    css
    js
    fonts
    img

NPM

npm install jcyl-tablas

Importación de dependencias

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { JcylTablasModule } from 'jcyl-tablas';

@NgModule({
  declarations: [AppComponent],
  imports: [
        BrowserModule,
        AppRoutingModule,
        JcylTablasModule
        ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Clases

Atributo	Tipo	Descripción
colspan	number	Colspan de la celda
rowspan	number	Rowspan de la celda
content	string	Contenido que se visualizará en la celda
classTD	string	Clase que se añade al TD
isButton	boolean	Indica si queremos que sea un botón
class	string	Clase que se añade al contenido
isImg	boolean	Indica si queremos que el contenido sea una imagen
src	string	Referencia en caso de que sea una imagen
alt	string	Contenido en caso de que la imagen no esté dispnible
imgLink	string	Enlace de la imagen en caso de que sea clicable
isSeleccionable	boolean	Indica que queremos que la celda sea un checkbox
selected	boolean	Atributo para los checkbox si queremos que estén seleccionados

Ejemplos

new Field({
    isSeleccionable: true
})

new Field({
    content: 'CONSEJERO DE EDUCACIÓN'
})

new Field({
    content: 'No',
    isButton: true,
    class: 'btn-sm'
})

Atributo	Tipo	Descripción
fields	Field[]	Array de objetos Field para pintar el contenido de la fila
destacada	boolean	Añade una clase para destacar la línea
id	number	Id para identificar la línea cuando es seleccionable (Field)
selected	boolean	Indica si está seleccionada
object	any	Por si queremos asociar un objeto para que nos le devuelva al tener filas seleccionables

Ejemplos

new Row({
    destacada: false,
    fields: [
        new Field({
            isSeleccionable: true
        }),
        new Field({
            content: 'No'
        }),
        new Field({
            content: 'No',
            isButton: true,
            class: 'btn-sm'
        })
    ]
})

Atributo	Tipo	Descripción
cabecera	string[]	Array de string que se mostrarán como cabecera
caption	string	Caption para la tabla
summary	string	Párrafo para mostrar origen de la tabla
isTypeA	boolean	Indica si es una tabla de tipo A (Ver TIPO A)
isTypeB	boolean	Indica si es una tabla de tipo B (Ver TIPO B)
isTypeC	boolean	Indica si es una tabla de tipo C (Ver TIPO C)
rows	Row[]	Array de objetos Row que componen el contenido de la tabla
paginado	Paginado	Añade el paginado a la tabla
id	number	Id que tendrá la tabla

Ejemplos

new Tabla({
    cabecera: [
        '(EN MILLONES DE EUROS)',
        'LARGO PLAZO',
        'CORTO PLAZO',
        'TOTAL',
    ],
    caption: 'Distribución de la deuda según PDE (SEC 2010). Datos a 30 de septiembre de 2016',
    summary: 'Esto es el summary',
    isTypeA: true,
    rows: [
        new Row({
            destacada: false,
            fields: [
                new Field({
                    content: 'DEUDA FINANCIERA',
                    rowspan: 6
                }),
                new Field({
                    content: 'Administración general (Admón. Gral. + Fondo Facilidad Financiera)'
                }),
                new Field({
                    content: '9.775,98'
                }),
                new Field({
                    content: '0'
                }),
                new Field({
                    content: '9.775,98'
                })
            ]
        }),
        new Row({
            destacada: false,
            fields: [
                new Field({
                    content: 'Universidades, organismos autónomos administrativos y similares'
                }),
                new Field({
                    content: '394,78'
                }),
                new Field({
                    content: '2,56'
                }),
                new Field({
                    content: '397,34'
                })
            ]
        }),
        new Row({
            destacada: false,
            fields: [
                new Field({
                    content: 'Empresas clasificadas como administración pública'
                }),
                new Field({
                    content: '99,66'
                }),
                new Field({
                    content: '0'
                }),
                new Field({
                    content: '99,66'
                })
            ]
        }),
        new Row({
            destacada: true,
            fields: [
                new Field({
                    content: 'TOTAL'
                }),
                new Field({
                    content: '10.270,42'
                }),
                new Field({
                    content: '2,56'
                }),
                new Field({
                    content: '10.272,98'
                })
            ]
        }),
        new Row({
            destacada: false,
            fields: [
                new Field({
                    content: 'Factoring sin recurso'
                }),
                new Field({
                    content: '329,04'
                }),
                new Field({
                    content: '9,19'
                }),
                new Field({
                    content: '338,23'
                })
            ]
        }),
        new Row({
            destacada: false,
            fields: [
                new Field({
                    content: 'Otros (Colaboración público-privada) (*)'
                }),
                new Field({
                    content: '299,19'
                }),
                new Field({
                    content: '0'
                }),
                new Field({
                    content: '299,19'
                })
            ]
        }),
        new Row({
            destacada: false,
            fields: [
                new Field({
                    content: 'TOTAL DEUDA PROTOCOLO DÉFICIT EXCESIVO',
                    rowspan: 1
                }),
                new Field({
                    content: ''
                }),
                new Field({
                    content: '10.898,60'
                }),
                new Field({
                    content: '11,75'
                }),
                new Field({
                    content: '10.910,40'
                })
            ]
        })
    ]
});

Envío y recibo de eventos

Para pasar el objeto Tabla al componente, debemos asignarlo así config="tabla". Dependiendo de si tenemos campos seleccionables y la configuración de la tabla, podremos recibir dos eventos: (sendSelected)="getSelected($event)" y (clicBoton)="botonClicked($event)"

<jcyl-jcyl-tablas [config]="tabla" (sendSelected)="getSelected($event)"></jcyl-jcyl-tablas>

Configuración de la tabla

Atributo	Descripción
config	Objeto que tiene que recibir el objeto Tabla como parámetro

Eventos

Evento	Descripción
sendSelected	Recibe todas las filas seleccionadas en caso de que sean seleccionables
capclicBotontion	Recibe el evento al clicar un botón en caso de que un campo Field sea botón