Descripción general y configuración de la cuadrícula de árbol de Web Components

La cuadrícula de árbol Ignite UI for Web Components se utiliza para visualizar y manipular datos jerárquicos o planos con facilidad. Vincule rápidamente sus datos con muy poco código o utilice una variedad de eventos para personalizar diferentes comportamientos. Este componente proporciona un amplio conjunto de funciones como selección de datos, filtrado de estilo Excel, ordenación, paginación, creación de plantillas y movimiento de columnas. La visualización de datos tabulares nunca ha sido tan fácil y atractiva gracias a la cuadrícula de árbol de la interfaz de usuario basada en Material Table.

Ejemplo de cuadrícula de árbol de Web Components

En este ejemplo, puede ver cómo los usuarios pueden manipular datos jerárquicos o planos. Hemos incluido opciones de filtrado y clasificación, fijación y ocultación, selección de filas, exportación a Excel y CSV.

Ejemplo

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesNestedDataItem {
    public constructor(init: Partial<EmployeesNestedDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public Name: string;
    public Title: string;
    public Employees: EmployeesNestedDataItem_EmployeesItem[];

}
export class EmployeesNestedDataItem_EmployeesItem {
    public constructor(init: Partial<EmployeesNestedDataItem_EmployeesItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Title: string;

}
export class EmployeesNestedData extends Array<EmployeesNestedDataItem> {
    public constructor(items: Array<EmployeesNestedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesNestedDataItem(
                {
                    ID: 1,
                    Age: 55,
                    Salary: 80000,
                    Productivity: 90,
                    City: `Berlin`,
                    Country: `Germany`,
                    Phone: `609-202-505`,
                    HireDate: `2008-03-20`,
                    Name: `John Winchester`,
                    Title: `Development Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 4,
                    Age: 42,
                    Salary: 90000,
                    Productivity: 80,
                    City: `Kielce`,
                    Country: `Poland`,
                    Phone: `609-202-505`,
                    HireDate: `2014-01-22`,
                    Name: `Ana Sanders`,
                    Title: `CEO`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 44,
                            Salary: 80000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-202-505`,
                            HireDate: `2014-04-04`,
                            ID: 14,
                            Name: `Laurence Johnson`,
                            Title: `Director`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 25,
                            Salary: 85000,
                            Productivity: 55,
                            City: `Paris`,
                            Country: `France`,
                            Phone: `609-202-505`,
                            HireDate: `2017-11-09`,
                            ID: 5,
                            Name: `Elizabeth Richards`,
                            Title: `Vice President`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 39,
                            Salary: 88000,
                            Productivity: 88,
                            City: `London`,
                            Country: `UK`,
                            Phone: `609-202-505`,
                            HireDate: `2010-03-22`,
                            ID: 13,
                            Name: `Trevor Ashworth`,
                            Title: `Director`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 18,
                    Age: 49,
                    Salary: 77000,
                    Productivity: 70,
                    City: `Manchester`,
                    Country: `UK`,
                    Phone: `222-555-577`,
                    HireDate: `2014-01-22`,
                    Name: `Victoria Lincoln`,
                    Title: `Senior Accountant`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 23,
                            Name: `Thomas Burke`,
                            Title: `Senior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 22,
                            Name: `Michael Anderson`,
                            Title: `Junior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 21,
                            Name: `Roland Reyes`,
                            Title: `Accountant Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 24,
                            Name: `Monica Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 61,
                    Salary: 85000,
                    Productivity: 890,
                    City: `Lyon`,
                    Country: `France`,
                    Phone: `259-266-887`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Localization Developer`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 35,
                    Age: 35,
                    Salary: 75000,
                    Productivity: 75,
                    City: `Warasw`,
                    Country: `Poland`,
                    Phone: `688-244-844`,
                    HireDate: `2014-01-22`,
                    Name: `Janine Munoz`,
                    Title: `HR`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 49,
                    Salary: 95000,
                    Productivity: 80,
                    City: `Krakow`,
                    Country: `Poland`,
                    Phone: `677-266-555`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Sales Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule, WebPaginatorDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcGridToolbarTitleComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";



ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private treeGrid: IgcTreeGridComponent
    private employees: IgcGridToolbarTitleComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        var employees = this.employees = document.getElementById('Employees') as IgcGridToolbarTitleComponent;

        this._bind = () => {
            treeGrid.data = this.employeesNestedData;
        }
        this._bind();
    }

    private _employeesNestedData: EmployeesNestedData = null;
    public get employeesNestedData(): EmployeesNestedData {
        if (this._employeesNestedData == null)
        {
            this._employeesNestedData = new EmployeesNestedData();
        }
        return this._employeesNestedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
            WebPaginatorDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        child-data-key="Employees"
        row-selection="multiple"
        moving="true"
        allow-filtering="true"
        filter-mode="excelStyleFilter">
            <igc-paginator
            >
            </igc-paginator>
            <igc-grid-toolbar
            >
                <igc-grid-toolbar-title
                name="Employees"
                id="Employees">
                </igc-grid-toolbar-title>
                <igc-grid-toolbar-actions
                >
                    <igc-grid-toolbar-hiding
                    >
                    </igc-grid-toolbar-hiding>
                    <igc-grid-toolbar-pinning
                    >
                    </igc-grid-toolbar-pinning>
                    <igc-grid-toolbar-exporter
                    export-csv="true"
                    export-excel="true">
                    </igc-grid-toolbar-exporter>
                </igc-grid-toolbar-actions>
            </igc-grid-toolbar>
            <igc-column
            field="Name"
            header="Name"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true"
            has-summary="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            header="Age"
            data-type="number"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Primeros pasos con Ignite UI for Web Components cuadrícula de árboles

dependencias

Para comenzar con la cuadrícula de árbol Web Components, primero debe instalar el igniteui-webcomponents-grids paquete.

npm install --save igniteui-webcomponents-grids
cmd

También debe incluir la siguiente importación para utilizar la cuadrícula de árbol:

import 'igniteui-webcomponents-grids/grids/combined';
typescript

También se debe hacer referencia a los estilos correspondientes. Puede elegir la opción clara u oscura para uno de los temas y, según la configuración de su proyecto, importarlo:

import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
typescript

O para vincularlo:

<link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>
typescript

Para obtener más detalles sobre cómo personalizar la apariencia de la cuadrícula de árbol, puede consultar la sección de estilo.

Uso

La cuadrícula de árbol comparte muchas características con la cuadrícula, pero también agrega la capacidad de mostrar sus datos jerárquicamente. Para lograr esto, la cuadrícula de árbol nos proporciona un par de formas de definir las relaciones entre nuestros objetos de datos: usando una colección secundaria para cada objeto de datos o usando claves primarias y externas para cada objeto de datos.

Células de árbol

Independientemente de qué opción se utilice para construir la jerarquía de la cuadrícula de árbol (colección secundaria o claves primarias y externas), las filas de la cuadrícula de árbol se construyen con dos tipos de celdas:

• GridCell: celda ordinaria que contiene un valor.
• TreeGridCell: celda de árbol que contiene un valor, un indicador de expansión/contraer y un elemento div de sangría, que se basa en el nivel de la fila de la celda. Se puede acceder al nivel de un componente de fila a través de la propiedad de level de su treeRow interno.

Cada fila puede tener solo una celda de árbol, pero puede tener múltiples (o ninguna) celdas ordinarias.

Profundidad de expansión inicial

Inicialmente, la cuadrícula de árbol expandirá todos los niveles de nodo y los mostrará. Este comportamiento se puede configurar mediante la ExpansionDepth propiedad. De forma predeterminada, su valor es Infinity, lo que significa que se expandirán todos los niveles de nodo. Puede controlar la profundidad de expansión inicial estableciendo esta propiedad en un valor numérico. Por ejemplo, 0 mostrará solo los nodos de nivel raíz,1 mostrará los nodos de nivel raíz y sus nodos secundarios, y así sucesivamente.​​

Colección infantil

Cuando usamos la opción de colección secundaria, cada objeto de datos contiene una colección secundaria, que se rellena con elementos del mismo tipo que el objeto de datos principal. De esta manera, cada registro en la cuadrícula de árbol tendrá una referencia directa a cualquiera de sus hijos. En este caso, la propiedad de datos de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección definida jerárquicamente.

Para este ejemplo, usemos la siguiente estructura de colección:

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: []
            },
            // ...
        ]
    },
    // ...
]
typescript

Ahora comencemos importando nuestra colección y vinculándola a nuestra Data cuadrícula de árbol.

<igc-tree-grid auto-generate="false" id="treeGrid" name="treeGrid">
    <igc-column field="name" header="Name" data-type="string"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date"></igc-column>
    <igc-column field="age" header="Age" data-type="number"></igc-column>
</igc-tree-grid>
html

    constructor() {
        var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        treeGrid.childDataKey = "Employees";
        treeGrid.data = this.employeesNestedData;
    }
ts

Para que la cuadrícula de árbol construya la jerarquía, tendremos que establecer su ChildDataKey propiedad en el nombre de la colección secundaria que se usa en cada uno de nuestros objetos de datos. En nuestro caso será la colección Empleados. Además, podemos desactivar la generación automática de columnas y definirlas manualmente haciéndolas coincidir con las propiedades reales de nuestros objetos de datos. (La colección Employees se usará automáticamente para la jerarquía, por lo que no es necesario incluirla en las definiciones de las columnas).

Ahora podemos habilitar las funciones de selección de filas y paginación de la cuadrícula de árbol utilizando las propiedades rowSelection y de paging. También podemos habilitar las funciones de resúmenes, filtrado, clasificación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

<igc-tree-grid auto-generate="false" id="treeGrid" child-data-key="Employees" row-selection="multiple" allow-filtering="true" moving="true">
    <igc-column field="name" header="Name" data-type="string" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="age" header="Age" data-type="number" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-paginator></igc-paginator>
</igc-tree-grid>
html

Finalmente, podemos habilitar la barra de herramientas de nuestra cuadrícula de árbol, junto con las funciones de ocultación de columnas, fijación de columnas y exportación mediante el uso de , IgcGridToolbar​ ​IgcGridToolbarHiding, IgcGridToolbarPinning y IgcGridToolbarExporter respectivamente.

<igc-tree-grid auto-generate="false" id="treeGrid" name="treeGrid" child-data-key="Employees" row-selection="multiple" allow-filtering="true" moving="true">
    <igc-column field="name" header="Name" data-type="string" sortable="true" resizable="true" has-summary="true" editable="true"></igc-column>
    <igc-column field="hireDate" header="Hire Date" data-type="date" sortable="true" resizable="true" editable="true"></igc-column>
    <igc-column field="age" header="Age" data-type="number" sortable="true" resizable="true" editable="true"></igc-column>
    <igc-paginator></igc-paginator>
    <igc-grid-toolbar>
        <igc-grid-toolbar-title> Employees </igc-grid-toolbar-title>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding> </igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning> </igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter export-csv="true" export-excel="true"> </igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-tree-grid>
html

Puede ver el resultado del código de arriba al principio de este artículo en la sección Ejemplo de cuadrícula de árbol.

Claves primarias y externas

Cuando utilizamos la opción de claves primarias y externas, cada objeto de datos contiene una clave primaria y una clave externa. La clave principal es el identificador único del objeto de datos actual y la clave externa es el identificador único de su objeto principal. En este caso, la propiedad data de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección 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 }
];
typescript

En los datos de ejemplo anteriores, todos los registros tienen un ID, un ParentID y algunas propiedades adicionales como Name, JobTitle y Age. Como se mencionó anteriormente, el ID de los registros debe ser único ya que será nuestro PrimaryKey. El ParentID contiene el ID del nodo primario y podría establecerse como un ForeignKey. Si una fila tiene un ParentID que no coincide con ninguna fila de la cuadrícula de árbol, significa que esta fila es una fila raíz.

La relación padre-hijo se configura mediante las propiedades y ForeignKey de la cuadrícula de PrimaryKey árbol.

Aquí está la plantilla del componente que demuestra cómo configurar la cuadrícula de árbol para mostrar los datos definidos en la colección plana anterior:

 <igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID" allow-filtering="true" moving="true" row-selection="multiple">
    <igc-column field="Name" data-type="string"></igc-column>
    <igc-column field="JobTitle" header="Job Title"></igc-column>
    <igc-column field="Age" data-type="number"></igc-column>
</igc-tree-grid>
html

Además, habilitaremos la función de selección de filas de la cuadrícula de árbol mediante el uso de la propiedad rowSelection y también las funciones de filtrado, ordenación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

 <igc-tree-grid auto-generate="false" name="treeGrid" id="treeGrid" primary-key="ID" foreign-key="ParentID" allow-filtering="true" moving="true" row-selection="multiple">
    <igc-column field="Name" data-type="string" sortable="true" editable="true" resizable="true"> </igc-column>
    <igc-column field="JobTitle" header="Job Title" data-type="string" sortable="true" editable="true" resizable="true"> </igc-column>
    <igc-column field="Age" data-type="number" sortable="true" editable="true" resizable="true"> </igc-column>
</igc-tree-grid>
html

Y aquí está el resultado final:

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesFlatDataItem {
    public constructor(init: Partial<EmployeesFlatDataItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Phone: string;
    public OnPTO: boolean;
    public ParentID: number;
    public Title: string;

}
export class EmployeesFlatData extends Array<EmployeesFlatDataItem> {
    public constructor(items: Array<EmployeesFlatDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDataItem(
                {
                    Age: 55,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    Phone: `0251-031259`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Development Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 42,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    Phone: `(21) 555-0091`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `CEO`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 49,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    Phone: `(071) 23 67 22 20`,
                    OnPTO: true,
                    ParentID: -1,
                    Title: `Accounting Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 61,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    Phone: `(21) 555-0091`,
                    OnPTO: false,
                    ParentID: -1,
                    Title: `Localization Manager`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 43,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    Phone: `0452-076545`,
                    OnPTO: true,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 29,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    Phone: `(14) 555-8122`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 31,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    Phone: `7675-3425`,
                    OnPTO: false,
                    ParentID: 1,
                    Title: `Software Development Team Lead`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 35,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    Phone: `0695-34 67 21`,
                    OnPTO: true,
                    ParentID: 11,
                    Title: `Senior Software Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    Phone: `981-443655`,
                    OnPTO: false,
                    ParentID: 4,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    Phone: `(2) 283-2951`,
                    OnPTO: true,
                    ParentID: 4,
                    Title: `Vice President`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    Phone: `981-443655`,
                    OnPTO: true,
                    ParentID: 5,
                    Title: `Director`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 44,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    Phone: `(505) 555-5939`,
                    OnPTO: false,
                    ParentID: 18,
                    Title: `Senior Accountant`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 50,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    Phone: `035-640230`,
                    OnPTO: false,
                    ParentID: 10,
                    Title: `Senior Localization Developer`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 27,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    Phone: `0342-023176`,
                    OnPTO: true,
                    ParentID: 10,
                    Title: `Senior Localization`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    Phone: `069-0245984`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 39,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    Phone: `(91) 745 6200`,
                    OnPTO: false,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
                new EmployeesFlatDataItem(
                {
                    Age: 25,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    Phone: `069-0245984`,
                    OnPTO: true,
                    ParentID: 7,
                    Title: `Localization Intern`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesFlatData;
        }
        this._bind();
    }

    private _employeesFlatData: EmployeesFlatData = null;
    public get employeesFlatData(): EmployeesFlatData {
        if (this._employeesFlatData == null)
        {
            this._employeesFlatData = new EmployeesFlatData();
        }
        return this._employeesFlatData;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        primary-key="ID"
        foreign-key="ParentID"
        allow-filtering="true"
        moving="true"
        row-selection="multiple">
            <igc-column
            field="Name"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Title"
            header="Job Title"
            data-type="string"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            sortable="true"
            editable="true"
            resizable="true">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

Persistencia e Integración

La sangría de la celda de la cuadrícula de árbol persiste en otras entidades de cuadrícula de árbol, como el filtrado, la ordenación y la paginación.

• Cuando Sorting se aplica en una columna, las filas de datos se ordenan por niveles. Esto significa que las filas de nivel raíz se ordenarán independientemente de sus respectivos elementos secundarios. Sus respectivas colecciones secundarias también se ordenarán de forma independiente, y así sucesivamente.
• La primera columna (la que tiene un VisibleIndex de 0) es siempre la columna del árbol.
• La columna que termina con un VisibleIndex de 0 después de operaciones como la fijación de columnas, la ocultación de columnas y el movimiento de columnas se convierte en la columna de árbol.
• Las hojas de cálculo de Excel exportadas reflejan la jerarquía agrupando los registros tal como están agrupados en la propia cuadrícula de árbol. Todos los estados expandidos de los registros también se conservarán y reflejarán.
• Al exportar a CSV, los niveles y los estados expandidos se ignoran y todos los datos se exportan como planos.

Configuración de estilo de cuadrícula de árbol de Web Components

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

<igc-tree-grid class="tree-grid">
ts

Luego configure las propiedades CSS relacionadas para esa clase:

.tree-grid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}
css

EXAMPLE

DATA

TS

HTML

CSS

export class EmployeesNestedDataItem {
    public constructor(init: Partial<EmployeesNestedDataItem>) {
        Object.assign(this, init);
    }

    public ID: number;
    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public Name: string;
    public Title: string;
    public Employees: EmployeesNestedDataItem_EmployeesItem[];

}
export class EmployeesNestedDataItem_EmployeesItem {
    public constructor(init: Partial<EmployeesNestedDataItem_EmployeesItem>) {
        Object.assign(this, init);
    }

    public Age: number;
    public Salary: number;
    public Productivity: number;
    public City: string;
    public Country: string;
    public Phone: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public Title: string;

}
export class EmployeesNestedData extends Array<EmployeesNestedDataItem> {
    public constructor(items: Array<EmployeesNestedDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesNestedDataItem(
                {
                    ID: 1,
                    Age: 55,
                    Salary: 80000,
                    Productivity: 90,
                    City: `Berlin`,
                    Country: `Germany`,
                    Phone: `609-202-505`,
                    HireDate: `2008-03-20`,
                    Name: `John Winchester`,
                    Title: `Development Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 4,
                    Age: 42,
                    Salary: 90000,
                    Productivity: 80,
                    City: `Kielce`,
                    Country: `Poland`,
                    Phone: `609-202-505`,
                    HireDate: `2014-01-22`,
                    Name: `Ana Sanders`,
                    Title: `CEO`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 44,
                            Salary: 80000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-202-505`,
                            HireDate: `2014-04-04`,
                            ID: 14,
                            Name: `Laurence Johnson`,
                            Title: `Director`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 25,
                            Salary: 85000,
                            Productivity: 55,
                            City: `Paris`,
                            Country: `France`,
                            Phone: `609-202-505`,
                            HireDate: `2017-11-09`,
                            ID: 5,
                            Name: `Elizabeth Richards`,
                            Title: `Vice President`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 39,
                            Salary: 88000,
                            Productivity: 88,
                            City: `London`,
                            Country: `UK`,
                            Phone: `609-202-505`,
                            HireDate: `2010-03-22`,
                            ID: 13,
                            Name: `Trevor Ashworth`,
                            Title: `Director`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 18,
                    Age: 49,
                    Salary: 77000,
                    Productivity: 70,
                    City: `Manchester`,
                    Country: `UK`,
                    Phone: `222-555-577`,
                    HireDate: `2014-01-22`,
                    Name: `Victoria Lincoln`,
                    Title: `Senior Accountant`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 23,
                            Name: `Thomas Burke`,
                            Title: `Senior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 22,
                            Name: `Michael Anderson`,
                            Title: `Junior Accountant`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 21,
                            Name: `Roland Reyes`,
                            Title: `Accountant Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 24,
                            Name: `Monica Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 61,
                    Salary: 85000,
                    Productivity: 890,
                    City: `Lyon`,
                    Country: `France`,
                    Phone: `259-266-887`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Localization Developer`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 35,
                    Age: 35,
                    Salary: 75000,
                    Productivity: 75,
                    City: `Warasw`,
                    Country: `Poland`,
                    Phone: `688-244-844`,
                    HireDate: `2014-01-22`,
                    Name: `Janine Munoz`,
                    Title: `HR`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 43,
                            Salary: 70000,
                            Productivity: 80,
                            City: `Hamburg`,
                            Country: `Germany`,
                            Phone: `609-444-555`,
                            HireDate: `2011-06-03`,
                            ID: 3,
                            Name: `Michael Burke`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 31,
                            Salary: 90000,
                            Productivity: 80,
                            City: `Warasw`,
                            Country: `Poland`,
                            Phone: `609-222-205`,
                            HireDate: `2014-08-18`,
                            ID: 11,
                            Name: `Monica Reyes`,
                            Title: `Software Development Team Lead`
                        })]

                }),
                new EmployeesNestedDataItem(
                {
                    ID: 10,
                    Age: 49,
                    Salary: 95000,
                    Productivity: 80,
                    City: `Krakow`,
                    Country: `Poland`,
                    Phone: `677-266-555`,
                    HireDate: `2010-01-01`,
                    Name: `Yang Wang`,
                    Title: `Sales Manager`,
                    Employees: [
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 29,
                            Salary: 60000,
                            Productivity: 80,
                            City: `Munich`,
                            Country: `Germany`,
                            Phone: `609-333-444`,
                            HireDate: `2009-06-19`,
                            ID: 2,
                            Name: `Thomas Anderson`,
                            Title: `Senior Software Developer`
                        }),
                        new EmployeesNestedDataItem_EmployeesItem(
                        {
                            Age: 35,
                            Salary: 70000,
                            Productivity: 70,
                            City: `Koln`,
                            Country: `Germany`,
                            Phone: `609-502-525`,
                            HireDate: `2015-09-17`,
                            ID: 6,
                            Name: `Roland Mendel`,
                            Title: `Senior Software Developer`
                        })]

                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesNestedDataItem, EmployeesNestedDataItem_EmployeesItem, EmployeesNestedData } from './EmployeesNestedData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private treeGrid: IgcTreeGridComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;

        this._bind = () => {
            treeGrid.data = this.employeesNestedData;
        }
        this._bind();
    }

    private _employeesNestedData: EmployeesNestedData = null;
    public get employeesNestedData(): EmployeesNestedData {
        if (this._employeesNestedData == null)
        {
            this._employeesNestedData = new EmployeesNestedData();
        }
        return this._employeesNestedData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-tree-grid
        auto-generate="false"
        name="treeGrid"
        id="treeGrid"
        id="treeGrid"
        child-data-key="Employees">
            <igc-column
            field="Name"
            header="Name"
            data-type="string">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date">
            </igc-column>
            <igc-column
            field="Age"
            header="Age"
            data-type="number">
            </igc-column>
            <igc-column
            field="salary"
            header="Salary"
            data-type="number">
            </igc-column>
            <igc-column
            field="productivity"
            header="Productivity"
            data-type="number">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

#treeGrid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}

cssコピー

Edit in: Codesandbox

Referencias de API

• IgcTreeGridComponent
• IgcColumnComponent
• IgcGridToolbar
• IgcTreeGridRecord

Recursos adicionales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub