Novedades: Versión Ignite UI for React 18.3.0
Nos complace anunciar que la última versión Ignite UI for React 18.3.0 llega con una nueva cuadrícula de datos React y un montón de funciones interesantes. Leer más.
Radoslav Mirchev
15min read
En Infragistics, siempre nos esforzamos por proporcionar los mejores componentes para su experiencia de desarrollo. Y la Ignite UI for React 18.3.0 de hoy incluye el nuevo React Data Grid. La cuadrícula de datos de React forma parte de la familia Ignite UI y, al igual que Angular, Web Components y Blazor Data Grids, comparte el mismo diseño, comportamiento, experiencia de usuario y capacidades. Esto permite un cambio sin problemas entre Angular, Blazor Web Components o React para los equipos de desarrollo, lo que les permite ser más ágiles a los requisitos cambiantes en React.
Es hora de obtener una vista de alto nivel de todas las funciones de Data Grid que lanzaremos en Ignite UI for React versión 18.3.0. Estas son las características de React Grid:
- Plantilla de encabezado
- Plantilla de celda
- El enlace de datos
- Enlace de datos complejos
- Grupos de columnas plegables
- Ocultación de columnas
- Reordenamiento y movimiento de columnas
- Fijación de columnas
- Cambio de tamaño de columna
- Tipos de columna
- Estilo condicional
- Densidad de visualización
- Edición
- React Edición de celdas de cuadrícula
- Combinaciones en cascada
- Adición de filas
- Edición de filas
- Export to Excel Service
- Filtración
- Filtrado avanzado de React Grid
- Filtrado de estilos de Excel
- Agrupar por
- Datos en vivo / Actualizaciones en tiempo real
- Maestro-Detalle
- Navegación por teclado
- Descripción general de encabezados de varias columnas
- Diseño de varias filas
- Pagination
- Operaciones de datos remotos
- Acciones de fila
- Arrastrar filas
- Fijación de filas
- Filtro de búsqueda
- Selección
- Selección de celda
- Selección de columna
- Selección de fila
- Dimensionamiento
- Clasificación
- resúmenes
- Virtualización y rendimiento
- Barra de herramientas
- Tematización
La cuadrícula de datos de React
El nuevo componente React Data Grid se utiliza para mostrar datos en formato tabular de forma rápida y sencilla. La cuadrícula de datos es un componente de cuadrícula moderno repleto de funciones como edición de datos, selección, filtrado, clasificación, agrupación, fijación, paginación, plantillas, movimiento de columnas, exportación y más. En comparación con la cuadrícula anterior que enviamos en Ignite UI for React, la nueva cuadrícula de datos tiene significativamente más funciones, una API más rica y temas integrados.
Plantilla de encabezado
La plantilla de encabezado le permite personalizar la apariencia y el comportamiento de los encabezados de columna en Ignite UI for React IgrGrid.
Plantilla de celda
La plantilla de celda le permite personalizar la apariencia y el comportamiento de las celdas en Ignite UI for React IgrGrid.
Grupos de columnas contraíbles
La característica Grupos de columnas contraíbles de React Grid en Ignite UI le permite organizar y administrar varios niveles de columnas anidadas y grupos de columnas en la cuadrícula de React agrupándolos y proporcionando la opción de contraer o expandir estos grupos para mejorar la visualización y navegación de datos.
Ocultación de columnas
El Ignite UI for React tiene una interfaz de usuario de ocultación de columnas integrada, que se puede usar a través de la barra de herramientas de cuadrícula de React para cambiar el estado visible de las columnas. Los desarrolladores tienen la flexibilidad de definir la interfaz de usuario de ocultación de columnas en cualquier lugar de la página según sea necesario. La función de ocultación de columnas de cuadrícula React es especialmente útil cuando se desea disminuir el tamaño de la cuadrícula y eliminar la necesidad de tabular a través de campos redundantes.
Reordenamiento y movimiento de columnas
La función de movimiento de columnas de React Grid en Ignite UI permite un reordenamiento rápido y fácil de las columnas. Esto se puede hacer a través de la API de movimiento de columnas o arrastrando y soltando los encabezados a otra posición mediante el mouse o gestos táctiles. En la cuadrícula de React, puede habilitar el movimiento de columnas para columnas ancladas y no ancladas y también para encabezados de varias columnas.
Fijación de columnas
La fijación de columnas en Ignite UI for React permite a los usuarios finales bloquear una columna en un orden de columna determinado. Como resultado, esto les permitirá verlo mientras se desplazan horizontalmente. IgrGrid La cuadrícula de React tiene una interfaz de usuario de anclaje de columnas integrada, que se puede usar a través de la IgrGrid barra de herramientas para cambiar el estado de las columnas. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de anclaje de las columnas a través de la función de fijación de columnas.
Cambio de tamaño de columna
La función de cambio de tamaño de columna de React cuadrícula en Ignite UI permite a los usuarios ajustar fácilmente el ancho de las columnas de la cuadrícula. De forma predeterminada, verán un indicador de cambio de tamaño temporal mientras la operación de cambio de tamaño de arrastre esté en efecto. Hay varias opciones de cambio de tamaño disponibles: Cambiar el tamaño de las columnas en píxeles/porcentajes, Restringir el tamaño de las columnas, Ajustar el tamaño automático de las columnas con doble clic y Cambiar el tamaño automático de las columnas al inicializar.
Tipos de columna
IgrGrid Ignite UI for React proporciona un manejo predeterminado de los tipos de datos de columna, en función del cual estará presente la apariencia de las plantillas predeterminadas y de edición. Tipos de datos de columna admitidos:
- Number
- Siring
- Date
- Boolean
- Divisa
- Percent
Estilo condicional
El componente Cuadrícula React de Ignite UI permite el estilo personalizado en un nivel de fila o celda. La funcionalidad de estilo condicional de cuadrícula enfatiza o resalta visualmente los datos que cumplen ciertos criterios, lo que facilita a los usuarios la identificación de información importante o tendencias dentro de la cuadrícula.
Densidad de visualización
La densidad de visualización de la cuadrícula de React en Ignite UI permite a los usuarios controlar el espaciado y el diseño de los datos dentro de la cuadrícula. Al cambiar la densidad, puede mejorar significativamente la experiencia del usuario al interactuar con grandes cantidades de contenido. Pueden elegir entre tres opciones de densidad de visualización:
- Acogedor
- Cómodo
- Compacto
Edición
La función de edición de celdas de cuadrícula React en Ignite UI proporciona una manera fácil de realizar operaciones de manipulación de datos, como crear, actualizar y eliminar registros. React Grid proporciona una potente API pública que le permite personalizar cómo se realizan estas operaciones. Las fases de la manipulación de datos son:
La función de edición de celdas de cuadrícula React en Ignite UI proporciona una gran capacidad de manipulación de datos del contenido de celdas individuales dentro del componente de cuadrícula React y viene con una potente API para operaciones CRUD React. Es una característica fundamental en aplicaciones como hojas de cálculo, tablas de datos y cuadrículas de datos, lo que permite a los usuarios agregar, editar o actualizar datos dentro de celdas específicas. De forma predeterminada, la cuadrícula de Ignite UI for React se utiliza en la edición de celdas. Debido a la plantilla de edición de celdas predeterminada, habrá diferentes editores en función del tipo de datos de columna Top of Form. Además, puede definir sus propias plantillas personalizadas para las acciones de actualización de datos y anular el comportamiento predeterminado para confirmar y descartar cualquier cambio.
La función de edición de Ignite UI ofrece la oportunidad de utilizar componentes de cuadro combinado en cascada. Al seleccionar el valor en cualquier cuadro combinado anterior, los usuarios recibirán solo los datos que sean relevantes para su selección dentro del siguiente componente React cuadro combinado.
Proporciona IgrGrid una forma conveniente de realizar manipulaciones de datos a través de la adición de filas en línea y una potente API para operaciones CRUD React. Agregue un IgrActionStrip componente con acciones de edición habilitadas en la plantilla de la cuadrícula, coloque el cursor sobre una fila y use el botón proporcionado, presione "ALT" + +"" para generar la interfaz de usuario de adición de filas.
Proporciona IgrGrid una forma conveniente de realizar manipulaciones de datos a través de la edición en línea y una potente API para React operaciones CRUD. Haga clic en una fila y presione la tecla Enter, o simplemente haga doble clic con el mouse en la fila que debe modificarse.
- Edición por lotes (próximamente)
Export to Excel Service
El servicio React Grid Excel Exporter en Ignite UI puede exportar datos a Excel. La funcionalidad de exportación de datos se encapsula en la ExcelExporterService clase y los datos se exportan en formato de tabla de MS Excel. Este formato habilita funciones como filtrado, clasificación, etc. Para hacer esto, debe invocar el Export método de ExcelExporterService y pasar el componente Grid como primer argumento para exportar la cuadrícula fácilmente.
Filtración
El filtrado de cuadrícula de React en Ignite UI es una función que permite mostrar u ocultar datos de forma selectiva en función de criterios o condiciones específicos. Hay un contenedor de datos enlazado a través del cual el IgrGrid componente proporciona una API de filtrado enriquecida y todas las capacidades de filtrado. Los tipos de filtrado disponibles aquí son tres:
El filtrado avanzado de React Grid en Ignite UI le permite manipular datos proporcionando un cuadro de diálogo en el que puede crear diferentes grupos con condiciones de filtrado en todas las columnas de la cuadrícula React.
La cuadrícula de React expone una característica de filtrado de estilo Excel que proporciona una interfaz de usuario de filtrado similar a Excel. Simplifica el proceso de trabajar con grandes conjuntos de datos. La idea principal es ayudarles a filtrar los datos más relevantes y eliminar las entradas irrelevantes.
Agrupar por
El comportamiento Ignite UI for React Agrupar por de React cuadrícula crea filas de datos agrupadas en función de los valores de las columnas. El Agrupar por en el IgrGrid permite visualizar los grupos en una estructura jerárquica. Las filas de datos agrupadas se pueden expandir o contraer, y el orden de agrupación se puede cambiar a través de la interfaz de usuario o la API. Cuando la selección de filas está habilitada, se representa un selector de filas Agrupar por en el área más a la izquierda de la fila de grupo. En caso de que la propiedad se establezca en single, las rowSelection casillas de verificación están deshabilitadas y solo sirven como indicación para el grupo donde se coloca la selección. Si la rowSelection propiedad se establece en múltiples, al hacer clic sobre el selector de filas Agrupar por, se seleccionan todos los registros que pertenecen a este grupo.
Datos en vivo / Actualizaciones en tiempo real
La función Ignite UI for React Actualizaciones de datos en tiempo real de la cuadrícula se utiliza para habilitar actualizaciones en tiempo real o casi en tiempo real de los datos que se muestran en la cuadrícula. Esto es extremadamente útil en aplicaciones donde los datos cambian constantemente, como rastreadores de bolsa, resultados deportivos en vivo o paneles de IoT (Internet de las cosas). Puede IgrGrid manejar miles de actualizaciones por segundo, sin dejar de responder a las interacciones del usuario.
Master-Detail
El IgrGrid componente admite la especificación de una plantilla de detalles que muestra detalles adicionales para una fila determinada expandiendo o contrayendo su contenido. Cuando se especifica, cada registro actúa como un maestro, que, al expandirse, muestra una plantilla de detalles personalizable con datos contextuales para el registro actual.
Este modo es útil cuando necesita mostrar datos de estilo maestro-detalle en una estructura jerárquica.
Navegación por teclado
La función de navegación por teclado de cuadrícula React en Ignite UI proporciona una amplia variedad de interacciones de teclado para el usuario. Mejora la accesibilidad de la IgrGrid y permite al usuario navegar a través de cualquier tipo de elementos dentro (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.). Esta funcionalidad está habilitada de forma predeterminada y el desarrollador tiene la opción de anular cualquiera de los comportamientos predeterminados de una manera sencilla.
Las tabulaciones de IgrGrid se han reducido para que la navegación cumpla con los estándares de accesibilidad W3C y sea cómoda de usar.
Actualmente, IgrGrid introduce las siguientes tabulaciones:
- Área GroupBy o Barra de herramientas (si está habilitada).
- Grid header.
- Grid body.
- Column summaries (if enabled).
- Paginador de cuadrícula (si está habilitado).
Descripción general de encabezados de varias columnas
La función de encabezados de varias columnas de React Grid en Ignite UI le permite agrupar columnas colocándolas debajo de un encabezado múltiple común. Cada grupo de encabezados de varias columnas del IgrGrid podría ser una representación de combinaciones entre otros grupos o columnas. Esta característica es especialmente útil cuando se trata de grandes conjuntos de datos en los que el desplazamiento horizontal puede ser engorroso
Multi-row Layout
La característica El diseño de varias filas de la cuadrícula React en Ignite UI amplía las capacidades de representación de la IgrGrid. La función permite dividir un solo registro de datos en varias filas visibles.
Pagination
La función de paginación de cuadrícula de React en Ignite UI se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. React paginación de cuadrícula mejora la experiencia del usuario y la interacción con los datos. IgrGrid La paginación se puede configurar a través de un componente separado proyectado en el árbol de cuadrícula mediante la definición de una IgrPaginator etiqueta, similar a la adición de una columna. Al igual que en cualquier tabla React, la paginación de la cuadrícula React admite plantillas para páginas personalizadas.
Operaciones de datos remotos
De forma predeterminada, IgrGrid utiliza su propia lógica para realizar operaciones de datos.
Puede realizar estas tareas de forma remota y enviar los datos resultantes a IgrGrid aprovechando ciertas entradas y eventos, que están expuestos por IgrGrid.
Acciones de fila
El IgrGrid componente de Ignite UI for React proporciona la capacidad de usar IgrActionStrip y utilizar CRUD para componentes de fila/celda y anclaje de filas. El componente Action Strip puede alojar controles de interfaz de usuario predefinidos para estas operaciones.
Arrastrar filas
IgrGrid Ignite UI for React arrastre de filas se inicializa en el componente raíz IgrGrid y se puede configurar a través de la rowDraggable entrada. Al habilitar el arrastre de filas, los usuarios disponen de un controlador de arrastre de filas con el que pueden iniciar el arrastre de una fila.
Fijación de filas
En el React IgrGrid, puede anclar una o varias filas a la parte superior o inferior de la cuadrícula. La fijación de filas permite a los usuarios finales anclar filas en un orden determinado, duplicándolas en un área especial que siempre está visible incluso cuando se desplazan IgrGrid verticalmente. La cuadrícula de la interfaz de usuario de Material tiene una interfaz de usuario de anclaje de fila integrada, que se habilita inicializando un IgrActionStrip componente en el contexto de IgrGrid. Además, puede definir una interfaz de usuario personalizada y cambiar el estado de la chincheta de las filas a través de la API de fijación de filas.
Filtro de búsqueda
La búsqueda de cuadrícula de React permite el proceso de búsqueda de valores en la recopilación de datos. Facilitamos la configuración de esta funcionalidad y se puede implementar con un cuadro de entrada de búsqueda, botones, navegación con teclado y otras características útiles para una experiencia de usuario aún mejor. Si bien los navegadores proporcionan de forma nativa la funcionalidad de búsqueda de contenido, la mayoría de las veces, virtualiza IgrGrid sus columnas y filas que están fuera de la vista. En estos casos, la búsqueda de cuadrícula nativa no puede buscar datos en las celdas virtualizadas ya que no forman parte del DOM. Hemos ampliado la cuadrícula basada en tablas de Ignite UI for React Material con una API de búsqueda que le permite buscar a través del contenido virtualizado de la IgrGrid.
Selección
Con el Ignite UI for React IgrGrid puede seleccionar datos fácilmente mediante el uso de una variedad de eventos, API enriquecida o con interacciones simples del mouse como la selección única.
Selección de celda
La selección de celdas de cuadrícula React en Ignite UI permite capacidades de selección de datos enriquecidos y ofrece una API potente en el componente de cuadrícula. La cuadrícula React admite tres modos de selección:
–Selección de celdas múltiples de cuadrícula
Selección de columna
La función de selección en Ignite UI ofrece una forma simplificada y similar a Excel de seleccionar y resaltar una columna completa con un solo clic. Se puede habilitar a través de la columnSelection entrada. Gracias a la rica API, la función permite una fácil manipulación del estado de selección, la extracción de datos de las fracciones seleccionadas, operaciones de análisis de datos y visualizaciones.
Selección de fila
La función Selección de filas de React cuadrícula permite a los usuarios seleccionar, resaltar o anular la selección interactiva de una o varias filas de datos. Hay varios modos de selección disponibles en: IgrGrid Selección Ninguna, Selección múltiple, Selección única
Sizing
La función de tamaño de React cuadrícula es un aspecto importante de la creación de interfaces de cuadrícula receptivas y fáciles de usar. La función de tamaño de cuadrícula React permite a los usuarios ajustar el width y height de la cuadrícula para adaptarse a diferentes tamaños de pantalla, contenido o preferencias del usuario. En términos de tamaño de borde y relleno para el IgrGrid, se toman en sus cálculos de tamaño de ancho / alto o también se conocen como tamaño de caja de borde. Se aplica en todos los escenarios.
Clasificación
La función de ordenación de datos en React cuadrícula está habilitada a nivel por columna, lo IgrGrid que significa que puede tener una combinación de columnas ordenables y no ordenables. La realización de acciones de ordenación React le permite cambiar el orden de visualización de los registros en función de los criterios especificados.
resúmenes
La función Resúmenes de React cuadrícula funciona a nivel de columna como pie de página de grupo. React resúmenes de cuadrícula es una característica poderosa que permite al usuario ver la información de la columna en un contenedor separado con un conjunto predefinido de elementos de resumen predeterminados, según el tipo de datos dentro de la columna o mediante la implementación de una plantilla personalizada en el IgrGrid.
Virtualización y rendimiento
En Ignite UI for React, el IgrGrid control virtualiza su contenido tanto vertical como horizontalmente.
Barra de herramientas
La barra de herramientas Ignite UI for React es un contenedor para las operaciones de UI en React Grid. La barra de herramientas React se encuentra en la parte superior del componente React, es decir, IgrGrid, y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede albergar cualquier contenido personalizado o conjunto de controles de UI predefinidos. El conjunto predeterminado para React Grid incluye:
La barra de herramientas y los componentes de UI predefinidos admiten eventos React y exponen API para desarrolladores.
Tematización
Nuestra cuadrícula React se puede personalizar fácilmente para que coincida con la identidad de su marca. Además de los temas y paletas predefinidos, puede personalizar aún más el aspecto de la cuadrícula de datos mediante un conjunto de propiedades personalizadas de CSS.
Conclusión
Continuamos lanzando nuevas funciones de forma continua, para mejorar el rendimiento y proporcionar mejoras de estabilidad, ya que nos comprometemos a proporcionarle el mejor conjunto de herramientas de interfaz de usuario React y conocimientos relacionados para brindarle más conocimientos.
Tenemos detalles de cada pieza de este lanzamiento, y puedes consultarlos aquí:
Si necesitas más detalles, te animamos a que consultes nuestro:
Por último, cuando construyas algo genial con nuestros controles, asegúrate de hacérnoslo saber.