Web Components 트리 그리드 열 고정

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 IgcTreeGridComponent. 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

이 예시는 한 열 또는 여러 열을 왼쪽 또는 오른쪽IgcTreeGridComponent에 고정하는 방법을 보여줍니다.

Column Pinning API

컬럼 핀닝은 의pinned 속성에 의해IgcColumnComponent 제어됩니다. 고정된 열은 기본적으로 왼쪽IgcTreeGridComponent에 렌더링되며, 고정되지 않은 열IgcTreeGridComponent을 가로 스크롤하여 고정 상태를 유지합니다.

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

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');

두 메서드 모두 해당 작업의 성공 여부를 나타내는 부울 값을 반환합니다. 일반적으로 실패하는 이유는 열이 이미 원하는 상태에 있기 때문입니다.

가장 오른쪽 고정된 열의 오른쪽에 열이 고정되어 있습니다. 고정된 열의 순서를 변경하려면 이벤트에ColumnPin 가입하고 이벤트 인자의 속성을 원하는 위치 인덱스로 변경InsertAtIndex 하면 가능합니다.

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

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

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

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>

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

Demo

Column Pinning on Both Sides

또한, 각 열의 핀 위치를 따로 지정할 수 있어, 격자 양쪽에 열을 고정하여 데이터 세트의 편의와 최적화를 쉽게 할 수 있습니다. 자세한 내용은 아래 데모를 참고해 주세요. 열을 고정하려면 헤더를 클릭해 툴바에 추가된 핀 버튼을 사용해 열을 선택하거나, 단순히 고정된 다른 열로 드래그해 주세요.

Custom Column Pinning UI

관련 API를 통해 사용자 정의 UI를 정의하고 열의 핀 상태를 변경할 수 있습니다.

도구 모음 대신 최종 사용자가 클릭하여 특정 열의 핀 상태를 변경할 수 있는 열 헤더에 핀 아이콘을 정의한다고 가정해 보겠습니다.

이는 사용자 정의 아이콘이 있는 열의 헤더 템플릿을 생성하여 수행할 수 있습니다.

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

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

사용자 정의 아이콘을 클릭하면 해당 열의 API 메소드를 사용하여 관련 열의 고정 상태를 변경할 수 있습니다.

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

Demo

Pinning Limitations

• 열 너비를 백분율(%)로 설정하면 고정된 열이 있을 때 본문과 헤더 내용이IgcTreeGridComponent 어긋나게 됩니다. 컬럼 핀닝이 제대로 작동하려면 칼럼 너비가 픽셀(px) 단위이거나 자동 할당되어야 합니다IgcTreeGridComponent.

Styling

미리 정의된 테마 외에도, 일부 사용 가능한 CSS 속성을 설정하여 그리드를 추가로 맞춤화할 수 있었습니다. 색상을 변경하고 싶다면, 먼저 그리드에 대해 aID를 설정해야 합니다:

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

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

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

Demo

API References

• IgcTreeGridComponent
• IgcColumnComponent

Additional Resources

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

• Ignite UI for Web Components 포럼
• ​GitHub Ignite UI for Web Components