React Grid Column Hiding

Ignite UI for React 내장된 열 숨기기 UI가 있으며, React Grid 툴바를 통해 열의 표시 상태를 변경하는 데 사용할 수 있습니다. 개발자는 필요에 따라 페이지 내 어디에서나 열 숨기기 UI를 정의할 수 있는 유연성을 갖추고 있습니다. React Grid 열 숨기기 기능은 특히 그리드 크기를 줄이고 중복된 필드를 탭으로 이동할 필요성을 없애고 싶을 때 유용합니다.

React Grid Column Hiding Example

Grid Setup

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

<IgrGrid autoGenerate={false} data={customersData} width="100%" height="560px" allowFiltering={true}>
    <IgrColumn field="ID" dataType="string" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="ContactName" dataType="string" sortable={true} hidden={true}></IgrColumn>
    <IgrColumn field="ContactTitle" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="City" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="CompanyName" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Fax" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Address" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="PostalCode" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Country" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="Phone" dataType="string" sortable={true}></IgrColumn>
</IgrGrid>

Toolbar's Column Hiding UI

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

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

<IgrGrid>
    <IgrGridToolbar>
        <IgrGridToolbarActions>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrGrid>

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

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

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

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

Disable hiding of a column

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

<IgrGrid>
    <IgrColumn field="ContactName" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
    <IgrColumn field="ContactTitle" dataType="string" sortable={true} disableHiding={true}></IgrColumn>
</IgrGrid>

Styling

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

<IgrGrid className="grid"></IgrGrid>

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

.grid  igx-column-actions {
    /* 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

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

ColumnActionsComponent

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

IgrColumn properties:

disableHiding

IgrGridToolbar properties:

showProgress

IgrGridToolbar methods:

IgrGrid events:

ColumnVisibilityChanged

Additional Resources

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