React Hierarchical Grid Column Hiding

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

React Hierarchical Grid Column Hiding Example

Hierarchical Grid Setup

우선 우리의IgrHierarchicalGrid 데이터를 만들고 그에 바인딩하는 것부터 시작해 봅시다. 또한 열에 대한 필터링과 정렬 기능도 활성화할 예정입니다.

<IgrHierarchicalGrid autoGenerate={false} data={singersData} primaryKey="ID" allowFiltering={true} ref={hierarchicalGrid1Ref}>
    <IgrColumn field="Artist" header="Artist" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Photo" header="Photo" dataType="image"></IgrColumn>
    <IgrColumn field="Debut" header="Debut" dataType="number" hidden={true}></IgrColumn>
    <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="number" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="number" sortable={true}></IgrColumn>
</IgrHierarchicalGrid>

Toolbar's Column Hiding UI

내장된 열 숨기기 UI는DropDown 안에IgrHierarchicalGrid 툴바. 이 드롭다운을 사용해 열을 숨기기 UI를 보여주거나 숨길 수 있습니다.

이 목적을 위해 해야 할 일은 와IgrGridToolbarActionsIgrGridToolbarHiding 내부를 모두 설정하는 것뿐입니다.IgrHierarchicalGrid

<IgrHierarchicalGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrHierarchicalGrid>

툴IgrHierarchicalGrid 바의 열 숨기기 UI를 사용할 때 유용한 기능을 제공합니다.

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

<IgrHierarchicalGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding title="Column Hiding"></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrHierarchicalGrid>

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

Disable hiding of a column

사용자가 열을 숨기기 UI에서 열을 숨기는 것을 쉽게 막을 수 있는데, 단순히 속성 속성을 true로 설정disableHiding 하면 됩니다.

<IgrHierarchicalGrid>
    <IgrColumn field="Artist" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
    <IgrColumn field="GrammyAwards" dataType="string" sortable={true} disableHiding={true}></IgrColumn>

    <IgrRowIsland>
        <IgrColumn field="Album" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
    </IgrRowIsland>
</IgrHierarchicalGrid>

Styling

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

<IgrHierarchicalGrid className="hierarchical-grid"></IgrHierarchicalGrid>

그 다음 관련 컴포넌트에 대해 관련 CSS 변수를 설정하세요. 스타일도 이 부분에igx-column-actions 적용하므로, 나머지 그리드는 영향을 받지 않습니다:

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

Demo

API References

이 글에서는 툴IgrHierarchicalGrid 바에 내장된 열 숨기기 UI를 사용하는 방법을 배웠습니다. 열을 숨기기 UI에는 아래에 소개된 몇 가지 더 탐색할 API가 있습니다.

ColumnActionsComponent

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

IgrColumn properties:

disableHiding

IgrGridToolbar properties:

showProgress

IgrGridToolbar methods:

IgrHierarchicalGrid events:

ColumnVisibilityChanged

Additional Resources

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