syidaxgrid
홈 가격 내 정보
GridGetting started

설치와 연결.

npm 설치부터 CSS, Grid 등록, Pro 라이선스 연결까지 안내합니다.

빠르게 이해하기

상품과 수량으로 구성된 작은 표부터 시작한 뒤 기능을 추가하세요. 필요한 에디션을 npm에서 설치합니다.

앱에서 연결하는 순서

  1. npm 에디션 선택

    앱 프로젝트에서 @syidax/advanced 또는 @syidax/advanced-pro를 npm으로 설치하고 CSS와 컴포넌트를 import하세요.

  2. Grid와 데이터 연결

    sy-grid를 등록한 뒤 화면에 요소를 놓고 columnDefs에 열, rowData에 행을 전달하세요. 아래 기본 예제에는 제품 3개가 들어 있습니다.

  3. 첫 편집 확인

    로컬 웹 서버에서 실행해 제품과 수량이 보이는지 확인하세요. 수량 셀을 두 번 눌러 편집한 뒤 Pro 기능이 필요할 때 라이선스 등록을 추가합니다.

확인할 결과

제품과 수량 두 열, 세 행이 있는 첫 Grid가 표시되고 수량을 편집할 수 있습니다.

한 페이지에서는 Community와 Pro 중 하나만 등록하세요. 예제는 npm 패키지와 CSS import를 처리하는 앱 프로젝트에서 실행합니다.

알아두면 쉬운 용어

등록
브라우저에 sy-grid 태그의 동작을 알려 주는 과정입니다.
columnDefs / rowData
표의 열 구성 / 각 행의 실제 값입니다.

준비 사항

#

Node.js와 npm, 패키지 import 및 CSS import를 처리하는 앱 빌드 도구를 준비하세요. 프로젝트의 package.json이 있는 폴더에서 설치합니다. JavaScript 예제는 앱 진입 파일에 넣고 개발 서버에서 실행하세요.

npm 설치

#

Community

npm install @syidax/advanced@latest

@syidax/advanced · npm ↗

Pro

npm install @syidax/advanced-pro@latest

@syidax/advanced-pro · npm ↗

사용할 에디션 하나를 선택하세요. 두 에디션 모두 공개 npm에서 설치하며, Pro 기능에는 유효한 제품 라이선스가 필요합니다. Pro로 전환하면 CSS, 컴포넌트, 라이선스 import를 모두 같은 Pro 패키지로 맞춥니다.

Core Pro와 Chart/Grid를 함께 사용할 때

npm install @syidax/core@npm:@syidax/core-pro@latest @syidax/advanced-pro@latest

이 조합에서는 Core Pro를 @syidax/core 별칭으로 설치하므로 Core의 CSS·컴포넌트·라이선스 import도 @syidax/core/…를 사용합니다. Chart/Grid는 @syidax/advanced-pro/…를 사용합니다. Chart/Grid Community를 사용하려면 명령의 @syidax/advanced-pro@latest을 @syidax/advanced@latest로 바꾸세요. Chart와 Grid는 같은 패키지에 포함됩니다.

Grid 등록과 데이터 연결

#

앱의 진입 파일에서 sy-grid를 등록하세요. 배열·객체·함수는 JavaScript 프로퍼티에 할당합니다. 아래는 제품과 수량을 표시하고 수량을 편집하는 기본 예제입니다.

<sy-grid id="orders"></sy-grid>
<script type="module">
import '@syidax/advanced/css/grid';
import { defineCustomElement } from '@syidax/advanced/components/sy-grid.js';
defineCustomElement();
await customElements.whenDefined('sy-grid');
const grid = document.querySelector('#orders');
Object.assign(grid, {
  height: 280,
  theme: "alpine",
  locale: "ko",
  brandLogo: "",
  getRowId: row=>row.id,
  defaultColDef: { "sortable": true, "resizable": true },
  columnDefs: [{ "field": "product", "headerName": "제품", "width": 200 }, { "field": "quantity", "headerName": "수량", "width": 120, "editable": true, "editor": "number" }],
  rowData: [{ "id": "A-001", "product": "Atlas Sensor", "quantity": 24 }, { "id": "A-002", "product": "Beacon Lite", "quantity": 36 }, { "id": "A-003", "product": "Cipher Pro", "quantity": 18 }]
});
</script>

작업 화면의 적용 코드에서는 JavaScript·React·Vue·Angular 예제를 제공합니다. 서버 렌더링을 사용하는 앱에서는 브라우저에서만 컴포넌트를 등록하세요.

Pro 라이선스 등록 PRO

#

그룹화·피벗·범위 선택이나 로고 사용자 지정 등은 Pro 패키지와 해당 기능의 유효한 권한이 필요합니다. 발급받은 서명된 인증서를 HTTPS 또는 localhost 환경에서 등록한 뒤 Grid를 연결하세요.

import '@syidax/advanced-pro/css/grid';
import { registerLicense } from '@syidax/advanced-pro/license';
const response = await fetch('/licenses/syidax.json');
if (!response.ok) throw new Error('라이선스를 불러오지 못했습니다.');
const result = await registerLicense(await response.json());
if (!result.ok) throw new Error('라이선스 등록에 실패했습니다.');

import { defineCustomElement } from '@syidax/advanced-pro/components/sy-grid.js';
defineCustomElement();

인증서 파일의 경로는 앱에 맞게 바꾸세요. 서명용 비밀 키를 앱에 포함하지 마세요. 로고 설정과 API의 PRO 표시에서 필요한 권한을 확인할 수 있습니다.

GridTab 이동 Enter 열기