Las 5 mejores características de React Grid para una mejor experiencia de usuario y rendimiento

React es uno de los frameworks web más utilizados entre los desarrolladores de todo el mundo para crear aplicaciones. Hasta la fecha, más de 1,3 millones de sitios web la utilizan, mientras que el número de equipos y programadores de React que aprovechan la tecnología sigue creciendo exponencialmente cada día. La razón es:

• Su arquitectura basada en componentes
• Flexibility
• Y un rico ecosistema de bibliotecas

All of this makes building interactive user interfaces fast and efficient. One essential UI component that developers often need is the React data grid, which is a robust table-like structure for displaying and manipulating data. To create the best apps with comprehensive grids, however, developers require comprehensive data grid features. But what are the top 5 React Grid features to look for in your React library?

This article will examine Ignite UI for React Grid and provide a list of the best React features and their corresponding use cases. So, here’s the functionality you need.

Filtrado avanzado: para condiciones de filtro complejas

Enumeramos Ignite UI for React Filtrado avanzado entre las mejores características de la tabla de React porque brinda la capacidad de crear consultas de filtrado complejas con diferentes condiciones combinadas con u operandos.

Una vez que haya creado las condiciones y grupos de filtrado, todo lo que necesita hacer para filtrar los datos es hacer clic en el botón Aplicar. Si ha modificado el filtro avanzado pero no desea conservar los cambios, haga clic en el botón Cancelar. También puede borrar el filtro avanzado haciendo clic en el botón Borrar filtro.

Casos de uso

• Encontrar todas las ventas por encima de un cierto valor que ocurrieron en un período de tiempo definido.
• Un panel que permite a los usuarios encontrar existencias de un producto en particular en una ubicación específica.
• Un panel financiero que filtra una gran cantidad de transacciones.

Aquí hay un breve video sobre cómo puede filtrar todas las fechas más allá de cierto punto que cumplen con un criterio específico.

¿Cómo habilitar el filtrado avanzado?

Si necesita el filtrado avanzado como una de las entidades de cuadrícula de React y desea habilitarlo, la propiedad de entrada allowAdvancedFiltering debe establecerse en true.

<IgrGrid data={nwindData} autoGenerate={false} ref={gridRef} allowAdvancedFiltering={true}>

    <IgrGridToolbar></IgrGridToolbar>

</IgrGrid>

El filtrado avanzado genera un filteringExpressionsTree, que se almacena en la propiedad de entrada advancedFilteringExpressionsTree. Puede usar la propiedad advancedFilteringExpressionsTree para establecer un estado inicial del filtrado avanzado.

const filteringTree: IgrFilteringExpressionsTree = {

    operator: FilteringLogic.And,

    filteringOperands: [

        {

            fieldName: "ProductID",

            condition: new IgrNumberFilteringOperand().condition("doesNotEqual"),

            searchVal: 1,

            ignoreCase: true,

        },

        {

            fieldName: "ProductName",

            conditionName: "startsWith",

            searchVal: "Ch",

            ignoreCase: true,

        }

    ]

};

<IgrGrid data={data} allowFiltering={true} advancedFilteringExpressionsTree={filteringTree}>

    <IgrGridToolbar>

        <IgrGridToolbarActions>

            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>

        </IgrGridToolbarActions>

    </IgrGridToolbar>

    <IgrColumn field="ProductID" filterable={true} dataType="number"></IgrColumn>

    <IgrColumn field="ProductName" dataType="string" filterable={true}></IgrColumn>

Persistencia de estado: guardar y restaurar vistas de cuadrícula

¿Quieres guardar y restaurar el estado de la cuadrícula de forma sencilla? Utilice la característica Persistencia de estado en Ignite UI for React cuadrícula. Cualquier cambio que aplique se guardará y restaurará después de volver a cargar la página. Cuando se aplica IgrGridState al React IgrGrid, expone los métodos GetState, GetStateAsString, ApplyState y ApplyStateFromString. Esto le ayuda a lograr la persistencia del estado en cualquier escenario. Se encuentra entre las 5 principales funciones de React Grid porque es ideal para aplicaciones en las que los usuarios requieren consistencia y personalización en términos de cómo se presentan los datos.

Casos de uso

• Para diseños de cuadrícula que requieren personalizaciones mediante la ordenación, el cambio de tamaño de las columnas, la aplicación de filtros y la configuración que se puede guardar automáticamente.
• Una aplicación de administración de tareas en la que los usuarios desean que su vista de tareas filtrada y personalizada permanezca igual después de iniciar sesión nuevamente.
• Un panel de informes del equipo de finanzas que permite a los usuarios guardar configuraciones de columnas específicas de registros de gastos o un presupuesto definido.

¿Cómo habilitar la persistencia de estado?

<IgrGrid>

    <IgrGridState ref={gridStateRef}></IgrGridState>

</IgrGrid>

// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API

const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string

const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions

const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);

Navegación con teclado: atajos para mejorar la productividad y la accesibilidad

Cuando se trata de aplicaciones de React con muchos datos, la navegación con teclado se encuentra entre las funciones de cuadrícula React más eficientes porque permite una entrada y edición de datos más rápidas, y también se utiliza para interactuar con otras funciones de cuadrícula.

La función de navegación por teclado de React proporciona una amplia variedad de interacciones de teclado para los usuarios, incluidas las opciones de clasificación y agrupación. Mejora la accesibilidad de la cuadrícula y permite una navegación fluida a través de cualquier tipo de elementos en su interior (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.). En Ignite UI for React Grid, esta funcionalidad está habilitada de forma predeterminada y puede anular cualquiera de los comportamientos predeterminados de una manera sencilla.

Casos de uso

• Para un CRM de atención al cliente donde los usuarios necesitan procesar tickets rápidamente.
• Una aplicación centrada en la accesibilidad que usan los usuarios de lectores de pantalla que dependen de los comandos del teclado para navegar por el contenido de la cuadrícula.
• Una herramienta financiera estilo hoja de cálculo en la que se pueden agregar grandes volúmenes de datos usando solo el teclado.

Además, los usuarios pueden anular gran parte de la funcionalidad de navegación utilizando los eventos integrados, lo que les permite adaptar la experiencia más de cerca a las necesidades de su aplicación.

¿Cómo personalizar la navegación con teclado?

<IgrGrid id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>

</IgrGrid>

const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {

  const args = eventArgs.detail;

  const target= args.target;

  const evt = args.event;

  const type = args.targetType;

  if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {

      // 1. USER INPUT VALIDATION ON TAB

  }

  if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {

      // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS

  }

}

Exportar a Excel – Compartir y analizar datos

La característica Exportar a Excel en React Grid le permite exportar rápidamente los datos de la cuadrícula directamente a Excel. Este formato permite React funciones como filtrar, ordenar y compartir datos fuera de la aplicación. Cuando se usa Ignite UI for React, la funcionalidad de exportación de datos se encapsula en la clase ExcelExporterService y los datos se exportan en formato de tabla de MS Excel. Si desea hacer esto, tendrá que invocar el método Export de ExcelExporterService y pasar el componente IgrGrid como primer argumento para exportar la cuadrícula fácilmente.

Casos de uso

• Compartir el progreso de la tarea entre el equipo o las partes interesadas con un solo clic, conservando todos los filtros.
• Preparación de un informe para una reunión de equipo.
• Para un panel de ventas en el que un gerente exporta datos de ventas filtrados.

How to Export Grid with Frozen Column Headers?

function exportEventFreezeHeaders(args: IgrExporterEventArgs) {

    args.detail.options.freezeHeaders = true;

  }

<IgrGridToolbar>

  <IgrGridToolbarActions>

    <IgrGridToolbarExporter onExportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>

  </IgrGridToolbarActions>

</IgrGridToolbar>

Cuadrícula pivotante: simplificación del análisis complejo

El uso de Ignite UI para React cuadrícula dinámica le permite presentar datos en una tabla dinámica, lo que permite a los usuarios realizar análisis complejos en el conjunto de datos proporcionado. No es exactamente una característica, sino un componente completo que creamos para permitir a los usuarios organizar, resumir y filtrar grandes volúmenes de datos, que luego se pueden mostrar en un formato de tabla cruzada. Hay características clave React la cuadrícula, como dimensiones de fila, dimensiones de columna, agregaciones y filtros.

Casos de uso

• Para una herramienta de estilo Reveal o paneles de datos personalizados para analistas de datos que requieren segmentar y dividir datos directamente en la aplicación, sin tener que exportar a otra herramienta o escribir consultas SQL.
• Un panel de administración del hospital que puede configurar y mostrar datos en una estructura de tabla dinámica multidimensional, analizando los registros de los pacientes.
• Una aplicación de inventario minorista que pivota los niveles de existencias por categoría, ubicación, etc.

¿Cómo habilitar la cuadrícula dinámica?

Aquí hay una configuración dinámica básica.

const pivotConfiguration1: IgrPivotConfiguration = {

    columns: [

        new IgrPivotDateDimension({

            enabled: true,

            memberName: "Date",

        })

    ],

    rows: [

        {

            enabled: true,

            memberName: "SellerCity"

        },

        {

            enabled: true,

            memberName: "ProductName"

        }

    ],

    filters: [

        {

            enabled: true,

            memberName: "SellerName"

        }

    ],

    values: [

        {

            member: "ProductUnitPrice",

            displayName: "Amount of Sale",

            dataType: "currency",

            enabled: true,

            aggregate: {

                    aggregatorName: "SUM",

                    key: "SUM",

                    label: "Sum of Sale",

                }

        }

    ]

};

Esta configuración define 1 fila, 1 columna y 1 agregación que suma los valores de cada grupo de dimensiones. Los miembros coinciden con los campos disponibles en la fuente de datos proporcionada:

public data = [
[
    {
        ProductName: `Clothing`,
        ProductUnitPrice: 12.8,
        SellerName: `Stanley Brooker`,
        SellerCity: `Seattle`,
        Date: `2007-01-01T00:00:00`,
        Value: 94.4,
        NumberOfUnits: 282
    },

];

Envolver

Al seleccionar una cuadrícula de datos React, además del rendimiento y el precio, también debe considerar cómo interactuarán los usuarios reales con ella y qué funciones necesitará para cumplir con los requisitos de la aplicación y las expectativas de los usuarios. Funciones como el filtrado avanzado, la persistencia de estado, la navegación con teclado y la exportación a Excel no son solo una necesidad.

Garantizan una mejor productividad de los desarrolladores, una experiencia de usuario mejorada, personalización y gestión de datos escalable en diversos escenarios para aplicaciones simples y complejas. Y cuando se combina con las capacidades de Pivot Grid, todo esto le permite preparar sus aplicaciones para el futuro y mantener un código limpio para que sus proyectos de React puedan evolucionar con facilidad.