loader 사용하기

1. 설치하기

 

# using npm
$ npm install --save @ibsheet/loader
# using yarn (https://yarnpkg.com/)
$ yarn add @ibsheet/loader

HTML

 

 

2. 설정하기

 

가장 많이 쓰는 아이템들을 기준으로 아래와 같이 등록합니다. 

선택사항은 사용하지 않으면 등록하지 않아도 되지만, 필수 아이템들은 등록해주셔야 합니다.

import loader from '@ibsheet/loader'

// config 설정시 등록할 아이템
const ibsheetLib = {
  name: 'ibsheet', // 필수
  baseUrl: '<publicpath>/ibsheet', // 필수
  theme: 'default',         // default // 선택
  locales: ['ko'],          // or locales: 'ko' (default) // 선택
  plugins: ['excel', 'common', 'dialog'] // 선택
}

loader.config({
  registry: [ibsheetLib]
})

JavaScript

설정시 참고사항

 

https://ibsheet.github.io/loader-manual/docs/adv/config

 

config 설정시 등록가능한 아이템

https://ibsheet.github.io/loader-manual/docs/adv/registry#common-interface

 

 

3. 이벤트

 

loader 를 등록한 후, 이벤트를 설정할 수 있습니다. 이벤트 리스트는 아래를 참고해주세요.

 

https://ibsheet.github.io/loader-manual/docs/adv/events

 

 

4.  시트 만들기

// get global loader instance
import loader from '@ibsheet/loader'

let sheetId = '';

// load ibsheet and create sheet
loader.createSheet({
  // id: 'sheet', // 정적 아이디
  el: 'sheetDiv',
  options: {
    // ...your options
  },
  data: [
    // ...your data
  ]
}).then(sheet => {
  // sheet: IBSheetInstance
  // 시트 객체가 생성되지만, 시트가 그려지지는 않은 상태.
  // 주의: 해당 구간에서 데이터 조회를 하면 안됩니다. 데이터 조회는 onRenderFirstFinish 이벤트에서 실행해야합니다.
  sheetId = sheet.id; // 동적 id 를 받아와 사용.
  console.log('created ibsheet:', sheet.id)
})

JavaScript

5. 시트 제거하기

 

// get global loader instance
import loader from '@ibsheet/loader'

// sheetId
let sheetId = 'sheet'

// remove sheet
loader.removeSheet(sheetId)

JavaScript

 

6. 시트 전역객체 가져오기

 

// get global loader instance
import loader from '@ibsheet/loader'

const IBSheet = loader.getIBSheetStatic()
console.log(IBSheet); // sheet static

JavaScript

 

 

7. 참고 샘플

 

Starter

 

https://ibsheet.github.io/loader-manual/docs/etc/starter-packages

 

 

8. 데모 샘플

 

React

 

https://ibsheet.github.io/loader-manual/docs/demo/react-demo

 

Vue

 

https://ibsheet.github.io/loader-manual/docs/demo/vue-demo

 

Angular

 

https://ibsheet.github.io/loader-manual/docs/demo/angular-demo