options: {
Cfg: { SearchMode: 2, MergeSheet: 4 },
Def: { Row: { Height: 24 } },
Cols: [
{ Header: 'Name', Width: 120 },
{ Header: 'Score', Width: 80, Type: 'Int' },
],
},
data: {
Row: [
{ Name: 'Alice', Score: 95 },
{ Name: 'Bob', Score: 87 },
],
},
})
.then((sheet) => {
console.log('Sheet created, id:', sheet.id)
})
.catch((err) => {
console.error('Sheet creation failed:', err)
})
// Using an HTMLElement reference directly
const el = document.getElementById('myGrid')
loader.createSheet({ element: el, options: { Cfg: { SearchMode: 2 } } })
.then((sheet) => console.log('Sheet id:', sheet.id))
```
```
--------------------------------
### Load IBSheet with Options
Source: https://github.com/ibsheet/loader/blob/master/public/index.html
Load the IBSheet component using the loader. This includes specifying the base URL, locales, plugins, and license. It also handles the 'loaded' event to confirm successful loading.
```javascript
loader
.once('loaded', evt => {
// log('sheetLog', '✓ IBSheet loaded successfully');
console.log('loader ibsheet loaded');
console.log(evt);
const target = evt.target
console.log(target);
console.log('ibsheet loaded!')
if (target.alias === 'ibsheet') {
IBSheet = loader.getIBSheetStatic()
console.log('IBSheet Static :');
console.log(IBSheet);
}
})
.load({
name: 'ibsheet',
baseUrl: '/sheet',
locales: ['ko'],
plugins: ['dialog', 'common', 'excel'],
// dependentUrls: [
// // 추가 의존성 파일이 있다면 여기에
// // ],
// license: 'your-license-key-here'
license: '1234',
})
```
--------------------------------
### Handle IBSheet Creation Events
Source: https://github.com/ibsheet/loader/blob/master/public/index.html
Sets up event listeners for IBSheet creation lifecycle. This includes handling the 'create-sheet' initiation, successful 'created-sheet' event, and 'create-sheet-failed' errors.
```javascript
loader.once('create-sheet', evt => {
console.log('loader once create-sheet event');
console.log(evt);
const { data } = evt
console.log('create sheetId:', data.id)
})
```
```javascript
loader.once('created-sheet', evt => {
console.log('loader once created-sheet event');
const sheet = evt.target
console.log('created sheetId:', sheet.id)
})
```
```javascript
loader.once('create-sheet-failed', evt => {
console.log('loader once create-sheet-failed event');
console.log(evt);
const { data, error } = evt
console.error('Create SHEET_ERROR', data.id, error)
})
```
--------------------------------
### Create IBSheet Instance
Source: https://context7.com/ibsheet/loader/llms.txt
Loads IBSheet (if not already loaded) and instantiates a new sheet on the page. The `id` property is auto-generated if omitted; `el` / `elementId` refer to the target container element's DOM id. The `options` / `config` key accepts the full IBSheet options object. Handles creation success or failure via Promises.
```javascript
import loader from '@ibsheet/loader'
loader.config({
registry: [
{
name: 'ibsheet',
baseUrl: '/assets/ibsheet',
theme: 'default',
locales: ['ko'],
},
],
})
// Minimal usage — id and el are optional
loader
.createSheet({
el: 'sheetDiv', // id of target
options: {
Cfg: { SearchMode: 2, MergeSheet: 4 },
Def: { Row: { Height: 24 } },
Cols: [
{ Header: 'Name', Width: 120 },
{ Header: 'Score', Width: 80, Type: 'Int' },
],
},
data: {
Row: [
{ Name: 'Alice', Score: 95 },
{ Name: 'Bob', Score: 87 },
],
},
})
.then((sheet) => {
console.log('Sheet created, id:', sheet.id)
})
.catch((err) => {
console.error('Sheet creation failed:', err)
})
// Using an HTMLElement reference directly
const el = document.getElementById('myGrid')
loader.createSheet({ element: el, options: { Cfg: { SearchMode: 2 } } })
.then((sheet) => console.log('Sheet id:', sheet.id))
```
--------------------------------
### Manage Library Registry with loader.registry
Source: https://context7.com/ibsheet/loader/llms.txt
The `registry` property exposes the `LoaderRegistry` for managing registered library definitions. Use it to add, query, update, or remove items at runtime.
```javascript
import loader from '@ibsheet/loader'
// Add a single item
loader.registry.add({
name: 'ibsheet',
baseUrl: '/assets/ibsheet',
theme: 'default',
locales: ['ko'],
plugins: ['excel'],
})
// Add multiple items at once
loader.registry.addAll([
{ name: 'ibsheet', baseUrl: '/assets/ibsheet' },
{ name: 'ibchart', baseUrl: '/assets/ibchart' },
])
// Check existence
console.log(loader.registry.exists('ibsheet')) // true / false
// Retrieve a registry item
const item = loader.registry.get('ibsheet')
console.log(item.alias, item.loaded) // "ibsheet", false
// Get all items (or filter by name)
const allItems = loader.registry.getAll()
const sheetItems = loader.registry.getAll('ibsheet')
// List all aliases
console.log(loader.registry.list()) // ["ibsheet", "ibchart", ...]
// Inspect as JSON string
console.log(loader.registry.info('ibsheet'))
// Update an existing item's URLs / options
loader.registry.update('ibsheet', {
theme: 'dark',
locales: ['en'],
})
// Remove an item
loader.registry.remove('ibsheet')
// Item count
console.log(loader.registry.length)
```