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 Cabecera te permite personalizar la apariencia y el comportamiento de los encabezados de columna en Ignite UI for ReactIgrGrid.
Plantilla de celda
La Plantilla de Celdas te permite personalizar la apariencia y el comportamiento de las células en Ignite UI for ReactIgrGrid.
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
El fijamiento 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 desplazan horizontalmente elIgrGrid. La React Grid tiene una interfaz de fijación de columnas incorporada, que puede usarse a través de laIgrGrid barra de herramientas para cambiar el estado de los pines de las columnas. Además, puedes definir una interfaz personalizada y cambiar el estado de los pines de las columnas mediante 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
Ignite UI for ReactIgrGrid proporciona un manejo predeterminado de los tipos de datos de columna, en función de lo cual estará presente la apariencia de las plantillas predeterminadas y de edición. Tipos de datos de columna soportados:
- 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.
ProporcionaIgrGrid una forma cómoda de realizar manipulaciones de datos mediante la adición de filas en línea y una potente API para React operaciones CRUD. Añade unIgrActionStrip componente con acciones de edición activadas en la plantilla de la cuadrícula, pasa el cursor por una fila y usa el botón proporcionado, pulsa "ALT" +" +" para generar la interfaz de usuario que añade fila.
ProporcionaIgrGrid una forma cómoda de realizar manipulaciones de datos mediante edición en línea y una potente API para React operaciones CRUD. Haz clic en una fila y pulsa la tecla Enter, o simplemente haz doble clic con el ratón en la fila que necesita modificación.
- 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 está encapsulada en laExcelExporterService clase y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrado, ordenación, etc. Para ello, necesitas invocar elExport método deExcelExporterService y pasar el componente Grid como primer argumento para exportar la grid fácilmente.
Filtración
El React Filtrado de Rejilla en Ignite UI es una función que permite mostrar u ocultar datos selectivamente según criterios o condiciones específicas. Hay un contenedor de datos acotado a través del cual elIgrGrid 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 Ignite UI for React Agrupar por comportamiento en React Grid crea filas de datos agrupadas basadas en los valores de las columnas. El Grupo By en permiteIgrGrid visualizar los grupos en una estructura jerárquica. Las filas de datos agrupadas pueden expandirse o colapsarse y el orden de agrupación puede cambiarse a través de la interfaz o API. Cuando la selección de filas está activada, se renderiza un selector de Agrupar por fila en el área más a la izquierda de la fila de grupo. En caso de que larowSelection propiedad esté configurada como simple, las casillas de verificación están desactivadas y solo sirven como indicación para el grupo donde se coloca la selección. Si larowSelection propiedad está configurada como múltiple, al hacer clic en el selector Agrupar por filas 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 Vivo en la Cuadrícula se utiliza para habilitar actualizaciones en tiempo real o casi en tiempo real de los datos mostrados dentro de la Red. Esto es extremadamente útil en aplicaciones donde los datos cambian constantemente, como los rastreadores de bolsa, los resultados deportivos en directo o los paneles de control IoT (Internet de las Cosas). PuedenIgrGrid gestionar miles de actualizaciones por segundo, manteniendo la respuesta a las interacciones del usuario.
Master-Detail
ElIgrGrid componente permite especificar una plantilla de detalle que muestre detalles adicionales para una fila concreta ampliando o colapsando 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 de teclado de React cuadrícula en Ignite UI ofrece una gran variedad de interacciones con el teclado para el usuario. Mejora la accesibilidad delIgrGrid y permite al usuario navegar por cualquier tipo de elementos internos (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.). Esta funcionalidad está habilitada por defecto, y el desarrollador tiene la opción de anular fácilmente cualquiera de los comportamientos por defecto.
Las tabulaciones de laIgrGrid se han reducido para que la navegación cumpla con los estándares de accesibilidad del W3C y sea cómoda de usar.
Actualmente, introduceIgrGrid los siguientes paradas de pestaña:
- Á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 React Grid Multi-Column Headers en Ignite UI permite agrupar columnas colocándolas bajo un multi-encabezado común. Cada grupo de cabeceras de varias columnas en elIgrGrid podría ser una representación de combinaciones entre otros grupos o columnas. Esta función es especialmente útil al tratar con grandes conjuntos de datos, donde desplazarse horizontalmente puede resultar engorroso
Multi-row Layout
La función de diseño multifila The React Grid en Ignite UI amplía las capacidades de renderizado de laIgrGrid. La función permite dividir un único registro de datos en varias filas visibles.
Pagination
La función de paginación de cuadrícula React en Ignite UI se utiliza para dividir un gran conjunto de datos en una secuencia de páginas con contenido similar. React paginación en cuadrícula mejora la experiencia del usuario y la interacción con los datos.IgrGrid La paginación se puede configurar mediante un componente separado proyectado en el árbol de la cuadrícula definiendo unaIgrPaginator etiqueta, similar a la suma de una columna. Como en cualquier tabla React, la paginación en la cuadrícula de React soporta plantillas para páginas personalizadas.
Operaciones de datos remotos
Por defecto,IgrGrid utiliza su propia lógica para realizar operaciones de datos.
Puedes realizar estas tareas de forma remota y alimentar los datosIgrGrid resultantes aprovechando ciertas entradas y eventos que son expuestos por elIgrGrid.
Acciones de fila
ElIgrGrid componente en Ignite UI for React proporciona la capacidad de usarIgrActionStrip y utilizar CRUD para componentes de fila/celda y fijación de filas. El componente Action Strip puede alojar controles de interfaz predefinidos para estas operaciones.
Arrastrar filas
Ignite UI for ReactIgrGrid arrastre de fila se inicializa en el componente raízIgrGrid y es configurable mediante larowDraggable entrada. Habilitar el arrastre de filas proporciona a los usuarios un asa de arrastre de fila con el que pueden iniciar el arrastre de una fila.
Fijación de filas
En el ReactIgrGrid, puedes fijar una o varias filas en la parte superior o inferior de la cuadrija. El fijamiento de filas permite a los usuarios finales fijar filas en un orden determinado, duplicándolas en un área especial que siempre es visible incluso cuando desplazan verticalmenteIgrGrid. La Material UI Grid tiene una interfaz de fijación de filas incorporada, que se habilita inicializando unIgrActionStrip componente en el contexto de.IgrGrid Además, puedes definir una interfaz personalizada y cambiar el estado de los pines de las filas a través de la API de fijación de filas.
Filtro de búsqueda
La búsqueda de cuadrícula React permite el proceso de encontrar valores en la recopilación de datos. Facilitamos la configuración de esta funcionalidad y puede implementarse con una caja de búsqueda de entrada, botones, navegación con teclado y otras funciones útiles para una experiencia de usuario aún mejor. Aunque los navegadores proporcionan de forma nativa funcionalidad de búsqueda de contenido, la mayoría de las veces virtualizanIgrGrid sus columnas y filas que no están en la vista. En estos casos, la búsqueda nativa en cuadrícula 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 te permite buscar entre el contenido virtualizado de laIgrGrid.
Selección
Con el Ignite UI for ReactIgrGrid puedes seleccionar datos fácilmente usando una variedad de eventos, una API rica o con interacciones sencillas con el ratón como la selección simple.
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 toda una columna con un solo clic. Se puede activar mediante lacolumnSelection entrada. Gracias a la API avanzada, la función permite la manipulación sencilla 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 de Selección de Filas en React Grid permite a los usuarios seleccionar, resaltar o deseleccionar interactivamente una o varias filas de datos. Hay varios modos de selección disponibles:IgrGrid Ninguna selección, selección múltiple, selección única
Sizing
La función de Dimensionamiento en React Grid es un aspecto importante para crear interfaces de cuadrícula responsivas y fáciles de usar. La función React Grid Sizing permite a los usuarios ajustar elwidth yheight de la cuadrícula para adaptarse a diferentes tamaños de pantalla, contenido o preferencias del usuario. En cuanto al tamañoIgrGrid del borde y del acolchado, se tienen en cuenta en sus cálculos de tamaños de ancho/altura, también conocidos como dimensionamiento de caja de borde. Se aplica en todos los escenarios.
Clasificación
La función de Ordenación de Datos en React Grid está habilitada a nivel por columna, lo que significa que puedenIgrGrid tener una mezcla de columnas ordenables y no ordenables. Realizar React acciones de ordenación te permite cambiar el orden de visualización de los registros según criterios especificados.
resúmenes
La función de Resúmenes en React Grid funciona a nivel de columna como pie de página de grupo. React Resúmenes de cuadrícula es una función 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, dependiendo del tipo de datos dentro de la columna o mediante la implementación de una plantilla personalizada en laIgrGrid.
Virtualización y rendimiento
En Ignite UI for React, elIgrGrid 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 la interfaz en la React Grid. La barra de herramientas React se encuentra en la parte superior del componente React, es decir, elIgrGrid y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede alojar cualquier contenido personalizado o conjunto de controles predefinidos de la interfaz. El conjunto predeterminado para la 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.