Descripción general de los encabezados de varias columnas de cuadrícula de Web Components

La función Ignite UI for Web Components Encabezados de varias columnas de Web Components cuadrícula le permite agrupar columnas colocándolas debajo de un encabezado múltiple común. Cada grupo de encabezados de varias columnas del IgcGridComponent podría ser una representación de combinaciones entre otros grupos o columnas. Esta característica es especialmente útil cuando se trata de grandes conjuntos de datos en los que el desplazamiento horizontal puede ser engorroso.

Web Components Ejemplo de encabezados de varias columnas de cuadrícula

EXAMPLE

DATA

TS

HTML

CSS

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

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem(
                {
                    ID: `ALFKI`,
                    Company: `Alfreds Futterkiste`,
                    ContactName: `Maria Anders`,
                    ContactTitle: `Sales Representative`,
                    Address: `Obere Str. 57`,
                    City: `Berlin`,
                    Region: `East`,
                    PostalCode: 12209,
                    Country: `Germany`,
                    Phone: `030-0074321`,
                    Fax: `030-0076545`
                }),
                new CustomersDataItem(
                {
                    ID: `ANATR`,
                    Company: `Ana Trujillo Emparedados y helados`,
                    ContactName: `Ana Trujillo`,
                    ContactTitle: `Owner`,
                    Address: `Avda. de la Constitución 2222`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5021,
                    Country: `Mexico`,
                    Phone: `(5) 555-4729`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `ANTON`,
                    Company: `Antonio Moreno Taquería`,
                    ContactName: `Antonio Moreno`,
                    ContactTitle: `Owner`,
                    Address: `Mataderos 2312`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5023,
                    Country: `Mexico`,
                    Phone: `(5) 555-3932`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `AROUT`,
                    Company: `Around the Horn`,
                    ContactName: `Thomas Hardy`,
                    ContactTitle: `Sales Representative`,
                    Address: `120 Hanover Sq.`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 22000,
                    Country: `UK`,
                    Phone: `(171) 555-7788`,
                    Fax: `(171) 555-6750`
                }),
                new CustomersDataItem(
                {
                    ID: `BERGS`,
                    Company: `Berglunds snabbköp`,
                    ContactName: `Christina Berglund`,
                    ContactTitle: `Order Administrator`,
                    Address: `Berguvsvägen 8`,
                    City: `Luleå`,
                    Region: `South`,
                    PostalCode: 17000,
                    Country: `Sweden`,
                    Phone: `0921-12 34 65`,
                    Fax: `0921-12 34 67`
                }),
                new CustomersDataItem(
                {
                    ID: `BLAUS`,
                    Company: `Blauer See Delikatessen`,
                    ContactName: `Hanna Moos`,
                    ContactTitle: `Sales Representative`,
                    Address: `Forsterstr. 57`,
                    City: `Mannheim`,
                    Region: `East`,
                    PostalCode: 68306,
                    Country: `Germany`,
                    Phone: `0621-08460`,
                    Fax: `0621-08924`
                }),
                new CustomersDataItem(
                {
                    ID: `BLONP`,
                    Company: `Blondesddsl père et fils`,
                    ContactName: `Frédérique Citeaux`,
                    ContactTitle: `Marketing Manager`,
                    Address: `24, place Kléber`,
                    City: `Strasbourg`,
                    Region: `East`,
                    PostalCode: 67000,
                    Country: `France`,
                    Phone: `88.60.15.31`,
                    Fax: `88.60.15.32`
                }),
                new CustomersDataItem(
                {
                    ID: `BOLID`,
                    Company: `Bólido Comidas preparadas`,
                    ContactName: `Martín Sommer`,
                    ContactTitle: `Owner`,
                    Address: `C/ Araquil, 67`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28023,
                    Country: `Spain`,
                    Phone: `(91) 555 22 82`,
                    Fax: `(91) 555 91 99`
                }),
                new CustomersDataItem(
                {
                    ID: `BONAP`,
                    Company: `Bon app'`,
                    ContactName: `Laurence Lebihan`,
                    ContactTitle: `Owner`,
                    Address: `12, rue des Bouchers`,
                    City: `Marseille`,
                    Region: `West`,
                    PostalCode: 13008,
                    Country: `France`,
                    Phone: `91.24.45.40`,
                    Fax: `91.24.45.41`
                }),
                new CustomersDataItem(
                {
                    ID: `BOTTM`,
                    Company: `Bottom-Dollar Markets`,
                    ContactName: `Elizabeth Lincoln`,
                    ContactTitle: `Accounting Manager`,
                    Address: `23 Tsawassen Blvd.`,
                    City: `Tsawassen`,
                    Region: `BC`,
                    PostalCode: 28000,
                    Country: `Canada`,
                    Phone: `(604) 555-4729`,
                    Fax: `(604) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `BSBEV`,
                    Company: `B's Beverages`,
                    ContactName: `Victoria Ashworth`,
                    ContactTitle: `Sales Representative`,
                    Address: `Fauntleroy Circus`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 10000,
                    Country: `UK`,
                    Phone: `(171) 555-1212`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CACTU`,
                    Company: `Cactus Comidas para llevar`,
                    ContactName: `Patricio Simpson`,
                    ContactTitle: `Sales Agent`,
                    Address: `Cerrito 333`,
                    City: `Buenos Aires`,
                    Region: `East`,
                    PostalCode: 1010,
                    Country: `Argentina`,
                    Phone: `(1) 135-5555`,
                    Fax: `(1) 135-4892`
                }),
                new CustomersDataItem(
                {
                    ID: `CENTC`,
                    Company: `Centro comercial Moctezuma`,
                    ContactName: `Francisco Chang`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Sierras de Granada 9993`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5022,
                    Country: `Mexico`,
                    Phone: `(5) 555-3392`,
                    Fax: `(5) 555-7293`
                }),
                new CustomersDataItem(
                {
                    ID: `CHOPS`,
                    Company: `Chop-suey Chinese`,
                    ContactName: `Yang Wang`,
                    ContactTitle: `Owner`,
                    Address: `Hauptstr. 29`,
                    City: `Bern`,
                    Region: `East`,
                    PostalCode: 3012,
                    Country: `Switzerland`,
                    Phone: `0452-076545`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `COMMI`,
                    Company: `Comércio Mineiro`,
                    ContactName: `Pedro Afonso`,
                    ContactTitle: `Sales Associate`,
                    Address: `Av. dos Lusíadas, 23`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 34000,
                    Country: `Brazil`,
                    Phone: `(11) 555-7647`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CONSH`,
                    Company: `Consolidated Holdings`,
                    ContactName: `Elizabeth Brown`,
                    ContactTitle: `Sales Representative`,
                    Address: `Berkeley Gardens 12 Brewery`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 27000,
                    Country: `UK`,
                    Phone: `(171) 555-2282`,
                    Fax: `(171) 555-9199`
                }),
                new CustomersDataItem(
                {
                    ID: `DRACD`,
                    Company: `Drachenblut Delikatessen`,
                    ContactName: `Sven Ottlieb`,
                    ContactTitle: `Order Administrator`,
                    Address: `Walserweg 21`,
                    City: `Aachen`,
                    Region: `South`,
                    PostalCode: 52066,
                    Country: `Germany`,
                    Phone: `0241-039123`,
                    Fax: `0241-059428`
                }),
                new CustomersDataItem(
                {
                    ID: `DUMON`,
                    Company: `Du monde entier`,
                    ContactName: `Janine Labrune`,
                    ContactTitle: `Owner`,
                    Address: `67, rue des Cinquante Otages`,
                    City: `Nantes`,
                    Region: `East`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.67.88.88`,
                    Fax: `40.67.89.89`
                }),
                new CustomersDataItem(
                {
                    ID: `EASTC`,
                    Company: `Eastern Connection`,
                    ContactName: `Ann Devon`,
                    ContactTitle: `Sales Agent`,
                    Address: `35 King George`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 41000,
                    Country: `UK`,
                    Phone: `(171) 555-0297`,
                    Fax: `(171) 555-3373`
                }),
                new CustomersDataItem(
                {
                    ID: `ERNSH`,
                    Company: `Ernst Handel`,
                    ContactName: `Roland Mendel`,
                    ContactTitle: `Sales Manager`,
                    Address: `Kirchgasse 6`,
                    City: `Graz`,
                    Region: `South`,
                    PostalCode: 8010,
                    Country: `Austria`,
                    Phone: `7675-3425`,
                    Fax: `7675-3426`
                }),
                new CustomersDataItem(
                {
                    ID: `FAMIA`,
                    Company: `Familia Arquibaldo`,
                    ContactName: `Aria Cruz`,
                    ContactTitle: `Marketing Assistant`,
                    Address: `Rua Orós, 92`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 27000,
                    Country: `Brazil`,
                    Phone: `(11) 555-9857`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `FISSA`,
                    Company: `FISSA Fabrica Inter. Salchichas S.A.`,
                    ContactName: `Diego Roel`,
                    ContactTitle: `Accounting Manager`,
                    Address: `C/ Moralzarzal, 86`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28034,
                    Country: `Spain`,
                    Phone: `(91) 555 94 44`,
                    Fax: `(91) 555 55 93`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLIG`,
                    Company: `Folies gourmandes`,
                    ContactName: `Martine Rancé`,
                    ContactTitle: `Assistant Sales Agent`,
                    Address: `184, chaussée de Tournai`,
                    City: `Lille`,
                    Region: `South`,
                    PostalCode: 59000,
                    Country: `France`,
                    Phone: `20.16.10.16`,
                    Fax: `20.16.10.17`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLKO`,
                    Company: `Folk och fä HB`,
                    ContactName: `Maria Larsson`,
                    ContactTitle: `Owner`,
                    Address: `Åkergatan 24`,
                    City: `Bräcke`,
                    Region: `East`,
                    PostalCode: 36000,
                    Country: `Sweden`,
                    Phone: `0695-34 67 21`,
                    Fax: `0695 33-4455`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANK`,
                    Company: `Frankenversand`,
                    ContactName: `Peter Franken`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Berliner Platz 43`,
                    City: `München`,
                    Region: `East`,
                    PostalCode: 80805,
                    Country: `Germany`,
                    Phone: `089-0877310`,
                    Fax: `089-0877451`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANR`,
                    Company: `France restauration`,
                    ContactName: `Carine Schmitt`,
                    ContactTitle: `Marketing Manager`,
                    Address: `54, rue Royale`,
                    City: `Nantes`,
                    Region: `South`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.32.21.21`,
                    Fax: `40.32.21.20`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANS`,
                    Company: `Franchi S.p.A.`,
                    ContactName: `Paolo Accorti`,
                    ContactTitle: `Sales Representative`,
                    Address: `Via Monte Bianco 34`,
                    City: `Torino`,
                    Region: `East`,
                    PostalCode: 10100,
                    Country: `Italy`,
                    Phone: `011-4988260`,
                    Fax: `011-4988261`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule, WebColumnGroupDescriptionModule, PropertyEditorPanelDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule
);

export class Sample {

    private propertyEditor: IgcPropertyEditorPanelComponent
    private propertyEditorPropertyDescription1: IgcPropertyEditorPropertyDescriptionComponent
    private propertyEditorPropertyDescription2: IgcPropertyEditorPropertyDescriptionComponent
    private grid: IgcGridComponent
    private _bind: () => void;

    constructor() {
        var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
        var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1 = document.getElementById('propertyEditorPropertyDescription1') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webGridPinFirstGroupToggle = this.webGridPinFirstGroupToggle.bind(this);
        var propertyEditorPropertyDescription2 = this.propertyEditorPropertyDescription2 = document.getElementById('propertyEditorPropertyDescription2') as IgcPropertyEditorPropertyDescriptionComponent;
        this.webGridHideFirstGroupToggle = this.webGridHideFirstGroupToggle.bind(this);
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

        this._bind = () => {
            propertyEditor.componentRenderer = this.renderer;
            propertyEditor.target = this.grid;
            propertyEditorPropertyDescription1.buttonClicked = this.webGridPinFirstGroupToggle;
            propertyEditorPropertyDescription2.buttonClicked = this.webGridHideFirstGroupToggle;
            grid.data = this.customersData;
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

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

    public webGridPinFirstGroupToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
        const grid: IgcGridComponent = this.grid;
        const firstColumnGroup = grid.getColumnByName("Company").parent;
        firstColumnGroup.pinned = !firstColumnGroup.pinned;
        grid.markForCheck();
    }

    public webGridHideFirstGroupToggle(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
        const grid: IgcGridComponent = this.grid;
        const firstColumnGroup = grid.getColumnByName("Company").parent;
        firstColumnGroup.hidden = !firstColumnGroup.hidden;
        grid.markForCheck();
    }

}

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="options vertical">
        <igc-property-editor-panel
        name="PropertyEditor"
        id="PropertyEditor"
        description-type="WebGrid"
        is-horizontal="true"
        is-wrapping-enabled="true">
            <igc-property-editor-property-description
            value-type="Button"
            primitive-value="Toggle First Group Pinned"
            name="propertyEditorPropertyDescription1"
            id="propertyEditorPropertyDescription1">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            value-type="Button"
            primitive-value="Toggle First Group Hidden"
            name="propertyEditorPropertyDescription2"
            id="propertyEditorPropertyDescription2">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid">
            <igc-column
            field="ID"
            resizable="true">
            </igc-column>
            <igc-column-group
            header="General Information">
                <igc-column
                field="Company"
                sortable="true"
                resizable="true">
                </igc-column>
                <igc-column-group
                header="Personal Details">
                    <igc-column
                    field="ContactName"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="ContactTitle"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
            <igc-column-group
            header="Address Information">
                <igc-column-group
                header="Location">
                    <igc-column
                    field="Country"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Region"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="City"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Address"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
                <igc-column-group
                header="Contact Information">
                    <igc-column
                    field="Phone"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Fax"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="PostalCode"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
        </igc-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.

La declaración de encabezados de varias columnas se logra encapsulando un conjunto de columnas en un IgcColumnGroupComponent componente con IgcHeaderComponent información de título pasada.

<igc-grid allow-filtering="true">
    <igc-column-group header="Contact Information">
        <igc-column sortable="true" resizable="true" field="Phone"></igc-column>
        <igc-column sortable="true" resizable="true" field="Fax"></igc-column>
        <igc-column sortable="true" resizable="true" field="PostalCode"></igc-column>
    </igc-column-group>
</igc-grid>
html

Para alcanzar n-th el nivel de encabezados anidados, se debe seguir la declaración anterior. Por lo tanto, el anidamiento IgcColumnGroupComponent conduce al resultado deseado.

<igc-grid height="600px" allow-filtering="true">
    <igc-column-group header="General Information">
        <igc-column movable="true" sortable="true" resizable="true" field="CompanyName"></igc-column>
        <igc-column-group movable="true" header="Person Details">
            <igc-column movable="true" pinned="false" sortable="true" resizable="true" field="ContactName"></igc-column>
            <igc-column movable="true" sortable="true" resizable="true" field="ContactTitle"></igc-column>
        </igc-column-group>
    </igc-column-group>
</igc-grid>
html

Every IgcColumnGroupComponent supports moving, pinning and hiding.

Cuando hay un conjunto de columnas y grupos de columnas, la fijación solo funciona para las columnas principales del nivel superior. Más específicamente, no se permite fijar por grupos de columnas o columnas anidadas. Solo se permite moverse entre columnas y grupos de columnas cuando están en el mismo nivel en la jerarquía y ambos están en el mismo grupo. Cuando las columnas/grupos de columnas no están envueltos por el grupo actual, lo que significa que son columnas de nivel superior, se permite moverse entre columnas visibles completas.

<igc-grid height="600px" allow-filtering="true">
    <igc-column-group  movable="true" pinned="true" header="General Information">
        <igc-column movable="true" sortable="true" resizable="true" field="CompanyName"></igc-column>
    </igc-column-group>
    <igc-column sortable="true" resizable="true" field="Phone"></igc-column>
    <igc-column sortable="true" resizable="true" field="Fax"></igc-column>
    <igc-column sortable="true" resizable="true" field="PostalCode"></igc-column>
</igc-grid>
html

Plantilla de encabezado de varias columnas

Se puede crear una plantilla para cada uno de los grupos de columnas de la cuadrícula por separado. El siguiente fragmento de código demuestra cómo utilizar HeaderTemplate de un grupo de columnas:

<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>
html

constructor() {
    var addresss = this.addresss = document.getElementById('addressInfo') as IgcColumnGroupComponent;
    addresss.headerTemplate = this.columnGroupHeaderTemplate;
}

public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        ${ctx.column.header.toUpperCase()}
    `;
}
ts

Si desea volver a utilizar una sola plantilla para varios grupos de columnas, puede establecer la HeaderTemplate propiedad del grupo de columnas de la siguiente manera:

<igc-column-group id="generalInfo" header="General Information">
</igc-column-group>
<igc-column-group id="addressInfo" header="Address Information">
</igc-column-group>
html

constructor() {
    var general = this.general = document.getElementById('generalInfo') as IgcColumnGroupComponent;
    var addresss = this.address = document.getElementById('addressInfo') as IgcColumnGroupComponent;
    general.headerTemplate = this.columnGroupHeaderTemplate;
    addresss.headerTemplate = this.columnGroupHeaderTemplate;
}

public columnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        ${ctx.column.header.toUpperCase()}
    `;
}
ts

Si se cambia la plantilla de un encabezado y el grupo de columnas correspondiente se puede mover, debe establecer el atributo arrastrable en falso en los elementos con plantilla, para que pueda manejar cualquiera de los eventos que se aplican.

public columnHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
    return html`
        <igc-icon draggable="false" @click="${() => this.onClick()}"></igc-icon>
    `;
}
ts

El siguiente ejemplo demuestra cómo implementar grupos de columnas contraíbles utilizando plantillas de encabezado.

EXAMPLE

DATA

TS

HTML

CSS

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

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem(
                {
                    ID: `ALFKI`,
                    Company: `Alfreds Futterkiste`,
                    ContactName: `Maria Anders`,
                    ContactTitle: `Sales Representative`,
                    Address: `Obere Str. 57`,
                    City: `Berlin`,
                    Region: `East`,
                    PostalCode: 12209,
                    Country: `Germany`,
                    Phone: `030-0074321`,
                    Fax: `030-0076545`
                }),
                new CustomersDataItem(
                {
                    ID: `ANATR`,
                    Company: `Ana Trujillo Emparedados y helados`,
                    ContactName: `Ana Trujillo`,
                    ContactTitle: `Owner`,
                    Address: `Avda. de la Constitución 2222`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5021,
                    Country: `Mexico`,
                    Phone: `(5) 555-4729`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `ANTON`,
                    Company: `Antonio Moreno Taquería`,
                    ContactName: `Antonio Moreno`,
                    ContactTitle: `Owner`,
                    Address: `Mataderos 2312`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5023,
                    Country: `Mexico`,
                    Phone: `(5) 555-3932`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `AROUT`,
                    Company: `Around the Horn`,
                    ContactName: `Thomas Hardy`,
                    ContactTitle: `Sales Representative`,
                    Address: `120 Hanover Sq.`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 22000,
                    Country: `UK`,
                    Phone: `(171) 555-7788`,
                    Fax: `(171) 555-6750`
                }),
                new CustomersDataItem(
                {
                    ID: `BERGS`,
                    Company: `Berglunds snabbköp`,
                    ContactName: `Christina Berglund`,
                    ContactTitle: `Order Administrator`,
                    Address: `Berguvsvägen 8`,
                    City: `Luleå`,
                    Region: `South`,
                    PostalCode: 17000,
                    Country: `Sweden`,
                    Phone: `0921-12 34 65`,
                    Fax: `0921-12 34 67`
                }),
                new CustomersDataItem(
                {
                    ID: `BLAUS`,
                    Company: `Blauer See Delikatessen`,
                    ContactName: `Hanna Moos`,
                    ContactTitle: `Sales Representative`,
                    Address: `Forsterstr. 57`,
                    City: `Mannheim`,
                    Region: `East`,
                    PostalCode: 68306,
                    Country: `Germany`,
                    Phone: `0621-08460`,
                    Fax: `0621-08924`
                }),
                new CustomersDataItem(
                {
                    ID: `BLONP`,
                    Company: `Blondesddsl père et fils`,
                    ContactName: `Frédérique Citeaux`,
                    ContactTitle: `Marketing Manager`,
                    Address: `24, place Kléber`,
                    City: `Strasbourg`,
                    Region: `East`,
                    PostalCode: 67000,
                    Country: `France`,
                    Phone: `88.60.15.31`,
                    Fax: `88.60.15.32`
                }),
                new CustomersDataItem(
                {
                    ID: `BOLID`,
                    Company: `Bólido Comidas preparadas`,
                    ContactName: `Martín Sommer`,
                    ContactTitle: `Owner`,
                    Address: `C/ Araquil, 67`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28023,
                    Country: `Spain`,
                    Phone: `(91) 555 22 82`,
                    Fax: `(91) 555 91 99`
                }),
                new CustomersDataItem(
                {
                    ID: `BONAP`,
                    Company: `Bon app'`,
                    ContactName: `Laurence Lebihan`,
                    ContactTitle: `Owner`,
                    Address: `12, rue des Bouchers`,
                    City: `Marseille`,
                    Region: `West`,
                    PostalCode: 13008,
                    Country: `France`,
                    Phone: `91.24.45.40`,
                    Fax: `91.24.45.41`
                }),
                new CustomersDataItem(
                {
                    ID: `BOTTM`,
                    Company: `Bottom-Dollar Markets`,
                    ContactName: `Elizabeth Lincoln`,
                    ContactTitle: `Accounting Manager`,
                    Address: `23 Tsawassen Blvd.`,
                    City: `Tsawassen`,
                    Region: `BC`,
                    PostalCode: 28000,
                    Country: `Canada`,
                    Phone: `(604) 555-4729`,
                    Fax: `(604) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `BSBEV`,
                    Company: `B's Beverages`,
                    ContactName: `Victoria Ashworth`,
                    ContactTitle: `Sales Representative`,
                    Address: `Fauntleroy Circus`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 10000,
                    Country: `UK`,
                    Phone: `(171) 555-1212`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CACTU`,
                    Company: `Cactus Comidas para llevar`,
                    ContactName: `Patricio Simpson`,
                    ContactTitle: `Sales Agent`,
                    Address: `Cerrito 333`,
                    City: `Buenos Aires`,
                    Region: `East`,
                    PostalCode: 1010,
                    Country: `Argentina`,
                    Phone: `(1) 135-5555`,
                    Fax: `(1) 135-4892`
                }),
                new CustomersDataItem(
                {
                    ID: `CENTC`,
                    Company: `Centro comercial Moctezuma`,
                    ContactName: `Francisco Chang`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Sierras de Granada 9993`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5022,
                    Country: `Mexico`,
                    Phone: `(5) 555-3392`,
                    Fax: `(5) 555-7293`
                }),
                new CustomersDataItem(
                {
                    ID: `CHOPS`,
                    Company: `Chop-suey Chinese`,
                    ContactName: `Yang Wang`,
                    ContactTitle: `Owner`,
                    Address: `Hauptstr. 29`,
                    City: `Bern`,
                    Region: `East`,
                    PostalCode: 3012,
                    Country: `Switzerland`,
                    Phone: `0452-076545`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `COMMI`,
                    Company: `Comércio Mineiro`,
                    ContactName: `Pedro Afonso`,
                    ContactTitle: `Sales Associate`,
                    Address: `Av. dos Lusíadas, 23`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 34000,
                    Country: `Brazil`,
                    Phone: `(11) 555-7647`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CONSH`,
                    Company: `Consolidated Holdings`,
                    ContactName: `Elizabeth Brown`,
                    ContactTitle: `Sales Representative`,
                    Address: `Berkeley Gardens 12 Brewery`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 27000,
                    Country: `UK`,
                    Phone: `(171) 555-2282`,
                    Fax: `(171) 555-9199`
                }),
                new CustomersDataItem(
                {
                    ID: `DRACD`,
                    Company: `Drachenblut Delikatessen`,
                    ContactName: `Sven Ottlieb`,
                    ContactTitle: `Order Administrator`,
                    Address: `Walserweg 21`,
                    City: `Aachen`,
                    Region: `South`,
                    PostalCode: 52066,
                    Country: `Germany`,
                    Phone: `0241-039123`,
                    Fax: `0241-059428`
                }),
                new CustomersDataItem(
                {
                    ID: `DUMON`,
                    Company: `Du monde entier`,
                    ContactName: `Janine Labrune`,
                    ContactTitle: `Owner`,
                    Address: `67, rue des Cinquante Otages`,
                    City: `Nantes`,
                    Region: `East`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.67.88.88`,
                    Fax: `40.67.89.89`
                }),
                new CustomersDataItem(
                {
                    ID: `EASTC`,
                    Company: `Eastern Connection`,
                    ContactName: `Ann Devon`,
                    ContactTitle: `Sales Agent`,
                    Address: `35 King George`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 41000,
                    Country: `UK`,
                    Phone: `(171) 555-0297`,
                    Fax: `(171) 555-3373`
                }),
                new CustomersDataItem(
                {
                    ID: `ERNSH`,
                    Company: `Ernst Handel`,
                    ContactName: `Roland Mendel`,
                    ContactTitle: `Sales Manager`,
                    Address: `Kirchgasse 6`,
                    City: `Graz`,
                    Region: `South`,
                    PostalCode: 8010,
                    Country: `Austria`,
                    Phone: `7675-3425`,
                    Fax: `7675-3426`
                }),
                new CustomersDataItem(
                {
                    ID: `FAMIA`,
                    Company: `Familia Arquibaldo`,
                    ContactName: `Aria Cruz`,
                    ContactTitle: `Marketing Assistant`,
                    Address: `Rua Orós, 92`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 27000,
                    Country: `Brazil`,
                    Phone: `(11) 555-9857`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `FISSA`,
                    Company: `FISSA Fabrica Inter. Salchichas S.A.`,
                    ContactName: `Diego Roel`,
                    ContactTitle: `Accounting Manager`,
                    Address: `C/ Moralzarzal, 86`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28034,
                    Country: `Spain`,
                    Phone: `(91) 555 94 44`,
                    Fax: `(91) 555 55 93`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLIG`,
                    Company: `Folies gourmandes`,
                    ContactName: `Martine Rancé`,
                    ContactTitle: `Assistant Sales Agent`,
                    Address: `184, chaussée de Tournai`,
                    City: `Lille`,
                    Region: `South`,
                    PostalCode: 59000,
                    Country: `France`,
                    Phone: `20.16.10.16`,
                    Fax: `20.16.10.17`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLKO`,
                    Company: `Folk och fä HB`,
                    ContactName: `Maria Larsson`,
                    ContactTitle: `Owner`,
                    Address: `Åkergatan 24`,
                    City: `Bräcke`,
                    Region: `East`,
                    PostalCode: 36000,
                    Country: `Sweden`,
                    Phone: `0695-34 67 21`,
                    Fax: `0695 33-4455`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANK`,
                    Company: `Frankenversand`,
                    ContactName: `Peter Franken`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Berliner Platz 43`,
                    City: `München`,
                    Region: `East`,
                    PostalCode: 80805,
                    Country: `Germany`,
                    Phone: `089-0877310`,
                    Fax: `089-0877451`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANR`,
                    Company: `France restauration`,
                    ContactName: `Carine Schmitt`,
                    ContactTitle: `Marketing Manager`,
                    Address: `54, rue Royale`,
                    City: `Nantes`,
                    Region: `South`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.32.21.21`,
                    Fax: `40.32.21.20`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANS`,
                    Company: `Franchi S.p.A.`,
                    ContactName: `Paolo Accorti`,
                    ContactTitle: `Sales Representative`,
                    Address: `Via Monte Bianco 34`,
                    City: `Torino`,
                    Region: `East`,
                    PostalCode: 10100,
                    Country: `Italy`,
                    Phone: `011-4988260`,
                    Fax: `011-4988261`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule, WebColumnGroupDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent, IgcColumnGroupComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import { IgcColumnTemplateContext, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private columnGroup1: IgcColumnGroupComponent
    private columnGroup2: IgcColumnGroupComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var columnGroup1 = this.columnGroup1 = document.getElementById('columnGroup1') as IgcColumnGroupComponent;
        var columnGroup2 = this.columnGroup2 = document.getElementById('columnGroup2') as IgcColumnGroupComponent;

        this._bind = () => {
            grid.data = this.customersData;
            columnGroup1.headerTemplate = this.webGridColumnGroupHeaderTemplate;
            columnGroup2.headerTemplate = this.webGridColumnGroupHeaderTemplate;
        }
        this._bind();
    }

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

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

    public webGridColumnGroupHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
        const column = (ctx as any).column;
        return html`<div style="display:flex;align-items:center;gap:5px;">
                    <span draggable="false"  @click=${(e: any) => this.toggleColumnGroup(column)}>
                ${this.columnGroupStates.get(column) ? "🔽" : "🔼"}
                    </span>
                        <span>${column.header}</span>
                    </div>`;
    };

    public columnGroupStates = new Map<IgcColumnGroupComponent, boolean>();
    public toggleColumnGroup(columnGroup: IgcColumnGroupComponent) {
        const columns = columnGroup.childColumns;
        if (columnGroup.header === 'General Information') {
            const col = columns[1] as IgcColumnComponent;
            col.hidden = !col.hidden;
        } else if (columnGroup.header === 'Address Information') {
            for (const col of columns) {
                const c = col as IgcColumnComponent;
                c.hidden = !c.hidden;
            }
        }
        this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
    }
}

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-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid">
            <igc-column
            field="ID"
            resizable="true">
            </igc-column>
            <igc-column-group
            header="General Information"
            name="columnGroup1"
            id="columnGroup1">
                <igc-column
                field="Company"
                sortable="true"
                resizable="true">
                </igc-column>
                <igc-column-group
                header="Personal Details">
                    <igc-column
                    field="ContactName"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="ContactTitle"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
            <igc-column-group
            header="Address Information"
            name="columnGroup2"
            id="columnGroup2">
                <igc-column
                header="Location"
                field="Address"
                hidden="true"
                sortable="true"
                resizable="true">
                </igc-column>
                <igc-column
                field="Phone"
                hidden="true"
                sortable="true"
                resizable="true">
                </igc-column>
                <igc-column-group
                header="Location">
                    <igc-column
                    field="Country"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Region"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="City"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Address"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
                <igc-column-group
                header="Contact Information">
                    <igc-column
                    field="Phone"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Fax"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="PostalCode"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
        </igc-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 algunos de los colores, primero debe establecer una clase para la cuadrícula:

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

Luego establezca las propiedades CSS relacionadas con esta clase:

.grid {
    --ig-grid-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css

Manifestación

EXAMPLE

DATA

TS

HTML

CSS

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

    public ID: string;
    public Company: string;
    public ContactName: string;
    public ContactTitle: string;
    public Address: string;
    public City: string;
    public Region: string;
    public PostalCode: number;
    public Country: string;
    public Phone: string;
    public Fax: string;

}
export class CustomersData extends Array<CustomersDataItem> {
    public constructor(items: Array<CustomersDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CustomersDataItem(
                {
                    ID: `ALFKI`,
                    Company: `Alfreds Futterkiste`,
                    ContactName: `Maria Anders`,
                    ContactTitle: `Sales Representative`,
                    Address: `Obere Str. 57`,
                    City: `Berlin`,
                    Region: `East`,
                    PostalCode: 12209,
                    Country: `Germany`,
                    Phone: `030-0074321`,
                    Fax: `030-0076545`
                }),
                new CustomersDataItem(
                {
                    ID: `ANATR`,
                    Company: `Ana Trujillo Emparedados y helados`,
                    ContactName: `Ana Trujillo`,
                    ContactTitle: `Owner`,
                    Address: `Avda. de la Constitución 2222`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5021,
                    Country: `Mexico`,
                    Phone: `(5) 555-4729`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `ANTON`,
                    Company: `Antonio Moreno Taquería`,
                    ContactName: `Antonio Moreno`,
                    ContactTitle: `Owner`,
                    Address: `Mataderos 2312`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5023,
                    Country: `Mexico`,
                    Phone: `(5) 555-3932`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `AROUT`,
                    Company: `Around the Horn`,
                    ContactName: `Thomas Hardy`,
                    ContactTitle: `Sales Representative`,
                    Address: `120 Hanover Sq.`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 22000,
                    Country: `UK`,
                    Phone: `(171) 555-7788`,
                    Fax: `(171) 555-6750`
                }),
                new CustomersDataItem(
                {
                    ID: `BERGS`,
                    Company: `Berglunds snabbköp`,
                    ContactName: `Christina Berglund`,
                    ContactTitle: `Order Administrator`,
                    Address: `Berguvsvägen 8`,
                    City: `Luleå`,
                    Region: `South`,
                    PostalCode: 17000,
                    Country: `Sweden`,
                    Phone: `0921-12 34 65`,
                    Fax: `0921-12 34 67`
                }),
                new CustomersDataItem(
                {
                    ID: `BLAUS`,
                    Company: `Blauer See Delikatessen`,
                    ContactName: `Hanna Moos`,
                    ContactTitle: `Sales Representative`,
                    Address: `Forsterstr. 57`,
                    City: `Mannheim`,
                    Region: `East`,
                    PostalCode: 68306,
                    Country: `Germany`,
                    Phone: `0621-08460`,
                    Fax: `0621-08924`
                }),
                new CustomersDataItem(
                {
                    ID: `BLONP`,
                    Company: `Blondesddsl père et fils`,
                    ContactName: `Frédérique Citeaux`,
                    ContactTitle: `Marketing Manager`,
                    Address: `24, place Kléber`,
                    City: `Strasbourg`,
                    Region: `East`,
                    PostalCode: 67000,
                    Country: `France`,
                    Phone: `88.60.15.31`,
                    Fax: `88.60.15.32`
                }),
                new CustomersDataItem(
                {
                    ID: `BOLID`,
                    Company: `Bólido Comidas preparadas`,
                    ContactName: `Martín Sommer`,
                    ContactTitle: `Owner`,
                    Address: `C/ Araquil, 67`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28023,
                    Country: `Spain`,
                    Phone: `(91) 555 22 82`,
                    Fax: `(91) 555 91 99`
                }),
                new CustomersDataItem(
                {
                    ID: `BONAP`,
                    Company: `Bon app'`,
                    ContactName: `Laurence Lebihan`,
                    ContactTitle: `Owner`,
                    Address: `12, rue des Bouchers`,
                    City: `Marseille`,
                    Region: `West`,
                    PostalCode: 13008,
                    Country: `France`,
                    Phone: `91.24.45.40`,
                    Fax: `91.24.45.41`
                }),
                new CustomersDataItem(
                {
                    ID: `BOTTM`,
                    Company: `Bottom-Dollar Markets`,
                    ContactName: `Elizabeth Lincoln`,
                    ContactTitle: `Accounting Manager`,
                    Address: `23 Tsawassen Blvd.`,
                    City: `Tsawassen`,
                    Region: `BC`,
                    PostalCode: 28000,
                    Country: `Canada`,
                    Phone: `(604) 555-4729`,
                    Fax: `(604) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `BSBEV`,
                    Company: `B's Beverages`,
                    ContactName: `Victoria Ashworth`,
                    ContactTitle: `Sales Representative`,
                    Address: `Fauntleroy Circus`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 10000,
                    Country: `UK`,
                    Phone: `(171) 555-1212`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CACTU`,
                    Company: `Cactus Comidas para llevar`,
                    ContactName: `Patricio Simpson`,
                    ContactTitle: `Sales Agent`,
                    Address: `Cerrito 333`,
                    City: `Buenos Aires`,
                    Region: `East`,
                    PostalCode: 1010,
                    Country: `Argentina`,
                    Phone: `(1) 135-5555`,
                    Fax: `(1) 135-4892`
                }),
                new CustomersDataItem(
                {
                    ID: `CENTC`,
                    Company: `Centro comercial Moctezuma`,
                    ContactName: `Francisco Chang`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Sierras de Granada 9993`,
                    City: `México D.F.`,
                    Region: `South`,
                    PostalCode: 5022,
                    Country: `Mexico`,
                    Phone: `(5) 555-3392`,
                    Fax: `(5) 555-7293`
                }),
                new CustomersDataItem(
                {
                    ID: `CHOPS`,
                    Company: `Chop-suey Chinese`,
                    ContactName: `Yang Wang`,
                    ContactTitle: `Owner`,
                    Address: `Hauptstr. 29`,
                    City: `Bern`,
                    Region: `East`,
                    PostalCode: 3012,
                    Country: `Switzerland`,
                    Phone: `0452-076545`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `COMMI`,
                    Company: `Comércio Mineiro`,
                    ContactName: `Pedro Afonso`,
                    ContactTitle: `Sales Associate`,
                    Address: `Av. dos Lusíadas, 23`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 34000,
                    Country: `Brazil`,
                    Phone: `(11) 555-7647`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `CONSH`,
                    Company: `Consolidated Holdings`,
                    ContactName: `Elizabeth Brown`,
                    ContactTitle: `Sales Representative`,
                    Address: `Berkeley Gardens 12 Brewery`,
                    City: `London`,
                    Region: `South`,
                    PostalCode: 27000,
                    Country: `UK`,
                    Phone: `(171) 555-2282`,
                    Fax: `(171) 555-9199`
                }),
                new CustomersDataItem(
                {
                    ID: `DRACD`,
                    Company: `Drachenblut Delikatessen`,
                    ContactName: `Sven Ottlieb`,
                    ContactTitle: `Order Administrator`,
                    Address: `Walserweg 21`,
                    City: `Aachen`,
                    Region: `South`,
                    PostalCode: 52066,
                    Country: `Germany`,
                    Phone: `0241-039123`,
                    Fax: `0241-059428`
                }),
                new CustomersDataItem(
                {
                    ID: `DUMON`,
                    Company: `Du monde entier`,
                    ContactName: `Janine Labrune`,
                    ContactTitle: `Owner`,
                    Address: `67, rue des Cinquante Otages`,
                    City: `Nantes`,
                    Region: `East`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.67.88.88`,
                    Fax: `40.67.89.89`
                }),
                new CustomersDataItem(
                {
                    ID: `EASTC`,
                    Company: `Eastern Connection`,
                    ContactName: `Ann Devon`,
                    ContactTitle: `Sales Agent`,
                    Address: `35 King George`,
                    City: `London`,
                    Region: `East`,
                    PostalCode: 41000,
                    Country: `UK`,
                    Phone: `(171) 555-0297`,
                    Fax: `(171) 555-3373`
                }),
                new CustomersDataItem(
                {
                    ID: `ERNSH`,
                    Company: `Ernst Handel`,
                    ContactName: `Roland Mendel`,
                    ContactTitle: `Sales Manager`,
                    Address: `Kirchgasse 6`,
                    City: `Graz`,
                    Region: `South`,
                    PostalCode: 8010,
                    Country: `Austria`,
                    Phone: `7675-3425`,
                    Fax: `7675-3426`
                }),
                new CustomersDataItem(
                {
                    ID: `FAMIA`,
                    Company: `Familia Arquibaldo`,
                    ContactName: `Aria Cruz`,
                    ContactTitle: `Marketing Assistant`,
                    Address: `Rua Orós, 92`,
                    City: `Sao Paulo`,
                    Region: `SP`,
                    PostalCode: 27000,
                    Country: `Brazil`,
                    Phone: `(11) 555-9857`,
                    Fax: `(5) 555-3745`
                }),
                new CustomersDataItem(
                {
                    ID: `FISSA`,
                    Company: `FISSA Fabrica Inter. Salchichas S.A.`,
                    ContactName: `Diego Roel`,
                    ContactTitle: `Accounting Manager`,
                    Address: `C/ Moralzarzal, 86`,
                    City: `Madrid`,
                    Region: `East`,
                    PostalCode: 28034,
                    Country: `Spain`,
                    Phone: `(91) 555 94 44`,
                    Fax: `(91) 555 55 93`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLIG`,
                    Company: `Folies gourmandes`,
                    ContactName: `Martine Rancé`,
                    ContactTitle: `Assistant Sales Agent`,
                    Address: `184, chaussée de Tournai`,
                    City: `Lille`,
                    Region: `South`,
                    PostalCode: 59000,
                    Country: `France`,
                    Phone: `20.16.10.16`,
                    Fax: `20.16.10.17`
                }),
                new CustomersDataItem(
                {
                    ID: `FOLKO`,
                    Company: `Folk och fä HB`,
                    ContactName: `Maria Larsson`,
                    ContactTitle: `Owner`,
                    Address: `Åkergatan 24`,
                    City: `Bräcke`,
                    Region: `East`,
                    PostalCode: 36000,
                    Country: `Sweden`,
                    Phone: `0695-34 67 21`,
                    Fax: `0695 33-4455`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANK`,
                    Company: `Frankenversand`,
                    ContactName: `Peter Franken`,
                    ContactTitle: `Marketing Manager`,
                    Address: `Berliner Platz 43`,
                    City: `München`,
                    Region: `East`,
                    PostalCode: 80805,
                    Country: `Germany`,
                    Phone: `089-0877310`,
                    Fax: `089-0877451`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANR`,
                    Company: `France restauration`,
                    ContactName: `Carine Schmitt`,
                    ContactTitle: `Marketing Manager`,
                    Address: `54, rue Royale`,
                    City: `Nantes`,
                    Region: `South`,
                    PostalCode: 44000,
                    Country: `France`,
                    Phone: `40.32.21.21`,
                    Fax: `40.32.21.20`
                }),
                new CustomersDataItem(
                {
                    ID: `FRANS`,
                    Company: `Franchi S.p.A.`,
                    ContactName: `Paolo Accorti`,
                    ContactTitle: `Sales Representative`,
                    Address: `Via Monte Bianco 34`,
                    City: `Torino`,
                    Region: `East`,
                    PostalCode: 10100,
                    Country: `Italy`,
                    Phone: `011-4988260`,
                    Fax: `011-4988261`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule, WebColumnGroupDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { CustomersDataItem, CustomersData } from './CustomersData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

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

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

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

    private _customersData: CustomersData = null;
    public get customersData(): CustomersData {
        if (this._customersData == null)
        {
            this._customersData = new CustomersData();
        }
        return this._customersData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            WebGridDescriptionModule.register(context);
            WebColumnGroupDescriptionModule.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-grid
        auto-generate="false"
        name="grid"
        id="grid"
        id="grid">
            <igc-column
            field="ID"
            resizable="true">
            </igc-column>
            <igc-column-group
            header="General Information">
                <igc-column
                field="Company"
                sortable="true"
                resizable="true">
                </igc-column>
                <igc-column-group
                header="Personal Details">
                    <igc-column
                    field="ContactName"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="ContactTitle"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
            <igc-column-group
            header="Address Information">
                <igc-column-group
                header="Location">
                    <igc-column
                    field="Country"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Region"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="City"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Address"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
                <igc-column-group
                header="Contact Information">
                    <igc-column
                    field="Phone"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="Fax"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                    <igc-column
                    field="PostalCode"
                    sortable="true"
                    resizable="true">
                    </igc-column>
                </igc-column-group>
            </igc-column-group>
        </igc-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-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}

cssコピー

Edit in: Codesandbox

Referencias de API

• IgcGridComponent
• IgcColumnGroupComponent

Recursos adicionales

• Descripción general de la cuadrícula
• Virtualización y rendimiento
• Paginación
• Filtración
• Clasificación
• resúmenes
• Cambio de tamaño de columna
• Selección
• Agrupar por

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

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