가장 빠른 Angular 데이터 그리드

Ignite UI for Angular 세계에서 가장 빠른 가상화된 Angular 데이터 그리드를 포함하여 Angular 네이티브, Material 기반 UI 구성 요소의 전체 라이브러리를 제공합니다.

Angular Grid Example

이 각도 그리드 예에서는 데이터 검색 및 필터링, 열 정렬, 크기 조정, 고정 및 숨기기, 행 선택, Excel 및 CSV로 내보내기 등 그리드에 내장된 다양한 기능을 활용하여 사용자가 데이터 보기를 사용자 정의할 수 있는 방법을 확인할 수 있습니다. 수평 및 수직 스크롤. 선형 진행률 표시줄 표시기 및 스파크라인과 같은 구성 요소가 포함된 셀 템플릿에 대한 예를 제공했습니다.

/* eslint-disable no-underscore-dangle */
import {
    AfterViewInit,
    Component,
    ElementRef,
    OnInit,
    QueryList,
    ViewChild
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CloseScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, IColumnExportingEventArgs, IgxColumnComponent, IgxCsvExporterService, IgxDateSummaryOperand, IgxExcelExporterService, IgxGridComponent, IgxNumberSummaryOperand, IgxSummaryResult, IgxToggleDirective, OverlaySettings, PositionSettings, VerticalAlignment, CellType, GridSelectionMode, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent } from 'igniteui-angular';
import { data, Employee } from './data';
import { NgClass } from '@angular/common';
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive';
import { FormsModule } from '@angular/forms';

function formatDate(val: Date) {
    return new Intl.DateTimeFormat('en-US').format(val);
}

class DealsSummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }

    public operate(summaries?: any[]): IgxSummaryResult[] {
        const result = super.operate(summaries).filter((obj) => {
            if (obj.key === 'average' || obj.key === 'sum') {
                const summaryResult = obj.summaryResult;
                // apply formatting to float numbers
                if (Number(summaryResult) === summaryResult) {
                    obj.summaryResult = summaryResult.toLocaleString('en-us', { maximumFractionDigits: 2 });
                }
                return obj;
            }
        });
        return result;
    }
}

class EarliestSummary extends IgxDateSummaryOperand {
    constructor() {
        super();
    }

    public operate(summaries?: any[]): IgxSummaryResult[] {
        const result = super.operate(summaries).filter((obj) => {
            if (obj.key === 'earliest') {
                obj.summaryResult = formatDate(obj.summaryResult);
                return obj;
            }
        });
        return result;
    }
}

class SoonSummary extends IgxDateSummaryOperand {
    constructor() {
        super();
    }

    public operate(summaries?: any[]): IgxSummaryResult[] {
        const result = super.operate(summaries).filter((obj) => {
            if (obj.key === 'latest') {
                obj.label = 'Soon';
                obj.summaryResult = formatDate(obj.summaryResult);
                return obj;
            }
        });
        return result;
    }
}

@Component({
    selector: 'app-grid',
    styleUrls: ['./grid-crm.component.scss'],
    templateUrl: './grid-crm.component.html',
    imports: [NgClass, IgxGridComponent, IgxPreventDocumentScrollDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxGridToolbarTitleComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxIconButtonDirective, IgxRippleDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent, IgxLinearProgressBarComponent]
})
export class GridCRMComponent implements OnInit, AfterViewInit {

    @ViewChild('grid1', { read: IgxGridComponent, static: true })
    public grid1!: IgxGridComponent;

    @ViewChild('toggleRefHiding') public toggleRefHiding!: IgxToggleDirective;
    @ViewChild('toggleRefPinning') public toggleRefPinning!: IgxToggleDirective;

    @ViewChild('hidingButton') public hidingButton!: ElementRef;
    @ViewChild('pinningButton') public pinningButton!: ElementRef;

    public localData: Employee[] = [];
    public dealsSummary = DealsSummary;
    public earliestSummary = EarliestSummary;
    public soonSummary = SoonSummary;

    public cols!: QueryList<IgxColumnComponent>;
    public hiddenColsLength: number;
    public pinnedColsLength: number;

    public dark = false;

    public searchText = '';
    public caseSensitive = false;
    public selectionMode: GridSelectionMode = 'multiple';

    public _positionSettings: PositionSettings = {
        horizontalDirection: HorizontalAlignment.Left,
        horizontalStartPoint: HorizontalAlignment.Right,
        verticalStartPoint: VerticalAlignment.Bottom
    };

    public _overlaySettings: OverlaySettings = {
        closeOnOutsideClick: true,
        modal: false,
        // eslint-disable-next-line no-underscore-dangle
        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
        scrollStrategy: new CloseScrollStrategy()
    };

    constructor(
        private csvExporter: IgxCsvExporterService,
        private excelExporter: IgxExcelExporterService,
        private activatedRoute: ActivatedRoute) {

        const exporterCb = (args: IColumnExportingEventArgs) => {
            if (args.field === 'Deals') { args.cancel = true; }
        };

        this.excelExporter.columnExporting.subscribe(exporterCb);
        this.csvExporter.columnExporting.subscribe(exporterCb);
    }

    public ngOnInit() {
        const employees: Employee[] = data;
        for (const employee of employees) {
            this.getDeals(employee);
        }
        this.localData = employees;
        this.activatedRoute.queryParams.subscribe(params => {
            this.dark = !!params.dark;
        });
    }

    public toggleHiding() {
        this._overlaySettings.target = this.hidingButton.nativeElement;
        this.toggleRefHiding.toggle(this._overlaySettings);
    }

    public getPhoto(cell: CellType) {
        return cell.row.data.avatar;
    }

    public togglePinning() {
        this._overlaySettings.target = this.pinningButton.nativeElement;
        this.toggleRefPinning.toggle(this._overlaySettings);
    }

    public ngAfterViewInit() {
        this.cols = this.grid1.columnList;
        this.hiddenColsLength = this.cols.filter((col) => col.hidden).length;
        this.pinnedColsLength = this.cols.filter((col) => col.pinned).length;
    }

    public toggleVisibility(col: IgxColumnComponent) {
        if (col.hidden) {
            this.hiddenColsLength--;
        } else {
            this.hiddenColsLength++;
        }
        col.hidden = !col.hidden;
    }

    public togglePin(col: IgxColumnComponent, evt: any) {
        if (col.pinned) {
            this.grid1.unpinColumn(col.field);
            this.pinnedColsLength--;
        } else {
            if (this.grid1.pinColumn(col.field)) {
                this.pinnedColsLength++;
            } else {
                // if pinning fails uncheck the checkbox
                evt.checkbox.checked = false;
            }
        }
    }

    public formatDate(val: Date) {
        return new Intl.DateTimeFormat('en-US').format(val);
    }

    public searchKeyDown(ev: KeyboardEvent) {
        if (ev.key === 'Enter' || ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
            ev.preventDefault();
            this.grid1.findNext(this.searchText, this.caseSensitive);
        } else if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
            ev.preventDefault();
            this.grid1.findPrev(this.searchText, this.caseSensitive);
        }
    }

    public updateSearch() {
        this.caseSensitive = !this.caseSensitive;
        this.grid1.findNext(this.searchText, this.caseSensitive);
    }

    public clearSearch() {
        this.searchText = '';
        this.grid1.clearSearch();
    }

    public formatValue(val: any): string {
        return val.toLocaleString('en-us', { maximumFractionDigits: 2 });
    }

    public getDeals(employee: Employee): any {
        employee.deals = this.getDealsData();
    }

    public getDealsData(months?: number): any[] {
        if (months === undefined) {
            months = 12;
        }
        const deals: any[] = [];
        for (let m = 0; m < months; m++) {
            const value = this.getRandomNumber(-20, 30);
            // eslint-disable-next-line @typescript-eslint/naming-convention
            deals.push({ Deals: value, Month: m });
        }
        return deals;
    }

    public getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }
}
ts

<div [ngClass]="{'grid__wrapper': true, 'dark_grid': dark === true }">
  <igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" rowHeight="50" [allowFiltering]="true">
    <igx-grid-toolbar>
      <igx-grid-toolbar-actions>
        <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
        <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
        <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
      </igx-grid-toolbar-actions>
      <igx-grid-toolbar-title>
        <div class="crm-toolbar-template">
          <div class="crm-sample-toolbar__title">
            <span class="logo-propeller">
              <img width="28px" height="28px" src="https://www.infragistics.com/angular-demos-lob/assets/images/grid-crm/propeller-logo.svg" class="animated-fan" />
            </span>
            <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
          </div>
          <div class="sample-flex-container">
            <igx-input-group type="search">
              <igx-prefix>
                @if (searchText.length === 0) {
                  <igx-icon class="prefixIcon">search</igx-icon>
                }
                @if (searchText.length > 0) {
                  <igx-icon class="prefixIcon" (click)="clearSearch()">clear
                  </igx-icon>
                }
              </igx-prefix>

              <input #search1 name="search" id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />

              @if (searchText.length > 0) {
                <igx-suffix>
                  @if (grid1.lastSearchInfo) {
                    <div class="resultsText">
                      @if (grid1.lastSearchInfo.matchInfoCache.length > 0) {
                        <span>
                          {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
                          grid1.lastSearchInfo.matchInfoCache.length }} results
                        </span>
                      }
                      @if (grid1.lastSearchInfo.matchInfoCache.length === 0) {
                        <span>
                          No results
                        </span>
                      }
                    </div>
                  }
                  <div class="caseSensitiveButton">
                    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="updateSearch()" [class]="caseSensitive? 'case-sensitive--active' : ''">
                      <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                    </button>
                  </div>
                  <div class="searchButtons">
                    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="grid1.findPrev(searchText, caseSensitive)">
                      <igx-icon family="material">navigate_before</igx-icon>
                    </button>
                    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" (click)="grid1.findNext(searchText, caseSensitive)">
                      <igx-icon family="material">navigate_next</igx-icon>
                    </button>
                  </div>
                </igx-suffix>
              }
            </igx-input-group>
          </div>
        </div>
      </igx-grid-toolbar-title>
    </igx-grid-toolbar>

    <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true" [hidden]="true" >
    </igx-column>

    <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false" [filterable]="false">
      <ng-template igxCell let-cell="cell">
        <div class="cell__inner avatar-cell">
          <igx-avatar [src]="getPhoto(cell)" shape="circle" size="small"></igx-avatar>
        </div>
      </ng-template>
    </igx-column>

    <igx-column field="name" header="Name" [sortable]="true" width="149" [pinned]="true" [resizable]="true" [hasSummary]="false" >
    </igx-column>

    <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
    </igx-column>

    <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
    </igx-column>

    <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [filterable]="false">
      <ng-template igxCell let-val>
        <div style="width: 100%">
          <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false">
          </igx-linear-bar>
        </div>
      </ng-template>
    </igx-column>

    <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
    </igx-column>

    <igx-column field="deals_pending" header="Pending Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [filterable]="false">
    </igx-column>

    <igx-column field="position" header="Position" width="200" [resizable]="true">
    </igx-column>

    <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false" [resizable]="true">
    </igx-column>

    <igx-column field="email" header="Email" width="240" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="fax" header="Fax" width="160" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="tags" header="Tags" width="160" [resizable]="true" >
    </igx-column>

    <igx-column field="street" header="Street" width="160" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="city" header="City" width="160" [resizable]="true" >
    </igx-column>

    <igx-column field="post_code" header="Post Code" width="100" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="state" header="State" width="105" [resizable]="true" >
    </igx-column>

    <igx-column field="country" header="Country" [sortable]="true" width="160" [resizable]="true" >
    </igx-column>

    <igx-column field="created_on" header="Created On" dataType="date" [formatter]="formatDate" [sortable]="true" width="150" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true" >
    </igx-column>

    <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate" [hasSummary]="false" [summaries]="soonSummary" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="last_activity" header="Last Activity" width="160" dataType="date" [formatter]="formatDate" [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="next_activity" header="Next Activity" width="160" dataType="date" [formatter]="formatDate" [hasSummary]="false" [summaries]="earliestSummary" [resizable]="true"  [filterable]="false">
    </igx-column>

    <igx-column field="estimated_sales" header="Possible Sales ($)" [sortable]="true" width="150" dataType="number" [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true"  [filterable]="false">
      <ng-template igxCell let-cell="cell" let-val>
        {{ formatValue(val) }}
      </ng-template>
    </igx-column>

    <igx-column field="actual_sales" header="Actual Sales ($)" [sortable]="true" width="150" dataType="number" [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true"  [filterable]="false">
      <ng-template igxCell let-val>
        {{ formatValue(val) }}
      </ng-template>
    </igx-column>
  </igx-grid>
</div>
html

@use '../../variables' as *;
@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fontawesome.css');
@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-regular.css');
@import url('https://unpkg.com/@fortawesome/fontawesome-free-webfonts@^1.0.9/css/fa-solid.css');

:host ::ng-deep {
	$light-palette: palette(
        $primary: #09f,
        $secondary: #ffbf00,
        $surface: #fff
    );

	@include palette($light-palette);

	$checkbox-theme: checkbox-theme(
        $fill-color: color($color: 'secondary', $variant: 500),
        $tick-color: contrast-color($color: 'secondary', $variant: 500)
    );

	$summary-theme: grid-summary-theme(
        $background-color: #f0f8fe,
        $result-color: color($color: 'primary', $variant: 500)
    );

	$crm-grid-theme: grid-theme(
        $header-background: #f0f8fe,
        $header-border-color: #dde5eb
    );

	$crm-grid-toolbar: grid-toolbar-theme(
        $background-color: color($color: 'primary', $variant: 500),
        $title-text-color: contrast-color($color: 'primary', $variant: 500)
    );

	$crm-grid-toolbar-button: button-theme(
        $background: color($light-palette, 'primary', 800),
        $hover-background: color($light-palette, 'primary', 900),
        $active-foreground: contrast-color($light-palette, 'primary', 900),
        $focus-foreground: contrast-color($light-palette, 'primary', 900)
    );

	$crm-grid-search-button: button-theme(
        $background: transparent,
        $focus-background: color($light-palette, 'gray', 200),
        $hover-background: color($light-palette, 'gray', 200)
    );

	$crm-input-drop-down: input-group-theme(
        $placeholder-color: color($light-palette, 'gray', 500),
        $idle-text-color: color($light-palette, 'gray', 900),
        $size: sizable(rem(24px), rem(32px), rem(40px))
    );

    input-group[type="search"] {
        --ig-size: var(--ig-size-small);
    }

	.grid__wrapper {
        --ig-size: var(--ig-size-medium);
		width: inherit;
		position: relative;
		height: 100%;
		background: transparent;
        padding: 1rem;
	}

	.avatar-cell {
        --ig-size: var(--ig-size-small);

		width: 100%;
		display: flex;
		justify-content: center;
	}

	// grid caption styling
	.crm-toolbar-template {
		justify-content: space-between;
		display: flex;
		flex: 1 0 0%;
		align-items: center;
		padding-right: rem(24px);
		border-radius: 2px;

		& span {
			margin-right: auto;
		}

		.igx-button--flat {
			flex-wrap: nowrap;
			white-space: nowrap;
		}

		.igx-button--icon {
			border-radius: 0;
		}

		.logo-propeller {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10px;
		}
	}

	.sample-flex-container {
		display: flex;
		align-self: center;
		justify-content: flex-end;
		max-width: 500px;
		width: 70%
	}

	@include css-vars($crm-grid-toolbar);

	.igx-grid-toolbar__actions {
		.igx-button--outlined {
			border: none;
		}
	}

	.igx-grid-toolbar__title {
		max-width: 68ch;
	}

	.igx-grid-toolbar__custom-content {
		flex: 1 0 0%;
	}

	.igx-grid-toolbar__actions {
		.igx-button--outlined {
			margin-left: 0.5rem;
		}
	}

	.igx-grid-toolbar__actions {
		.igx-button--outlined {
			border: none;
		}
	}

	.igx-grid-toolbar__actions {
		@include css-vars($crm-grid-toolbar-button);
	}

	.crm-sample-toolbar__title {
		margin-right: rem(16px);
		display: flex;
		align-items: center;
		justify-self: flex-start;
		width: 30%;
	}

	.crm-sample-toolbar__ellipsis {
		@include ellipsis();
		opacity: 0;
		animation: slide-fade 1.25s .25s ease-out forwards;
	}

	.igx-input-group--search {
		width: 100%;
	}

	.sample-flex-container {
		.igx-input-group,
		.igx-input-group--focused {
			font-size: 13px;
			overflow: hidden;
		}

		.igx-input-group__input {
			&::placeholder {
				opacity: 1;
			}
		}
	}

	.caseSensitiveButton {
		margin-left: 8px;
	}

	.igx-input-group--search .igx-input-group__bundle .igx-button--icon {
		border-radius: 0;
	}

	.caseSensitiveIcon {
		width: 1.25rem;
		height: 1.25rem;
		font-size: 1.25rem;
	}

	.searchButtons {
		margin-left: 4px;
	}

	.case-sensitive--active {
		background: color($color: 'primary', $variant: 200);
	}

	.igx-grid__th-resize-line {
		background: color($color: 'secondary', $variant: 500);
	}

	.igx-input-group--search .igx-input-group__bundle,
	.igx-input-group--search .igx-input-group__bundle:hover {
		box-shadow: none;
	}

    @include css-vars($crm-input-drop-down);

	.sample-flex-container {
		.igx-input-group,
		.igx-input-group--focused {
			.igx-input-group__bundle {
				transition: all 250ms ease-in-out;
			}

			igx-icon {
				color: color($color: 'primary', $variant: 200);
			}
		}

		.igx-input-group__textarea,
		.igx-input-group__input {
			color: color($color: 'primary', $variant: 100);
		}

		.igx-input-group {
			igx-icon {
				color: contrast-color($color: 'gray', $variant: 900);
			}

			&:hover,
			&:focus,
			&.igx-input-group--focused {
				igx-icon {
					color: color($color: 'gray', $variant: 600);
				}

				.igx-input-group__bundle {
					background: contrast-color($color: 'gray', $variant: 900);
					color: color($color: 'gray', $variant: 600);
				}

				.igx-input-group__input {
					&::placeholder {
						color: color($color: 'gray', $variant: 600);
						opacity: 1;
					}
				}

				.igx-input-group__textarea,
				.igx-input-group__input {
					color: color($color: 'gray', $variant: 600);
				}

				.igx-button--icon {
					&:focus,
					&:active {
						color: color($color: 'gray', $variant: 600);
					}
				}
			}
		}

		.igx-button--icon {
			&:focus,
			&:active {
				color: color($color: 'primary', $variant: 100);
				background: transparent;
			}
		}

		.igx-input-group__input {
			&::placeholder {
				color: contrast-color($color: 'gray', $variant: 900);
				opacity: 1;
			}
		}
	}

	.igx-input-group--search .igx-input-group__bundle {
		background-color: color($color: 'primary', $variant: 800);

		@include css-vars($crm-grid-search-button);
	}

	.grid__wrapper:not(.dark_grid) {
		@include css-vars($crm-grid-theme);
		@include css-vars($summary-theme);
		@include css-vars($checkbox-theme);
	}


    // DARK THEME
    $dark-palette: palette(
        $primary: #09f,
        $secondary: #fff,
        $surface: #222,
    );

    $checkbox-dark-theme: checkbox-theme(
        $fill-color: color($color: 'gray', $variant: 900),
        $tick-color: contrast-color($color: 'gray', $variant: 900)
    );

    $crm-dark-grid-theme: grid-theme(
        $row-selected-background: color($color: 'gray', $variant: 100),
        $row-selected-text-color: contrast-color($color: 'gray', $variant: 100),
        $row-hover-background: color($color: 'gray', $variant: 200),
        $row-hover-text-color: contrast-color($color: 'gray', $variant: 200),
        $row-selected-hover-background: color($color: 'gray', $variant: 200),
        $row-selected-hover-text-color: contrast-color($color: 'gray', $variant: 200),
        $cell-selected-background: color($color: 'gray', $variant: 900),
        $cell-selected-text-color: contrast-color($color: 'gray', $variant: 900),
        $cell-active-border-color: color($color: 'gray', $variant: 900),
    );

    $crm-grid-dark-button: button-theme(
        $foreground: color($color: 'primary', $variant: 500),
        $hover-foreground: color($color: 'primary', $variant: 500),
        $focus-foreground: color($color: 'primary', $variant: 500),
    );

    $crm-grid-dark-progress: progress-linear-theme(
        $track-color: color($color: 'gray', $variant: 500)
    );

	.dark_grid {
        @include palette($dark-palette);
		@include css-vars($checkbox-dark-theme);
		@include css-vars($crm-dark-grid-theme);
		@include css-vars($crm-grid-dark-button);
		@include css-vars($crm-grid-dark-progress);

		.igx-grid-toolbar__actions {
			@include css-vars($crm-grid-toolbar-button);
		}

        .sample-flex-container {
            .igx-input-group,
            .igx-input-group--focused {
                igx-icon {
                    color: color($color: 'primary', $variant: 200);
                }
            }

            .igx-input-group__textarea,
            .igx-input-group__input {
                color: color($color: 'primary', $variant: 100);
            }

            .igx-input-group {
                igx-icon {
                    color: contrast-color($color: 'gray', $variant: 50);
                }

                &:hover,
                &:focus,
                &.igx-input-group--focused {
                    igx-icon {
                        color: color($color: 'gray', $variant: 400);
                    }

                    .igx-input-group__bundle {
                        background: contrast-color($color: 'gray', $variant: 50);
                        color: color($color: 'gray', $variant: 400);
                    }

                    .igx-input-group__input {
                        &::placeholder {
                            color: color($color: 'gray', $variant: 400);
                        }
                    }

                    .igx-input-group__textarea,
                    .igx-input-group__input {
                        color: color($color: 'gray', $variant: 400);
                    }

                    .igx-button--icon {
                        &:focus,
                        &:active {
                            color: color($color: 'gray', $variant: 400);
                        }
                    }
                }
            }

            .igx-input-group__input {
                &::placeholder {
                    color: contrast-color($color: 'gray', $variant: 50);
                }
            }
        }
    }
}

.animated-fan {
	animation: spin-fade 1.5s cubic-bezier(0.21, 1.07, 0.99, 1) forwards;
}

@keyframes spin-fade {
	0% {
		opacity: 0;
		transform: rotate(0);
	}
	100% {
		opacity: 1;
		transform: rotate(270deg);
	}
}

@keyframes slide-fade {
	0% {
		transform: translateX(-5%);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
scss

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

What is an Angular Data Grid?

Angular 데이터 그리드는 일련의 행과 열로 표 형식의 데이터를 표시하는 데 사용되는 구성 요소입니다. 테이블이라고도 하는 데이터 그리드는 Microsoft Excel과 같은 인기 있는 소프트웨어가 있는 데스크톱 세계에서 잘 알려져 있습니다. 그리드는 오랫동안 데스크톱 플랫폼에서 사용할 수 있었지만 최근 Angular UI와 같은 웹 앱 UI의 일부가 되었습니다. 최신 그리드는 복잡할 수 있으며 데이터 바인딩, 편집, Excel과 유사한 필터링, 사용자 지정 정렬, 그룹화, 행 재정렬, 행 및 열 고정, 행 집계, Excel, CSV 및 pdf 형식으로 내보내기 등 다양한 기능을 포함할 수 있습니다.

Why Use an Angular Data Grid?

Angular 데이터 그리드는 많은 데이터를 저장하고 빠르게 정렬해야 하는 사용 사례에 필수적입니다. 여기에는 대량, 고속 데이터를 자주 사용하는 금융 또는 보험과 같은 산업이 포함될 수 있습니다. 종종 이러한 회사의 성공은 이러한 데이터 그리드의 기능과 성능에 달려 있습니다. 예를 들어, 주식 결정을 마이크로초 단위로 내려야 하는 경우 데이터 그리드가 지연 시간이나 깜빡임 없이 수행되는 것이 필수적입니다.

Key Features

Ignite UI for Angular 대용량 및 실시간 데이터만을 위한 것이 아닙니다. 이것은 기능이 풍부한 Angular 그리드로, 혼자서는 결코 달성할 수 없는 기능을 제공합니다. 이 예는 데이터 그리드의 몇 가지 주요 기능을 보여줍니다.

수백만 개의 레코드를 로드할 수 있는 가상화된 행 및 열
셀, 행 및 일괄 업데이트 옵션을 사용한 인라인 편집
Excel 스타일 필터링 및 전체 Excel 키보드 탐색 기능
대화형 Outlook 스타일 그룹화
그리드 셀이나 열의 데이터를 기반으로 한 열 요약
데이터 시각화를 포함하여 Excel로 내보내기
Size- 행의 높이와 크기를 조정합니다.
스파크라인 열 및 이미지 열과 같은 열 템플릿

Data Virtualization and Performance

데이터 그리드의 열 및 행 수준 가상화를 통해 Angular 그리드에서 무제한 행과 열을 원활하게 스크롤하세요. 로컬 또는 원격 데이터 소스를 지원하므로 데이터가 어디에 있든 최상의 성능을 얻을 수 있습니다. 사용자는 랙, 화면 깜박임 또는 시각적 지연 없이 엔터프라이즈 속도로 Excel과 같은 스크롤을 경험하게 되며, 성능을 저하시키지 않으면서도 최상의 사용자 경험(UX)을 제공합니다.

빠르고 쉬운 사용자 정의, 구축 및 구현

Ignite UI Angular Data Grid는 무제한의 행과 열의 데이터를 처리할 수 있으며, 사용자 지정 템플릿과 실시간 데이터 업데이트에 대한 액세스를 제공합니다. 쉬운 테마와 브랜딩을 위한 직관적인 API를 갖추고 있어 최소한의 코드로 데이터에 빠르게 바인딩할 수 있습니다.

샘플 보기

Angular Grid Paging, Sorting, Filtering, & Searching

사용자가 기본 호출기를 사용하여 데이터 세트를 탐색할 수 있도록 하거나 자신만의 템플릿을 만들어 자신만의 페이징 경험을 제공할 수 있습니다. 단일 및 다중 열 정렬, 그리드의 전체 텍스트 검색, 데이터 유형 기반 Microsoft Excel 스타일 필터링을 포함한 여러 고급 필터링 옵션을 완벽하게 지원합니다.

Inline Angular Grid Editing

열의 데이터 유형을 기반으로 편집 가능한 열에 대한 기본 셀 템플릿을 제공합니다. 편집 가능한 열에 대한 사용자 정의 템플릿을 정의하고 셀 값의 변경 사항을 커밋하고 삭제하기 위한 기본 동작을 재정의할 수 있습니다.

접근성 준수를 보장하고 사용성을 개선하여 Angular 데이터 그리드에서 Excel과 같은 키보드 탐색을 활성화하고, 위, 아래, 오른쪽, 왼쪽, 탭 및 Enter 키를 사용합니다. 마우스나 키보드를 사용하여 Angular 그리드에서 단일 또는 여러 행 선택을 전환하여 전체 행을 선택하거나 선택 취소하거나 그리드 도구 모음에서 기본 제공 모두 선택/모두 선택 취소 확인란을 사용하여 행 선택 작업을 수행할 수 있습니다.이 기능에 대한 최신 개선 사항에 대해 알아보세요.

Angular Grid Accessibility & ARIA Support

Ignite UI for Angular의 각 Angular 구성 요소는 최신 접근성 지침 및 사양에 따라 구현되었습니다. Angular 구성 요소는 OS 또는 브라우저에서 제공하는 접근성 기술인 화면 판독기를 사용하여 테스트되었습니다. 당사 팀은 지침이 구현될 뿐만 아니라 시각 장애인 또는 시각 장애인에게 제공되는 실제 콘텐츠가 실제로 소비 가능하고 사용자 친화적인지 확인합니다. Ignite UI for Angular 데이터 그리드는 a11y 키보드 접근성, ARIA 및 접근 가능한 색상 팔레트로 완벽하게 접근 가능합니다. 자세히 알아보기.

Angular Data Grid Component에서 ARIA 지원을 위한 아이콘 표현

Column Grouping, Pinning, Summaries, & Moving in the Angular Grid

내장된 열 요약 또는 사용자 정의 요약 템플릿을 지원하여 마우스 상호 작용, 터치 또는 API를 통해 열 또는 사전 설정된 열 그룹을 그룹화합니다. 이동, 드래그 및 재정렬 작업 중에 대화형 열 고정을 완벽하게 지원하여 사용자가 대화형으로 열을 숨기거나 이동할 수 있습니다.

Angular Data Grid 구성 요소에 대해 열 그룹화, 고정 및 요약 기능이 활성화된 데이터 그리드

Multi-Column Headers in the Angular Grid

다중 열 헤더를 활성화하면 공통 헤더 아래에 열을 그룹화할 수 있습니다. 모든 열 그룹은 열 고정, 그룹 내 대화형 열 이동, 그룹 정렬 및 숨기기를 완벽하게 지원하여 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다.

Angular Data Grid 구성 요소에서 다중 열 헤더 기능이 활성화된 데이터 그리드

Theming, Styling, & Templating in the Angular Grid

Ignite UI for Angular 사용하면 CSS로 셀 모양을 사용자 지정하거나 ng-template으로 모든 셀을 다시 템플릿화하여 모든 셀에 렌더링 모양을 제공할 수 있습니다. Material Design을 완벽하게 지원하므로 사용하기 쉬운 테마 엔진으로 브랜드 경험을 사용자 지정할 수 있습니다.

Angular Data Grid의 테마 및 템플릿 기능을 보여주는 다양한 그리드 디자인의 애니메이션

Excel Library for the Angular Grid

XLXS, XLS, TSV 또는 CSV로 데이터 그리드를 내보내기 위한 전체 지원. Ignite UI for Angular 엑셀 라이브러리 300개 이상의 수식, 표 지원, 조건부 서식, 차트 생성 등이 포함되어 있으며, 클라이언트 컴퓨터에 Microsoft Excel이 없어도 모든 기능을 사용할 수 있습니다.

Angular Data Grid에서 Microsoft Excel과 유사한 기능의 아이콘 표현

Angular Grid Features

지금 당장 가장 빠른 Angular Grid를 다운로드하세요!

지금 다운로드
30일 무료 평가판. 신용 카드가 필요하지 않습니다.

Ignite UI for Angular Supported Browsers

Angular Data Grid는 다음을 포함한 모든 최신 웹 브라우저에서 지원됩니다.

크롬
엣지/엣지 크롬
파이어폭스
원정 여행
폴리필이 포함된 Internet Explorer 11

Ignite UI for Angular Support Options

Angular 제품에 대해 수상 경력에 빛나는 Infragistics 지원 서비스를 받는 방법에는 여러 가지가 있습니다.

Angular 지원 홈페이지에서 시작하세요
Angular 문서를 읽고 Angular 샘플을 실험해보세요
최신 정보를 얻으려면 Angular 블로그를 읽어보세요.
지원 사례 제출
Angular 참조 애플리케이션에서 배우기

Ignite UI for Angular Trial License and Commercial

Ignite UI for Angular 구독 모델을 통해 제공되는 상업적으로 라이선스된 제품입니다. 30일 평가판에 등록하면 Ignite UI for Angular 제품을 무료로 사용해 볼 수 있습니다. 평가판 기간이 끝나면 당사 웹사이트에서 라이선스를 구매 하거나 해당 지역의 영업팀에 전화하여 라이선스를 구매할 수 있습니다.

Frequently Asked Questions

Infragistics Ignite UI for Angular Data Grid를 선택해야 하는 이유는 무엇입니까?

가상화된 행 및 열
셀, 행 및 일괄 업데이트 옵션을 사용한 인라인 편집
Excel 스타일 필터링 및 전체 Excel 키보드 탐색 기능
Interactive Outlook-style Grouping
그리드 셀이나 열의 데이터를 기반으로 한 열 요약
데이터 시각화를 포함하여 Excel로 내보내기
Size- 행의 높이와 크기를 조정합니다.
Column templates like Sparkline Column and Image Column

Infragistics Ignite UI for Angular Data Grid의 가격은 어떻게 됩니까?

Angular 구성 요소는 Ignite UI 번들의 일부로 포함됩니다. 단일 개발자 라이선스는 1년 구독의 경우 1,295달러부터 시작하며, 여기에는 1년의 표준 지원 및 업데이트가 포함됩니다. 또한 다년 라이선스에 대한 할인도 제공합니다. 가격에 대한 자세한 내용은 가격 페이지를 참조하세요.

여러 플랫폼에서 애플리케이션을 개발하는 경우 WPF 및 Windows Forms와 같은 데스크톱 플랫폼과 Angular, Web Components, ASP.NET MVC 및 ASP.NET Core 용 모든 최신 웹 도구 집합을 포함하는 완전한 앱 개발 패키지인 Infragistics Ultimate를 고려하십시오.

Infragistics Ignite UI for Angular Data Grid 컨트롤을 별도로 구입할 수 있습니까?

아니요, Angular Data Grid는 별도로 구매할 수 없습니다. 수십 개의 UI 컨트롤 및 구성 요소와 Angular Financial Charting을 포함한 60개 이상의 차트가 포함된 Ignite UI for Angular 제품의 일부입니다. Angular, ASP.NET MVC, Web Components 또는 ASP.NET Blazor와 같은 다른 최신 웹 플랫폼에 관심이 있다면 구독료로 단 $100에 모든 웹 플랫폼을 제공하는 Ignite UI 제품 번들을 확인하십시오. 이는 수백 개의 컨트롤, 구성 요소 및 데이터 시각화를 매우 저렴한 가격에 제공하는 것입니다.

Angular 및 Infragistics Ignite UI for Angular Data Grid 컨트롤을 설치하려면 어떻게 해야 합니까?

Angular Data Grid를 시작하려면 [시작 가이드](general/getting-started.md)의 단계를 따르세요. 또한 Angular 개발을 위한 모범 사례 가이드일 뿐만 아니라 영감을 주기 위해 설계된 샘플 애플리케이션 라이브러리도 유지 관리합니다.