foxnail

OPEN_GRID 1.6.0 — Angular

2026. 09. 20  ·  OPEN GRID

OPEN_GRID 1.6.0 발행 완료. Angular 추가. 워크시트를 엑셀로 내보낼 때 생기던 문제 2건 수정.

요약

항목 내용
버전 1.6.0 (직전 1.5.2)
추가사항 Angular 컴포넌트 open-grid/angular
관련 예제 186개 — 데모 154 · override 32
수정사항 엑셀 내보내기 2건 · 타입 찾기 1건
지원 프레임워크 6개 — Vanilla JS · jQuery · React · Vue 3 · Angular(17 이상) · AngularJS
적용 시 추가된 기능으로 기존 것 별도 수정 필요 없음

1. Angular

  • <open-grid> 태그로 그리드 사용 가능
  • 스탠드얼론 컴포넌트
  • Angular 는 선택 설치. React · Vue · 순수 JS 만 쓰면 설치되지 않고 용량 증가 없음.

1.1 설치

npm install open-grid

1.2 사용 예

import { Component } from '@angular/core';
import { OpenGridComponent } from 'open-grid/angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [OpenGridComponent],
  template: `
    <open-grid
      [columns]="columns"
      [data]="rows"
      [height]="400"
      [editable]="true"
      theme="graphite"
      (cellClick)="onCellClick($event)">
    </open-grid>
  `,
})
export class DemoComponent {
  columns = [
    { field: 'no',   headerText: '번호', width: 70 },
    { field: 'name', headerText: '이름', width: 120 },
    { field: 'dept', headerText: '부서', width: 120 },
  ];
  rows = [
    { no: 1, name: '김민준', dept: '개발팀' },
    { no: 2, name: '이서연', dept: '디자인팀' },
  ];
  onCellClick(e) { console.log(e); }
}

1.3 입력값 · 출력

React 래퍼 · Vue 래퍼와 같음.

구분 속성
입력값 columns · data · height · width · editable · sortable · filterable · theme · options 등
출력 ready · cellClick · rowClick · editEnd · sortChange · filterChange · rowDrop · dataChange

2. 엑셀 내보내기 수정

대상 — exportSheetsExcel(). 워크시트 여러 장을 한 파일로 내보내는 함수.

문제 1.5.2 까지 1.6.0 부터
스타일 누락 글자만 나감. 머리글 색 · 줄무늬 · 테두리 · 정렬이 엑셀에 미적용. 시트마다 테마 스타일 적용완료. 컬럼 너비와 숫자 서식도 적용완료.
수정사항 누락 건 시트를 넣을 때의 데이터가 나감. 화면에서 수정한 내용 누락. 화면의 최신 데이터가 나감.

워크시트도 스타일이 적용되도록 함.

3. 타입 찾기 수정

수정사항 내용
exports 에서 types 를 맨 앞으로 빌드 도구 경고가 안 뜸
typesVersions 추가 moduleResolution: "node" 를 쓰는 프로젝트도 open-grid/react · open-grid/vue · open-grid/angular 의 타입을 찾음

4. 테스트 결과

항목 건 수 결과
단위 테스트 1,796 전건 통과
Angular 데모를 Vanilla 와 화면 대조 154 153 일치 · 1건 차이(미리 그려 두는 행 수)
Angular override 예제를 Vanilla 와 화면 대조 32 30 일치 · 2건 차이(프레임워크마다 내용이 다른 예제)
Angular CLI 기본 설정 그대로 운영 빌드(AOT) 17판 · 22판 전건 통과

대조는 기계가 함. 같은 데이터를 Vanilla 와 Angular 에 넣고, 그려진 화면을 맞춰 봄.

5. 다운로드 링크

MIT 라이선스. 상용도 무료.

공유하기