React Tree Grid Column Hiding

Ignite UI for React 에는 React 트리 그리드 도구 모음을 통해 열의 표시 상태를 변경하는 데 사용할 수 있는 기본 제공 열 숨김 UI가 있습니다. 개발자는 필요에 따라 페이지 내의 어느 곳에서나 Column Hiding UI를 유연하게 정의할 수 있습니다. React 트리 그리드 열 숨기기 기능은 그리드의 크기를 줄이고 중복 필드를 탭할 필요성을 제거하려는 경우에 특히 유용합니다.

React Tree Grid Column Hiding Example

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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrGridToolbarModule, IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridToolbarDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrGridToolbarModule,
    IgrTreeGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.treeGridRef = this.treeGridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.employeesFlatDetails}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    columnWidth="200"
                    allowFiltering={true}>
                    <IgrGridToolbar
                    >
                        <IgrGridToolbarActions
                        >
                            <IgrGridToolbarHiding
                                title="Column Hiding">
                            </IgrGridToolbarHiding>
                        </IgrGridToolbarActions>
                    </IgrGridToolbar>
                    <IgrColumn
                        field="Name"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="ID"
                        dataType="number"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Title"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="HireDate"
                        dataType="date"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Age"
                        dataType="number"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Address"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="City"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Country"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Fax"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="PostalCode"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Phone"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    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;
            WebGridToolbarDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx

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

Tree Grid Setup

먼저 만들어 IgrTreeGrid 데이터에 바인딩해 보겠습니다. 또한 열에 대한 필터링과 정렬을 모두 활성화할 것입니다.

<IgrTreeGrid autoGenerate={false} data={employeesFlatDetails} width="100%" height="560px" allowFiltering={true}>
    <IgrColumn field="Name" dataType="string" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="ID" dataType="number" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="Title" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="HireDate" dataType="date" sortable={true}></IgrColumn>
    <IgrColumn field="Age" dataType="number" sortable={true}></IgrColumn>
    <IgrColumn field="Address" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="City" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Country" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Fax" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Phone" dataType="string" sortable={true}></IgrColumn>
</IgrTreeGrid>
tsx

Toolbar's Column Hiding UI

내장된 Column Hiding UI는 DropDown 안에 IgrTreeGrid의 도구 모음. 이 정확한 드롭다운을 사용하여 Column Hiding UI를 표시하거나 숨길 수 있습니다.

이 목적을 위해 우리가해야 할 일은 와 IgrGridToolbarActions IgrGridToolbarHiding 내부 IgrTreeGrid를 모두 설정하는 것입니다.

<IgrTreeGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>
tsx

IgrTreeGrid 도구 모음의 열 숨기기 UI를 사용할 때 몇 가지 유용한 속성을 제공합니다.

title 속성을 사용하여 툴바의 드롭다운 버튼 안에 표시되는 제목을 설정하겠습니다.

<IgrTreeGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding title="Column Hiding"></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrTreeGrid>
tsx

이 글의 시작부분에 있는 React 열 숨기기 예제 섹션에서 위 코드의 결과를 볼 수 있습니다.

Disable hiding of a column

단순히 disableHiding 속성을 true로 설정하면 사용자가 열 숨김 UI를 통해 열을 숨기는 것을 쉽게 방지할 수 있습니다.

<IgrTreeGrid>
    <IgrColumn field="Name" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
    <IgrColumn field="Title" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrTreeGrid>
tsx

Styling

사용 가능한 CSS 변수 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 이를 달성하기 위해 먼저 그리드에 할당할 클래스를 사용합니다.

<IgrTreeGrid className="tree-grid"></IgrTreeGrid>
tsx

그런 다음 관련 구성 요소에 대한 관련 CSS 변수를 설정합니다. igx-column-actions 에만 스타일을 적용하므로 그리드의 나머지 부분은 영향을 받지 않습니다.

.tree-grid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}
css

Demo

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 React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

import { IgrGridToolbarModule, IgrTreeGridModule } from "@infragistics/igniteui-react-grids";
import { IgrTreeGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarHiding, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridToolbarDescriptionModule, WebTreeGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { EmployeesFlatDetailsItem, EmployeesFlatDetails } from './EmployeesFlatDetails';

import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";

const mods: any[] = [
    IgrGridToolbarModule,
    IgrTreeGridModule
];
mods.forEach((m) => m.register());

export default class Sample extends React.Component<any, any> {
    private treeGrid: IgrTreeGrid
    private treeGridRef(r: IgrTreeGrid) {
        this.treeGrid = r;
        this.setState({});
    }

    constructor(props: any) {
        super(props);

        this.treeGridRef = this.treeGridRef.bind(this);
    }

    public render(): JSX.Element {
        return (
        <div className="container sample ig-typography">

            <div className="container fill">
                <IgrTreeGrid
                    autoGenerate={false}
                    ref={this.treeGridRef}
                    id="treeGrid"
                    data={this.employeesFlatDetails}
                    primaryKey="ID"
                    foreignKey="ParentID"
                    columnWidth="200"
                    allowFiltering={true}>
                    <IgrGridToolbar
                    >
                        <IgrGridToolbarActions
                        >
                            <IgrGridToolbarHiding
                                title="Column Hiding">
                            </IgrGridToolbarHiding>
                        </IgrGridToolbarActions>
                    </IgrGridToolbar>
                    <IgrColumn
                        field="Name"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="ID"
                        dataType="number"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Title"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="HireDate"
                        dataType="date"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Age"
                        dataType="number"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Address"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="City"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Country"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Fax"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="PostalCode"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                    <IgrColumn
                        field="Phone"
                        dataType="string"
                        sortable={true}>
                    </IgrColumn>
                </IgrTreeGrid>
            </div>
        </div>
        );
    }

    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;
            WebGridToolbarDescriptionModule.register(context);
            WebTreeGridDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx

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

    #treeGrid {
        --ig-column-actions-background-color: #292826;
        --ig-column-actions-title-color: #ffcd0f;
        --ig-checkbox-tick-color: #292826;
        --ig-checkbox-label-color: #ffcd0f;
        --ig-checkbox-empty-color: #ffcd0f;
        --ig-checkbox-fill-color: #ffcd0f;
        --ig-input-group-idle-text-color: white;
        --ig-input-group-filled-text-color: #ffcd0f;
        --ig-input-group-focused-text-color: #ffcd0f;
        --ig-input-group-focused-border-color: #ffcd0f;
        --ig-input-group-focused-secondary-color: #ffcd0f;
        --igx-button-foreground: #292826;
        --igx-button-background: #ffcd0f;
        --igx-button-hover-background: #404040;
        --igx-button-hover-foreground: #ffcd0f;
        --igx-button-focus-background: #ffcd0f;
        --igx-button-focus-foreground: black;
        --igx-button-focus-visible-background: #ffcd0f;
        --igx-button-focus-visible-foreground: black;
        --igx-button-disabled-foreground: #ffcd0f;
    }

css

API References

이 기사에서는 도구 모음에서 기본 제공 열 숨김 UI를 IgrTreeGrid 사용하는 방법을 배웠습니다. 열 숨김 UI에는 탐색할 수 있는 몇 가지 API가 더 있으며, 그 내용은 다음과 같습니다.

ColumnActionsComponent

사용된 관련 API가 포함된 추가 구성요소:

IgrColumn properties:

disableHiding

IgrGridToolbar properties:

showProgress

IgrGridToolbar methods:

IgrTreeGrid events:

ColumnVisibilityChanged

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.