1. 설치하기 ( Node.js 사용시)


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



2. 설정하기


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

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

import loader from '@ibsheet/loader'

// config 설정시 등록할 아이템
const ibsheetLib = {
  name: 'ibsheet', // 필수
  baseUrl: '<publicpath>/ibsheet', // 필수
  theme: 'simple',         // css 파일테마 (설정이 없으면 cs/default/main.css 사용) // 선택
  locales: ['ko'],          // or locales: 'ko' (default) // 선택
  plugins: ['excel', 'common', 'dialog'] // 선택
}

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


- 설정시 참고사항


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)
})

5. 시트 제거하기


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

// sheetId
let sheetId = 'sheet'

// remove sheet
loader.removeSheet(sheetId)


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


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

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



7. 참고 샘플


Starter


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



8. 데모 샘플


1) React


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


2) Vue


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


3) Angular


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