React Tree Grid Column Hiding

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

React Tree Grid Column Hiding Example

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>

Toolbar's Column Hiding UI

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

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

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

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

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

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

이 글의 시작부분에 있는 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>

Styling

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

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

그런 다음 관련 구성 요소에 대한 관련 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;
}

Demo

API References

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

ColumnActionsComponent

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

IgrColumn properties:

disableHiding

IgrGridToolbar properties:

showProgress

IgrGridToolbar methods:

IgrTreeGrid events:

ColumnVisibilityChanged

Additional Resources

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