Web Components Tree Grid Column Pinning

The Ignite UI for Web Components Column Pinning feature in Web Components Tree Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgcGridComponent. There’s an integrated UI for Column Pinning, accessible via the Web Components Tree Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.

Web Components Tree Grid Column Pinning Example

This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgcTreeGridComponent.

EXAMPLE

DATA

TS

HTML

CSS

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

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

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

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



export class Sample {

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

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

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

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

    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-grid-toolbar
            >
                <igc-grid-toolbar-actions
                >
                    <igc-grid-toolbar-pinning
                    >
                    </igc-grid-toolbar-pinning>
                </igc-grid-toolbar-actions>
            </igc-grid-toolbar>
            <igc-column
            field="Name"
            data-type="string"
            pinned="true">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            pinned="true">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number">
            </igc-column>
            <igc-column
            field="HireDate"
            data-type="date">
            </igc-column>
            <igc-column
            field="OnPTO"
            data-type="boolean">
            </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

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Column Pinning API

Column pinning is controlled through the pinned property of the IgcColumnComponent. Pinned columns are rendered on the left side of the IgcTreeGridComponent by default and stay fixed through horizontal scrolling of the unpinned columns in the IgcTreeGridComponent body.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="false">
    <igc-column field="Name" pinned="true"></igc-column>
    <igc-column field="Title"></igc-column>
    <igc-column field="ID"></igc-column>
</igc-tree-grid>
html

You may also use the IgcTreeGridComponent's pinColumn or unpinColumn methods of the IgcTreeGridComponent to pin or unpin columns by their field name:

this.treeGrid.pinColumn('Title');
this.treeGrid.unpinColumn('Name');
typescript

Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state.

A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the ColumnPin event and changing the InsertAtIndex property of the event arguments to the desired position index.

<igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>
html

constructor() {
    var dataGrid = document.getElementById('dataGrid') as IgcTreeGridComponent;
    dataGrid.data = this.data;
    dataGrid.addEventListener("columnPin", this.columnPinning);
}
typescript

public columnPinning(event) {
    if (event.detail.column.field === 'Name') {
        event.detail.insertAtIndex = 0;
    }
}
typescript

Pinning Position

You can change the column pinning position via the pinning configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right.

<igc-tree-grid id="dataGrid" auto-generate="true"></igc-tree-grid>
html

var grid = document.getElementById('dataGrid') as IgcTreeGridComponent;
grid.pinning = { columns: ColumnPinningPosition.End };
typescript

Demo

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, IgcPinningConfig, ColumnPinningPosition } 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 _pinningConfig1: IgcPinningConfig | null = null;
    public get pinningConfig1(): IgcPinningConfig {
        if (this._pinningConfig1 == null)
        {
            var pinningConfig1: IgcPinningConfig = {} as IgcPinningConfig;
            pinningConfig1.columns = ColumnPinningPosition.End;

            this._pinningConfig1 = pinningConfig1;
        }
        return this._pinningConfig1;
    }

    private _bind: () => void;

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

        this._bind = () => {
            treeGrid.data = this.employeesFlatDetails;
            treeGrid.pinning = this.pinningConfig1;
        }
        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-grid-toolbar
            >
                <igc-grid-toolbar-actions
                >
                    <igc-grid-toolbar-pinning
                    >
                    </igc-grid-toolbar-pinning>
                </igc-grid-toolbar-actions>
            </igc-grid-toolbar>
            <igc-column
            field="Name"
            data-type="string"
            width="250">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            width="300"
            pinned="true">
            </igc-column>
            <igc-column
            field="HireDate"
            header="Hire Date"
            data-type="date"
            width="200">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            width="100">
            </igc-column>
            <igc-column
            field="Address"
            data-type="string"
            width="200">
            </igc-column>
            <igc-column
            field="City"
            data-type="string"
            width="200">
            </igc-column>
            <igc-column
            field="Country"
            data-type="string"
            width="200">
            </igc-column>
            <igc-column
            field="Fax"
            data-type="string"
            width="200">
            </igc-column>
            <igc-column
            field="PostalCode"
            header="Postal Code"
            data-type="string"
            width="200">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            width="200">
            </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

Custom Column Pinning UI

You can define your custom UI and change the pin state of the columns via the related API.

Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state.

This can be done by creating a header template for the columns with a custom icon.

<igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="false" width="100%" height="620px">
    <igc-column id="Name" field="Name" data-type="String" width="250px"></igc-column>
    <igc-column id="Title" field="Title" data-type="String" width="300px"></igc-column>
    <igc-column id="ID" field="ID" data-type="Number" width="200px"></igc-column>
    <igc-column id="HireDate" field="HireDate" header="Hire Date" data-type="Date" width="200px"></igc-column>
    <igc-column id="Age" field="Age" data-type="Number" width="200px"></igc-column>
    <igc-column id="Address" field="Address" data-type="String" width="200px"></igc-column>
    <igc-column id="City" field="City" data-type="String" width="200px"></igc-column>
    <igc-column id="Country" field="Country" data-type="String" width="200px"></igc-column>
    <igc-column id="Fax" field="Fax" data-type="string" width="200px"></igc-column>
    <igc-column id="PostalCode" field="PostalCode" header="Postal Code" data-type="String" width="200px"></igc-column>
    <igc-column id="Phone" field="Phone" data-type="String" width="200px"></igc-column>
</igc-tree-grid>
html

constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    var Name = document.getElementById('Name') as IgcColumnComponent;
    var Title = document.getElementById('Title') as IgcColumnComponent;
    var ID = document.getElementById('ID') as IgcColumnComponent;
    var HireDate = document.getElementById('HireDate') as IgcColumnComponent;
    var Age = document.getElementById('Age') as IgcColumnComponent;
    var Address = document.getElementById('Address') as IgcColumnComponent;
    var City = document.getElementById('City') as IgcColumnComponent;
    var Country = document.getElementById('Country') as IgcColumnComponent;
    var Fax = document.getElementById('Fax') as IgcColumnComponent;
    var PostalCode = document.getElementById('PostalCode') as IgcColumnComponent;
    var Phone = document.getElementById('Phone') as IgcColumnComponent;

    treeGrid.data = this.data;
    Name.headerTemplate = this.pinHeaderTemplate;
    Title.headerTemplate = this.pinHeaderTemplate;
    ID.headerTemplate = this.pinHeaderTemplate;
    HireDate.headerTemplate = this.pinHeaderTemplate;
    Age.headerTemplate = this.pinHeaderTemplate;
    Address.headerTemplate = this.pinHeaderTemplate;
    City.headerTemplate = this.pinHeaderTemplate;
    Country.headerTemplate = this.pinHeaderTemplate;
    Fax.headerTemplate = this.pinHeaderTemplate;
    PostalCode.headerTemplate = this.pinHeaderTemplate;
    Phone.headerTemplate = this.pinHeaderTemplate;
}

public pinHeaderTemplate = (ctx: IgcCellTemplateContext) => {
    return html`
        <div class="title-inner">
            <span style="float:left">${ctx.cell.column.header}</span>
            <igc-icon class="pin-icon" fontSet="fas" name="fa-thumbtack" @click="${() => toggleColumn(ctx.cell.column)}"></igx-icon>
        </div>
    `;
}
ts

On click of the custom icon the pin state of the related column can be changed using the column's API methods.

public toggleColumn(col: IgcColumnComponent) {
    col.pinned ? col.unpin() : col.pin();
}
typescript

Demo

EXAMPLE

DATA

TS

HTML

CSS

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

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

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

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import { IgcColumnTemplateContext } 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 treeGrid: IgcTreeGridComponent
    private column1: IgcColumnComponent
    private column2: IgcColumnComponent
    private column3: IgcColumnComponent
    private column4: IgcColumnComponent
    private column5: IgcColumnComponent
    private column6: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
        var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
        var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
        var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
        var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
        var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;

        this._bind = () => {
            treeGrid.data = this.employeesFlatData;
            column1.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column2.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column3.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column4.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column5.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
        }
        this._bind();
    }

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

    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;
    }

    public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {

        const column = (ctx as any).column;
        return html`<div>
                     <span style="float:left">${column.field}</span>
                     <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                   </div>`;
        };

    public toggleColumnPin(field: string) {
        var grid = this.treeGrid;
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        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="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"
            pinned="true"
            name="column1"
            id="column1">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            pinned="true"
            name="column2"
            id="column2">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            name="column3"
            id="column3">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            name="column4"
            id="column4">
            </igc-column>
            <igc-column
            field="HireDate"
            data-type="date"
            name="column5"
            id="column5">
            </igc-column>
            <igc-column
            field="OnPTO"
            data-type="boolean"
            name="column6"
            id="column6">
            </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

Pinning Limitations

• Setting column widths in percentage (%) explicitly makes the IgcTreeGridComponent body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the IgcTreeGridComponent.

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set an ID for the grid first:

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

Then set the related CSS properties to this class:

#grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}
css

Demo

EXAMPLE

DATA

TS

HTML

CSS

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

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

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

import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { EmployeesFlatDataItem, EmployeesFlatData } from './EmployeesFlatData';
import { IgcColumnTemplateContext } 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 treeGrid: IgcTreeGridComponent
    private column1: IgcColumnComponent
    private column2: IgcColumnComponent
    private column3: IgcColumnComponent
    private column4: IgcColumnComponent
    private column5: IgcColumnComponent
    private column6: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
        var column2 = this.column2 = document.getElementById('column2') as IgcColumnComponent;
        var column3 = this.column3 = document.getElementById('column3') as IgcColumnComponent;
        var column4 = this.column4 = document.getElementById('column4') as IgcColumnComponent;
        var column5 = this.column5 = document.getElementById('column5') as IgcColumnComponent;
        var column6 = this.column6 = document.getElementById('column6') as IgcColumnComponent;

        this._bind = () => {
            treeGrid.data = this.employeesFlatData;
            column1.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column2.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column3.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column4.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column5.headerTemplate = this.webTreeGridPinHeaderTemplate;
            column6.headerTemplate = this.webTreeGridPinHeaderTemplate;
        }
        this._bind();
    }

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

    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;
    }

    public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {

        const column = (ctx as any).column;
        return html`<div>
                     <span style="float:left">${column.field}</span>
                     <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                   </div>`;
        };

    public toggleColumnPin(field: string) {
        var grid = this.treeGrid;
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        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="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"
            pinned="true"
            name="column1"
            id="column1">
            </igc-column>
            <igc-column
            field="Title"
            data-type="string"
            pinned="true"
            name="column2"
            id="column2">
            </igc-column>
            <igc-column
            field="Phone"
            data-type="string"
            name="column3"
            id="column3">
            </igc-column>
            <igc-column
            field="Age"
            data-type="number"
            name="column4"
            id="column4">
            </igc-column>
            <igc-column
            field="HireDate"
            data-type="date"
            name="column5"
            id="column5">
            </igc-column>
            <igc-column
            field="OnPTO"
            data-type="boolean"
            name="column6"
            id="column6">
            </igc-column>
        </igc-tree-grid>
    </div>
</div>

    </div>

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

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

#treeGrid {
	--pinned-border-width: 5px;
    --pinned-border-style: double;
    --pinned-border-color: #FFCD0F;
	--cell-active-border-color: #FFCD0F;
}

cssコピー

Edit in: Codesandbox

API References

• IgcTreeGridComponent
• IgcColumnComponent

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub