Descripción general del cambio de tamaño de la columna de cuadrícula de árbol de Web Components

La función de cambio de tamaño de columna Ignite UI for Web Components en Web Components cuadrícula de árbol permite a los usuarios ajustar fácilmente el ancho de las columnas de la IgcTreeGridComponent. De forma predeterminada, verán un indicador de cambio de tamaño temporal mientras la operación de cambio de tamaño de arrastre esté en efecto. Hay varias opciones de cambio de tamaño disponibles: Cambiar el tamaño de las columnas en píxeles/porcentajes, Restringir el tamaño de las columnas, Ajustar el tamaño automático de las columnas al hacer doble clic y Ajustar el tamaño automático de las columnas al inicializar.

Ejemplo de cambio de tamaño de columna de cuadrícula de árbol de Web Components

EXAMPLE

DATA

TS

HTML

CSS

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

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem(
                {
                    Address: `Obere Str. 57`,
                    Age: 55,
                    City: `Berlin`,
                    Country: `Germany`,
                    Fax: `030-0076545`,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    ParentID: -1,
                    Phone: `030-0074321`,
                    PostalCode: 12209,
                    Title: `Development Manager`,
                    LastName: `Winchester`,
                    FullAddress: `Obere Str. 57, Berlin, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Avda. de la Constitución 2222`,
                    Age: 42,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(51) 555-3745`,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    ParentID: -1,
                    Phone: `(5) 555-4729`,
                    PostalCode: 5021,
                    Title: `CEO`,
                    LastName: `Sanders`,
                    FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Mataderos 2312`,
                    Age: 49,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(5) 555-3995`,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    ParentID: -1,
                    Phone: `(5) 555-3932`,
                    PostalCode: 5023,
                    Title: `Accounting Manager`,
                    LastName: `Lincoln`,
                    FullAddress: `Mataderos 2312, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `120 Hanover Sq.`,
                    Age: 61,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-6750`,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    ParentID: -1,
                    Phone: `(171) 555-7788`,
                    PostalCode: 39000,
                    Title: `Localization Manager`,
                    LastName: `Wang`,
                    FullAddress: `120 Hanover Sq., London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Berguvsvägen 8`,
                    Age: 43,
                    City: `Luleå`,
                    Country: `Sweden`,
                    Fax: `0921-12 34 67`,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    ParentID: 1,
                    Phone: `0921-12 34 65`,
                    PostalCode: 29000,
                    Title: `Senior Software Developer`,
                    LastName: `Burke`,
                    FullAddress: `Berguvsvägen 8, Luleå, Sweden`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Forsterstr. 57`,
                    Age: 29,
                    City: `Mannheim`,
                    Country: `Germany`,
                    Fax: `0621-08924`,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    ParentID: 1,
                    Phone: `0621-08460`,
                    PostalCode: 68306,
                    Title: `Senior Software Developer`,
                    LastName: `Anderson`,
                    FullAddress: `Forsterstr. 57, Mannheim, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `24, place Kléber`,
                    Age: 31,
                    City: `Strasbourg`,
                    Country: `France`,
                    Fax: `88.60.15.32`,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    ParentID: 1,
                    Phone: `88.60.15.31`,
                    PostalCode: 67000,
                    Title: `Software Development Team Lead`,
                    LastName: `Reyes`,
                    FullAddress: `24, place Kléber, Strasbourg, France`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `C/ Araquil, 67`,
                    Age: 35,
                    City: `Madrid`,
                    Country: `Spain`,
                    Fax: `(911) 555 91 99`,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    ParentID: 11,
                    Phone: `(91) 555 22 82`,
                    PostalCode: 28023,
                    Title: `Senior Software Developer`,
                    LastName: `Mendel`,
                    FullAddress: `C/ Araquil, 67, Madrid, Spain`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `12, rue des Bouchers`,
                    Age: 44,
                    City: `Marseille`,
                    Country: `France`,
                    Fax: `91.24.45.41`,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    ParentID: 11,
                    Phone: `91.24.45.40`,
                    PostalCode: 13008,
                    Title: `Senior Software Developer`,
                    LastName: `Cooper`,
                    FullAddress: `12, rue des Bouchers, Marseille, France`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `23 Tsawassen Blvd.`,
                    Age: 44,
                    City: `Tsawassen`,
                    Country: `Canada`,
                    Fax: `(604) 555-3745`,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    ParentID: 4,
                    Phone: `(604) 555-4729`,
                    PostalCode: 19000,
                    Title: `Director`,
                    LastName: `Johnson`,
                    FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Fauntleroy Circus`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(125) 555-3798`,
                    HireDate: `2017-11-9`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    ParentID: 4,
                    Phone: `(171) 555-1212`,
                    PostalCode: 30000,
                    Title: `Vice President`,
                    LastName: `Richards`,
                    FullAddress: `Fauntleroy Circus, London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Cerrito 333`,
                    Age: 39,
                    City: `Buenos Aires`,
                    Country: `Argentina`,
                    Fax: `(121) 135-4892`,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    ParentID: 5,
                    Phone: `(1) 135-5555`,
                    PostalCode: 1010,
                    Title: `Director`,
                    LastName: `Ashworth`,
                    FullAddress: `Cerrito 333, Buenos Aires, Argentina`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Sierras de Granada 9993`,
                    Age: 44,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(153) 555-7293`,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    ParentID: 18,
                    Phone: `(5) 555-3392`,
                    PostalCode: 5022,
                    Title: `Senior Accountant`,
                    LastName: `Moreno`,
                    FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Hauptstr. 29`,
                    Age: 50,
                    City: `Sao Paulo`,
                    Country: `Brazil`,
                    Fax: `(531) 555-6691`,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    ParentID: 10,
                    Phone: `0452-076545`,
                    PostalCode: 3012,
                    Title: `Senior Localization Developer`,
                    LastName: `Rodriguez`,
                    FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Av. dos Lusíadas, 23`,
                    Age: 27,
                    City: `Bern`,
                    Country: `Switzerland`,
                    Fax: `(271) 335-357`,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    ParentID: 10,
                    Phone: `(11) 555-7647`,
                    PostalCode: 40000,
                    Title: `Senior Localization`,
                    LastName: `Harper`,
                    FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Berkeley Gardens 12`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-9199`,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    ParentID: 7,
                    Phone: `(171) 555-2282`,
                    PostalCode: 26000,
                    Title: `Localization Intern`,
                    LastName: `Simpson`,
                    FullAddress: `Berkeley Gardens 12, London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Walserweg 21`,
                    Age: 39,
                    City: `Aachen`,
                    Country: `Germany`,
                    Fax: `0241-059428`,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    ParentID: 7,
                    Phone: `0241-039123`,
                    PostalCode: 52066,
                    Title: `Localization Intern`,
                    LastName: `Chang`,
                    FullAddress: `Walserweg 21, Aachen, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `35 King George`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-3373`,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    ParentID: 7,
                    Phone: `(171) 555-0297`,
                    PostalCode: 48000,
                    Title: `Localization Intern`,
                    LastName: `Lewis`,
                    FullAddress: `35 King George, London, UK`
                }),
            ];
            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 { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
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.employeesFlatDetails;
        }
        this._bind();
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

    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"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="Name"
            data-type="string"
            resizable="true"
            min-width="60"
            max-width="250"
            width="220">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            resizable="true">
            </igc-column>
            <igc-column
            field="Address"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="City"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Country"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Fax"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            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.

El cambio de tamaño de columna también está habilitado por nivel de columna, lo que significa que IgcTreeGridComponent puede tener una combinación de columnas redimensionables y no redimensionables. Esto se hace a través de la resizable entrada de la IgcColumnComponent.

<igc-column field="ID" width="100px" resizable="true"></igc-column>
html

Puede suscribirse al evento de la ColumnResized​ ​IgcTreeGridComponent para implementar alguna lógica personalizada cuando se cambia el tamaño de una columna. Tanto los anchos de columna anteriores como los nuevos, así como el IgcColumnComponent objeto, se exponen a través de los argumentos de evento.

<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID">
    <igc-column field="Title" width="100px" resizable="true" width="100px"></igc-column>
    <igc-column field="HireDate" width="100px" resizable="true" width="100px"></igc-column>
</igc-tree-grid>
html

constructor() {
    var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    treeGrid.data = this.data;
    treeGrid.columnResized = this.onResize;
}

public onResize(event) {
    this.col = event.column;
    this.pWidth = event.prevWidth;
    this.nWidth = event.newWidth;
}
ts

Cambiar el tamaño de las columnas en píxeles/porcentajes

Dependiendo del escenario del usuario, el ancho de la columna se puede definir en píxeles, porcentajes o una combinación de ambos. Todos estos escenarios son compatibles con la función de cambio de tamaño de columna. De forma predeterminada, si una columna no tiene el ancho establecido, se ajusta al espacio disponible con el ancho establecido en píxeles.

Esto significa que es posible la siguiente configuración:

<igc-tree-grid id="data" primary-key="ID" foreign-key="ParentID" auto-generate="false">
    <igc-column field="Title" resizable="true" width="10%"></igc-column>
    <igc-column field="HireDate" resizable="true" width="100px"></igc-column>
    <igc-column field="Age" data-type="Number" resizable="true"></igc-column>
</igc-tree-grid>
html

Hay una ligera diferencia en la forma en que funciona el cambio de tamaño para las columnas configuradas en píxeles y porcentajes.

Píxeles

Cambiar el tamaño de las columnas con ancho en píxeles funciona sumando o restando directamente la cantidad horizontal del movimiento del mouse del tamaño de la columna.

Porcentajes

Al cambiar el tamaño de las columnas con ancho en porcentajes, la cantidad horizontal del movimiento del mouse en píxeles se traduce aproximadamente a su porcentaje relativo al ancho de la cuadrícula. Las columnas siguen respondiendo y cualquier cambio de tamaño futuro de la cuadrícula también se reflejará en las columnas.

Restringir el cambio de tamaño de la columna

También puede configurar los anchos de columna mínimos y máximos permitidos. Esto se hace a través de las minWidth entradas y maxWidth de la IgcColumnComponent. En este caso, la operación de arrastre del indicador de cambio de tamaño está restringida para notificar al usuario que el tamaño de la columna no se puede cambiar fuera de los límites definidos por minWidth y maxWidth.

<igc-column field="ID" width="100px" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

Se permite mezclar los tipos de valores de ancho de columna mínimo y máximo (píxeles o porcentajes). Si los valores establecidos para mínimo y máximo se establecen en porcentajes, el tamaño de columna respectivo se limitará a esos tamaños exactos similares a los píxeles.

Esto significa que son posibles las siguientes configuraciones:

<igc-column field="ID" width="10%" resizable="true"
            min-width="60px" max-width="230px"></igc-column>
html

o

<igc-column field="ID" width="100px" resizable="true"
            min-width="5%" max-width="15%"></igc-column>
html

Tamaño automático de columnas al hacer doble clic

Se puede cambiar el tamaño de cada columna automáticamente haciendo doble clic en el lado derecho del encabezado; la columna se ajustará al valor de celda más largo actualmente visible, incluido el encabezado mismo. Este comportamiento está habilitado de forma predeterminada, no se necesita configuración adicional. Sin embargo, la columna no tendrá un tamaño automático en caso de que se establezca maxWidth en esa columna y el nuevo ancho exceda ese valor de maxWidth. En este caso, el tamaño de la columna se ajustará al valor maxWidth preestablecido.

También puede ajustar automáticamente el tamaño de una columna de forma dinámica mediante el método exposed autosize on IgcColumnComponent.

constructor() {
    var id = this.id = document.getElementById('ID') as IgcColumnComponent;
    id.autosize();
}
typescript

Tamaño automático de columnas en la inicialización

Cada columna se puede configurar para que tenga un tamaño automático en la inicialización estableciendo width en 'auto':

<igc-column width='auto'>
html

Cuando la columna se inicializa por primera vez en la vista, resuelve su ancho al tamaño de la celda o encabezado visible más largo. Tenga en cuenta que las celdas que están fuera de las filas visibles no se incluyen.

Este enfoque optimiza más el rendimiento que la inicialización de publicaciones con tamaño automático y se recomienda especialmente en los casos en los que necesita ajustar el tamaño automáticamente de una gran cantidad de columnas.

EXAMPLE

DATA

TS

HTML

CSS

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

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem(
                {
                    Address: `Obere Str. 57`,
                    Age: 55,
                    City: `Berlin`,
                    Country: `Germany`,
                    Fax: `030-0076545`,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    ParentID: -1,
                    Phone: `030-0074321`,
                    PostalCode: 12209,
                    Title: `Development Manager`,
                    LastName: `Winchester`,
                    FullAddress: `Obere Str. 57, Berlin, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Avda. de la Constitución 2222`,
                    Age: 42,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(51) 555-3745`,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    ParentID: -1,
                    Phone: `(5) 555-4729`,
                    PostalCode: 5021,
                    Title: `CEO`,
                    LastName: `Sanders`,
                    FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Mataderos 2312`,
                    Age: 49,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(5) 555-3995`,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    ParentID: -1,
                    Phone: `(5) 555-3932`,
                    PostalCode: 5023,
                    Title: `Accounting Manager`,
                    LastName: `Lincoln`,
                    FullAddress: `Mataderos 2312, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `120 Hanover Sq.`,
                    Age: 61,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-6750`,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    ParentID: -1,
                    Phone: `(171) 555-7788`,
                    PostalCode: 39000,
                    Title: `Localization Manager`,
                    LastName: `Wang`,
                    FullAddress: `120 Hanover Sq., London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Berguvsvägen 8`,
                    Age: 43,
                    City: `Luleå`,
                    Country: `Sweden`,
                    Fax: `0921-12 34 67`,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    ParentID: 1,
                    Phone: `0921-12 34 65`,
                    PostalCode: 29000,
                    Title: `Senior Software Developer`,
                    LastName: `Burke`,
                    FullAddress: `Berguvsvägen 8, Luleå, Sweden`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Forsterstr. 57`,
                    Age: 29,
                    City: `Mannheim`,
                    Country: `Germany`,
                    Fax: `0621-08924`,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    ParentID: 1,
                    Phone: `0621-08460`,
                    PostalCode: 68306,
                    Title: `Senior Software Developer`,
                    LastName: `Anderson`,
                    FullAddress: `Forsterstr. 57, Mannheim, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `24, place Kléber`,
                    Age: 31,
                    City: `Strasbourg`,
                    Country: `France`,
                    Fax: `88.60.15.32`,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    ParentID: 1,
                    Phone: `88.60.15.31`,
                    PostalCode: 67000,
                    Title: `Software Development Team Lead`,
                    LastName: `Reyes`,
                    FullAddress: `24, place Kléber, Strasbourg, France`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `C/ Araquil, 67`,
                    Age: 35,
                    City: `Madrid`,
                    Country: `Spain`,
                    Fax: `(911) 555 91 99`,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    ParentID: 11,
                    Phone: `(91) 555 22 82`,
                    PostalCode: 28023,
                    Title: `Senior Software Developer`,
                    LastName: `Mendel`,
                    FullAddress: `C/ Araquil, 67, Madrid, Spain`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `12, rue des Bouchers`,
                    Age: 44,
                    City: `Marseille`,
                    Country: `France`,
                    Fax: `91.24.45.41`,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    ParentID: 11,
                    Phone: `91.24.45.40`,
                    PostalCode: 13008,
                    Title: `Senior Software Developer`,
                    LastName: `Cooper`,
                    FullAddress: `12, rue des Bouchers, Marseille, France`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `23 Tsawassen Blvd.`,
                    Age: 44,
                    City: `Tsawassen`,
                    Country: `Canada`,
                    Fax: `(604) 555-3745`,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    ParentID: 4,
                    Phone: `(604) 555-4729`,
                    PostalCode: 19000,
                    Title: `Director`,
                    LastName: `Johnson`,
                    FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Fauntleroy Circus`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(125) 555-3798`,
                    HireDate: `2017-11-9`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    ParentID: 4,
                    Phone: `(171) 555-1212`,
                    PostalCode: 30000,
                    Title: `Vice President`,
                    LastName: `Richards`,
                    FullAddress: `Fauntleroy Circus, London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Cerrito 333`,
                    Age: 39,
                    City: `Buenos Aires`,
                    Country: `Argentina`,
                    Fax: `(121) 135-4892`,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    ParentID: 5,
                    Phone: `(1) 135-5555`,
                    PostalCode: 1010,
                    Title: `Director`,
                    LastName: `Ashworth`,
                    FullAddress: `Cerrito 333, Buenos Aires, Argentina`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Sierras de Granada 9993`,
                    Age: 44,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(153) 555-7293`,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    ParentID: 18,
                    Phone: `(5) 555-3392`,
                    PostalCode: 5022,
                    Title: `Senior Accountant`,
                    LastName: `Moreno`,
                    FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Hauptstr. 29`,
                    Age: 50,
                    City: `Sao Paulo`,
                    Country: `Brazil`,
                    Fax: `(531) 555-6691`,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    ParentID: 10,
                    Phone: `0452-076545`,
                    PostalCode: 3012,
                    Title: `Senior Localization Developer`,
                    LastName: `Rodriguez`,
                    FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Av. dos Lusíadas, 23`,
                    Age: 27,
                    City: `Bern`,
                    Country: `Switzerland`,
                    Fax: `(271) 335-357`,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    ParentID: 10,
                    Phone: `(11) 555-7647`,
                    PostalCode: 40000,
                    Title: `Senior Localization`,
                    LastName: `Harper`,
                    FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Berkeley Gardens 12`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-9199`,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    ParentID: 7,
                    Phone: `(171) 555-2282`,
                    PostalCode: 26000,
                    Title: `Localization Intern`,
                    LastName: `Simpson`,
                    FullAddress: `Berkeley Gardens 12, London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Walserweg 21`,
                    Age: 39,
                    City: `Aachen`,
                    Country: `Germany`,
                    Fax: `0241-059428`,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    ParentID: 7,
                    Phone: `0241-039123`,
                    PostalCode: 52066,
                    Title: `Localization Intern`,
                    LastName: `Chang`,
                    FullAddress: `Walserweg 21, Aachen, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `35 King George`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-3373`,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    ParentID: 7,
                    Phone: `(171) 555-0297`,
                    PostalCode: 48000,
                    Title: `Localization Intern`,
                    LastName: `Lewis`,
                    FullAddress: `35 King George, London, UK`
                }),
            ];
            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 { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
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.employeesFlatDetails;
        }
        this._bind();
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

    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"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="Name"
            header="Name"
            data-type="string"
            resizable="true"
            width="220px"
            min-width="200px"
            max-width="250px">
            </igc-column>
            <igc-column
            field="Title"
            header="Title"
            data-type="string"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="Address"
            data-type="string"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="City"
            data-type="string"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="Country"
            data-type="string"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="Fax"
            data-type="string"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            resizable="true"
            width="auto">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            resizable="true"
            width="auto">
            </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

Estilo

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 el color del controlador de cambio de tamaño, primero debe establecer una clase para la cuadrícula:

<igc-tree-grid class="grid"></igc-tree-grid>
html

Luego establezca la propiedad CSS relacionada para esa clase:

.grid {
    --ig-grid-resize-line-color: #f35b04;
}
css

Manifestación

EXAMPLE

DATA

TS

HTML

CSS

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

    public Address: string;
    public Age: number;
    public City: string;
    public Country: string;
    public Fax: string;
    public HireDate: string;
    public ID: number;
    public Name: string;
    public ParentID: number;
    public Phone: string;
    public PostalCode: number;
    public Title: string;
    public LastName: string;
    public FullAddress: string;

}
export class EmployeesFlatDetails extends Array<EmployeesFlatDetailsItem> {
    public constructor(items: Array<EmployeesFlatDetailsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EmployeesFlatDetailsItem(
                {
                    Address: `Obere Str. 57`,
                    Age: 55,
                    City: `Berlin`,
                    Country: `Germany`,
                    Fax: `030-0076545`,
                    HireDate: `2008-03-20`,
                    ID: 1,
                    Name: `Johnathan Winchester`,
                    ParentID: -1,
                    Phone: `030-0074321`,
                    PostalCode: 12209,
                    Title: `Development Manager`,
                    LastName: `Winchester`,
                    FullAddress: `Obere Str. 57, Berlin, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Avda. de la Constitución 2222`,
                    Age: 42,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(51) 555-3745`,
                    HireDate: `2014-01-22`,
                    ID: 4,
                    Name: `Ana Sanders`,
                    ParentID: -1,
                    Phone: `(5) 555-4729`,
                    PostalCode: 5021,
                    Title: `CEO`,
                    LastName: `Sanders`,
                    FullAddress: `Avda. de la Constitución 2222, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Mataderos 2312`,
                    Age: 49,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(5) 555-3995`,
                    HireDate: `2014-01-22`,
                    ID: 18,
                    Name: `Victoria Lincoln`,
                    ParentID: -1,
                    Phone: `(5) 555-3932`,
                    PostalCode: 5023,
                    Title: `Accounting Manager`,
                    LastName: `Lincoln`,
                    FullAddress: `Mataderos 2312, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `120 Hanover Sq.`,
                    Age: 61,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-6750`,
                    HireDate: `2010-01-01`,
                    ID: 10,
                    Name: `Yang Wang`,
                    ParentID: -1,
                    Phone: `(171) 555-7788`,
                    PostalCode: 39000,
                    Title: `Localization Manager`,
                    LastName: `Wang`,
                    FullAddress: `120 Hanover Sq., London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Berguvsvägen 8`,
                    Age: 43,
                    City: `Luleå`,
                    Country: `Sweden`,
                    Fax: `0921-12 34 67`,
                    HireDate: `2011-06-03`,
                    ID: 3,
                    Name: `Michael Burke`,
                    ParentID: 1,
                    Phone: `0921-12 34 65`,
                    PostalCode: 29000,
                    Title: `Senior Software Developer`,
                    LastName: `Burke`,
                    FullAddress: `Berguvsvägen 8, Luleå, Sweden`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Forsterstr. 57`,
                    Age: 29,
                    City: `Mannheim`,
                    Country: `Germany`,
                    Fax: `0621-08924`,
                    HireDate: `2009-06-19`,
                    ID: 2,
                    Name: `Thomas Anderson`,
                    ParentID: 1,
                    Phone: `0621-08460`,
                    PostalCode: 68306,
                    Title: `Senior Software Developer`,
                    LastName: `Anderson`,
                    FullAddress: `Forsterstr. 57, Mannheim, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `24, place Kléber`,
                    Age: 31,
                    City: `Strasbourg`,
                    Country: `France`,
                    Fax: `88.60.15.32`,
                    HireDate: `2014-08-18`,
                    ID: 11,
                    Name: `Monica Reyes`,
                    ParentID: 1,
                    Phone: `88.60.15.31`,
                    PostalCode: 67000,
                    Title: `Software Development Team Lead`,
                    LastName: `Reyes`,
                    FullAddress: `24, place Kléber, Strasbourg, France`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `C/ Araquil, 67`,
                    Age: 35,
                    City: `Madrid`,
                    Country: `Spain`,
                    Fax: `(911) 555 91 99`,
                    HireDate: `2015-09-17`,
                    ID: 6,
                    Name: `Roland Mendel`,
                    ParentID: 11,
                    Phone: `(91) 555 22 82`,
                    PostalCode: 28023,
                    Title: `Senior Software Developer`,
                    LastName: `Mendel`,
                    FullAddress: `C/ Araquil, 67, Madrid, Spain`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `12, rue des Bouchers`,
                    Age: 44,
                    City: `Marseille`,
                    Country: `France`,
                    Fax: `91.24.45.41`,
                    HireDate: `2009-10-11`,
                    ID: 12,
                    Name: `Sven Cooper`,
                    ParentID: 11,
                    Phone: `91.24.45.40`,
                    PostalCode: 13008,
                    Title: `Senior Software Developer`,
                    LastName: `Cooper`,
                    FullAddress: `12, rue des Bouchers, Marseille, France`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `23 Tsawassen Blvd.`,
                    Age: 44,
                    City: `Tsawassen`,
                    Country: `Canada`,
                    Fax: `(604) 555-3745`,
                    HireDate: `2014-04-04`,
                    ID: 14,
                    Name: `Laurence Johnson`,
                    ParentID: 4,
                    Phone: `(604) 555-4729`,
                    PostalCode: 19000,
                    Title: `Director`,
                    LastName: `Johnson`,
                    FullAddress: `23 Tsawassen Blvd., Tsawassen, Canada`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Fauntleroy Circus`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(125) 555-3798`,
                    HireDate: `2017-11-9`,
                    ID: 5,
                    Name: `Elizabeth Richards`,
                    ParentID: 4,
                    Phone: `(171) 555-1212`,
                    PostalCode: 30000,
                    Title: `Vice President`,
                    LastName: `Richards`,
                    FullAddress: `Fauntleroy Circus, London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Cerrito 333`,
                    Age: 39,
                    City: `Buenos Aires`,
                    Country: `Argentina`,
                    Fax: `(121) 135-4892`,
                    HireDate: `2010-03-22`,
                    ID: 13,
                    Name: `Trevor Ashworth`,
                    ParentID: 5,
                    Phone: `(1) 135-5555`,
                    PostalCode: 1010,
                    Title: `Director`,
                    LastName: `Ashworth`,
                    FullAddress: `Cerrito 333, Buenos Aires, Argentina`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Sierras de Granada 9993`,
                    Age: 44,
                    City: `México D.F.`,
                    Country: `Mexico`,
                    Fax: `(153) 555-7293`,
                    HireDate: `2014-04-04`,
                    ID: 17,
                    Name: `Antonio Moreno`,
                    ParentID: 18,
                    Phone: `(5) 555-3392`,
                    PostalCode: 5022,
                    Title: `Senior Accountant`,
                    LastName: `Moreno`,
                    FullAddress: `Sierras de Granada 9993, México D.F., Mexico`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Hauptstr. 29`,
                    Age: 50,
                    City: `Sao Paulo`,
                    Country: `Brazil`,
                    Fax: `(531) 555-6691`,
                    HireDate: `2007-11-18`,
                    ID: 7,
                    Name: `Pedro Rodriguez`,
                    ParentID: 10,
                    Phone: `0452-076545`,
                    PostalCode: 3012,
                    Title: `Senior Localization Developer`,
                    LastName: `Rodriguez`,
                    FullAddress: `Hauptstr. 29, Sao Paulo, Brazil`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Av. dos Lusíadas, 23`,
                    Age: 27,
                    City: `Bern`,
                    Country: `Switzerland`,
                    Fax: `(271) 335-357`,
                    HireDate: `2016-02-19`,
                    ID: 8,
                    Name: `Casey Harper`,
                    ParentID: 10,
                    Phone: `(11) 555-7647`,
                    PostalCode: 40000,
                    Title: `Senior Localization`,
                    LastName: `Harper`,
                    FullAddress: `Av. dos Lusíadas, 23, Bern, Switzerland`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Berkeley Gardens 12`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-9199`,
                    HireDate: `2017-11-09`,
                    ID: 15,
                    Name: `Patricia Simpson`,
                    ParentID: 7,
                    Phone: `(171) 555-2282`,
                    PostalCode: 26000,
                    Title: `Localization Intern`,
                    LastName: `Simpson`,
                    FullAddress: `Berkeley Gardens 12, London, UK`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `Walserweg 21`,
                    Age: 39,
                    City: `Aachen`,
                    Country: `Germany`,
                    Fax: `0241-059428`,
                    HireDate: `2010-03-22`,
                    ID: 9,
                    Name: `Francisco Chang`,
                    ParentID: 7,
                    Phone: `0241-039123`,
                    PostalCode: 52066,
                    Title: `Localization Intern`,
                    LastName: `Chang`,
                    FullAddress: `Walserweg 21, Aachen, Germany`
                }),
                new EmployeesFlatDetailsItem(
                {
                    Address: `35 King George`,
                    Age: 25,
                    City: `London`,
                    Country: `UK`,
                    Fax: `(171) 555-3373`,
                    HireDate: `2018-03-18`,
                    ID: 16,
                    Name: `Peter Lewis`,
                    ParentID: 7,
                    Phone: `(171) 555-0297`,
                    PostalCode: 48000,
                    Title: `Localization Intern`,
                    LastName: `Lewis`,
                    FullAddress: `35 King George, London, UK`
                }),
            ];
            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 { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

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

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

        this._bind = () => {
            grid.data = this.employeesFlatDetails;
        }
        this._bind();
    }

    private _employeesFlatDetails: EmployeesFlatDetails = null;
    public get employeesFlatDetails(): EmployeesFlatDetails {
        if (this._employeesFlatDetails == null)
        {
            this._employeesFlatDetails = new EmployeesFlatDetails();
        }
        return this._employeesFlatDetails;
    }

    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="grid"
        id="grid"
        id="grid"
        primary-key="ID"
        foreign-key="ParentID">
            <igc-column
            field="Name"
            data-type="string"
            resizable="true"
            min-width="60"
            max-width="250"
            width="220">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            resizable="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            resizable="true">
            </igc-column>
            <igc-column
            field="Address"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="City"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Country"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Fax"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            resizable="true">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            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 */

#grid {
    --ig-grid-resize-line-color: #f35b04;
}

cssコピー

Edit in: Codesandbox

Referencias de API

• IgcColumnComponent
• IgcTreeGridComponent

Recursos adicionales

• Virtualización y rendimiento
• Paginación
• Filtración
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Selección

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

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