Visão geral e configuração da grade de árvore do React

    A Grade de Árvore React é um componente de interface do usuário que combina a funcionalidade de uma grade de dados (tabela) com uma exibição de árvore, permitindo que os dados hierárquicos sejam facilmente exibidos em um formato tabular. Ao contrário de uma grade regular, uma grade de árvore permite que as linhas se expandam e recolham, revelando linhas filho aninhadas nas linhas pai, tornando-a útil para representar dados estruturados, como exploradores de arquivos, organogramas, tarefas de projeto ou categorias de produtos.

    Ignite UI for React Tree Grid é usado para exibir e manipular dados hierárquicos ou simples com facilidade. Vincule rapidamente seus dados com muito pouco código ou use uma variedade de eventos para personalizar diferentes comportamentos. Este componente fornece um rico conjunto de recursos, como seleção de dados, filtragem de estilo do Excel, classificação, paginação, modelagem e movimentação de colunas. A exibição de dados tabulares nunca foi tão fácil e bonita graças à grade de árvore de interface do usuário baseada em tabela de materiais.

    React Tree Grid Example

    Neste exemplo, você pode ver como os usuários podem manipular dados hierárquicos ou simples. Incluímos opções de filtragem e classificação, fixação e ocultação, seleção de linhas, exportação para excel e csv.

    Exemplo

    Começando com Ignite UI for React Tree Grid

    Dependências

    Começar a usar nossa biblioteca React Grid e o React Tree Grid em particular é o primeiro passo para criar aplicativos poderosos e ricos em dados que exibem informações hierárquicas de maneira clara e interativa. A Grade de Árvore React permite que você apresente estruturas de dados pai-filho em um formato tabular familiar, completo com recursos como expansão de linha, classificação, filtragem, edição e virtualização para alto desempenho com grandes conjuntos de dados.

    To get started with the React tree grid, first you need to install the igniteui-react and igniteui-react-grids packages.

    npm install --save igniteui-react
npm install --save igniteui-react-grids

    Uso

    A grade de árvore compartilha muitos recursos com a grade, mas também adiciona a capacidade de exibir seus dados hierarquicamente. Para conseguir isso, a grade de árvore nos fornece algumas maneiras de definir as relações entre nossos objetos de dados - usando uma coleção filho para cada objeto de dados ou usando chaves primárias e estrangeiras para cada objeto de dados.

    Células de Árvore

    Independentemente de qual opção é usada para criar a hierarquia da grade de árvore (coleção filho ou chaves primárias e estrangeiras), as linhas da grade de árvore são construídas de dois tipos de células:

    • GridCell- Célula comum que contém um valor.
    • TreeGridCell- Célula de árvore que contém um valor, um indicador de expansão/colapso e um elemento de div de indentação, que é baseado no nível da linha da célula. O nível de um componente de linha pode ser acessado pelalevel propriedade de seu interiortreeRow.

    [! Nota] Cada linha pode ter apenas uma célula árvore, mas pode ter múltiplas (ou nenhuma) células comuns.

    Profundidade de Expansão Inicial

    Inicialmente, a grade de árvore expande todos os níveis dos nós e os mostra. Esse comportamento pode ser configurado usando aexpansionDepth propriedade. Por padrão, seu valor é Infinito, o que significa que todos os níveis dos nós serão expandidos. Você pode controlar a profundidade inicial de expansão definindo essa propriedade como um valor numérico. Por exemplo, 0 mostrará apenas nós na raiz da raiz, 1 mostrará nós na raiz e seus nós filhos e assim por diante.

    Coleção Infantil

    Quando estamos usando a opção de coleção filho, cada objeto de dados contém uma coleção filho, que é preenchida com itens do mesmo tipo que o objeto de dados pai. Dessa forma, cada registro na grade da árvore terá uma referência direta a qualquer um de seus filhos. Nesse caso, a propriedade de dados de nossa grade de árvore que contém a fonte de dados original será uma coleção definida hierarquicamente.

    Para este exemplo, vamos usar a seguinte estrutura de coleção:

    const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            // ...
        ]
    },
    // ...
]

    Agora vamos começar importando nossadata coleção e vinculando-a à nossa grade de árvore.

    Para que a grade de árvore construa a hierarquia, teremos que definir suachildDataKey propriedade para o nome da coleção filha usada em cada um dos nossos objetos de dados. No nosso caso, essa será a coleção dos Funcionários. Além disso, podemos desativar a geração automática de colunas e defini-las manualmente, comparando-as às propriedades reais dos nossos objetos de dados. (A coleção Funcionários será usada automaticamente para a hierarquia, então não há necessidade de incluí-la nas definições das colunas.)

    Agora podemos ativar as funcionalidades de seleção de linhas e paginação da grade da árvore usando erowSelection adicionar oIgrPaginator elemento. Também podemos ativar os recursos de resumos, filtragem, ordenação, edição, movimentação e redimensionamento para cada uma de nossas colunas.

    Por fim, podemos ativar a barra de ferramentas da nossa grade de árvore, junto com as funcionalidades de ocultação de colunas, fixação de colunas e exportação, usando respectivamente oIgrGridToolbar,IgrGridToolbarHiding​IgrGridToolbarPinning eIgrGridToolbarExporter​

    Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de grade de árvore.

    Chaves primárias e estrangeiras

    Quando usamos a opção de chave primária e estrangeira, cada objeto de dados contém uma chave primária e uma chave estrangeira. A chave primária é o identificador único do objeto de dados atual e a chave estrangeira é o identificador único de seu pai. Nesse caso, adata propriedade da nossa grade de árvore que contém a fonte de dados original será uma coleção plana.

    const data = [
    { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
    { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
    { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
    { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
    { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
    { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
    { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
    { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
    { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
    { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
];

    Nos dados de exemplo acima, todos os registros possuem um ID, um ParentID e algumas propriedades adicionais como Nome, CargoCargo e Idade. Como mencionado anteriormente, o ID dos registros deve ser único, pois será nossoprimaryKey. O ParentID contém o ID do nó pai e pode ser definido como umforeignKey. Se uma linha tem um ParentID que não corresponde a nenhuma linha da grade da árvore, isso significa que essa linha é uma linha raiz.

    A relação pai-filho é configurada usando as propriedades e aprimaryKey​foreignKey grade da árvore.

    Aqui está o modelo do componente que demonstra como configurar a grade de árvore para exibir os dados definidos na coleção plana acima:

    Além disso, habilitaremos o recurso de seleção de linha da grade de árvore usando a propriedade rowSelection e também os recursos de filtragem, classificação, edição, movimentação e redimensionamento para cada uma de nossas colunas.

    E aqui está o resultado final:

    Persistência e Integração

    O recuo da célula da grade de árvore persiste em outros recursos de grade de árvore, como filtragem, classificação e paginação.

    • QuandoSorting é aplicado em uma coluna, as linhas de dados são ordenadas por níveis. Isso significa que as linhas do nível raiz serão ordenadas independentemente de seus respectivos filhos. As coleções infantis deles serão organizadas separadamente, e assim por diante.
    • A primeira coluna (aquela que tem avisibleIndex de 0) é sempre a coluna da árvore.
    • A coluna que termina com avisibleIndex de 0 após operações como pinar colunas, ocultar colunas e mover colunas torna-se a coluna árvore.
    • As planilhas do Excel exportadas refletem a hierarquia agrupando os registros à medida que são agrupados na própria grade de árvore. Todos os estados expandidos de registros também seriam persistidos e refletidos.
    • Ao exportar para CSV, os níveis e estados expandidos são ignorados e todos os dados são exportados como simples.

    Referências de API

    Recursos adicionais

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.