Os 5 principais recursos do React Grid para melhor UX e desempenho

React é um dos frameworks web mais usados entre os desenvolvedores em todo o mundo para a construção de aplicativos. Até o momento, mais de 1,3 milhão de sites o utilizam, enquanto o número de equipes e programadores React que utilizam a tecnologia continua a crescer exponencialmente a cada dia. A razão é:

• Sua arquitetura baseada em componentes
• Flexibility
• E um rico ecossistema 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.

Filtragem avançada – para condições de filtro complexas

Listamos Ignite UI for React Filtragem Avançada entre os melhores recursos da tabela React porque fornece a capacidade de criar consultas de filtragem complexas com diferentes condições combinadas usando e/ou operandos.

Depois de criar as condições e grupos de filtragem, tudo o que você precisa fazer para filtrar os dados é clicar no botão Aplicar. Se você modificou o filtro avançado, mas não deseja preservar as alterações, clique no botão Cancelar. Você também pode limpar o filtro avançado clicando no botão Limpar filtro.

Casos de uso

• Encontrar todas as vendas acima de um determinado valor que aconteceram em um período de tempo definido.
• Um painel que permite aos usuários encontrar estoques de um determinado produto em um local específico.
• Um painel financeiro que filtra um grande número de transações.

Aqui está um pequeno vídeo sobre como você pode filtrar todas as datas após um determinado ponto que atendem a um critério específico.

Como ativar a filtragem avançada?

Se você precisar da Filtragem Avançada como um dos recursos do React Grid e quiser habilitá-la, a propriedade de entrada allowAdvancedFiltering deverá ser definida como true.

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

    <IgrGridToolbar></IgrGridToolbar>

</IgrGrid>

A filtragem avançada gera uma filteringExpressionsTree, que é armazenada na propriedade de entrada advancedFilteringExpressionsTree. Você pode usar a propriedade advancedFilteringExpressionsTree para definir um estado inicial da filtragem avançada.

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>

Persistência de estado – Salvar e restaurar exibições de grade

Deseja salvar e restaurar o estado da grade de maneira simples? Use o recurso Persistência de Estado em Ignite UI for React Grid. Qualquer alteração aplicada será salva e restaurada depois que a página for recarregada. Quando o IgrGridState é aplicado ao React IgrGrid, ele expõe os métodos GetState, GetStateAsString, ApplyState e ApplyStateFromString. Isso ajuda você a obter persistência de estado em qualquer cenário. Está entre os 5 principais recursos do React Grid porque é ideal para aplicativos em que os usuários exigem consistência e personalização em termos de como os dados são apresentados.

Casos de uso

• Para layouts de grade que exigem personalizações classificando, redimensionando colunas, aplicando filtros e configurações que podem ser salvas automaticamente.
• Um aplicativo de gerenciamento de tarefas em que os usuários desejam que sua exibição de tarefas filtrada e personalizada permaneça a mesma depois de fazer login novamente.
• Um painel de relatórios da equipe financeira que permite que os usuários salvem configurações de coluna específicas de registros de despesas ou um orçamento definido.

Como habilitar a persistência 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']);

Navegação por teclado – Atalhos para melhorar a produtividade e acessibilidade

Quando se trata de aplicativos de React com muitos dados, a Navegação por Teclado está entre os recursos de grade de React mais eficientes porque permite entrada e edição de dados mais rápidas e também é usada para interagir com outros recursos de grade.

O recurso React Navegação por Teclado fornece uma grande variedade de interações de teclado para os usuários, incluindo opções de classificação e agrupamento. Ele aprimora a acessibilidade da grade e permite uma navegação perfeita por qualquer tipo de elemento interno (célula, linha, cabeçalho de coluna, barra de ferramentas, rodapé, etc.). No Ignite UI for React Grid, essa funcionalidade é habilitada por padrão e você pode substituir qualquer um dos comportamentos padrão de maneira fácil.

Casos de uso

• Para um CRM de suporte ao cliente em que os usuários precisam processar tíquetes rapidamente.
• Um aplicativo focado em acessibilidade usado por usuários de leitores de tela que dependem de comandos de teclado para navegar pelo conteúdo da grade.
• Uma ferramenta financeira em estilo de planilha em que grandes volumes de dados podem ser adicionados usando apenas o teclado.

Além disso, os usuários podem substituir grande parte da funcionalidade de navegação utilizando os eventos internos, permitindo que eles personalizem a experiência mais de acordo com as necessidades do aplicativo.

Como personalizar a navegação pelo 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 para Excel – Compartilhamento e análise de dados

O recurso Exportar para o Excel no React Grid permite exportar rapidamente dados de grade diretamente para o Excel. Esse formato permite React recursos como filtragem, classificação e compartilhamento de dados fora do aplicativo. Ao usar o Ignite UI for React, a funcionalidade de exportação de dados é encapsulada na classe ExcelExporterService e os dados são exportados no formato de tabela do MS Excel. Se você quiser fazer isso, terá que invocar o método Export de ExcelExporterService e passar o componente IgrGrid como o primeiro argumento para exportar a grade facilmente.

Casos de uso

• Compartilhar o progresso da tarefa entre a equipe ou as partes interessadas com um único clique, preservando todos os filtros.
• Preparar um relatório para uma reunião de equipe.
• Para um painel de vendas em que um gerente exporta dados de vendas 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>

Grade Dinâmica – Simplificando a Análise Complexa

O uso do Ignite UI para React Grade Dinâmica permite que você apresente dados em uma tabela dinâmica, permitindo que os usuários executem análises complexas no conjunto de dados fornecido. Não é exatamente um recurso, mas um componente completo que criamos para capacitar os usuários a organizar, resumir e filtrar grandes volumes de dados, que podem ser exibidos posteriormente em um formato de tabela cruzada. Existem recursos importantes React grade, como dimensões de linha, dimensões de coluna, agregações e filtros.

Casos de uso

• Para uma ferramenta de estilo Reveal ou painéis de dados personalizados para analistas de dados que precisam dividir e dividir dados diretamente no aplicativo, sem precisar exportar para outra ferramenta ou escrever consultas SQL.
• Um painel de administração do hospital que pode configurar e exibir dados em uma estrutura de tabela dinâmica multidimensional, analisando registros de pacientes.
• Um aplicativo de inventário de varejo que gira os níveis de estoque por categoria, local, etc.

Como ativar a grade dinâmica?

Aqui está uma configuração básica de pivô.

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",

                }

        }

    ]

};

Essa configuração define 1 linha, 1 coluna e 1 agregação que soma os valores de cada grupo de dimensões. Os campos de correspondência de membros disponíveis na fonte de dados fornecida:

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

];

Embrulhar

Ao selecionar uma grade de dados React, além do desempenho e do preço, você também deve considerar como os usuários reais interagirão com ela e quais recursos serão necessários para atender aos requisitos do aplicativo e às expectativas dos usuários. Recursos como Filtragem Avançada, Persistência de Estado, Navegação por Teclado e Exportação para Excel não são apenas uma necessidade.

Eles garantem melhor produtividade do desenvolvedor, experiência aprimorada do usuário, personalização e gerenciamento de dados escalável em vários cenários para aplicativos simples e complexos. E quando combinados com os recursos do Pivot Grid, tudo isso permite que você prepare seus aplicativos para o futuro e mantenha o código limpo para que seus projetos React possam evoluir com facilidade.