¿Puedes hacer eso con una cuadrícula de datos de JavaScript?

1. Diseño de respuesta
2. Cumplimiento de accesibilidad
3. Desplazamiento virtual
4. Exportaciones de PDF y Excel
5. Columnas adhesivas
6. Edición
7. Componentes suplementarios
8. Conclusión

En este artículo, verás algunas cosas bastante innovadoras que puedes lograr con las grillas JavaScript modernas. Aprenderá cómo estas tablas de datos resuelven los problemas descritos anteriormente. Además, descubrirá nuevas formas de aumentar una cuadrícula de datos para hacerla atractiva, receptiva y accesible. Todo esto se ilustrará utilizando Kendo UI Data Grids y sus características.

Este artículo ha contado con el amable apoyo de nuestros queridos amigos de Progress Kendo UI , quienes están comprometidos a brindar a los desarrolladores las herramientas que necesitan para aprovechar y dominar la evolución tecnológica que está dando forma a nuestra sociedad y al mundo. ¡Gracias!

Las cuadrículas de datos, también conocidas como tablas de datos, son esenciales para presentar cantidades masivas de datos a los usuarios. Los usuarios deberían poder ver los datos de una manera que sea fácil de entender, analizar y manipular. Sin embargo, crear vistas de cuadrícula de datos teniendo en cuenta el rendimiento, la velocidad y la experiencia del usuario puede ser una tarea particularmente desalentadora. Esto es especialmente cierto cuando se construyen desde cero o se utilizan bibliotecas con funcionalidad limitada y rendimiento inferior.

No faltan bibliotecas que incluyan cuadrículas de datos. Sin embargo, la mayoría solo ofrece un conjunto limitado de funciones de cuadrícula, entre las que se encuentran la paginación, el filtrado, la clasificación y la temática. Otras bibliotecas de cuadrículas de datos se crean como contenedores que dependen de varias dependencias. Este tipo de bibliotecas impactan desfavorablemente el rendimiento de su grid en comparación con sus contrapartes nativas. No se construyen de nuevo para cada marco o lenguaje. Como tal, estas bibliotecas no nativas pueden ser lentas, es posible que no aprovechen las características superiores de un marco/lenguaje, carezcan de una funcionalidad crucial y requieran una configuración adicional para comenzar a funcionar.

Otra cosa que caracteriza a estas bibliotecas es la mala experiencia del usuario. A menudo no implementan un diseño responsivo para diferentes tamaños y orientaciones de pantalla, no pueden bloquear o hacer que partes de una cuadrícula sean adhesivas y hacen que la accesibilidad sea una idea de último momento. Además de eso, solo brindan edición en formularios separados de la cuadrícula, lo que a menudo implica múltiples acciones para completar. Esto puede resultar agotador y repetitivo, especialmente al editar numerosos elementos de datos. Otros ni siquiera ofrecen edición. Además de esto, tienden a carecer de funcionalidad de exportación de datos y hacen que los usuarios dependan de la impresión de páginas web para las exportaciones.

Debido a su funcionalidad y características limitadas, debes complementarlas con bibliotecas separadas para construir una cuadrícula adecuada. Por ejemplo, para representar datos en gráficos, tendría que utilizar una biblioteca de gráficos diferente, ya que la biblioteca de cuadrículas no lo ofrece. Además, no puede incrustar estos componentes no relacionados en la grilla ya que no hay soporte incorporado para ellos.

Para abordar estos problemas, tendría que utilizar una biblioteca que no sólo esté diseñada para ser nativa, sino que también incorpore una variedad de componentes complementarios y se centre en una excelente experiencia de usuario y rendimiento. Para demostrar las características de una cuadrícula de datos ideal, usaremos Kendo UI Data Grids como ejemplo. Estas cuadrículas de datos son uno de los más de 100 componentes disponibles en un paquete de biblioteca llamado Progress® Kendo UI® . El paquete consta de cuatro bibliotecas de componentes creadas de forma nativa para varios marcos de interfaz. Estos son Kendo UI para Angular , KendoReact , Kendo UI para Vue y Kendo UI para jQuery . Los ejemplos proporcionados a lo largo de este artículo incluirán cuadrículas de estas cuatro bibliotecas.

Diseño de respuesta

Cuando se trata de cuadrículas de datos, los usuarios deben tener una vista completa de los datos con los que están trabajando. Los datos ocultos o de difícil acceso son frustrantes de leer y desconectan completamente a los usuarios de su red. Muchas bibliotecas de grillas no hacen que sus grillas respondan y depende de usted implementarlas usando estilo y algo de lógica. Esto puede resultar especialmente complicado con datos que contienen muchas columnas. Si está creando múltiples cuadrículas con diferentes tipos de datos con diferentes necesidades de representación, esto agrava aún más la complejidad. Tienes que determinar el desplazamiento, las consultas de medios, los tamaños de fuente, la escala, si se deben omitir algunas partes de los datos, etc.

Las tablas de datos modernas deberían poder responder a los cambios de orientación y mostrar bien todos los datos en todos los tamaños de pantalla. Por ejemplo, las cuadrículas de datos de la interfaz de usuario de Kendo ajustan su tamaño según el tamaño de la ventana gráfica y la cantidad de filas que admite. Por ejemplo, en Angular Grid, puede establecer su altura y la cuadrícula se podrá desplazar si parte de su contenido no encaja. Establecer la altura solo implica especificar un valor para la propiedad CSS de altura de la cuadrícula y garantizar que el elemento principal también tenga una altura establecida. No se requiere ninguna otra configuración. Puede ver cómo se hace esto en esta tabla de existencias de muestra aquí .

Además de eso, puede optar por alternar la visibilidad de las columnas en la cuadrícula mientras sigue mostrando todos los datos requeridos. Esto se logra creando diferentes columnas para diferentes rangos de tamaño de pantalla y usando la mediapropiedad en una columna para decidir dónde mostrarlas. Por ejemplo, en esta tabla de datos angular , para tamaños de pantalla más grandes ( media="(min-width: 450px)"), las columnas están en visualización completa y se ven así.

Sin embargo, puede optar por ocultar las columnas de precio, en stock y descontinuadas en pantallas medianas ( media="(min-width: 680px)"). Esto debería verse así:

En pantallas más pequeñas ( media="(max-width: 450px)"), puede crear una única columna personalizada para mostrar todos los datos similar a esta:

Kendo UI Data Grids también admite identificadores de dispositivos Bootstrap 4 como xs, sm, md, lgy xl. Aunque esto es más fácil de usar, no es tan versátil ya que limita la cantidad de consultas que puede incluir a una. Por ejemplo, con tus propios puntos de interrupción podrías tener algo como media="(min-width: 500px) and (max-width: 1200px)". No es posible combinar varios identificadores con los identificadores de dispositivo Bootstrap 4.

Cumplimiento de accesibilidad

Asegurarse de que su red cumpla con los estándares de accesibilidad modernos debería ser una prioridad. Hacer esto garantiza que las personas con discapacidades puedan interactuar con su red y garantiza que haya equidad entre sus usuarios. Aún así, algunas bibliotecas no hacen nada para asegurarse de que sus cuadrículas sean accesibles. Otros hacen sólo lo mínimo, lo que da como resultado cuadrículas de calidad inferior cuando se evalúa su accesibilidad. Aumentar estas redes para que sean accesibles implica una buena cantidad de trabajo. Esto se complica aún más por diseños de cuadrículas más complejos. Aunque este trabajo dará sus frutos más adelante para usted y sus usuarios, estas bibliotecas deberían haber hecho de la accesibilidad una parte central de sus productos.

Kendo UI Data Grids le da prioridad al admitir los principales estándares de accesibilidad como WAI-ARIA , Sección 508 y WCAG 2.1 . Por ejemplo, KendoReact sigue el estándar de la Sección 508 al garantizar que la mayoría de sus componentes sean completamente accesibles y admitan la navegación con el teclado. Sigue la pauta de acceso al teclado de WCAG al hacer que la cuadrícula y todos sus componentes integrados sean operables con el teclado. Como resultado, React Grid alcanza el nivel de conformidad WCAG más alto de AAA . Al ser un componente web, KendoReact Data Grid cumple con la especificación WAI-RAI para garantizar que los usuarios con discapacidades puedan interactuar adecuadamente con él en las páginas web. En esta cuadrícula de datos de React , por ejemplo, puede navegar a los diferentes componentes y filas usando un teclado.

Desplazamiento virtual

Con el desplazamiento virtual, solo se representa un segmento de datos dentro de la cuadrícula. Por lo general, esto se establece como una cantidad de registros para recuperar. Cuando un usuario pasa por este segmento, se representa otro del mismo tamaño. Esto ayuda con el rendimiento, ya que renderizar un gran conjunto de datos consume mucha memoria y obstaculiza el rendimiento y la velocidad de su grid. El desplazamiento virtual da la ilusión de representar todos los datos sin ninguna consecuencia en el rendimiento.

El desplazamiento virtual no suele ser compatible con las bibliotecas de grid. En cambio, fomentan la paginación, que puede no ser la mejor experiencia para los usuarios cuando ven cantidades masivas de datos. Al intentar renderizar enormes cantidades de datos, el rendimiento de la red se ve afectado aún más, lo que contribuye a una experiencia de usuario terrible. Para las bibliotecas que admiten el desplazamiento virtual, solo se aplica a los registros de los datos y no a partes específicas de los registros. Esto es particularmente limitante cuando los datos tienen varias columnas.

Kendo UI admite el desplazamiento virtual para datos locales y remotos. Por ejemplo, en la interfaz de usuario de Kendo para jQuery Grid , lo habilita estableciendo la scrollable.virtualpropiedad de una cuadrícula en verdadero. Al configurar esto, la cuadrícula solo carga la cantidad de elementos especificados por la pageSizepropiedad de la fuente de datos de la cuadrícula. Puedes ver cómo funciona esto en esta cuadrícula de datos jQuery que utiliza datos locales. Korean Beauty

!DOCTYPE htmlhtml head.../head body ... div/div script var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); /script /body/html

Esta misma configuración funcionará para datos remotos como se ve en esta tabla de datos de jQuery . Además, puede utilizar una configuración similar para virtualizar las columnas de una cuadrícula si los registros contienen varias propiedades que pueden resultar costosas de representar todas a la vez. La scrollable.virtualpropiedad debe establecerse en verdadera. Sin embargo, la virtualización de columnas no depende de la pageSizepropiedad. Este ejemplo demuestra esta característica.

Exportaciones de PDF y Excel

Tener la capacidad de exportar datos desde la grilla es fundamental. Es posible que los usuarios necesiten distribuirlo o manipularlo aún más utilizando aplicaciones como hojas de cálculo. Sus usuarios deberían tener la opción de compartir datos sin problemas y sin estar confinados a la red. Es posible que los datos de la cuadrícula también necesiten un procesamiento adicional que no ofrece su cuadrícula, como en las hojas de cálculo y el software de presentación.

Aunque este es un caso de uso esencial, muchas bibliotecas no lo contemplan. Los usuarios tienen que recurrir a la impresión de páginas web completas para acceder a los datos en formatos PDF. Al transferir datos a aplicaciones externas, tienen que copiarlos y pegarlos numerosas veces. Es comprensible que esto sea bastante exasperante.

Kendo UI Data Grids proporciona exportaciones de datos desde la cuadrícula en dos formatos: PDF y Excel. Por ejemplo, en la interfaz de usuario de Kendo para Vue Data Grid , para procesar exportaciones de PDF, usaría el GridPDFExportcomponente. Con este savemétodo, pasarías los datos que deseas incluir en la exportación de PDF. Los datos pueden estar paginados o el conjunto completo.

template button @click="exportPDF"Export PDF/button pdfexport ref="gridPdfExport" Grid :data-items="items"/Grid /pdfexport/templatescriptimport { GridPdfExport } from '@progress/kendo-vue-pdf';import { Grid } from '@progress/kendo-vue-grid';export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ...};/script

El GridPDFExportcomponente le permite especificar tamaños de página para la exportación, márgenes de página, cómo escalar la cuadrícula en la página, etc. Esto es útil para personalizar cuadrículas más grandes para que se ajusten a las páginas PDF. Los pasaría como propiedades al componente. He aquí un ejemplo :

pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5" Grid :data-items="products"/Grid/pdfexport

Puede optar por personalizar aún más la exportación utilizando una plantilla. Dentro de la plantilla, puede agregar estilo, especificar encabezados y pies de página, cambiar el diseño de la página y agregarle nuevos elementos. Usarías CSS para diseñar. Una vez que haya terminado de configurar la plantilla, deberá especificarla utilizando la propiedad de plantilla de página del componente GridPDFExport .

Para exportar archivos de Excel desde Kendo UI Vue Grid, usaría el ExcelExportcomponente. Con su saveExcelmétodo, le pasa el nombre del archivo, los datos de la cuadrícula, las columnas para mostrar, etc. y llama al método para generar el archivo. Esta cuadrícula de datos de Vue es un gran ejemplo de cómo se pueden lograr exportaciones de Excel con Kendo UI Vue Grid.

Columnas adhesivas

Cuando un usuario se desplaza horizontalmente por una cuadrícula, es posible que necesite tener algunas columnas congeladas o constantemente a la vista. Estas columnas generalmente contienen información crucial como ID, nombres, etc. Las columnas congeladas/fijas siempre permanecen visibles, pero pueden moverse hacia los bordes izquierdo o derecho de la cuadrícula dependiendo de la dirección de desplazamiento, o no moverse en absoluto. Por ejemplo, en esta demostración de cuadrícula de datos de Vue , la ID está congelada y la columna Discontinuado es fija.

Las columnas fijas en las bibliotecas de cuadrículas pueden ser algo poco común. Si no está presente, implementarlo desde cero puede ser una tarea difícil. Requerirá un estilo significativo para lograrlo y es posible que no se escale bien si necesita numerosas cuadrículas.

La configuración de columnas adhesivas en la interfaz de usuario de Kendo requiere una configuración mínima. Por ejemplo, en Kendo UI Vue Grid, deberá establecer la lockedpropiedad de una columna en verdadero para que sea fija. En esta tabla de datos de Vue , las columnas ID y Discontinuado se vuelven fijas configurando la lockedpropiedad. En el siguiente ejemplo, el ID y la edad están bloqueados.

template grid :data-items="people" :columns = "columns" /grid/templatescriptimport { Grid } from '@progress/kendo-vue-grid';import { people } from './people'export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } }};/script

Edición

El principal caso de uso de una cuadrícula es ver grandes cantidades de datos. Algunas bibliotecas simplemente se ciñen a esto y no consideran la posibilidad de que sea necesaria la edición. Esto supone una desventaja para los usuarios, ya que la edición es una característica bastante útil. Cuando los usuarios lo solicitan, los desarrolladores se ven obligados a crear una página separada para editar entradas individuales. Además, los usuarios solo pueden editar una entrada tras otra en un formulario. Esto es tedioso y genera una mala experiencia para el usuario, especialmente cuando se manejan grandes cantidades de datos.

Un caso de uso importante para la edición de cuadrículas es facilitar la edición por lotes. Es útil para modificar grandes cantidades de datos a la vez. Esto podría implicar eliminar, crear y actualizar los datos.

Kendo UI Data Grids permite la edición de dos formas: en línea y mediante ventanas emergentes. Con la edición en línea, todos los datos se editan dentro de la cuadrícula. Cuando se hace clic en una celda, se vuelve editable. En una ventana emergente, se utiliza un formulario emergente para editar cada entrada individualmente. En este ejemplo de tabla de Kendo UI para jQuery , hacer que una cuadrícula sea editable implica tres pasos: establecer la configuración editable de la cuadrícula, establecer una fuente de datos y configurar las operaciones CRUD en la fuente de datos. Estos pocos pasos reducen la complejidad involucrada en la configuración de la edición por lotes. La configuración de la edición de ventanas emergentes sigue los mismos pasos pero con diferentes opciones al principio.

Además de admitir ediciones, la interfaz de usuario de Kendo para jQuery Grid permite la validación de entradas. Por ejemplo, puede hacer que se requieran entradas o imponer una longitud mínima. Además de eso, puedes crear controles de entrada personalizados. Los controles de entrada no se limitan sólo a los campos de texto. Puede utilizar menús desplegables, casillas de verificación, selectores de fechas, controles deslizantes de rango, etc. Estos pueden estar tanto en línea como en ventanas emergentes. En esta tabla de datos jQuery , el campo Categoría es un menú desplegable. La validación también se demuestra en el mismo ejemplo. El campo de precio unitario tiene una validación impuesta, asegurando que su valor mínimo sea 1.

Componentes suplementarios

La mayoría de las bibliotecas de grillas tienen un propósito singular: proporcionar una grilla. No se envían con nada más, sólo la rejilla. Está limitado a las funciones que proporciona. Si necesita complementar la cuadrícula, puede resultar complicado porque es posible que otras bibliotecas no sean compatibles con ella. Así que sólo tienes que ceñirte a los límites de la biblioteca al crear una cuadrícula.

Kendo UI resuelve esto porque el enfoque de su creador es ofrecer una biblioteca completa de componentes que se integran fácilmente entre sí en lugar de componentes individuales. La cuadrícula es parte de una biblioteca de numerosos componentes que le permiten hacer de todo, desde gestión de datos, navegación, gráficos, edición, presentación de medios, facilitación de chat, etc. Puede optar por incrustar estos componentes dentro de la red sin tener que realizar ninguna configuración elaborada y posiblemente romperla. Integrarlos es perfecto y requiere una configuración mínima. Tomemos, por ejemplo , esta tabla de datos angular , su columna de 1 día incorpora un gráfico totalmente interactivo para cada fila sin problemas. Puede integrar cualquier cantidad de componentes dentro de una cuadrícula confiando en que funcionará y que todas sus funciones funcionarán como se espera.

Conclusión

Las cuadrículas de datos deben ser fáciles de entender, atractivas, receptivas y accesibles. Necesitan funcionar bien y cargar datos rápidamente. Sin embargo, construir una red de datos que cumpla con estos estándares desde cero puede llevar mucho tiempo y ser una tarea enorme. Puede optar por utilizar bibliotecas de cuadrículas de datos, pero a menudo no están optimizadas para el rendimiento, no son accesibles y solo se envían con un único componente de cuadrícula.

Crear una cuadrícula de datos atractiva y agradable de usar requiere una biblioteca que se centre en el rendimiento. Puede hacerlo construyendo de forma nativa y admitiendo el desplazamiento virtual. La cuadrícula de datos que proporciona debe ser responsiva y utilizar columnas fijas. Esto es para que los usuarios puedan ver fácilmente los datos sin importar el tamaño o la orientación de la pantalla. La accesibilidad debería ser una preocupación central de las redes. Esto garantiza que todos los usuarios puedan tener la misma experiencia al usarlos.

Las tablas de datos deberían ampliar lo que un usuario puede hacer con los datos. Esto se puede lograr editando y facilitando las exportaciones en múltiples formatos. Además de eso, estas bibliotecas deberían incluirse con otros componentes para complementar la red. Tener componentes compatibles en una biblioteca elimina la necesidad de utilizar varias bibliotecas conflictivas diferentes en una aplicación. Una biblioteca de cuadrícula de datos que proporcione estas funciones le ayudará a crear un gran producto para sus usuarios sin muchas complicaciones.

(vf, il)Explora más en

• interfaz de usuario
• Herramientas
• javascript

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

¿Puedes hacer eso con una cuadrícula de datos de JavaScript?

Diseño de respuestaCumplimiento de accesibilidadDesplazamiento virtualExportaciones de PDF y ExcelColumnas adhesivasEdiciónComponentes suplementariosConclusi

programar

es

https://aprendeprogramando.es/static/images/programar-puedes-hacer-eso-con-una-cuadricula-de-datos-de-javascriptja-1111-0.jpg

2025-01-15

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente