0.0.11 • Published 4 months ago
@atmgrupomaggioli/iris-table v0.0.11
iris-table
Overview
Es un elemento de formulario HTML que proporciona a los usuarios una lista desplegable de opciones predefinidas, de las cuales pueden seleccionar una sola opción.
Está compuesto por una etiqueta de apertura y una serie de etiquetas de opción, que representan las diferentes opciones disponibles para seleccionar.
Una vez seleccionada la opción, esta se muestra en el Table como el valor seleccionado. Son comunes en formularios web y se utilizan para recopilar información de los usuarios de una manera estructurada y fácil de usar.
Bugfix
- Da error si no se establecen los filtros y/o el footer. Revisar.
Feature
Header
- Permitir ocultar cabeceras metiéndolas en el archivo.
- Cabeceras movibles. Arrastrar y soltar cabecera. Cuando se arrastre, mostrar icono flotante de archivador para guardar en las cabeceras archivadas.
- Permitir fijar la columna.
Filters
- Añadir filtros avanzados.
- Guardar filtros de la columnas en local storage.
- Añadir búsqueda general. Campo de búsqueda en la parte superior que permita buscar por todas las columnas.
- Evento autocomplete devolver.
- Mejorar presentación de filtros.
- Mejorar disposición de filtros y desarrollar "entre".
Paginator
- Sumatorio de columnas.
General
- Agrupaciones.
- Leyenda.
- Sustituir iconos de exportar y añadir uno de compartir para que las aplicaciones destino hagan el excel y el pdf. Dar la info de las columnas, filtros, orden, ancho, …
- Filas dinámicas. No pintar todos los tr en el DOM.
- Format de cada columna por si quieren meter algo que no sea texto como iconos o enlaces.
- Tabla responsive en formato fila
- Añadir tipo boolean al listado de tipos de una celda. Mostrar algún tipo de check o similar.
- Añadir método para poder obtener todos los registros de una tabla.
- Drag and Drop en las filas para reordenar.
- Añadir campo check a las tablas para poder seleccionar varios registros.
- Método para obtener la información de lo que se ve en la cabecera (claves, anchura, …)
In progress
- Revisar error tipos en los filtros, parece que no están saliendo correctamente los options del select.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
data (required) | data | Datos de la tabla: typeof == Array -> Local Mode ♾️ typeof == function -> Server Mode 🌐 | ((query: Query) => ResultQuery \| Promise<ResultQuery>) \| any[] | undefined |
exportExcel | export-excel | Muestra el botón de exportar a Excel | boolean | true |
exportPDF | export-p-d-f | Muestra el botón de exportar a PDF | boolean | true |
header (required) | header | Configuración de la cabecera | { sortMultiple: boolean; columns: Column[]; } | undefined |
height | height | Altura de la tabla. Auto calcula hasta abajo | "auto" \| number | 'auto' |
operations | operations | Operaciones de la tabla | Operation[] | undefined |
pagination | pagination | Configuración de la paginación. | { pagination?: boolean; paginationSize?: number; paginationSizeSelector?: number[]; paginationSizeAll?: boolean; paginationType?: "local" \| "server"; } | undefined |
Methods
getSelectedRows() => Promise<{}[]>
Obtiene los datos de las filas seleccionadas
Returns
Type: Promise<{}[]>
search() => Promise<void>
Permite lanzar la búsqueda manualmente
Returns
Type: Promise<void>
Dependencies
Depends on
Graph
graph TD;
iris-table --> iris-table-header
iris-table --> iris-table-paginator
style iris-table fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS