Angular 그리드 다중 열 헤더 개요
IgxGrid
공통 다중 헤더 아래에 열을 배치하여 그룹화할 수 있는 multi-column headers
지원합니다. 각 다중 열 헤더 그룹은 Material UI 그리드 내의 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다.
Angular Grid Multi-column Headers Overview Example
Multi-column header
선언은 header
제목이 전달된 igx-column-group
구성 요소에 열 집합을 래핑하여 수행할 수 있습니다.
<igx-grid [data]="data" [allowFiltering]="true">
<igx-column-group header="Contact Information">
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-column-group>
</igx-grid>
n-th
수준의 중첩된 헤더를 얻으려면 위의 선언을 따라야 합니다. 따라서 igx-column-group
중첩하면 원하는 결과를 얻을 수 있습니다.
<igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
<igx-column-group header="General Information">
<igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
<igx-column-group header="Person Details">
<igx-column [pinned]="false" sortable="true" resizable="true" field="ContactName"></igx-column>
<igx-column sortable="true" resizable="true" field="ContactTitle"></igx-column>
</igx-column-group>
</igx-column-group>
</igx-grid>
모든 igx-column-group
moving
, pinning
및 hiding
지원합니다.
Note
일련의 열 및 열 그룹이 있는 경우 고정은 최상위 열 상위 항목에 대해서만 작동합니다. 보다 구체적으로 중첩된 column groups
또는 columns
고정하는 것은 허용되지 않습니다.
다중 열 헤더와 함께 고정을 사용하면 전체 그룹이 고정됩니다.
columns
column groups
간 이동은 계층 구조에서 동일한 수준에 있고 둘 다 동일한 group
에 있는 경우에만 허용됩니다.
columns/column-groups
현재 group
으로 래핑되지 않은 경우 즉, 최상위 columns
의미하며 표시되는 전체 열 간에 이동이 허용됩니다.
<igx-grid [data]="data" [allowFiltering]="true" [moving]="true">
<igx-column-group [pinned]="true" header="General Information">
<igx-column sortable="true" resizable="true" field="CompanyName"></igx-column>
</igx-column-group>
<igx-column sortable="true" resizable="true" field="Phone"></igx-column>
<igx-column sortable="true" resizable="true" field="Fax"></igx-column>
<igx-column sortable="true" resizable="true" field="PostalCode"></igx-column>
</igx-grid>
Multi-column Header Template
그리드의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 열 그룹에는 igxHeader
지시문으로 장식된 ng-template
태그가 필요합니다. ng-template
열 그룹 개체와 함께 컨텍스트로 제공됩니다.
...
<igx-column-group header="General Information">
<ng-template igxHeader let-columnGroup>
{{ columnGroup.header | uppercase }}
</ng-template>
...
</igx-column-group>
...
여러 열 그룹에 대해 단일 템플릿을 재사용하려면 다음과 같이 열 그룹의 headerTemplate
속성을 설정할 수 있습니다.
<ng-template #columnGroupHeaderTemplate let-columnGroup>
{{ columnGroup.header | uppercase }}
</ng-template>
...
<igx-column-group header="General Information" [headerTemplate]="columnGroupHeaderTemplate">
...
</igx-column-group>
<igx-column-group header="Address Information" [headerTemplate]="columnGroupHeaderTemplate">
...
</igx-column-group>
...
Note
열 헤더가 다시 템플릿화되고 그리드 이동이 활성화된 경우 템플릿 요소에서 해당 열의 draggable 속성을 false로 설정해야 적용되는 모든 이벤트를 처리할 수 있습니다!
<ng-template igxHeader>
<igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>
다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.
스타일링
정렬 동작 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index
파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 접근 방식에 따라 우리는 grid-theme
그리고 받아들인다 $header-background
, $header-text-color
, $header-border-width
, $header-border-style
그리고 $header-border-color
매개변수.
$custom-theme: grid-theme(
$header-background: #e0f3ff,
$header-text-color: #e41c77,
$header-border-width: 1px,
$header-border-style: solid,
$header-border-color: rgba(0, 0, 0, 0.08)
);
마지막 단계는 구성요소 믹스인을 포함하는 것입니다.
@include grid($custom-theme);
Note
구성 요소가 Emulated
ViewEncapsulation을 사용하는 경우::ng-deep
사용하여 이 캡슐화를 penetrate
해야 합니다.
:host {
::ng-deep {
@include grid($custom-theme);
}
}
Defining a color palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette
및 igx-color
기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette
전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$light-blue-color: #e0f3ff;
$deep-pink-color: #e41c77;
$custom-palette: palette($primary: $light-blue-color, $deep-pink-color);
그런 다음 igx-color
사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$custom-theme: grid-theme(
$header-background: color($custom-palette, "primary", 500),
$header-text-color: color($custom-palette, "secondary", 500),
$header-border-width: 1px,
$header-border-style: solid,
$header-border-color: color($custom-palette, "grays", 200)
);
Note
igx-color
및 igx-palette
색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes
항목을 참조하세요.
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성 요소에 대해 제공되는 사전 정의된 두 스키마 중 하나(이 경우_light-grid
확장합니다.
// Extending the light grid schema
$custom-grid-schema: extend($_light-grid,
(
header-background: (igx-color:('primary', 500)),
header-text-color: (igx-color:('secondary', 500)),
header-border-width: 1px,
header-border-style: solid,
header-border-color: (igx-color:('grays', 200))
)
);
사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light
또는 dark
)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
Extending the global light-schema
$my-custom-schema: extend($light-schema,
(
igx-grid: $custom-grid-schema
)
);
// Defining our custom theme with the custom schema
$custom-theme: grid-theme(
$palette: $custom-palette,
$schema: $my-custom-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
Note
샘플은 Change Theme
에서 선택한 전역 테마의 영향을 받지 않습니다.
Known Issues and Limitations
IE11에서 다중 열 헤더와 함께 Grid를 사용하려면 각도 애플리케이션의 polyfill.ts에서 배열 폴리필을 명시적으로 가져와야 합니다.
import 'core-js/es7/array';