Web Components Grid Column Hiding

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

    Web Components Grid Column Hiding Example

    Grid Setup

    Let's start by creating our IgcGridComponent and binding it to our data. We will also enable both filtering and sorting for the columns.

    <igc-grid id="grid" auto-generate="false" width="100%" height="560px" allow-filtering="true">
    <igc-column field="ID" data-type="String" sortable="true" hidden="true"></igc-column>
    <igc-column field="ContactName" data-type="String" sortable="true" hidden="true"></igc-column>
    <igc-column field="ContactTitle" data-type="String" sortable="true"></igc-column>
    <igc-column field="City" data-type="String" sortable="true"></igc-column>
    <igc-column field="CompanyName" data-type="String" sortable="true"></igc-column>
    <igc-column field="Fax" data-type="String" sortable="true"></igc-column>
    <igc-column field="Address" data-type="String" sortable="true"></igc-column>
    <igc-column field="PostalCode" data-type="String" sortable="true"></igc-column>
    <igc-column field="Country" data-type="String" sortable="true"></igc-column>
    <igc-column field="Phone" data-type="String" sortable="true"></igc-column>
</igc-grid>

    Toolbar's Column Hiding UI

    The built-in Column Hiding UI is placed inside an DropDown in the IgcGridComponent's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.

    For this purpose all we have to do is set both the IgcGridToolbarActionsComponent and the IgcGridToolbarHidingComponent inside of the IgcGridComponent.

    <igc-grid>
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-grid>

    The IgcGridComponent provides us with some useful properties when it comes to using the toolbar's column hiding UI.

    By using the title property, we will set the title that is displayed inside the dropdown button in the toolbar.

    <igc-grid id="grid">
    <igc-grid-toolbar>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-hiding id="hidingAction" title="Column Hiding"></igc-grid-toolbar-hiding>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-grid>

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

    Disable hiding of a column

    We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their disableHiding property to true.

    <igc-grid>
    <igc-column field="ContactName" data-type="String" sortable="true" disable-hiding="true"></igc-column>
    <igc-column field="ContactTitle" data-type="String" sortable="true" disable-hiding="true"></igc-column>
</igc-grid>

    Styling

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

    <igc-grid class="grid"></igc-grid>

    Then set the related CSS variables for the related components. We will apply the styles also only on the igx-column-actions, so the rest of the grid is unaffected:

    .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

    In this article we learned how to use the built-in column hiding UI in the IgcGridComponent's toolbar. The column hiding UI has a few more APIs to explore, which are listed below.

    • ColumnActionsComponent

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

    IgcColumnComponent properties:

    IgcGridToolbarComponent properties:

    • showProgress

    IgcGridToolbarComponent methods:

    IgcGridComponent events:

    • ColumnVisibilityChanged

    Additional Resources

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