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

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

이 목적을 위해 우리가해야 할 일은 와 IgrGridToolbarActions IgrGridToolbarHiding 내부 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

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

<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

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

ColumnActionsComponent

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

IgrColumn properties:

disableHiding

IgrGridToolbar properties:

showProgress

IgrGridToolbar methods:

IgrHierarchicalGrid events:

ColumnVisibilityChanged

Additional Resources

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