DATAGRID

AG Grid starter

DATAGRID

GitHub에서 관리하는 JSON 데이터를 읽어, Angular 기반 AG Grid 화면으로 이어지는 샘플부터 시작합니다.

첫 샘플은 Sencha 스타일의 조밀한 업무용 그리드 감각을 목표로 하고, 데이터·컬럼·뷰 설정을 각각 GitHub 파일로 분리합니다.

도입 문의Grid core 샘플Grid addons 샘플내부 관리

Framework

Angular v22

샘플 베이스는 Angular 기준으로 잡았습니다.

Data source

GitHub raw

행 데이터와 컬럼 정의를 저장소 파일로 관리합니다.

Theme

ag-theme-quartz-dark

다크 계열 기본 테마에서 Sencha 감성으로 밀어갑니다.

OrdersAG Grid Community
OrdersBillingRiskAudit
OrderStatusOwnerRegionPlanAmount
ORD-2041ReviewMina ParkSeoulSecure Ops$12,400
ORD-2058ApprovedJin WooBusanCore$1,230
ORD-2072BlockedOps QueueTokyoGlobal Billing$64,200
ORD-2087QueuedAuto ReviewSingaporeEdge Scale$3,410
ORD-2099ChangedRavi KumarFrankfurtAudit Pro$7,880

Source

GitHub tracked

GitHub data contract

데이터, 컬럼, 뷰를 따로 관리하는 첫 샘플

GitHub raw JSON으로 관리하는 AG Grid Angular 샘플. 운영 데이터 샘플은 행 데이터 파일, 컬럼 정의 파일, 뷰 설정 파일로 나눠 두고 AG Grid가 이를 그대로 읽어 초기 상태를 구성합니다.

Rows JSON

`orders.rows.json`

레코드 목록과 값 · GitHub 단일 소스

Columns JSON

`orders.columns.json`

헤더, 폭, 핀 고정 정의 · GitHub 단일 소스

View JSON

`orders.view.json`

기본 정렬과 강조 상태 · GitHub 단일 소스

원본 raw 주소는 각각 `orders.rows.json`, `orders.columns.json`, `orders.view.json` 이며, 현재 미리보기와 API는 모두 GitHub raw JSON만 단일 소스로 사용합니다.

Focus

  • GitHub에 저장된 JSON을 단일 데이터 소스로 사용
  • Angular 기반 AG Grid 샘플 코드부터 구조 고정
  • Sencha식 조밀한 행 밀도와 상태 강조를 우선 적용
  • 차후 액션 열, 편집기, 필터 패널을 단계적으로 추가

Angular v22

`orders-grid.component.ts`

AG Grid starter
import { CommonModule } from "@angular/common";
import { HttpClient } from "@angular/common/http";
import { Component, inject } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import {
  ColDef,
  GridOptions,
  ModuleRegistry,
  AllCommunityModule,
} from "ag-grid-community";

ModuleRegistry.registerModules([AllCommunityModule]);

@Component({
  selector: "app-orders-grid",
  standalone: true,
  imports: [CommonModule, AgGridAngular],
  templateUrl: "./orders-grid.component.html",
})
export class OrdersGridComponent {
  private readonly httpClient = inject(HttpClient);

  readonly gridOptions: GridOptions = {
    rowHeight: 38,
    headerHeight: 42,
    animateRows: false,
    defaultColDef: {
      sortable: true,
      filter: true,
      resizable: true,
    },
  };

  columnDefinitions: ColDef[] = [];
  rowData: Array<Record<string, unknown>> = [];

  ngOnInit() {
    this.httpClient
      .get<ColDef[]>("https://datagrid.opl.io.kr/api/datagrid-demo/columns")
      .subscribe((columnDefinitions) => {
        this.columnDefinitions = columnDefinitions;
      });

    this.httpClient
      .get<Array<Record<string, unknown>>>("https://datagrid.opl.io.kr/api/datagrid-demo/rows")
      .subscribe((rows) => {
        this.rowData = rows;
      });
  }
}

Angular template

`orders-grid.component.html`

Dense grid shell
<ag-grid-angular
  class="ag-theme-quartz-dark orders-grid"
  [gridOptions]="gridOptions"
  [columnDefs]="columnDefinitions"
  [rowData]="rowData">
</ag-grid-angular>