Skip to content

Examples

The repository ships runnable demos using the standalone browser loader (examples/ folder). Each example is a single self-contained HTML file; build the distribution and open the files directly or serve the repository root.

ExampleFileShows
Declarative embeddeclarative.htmlZero-JS startup via data-ezg-editor
Programmatic embedprogrammatic.htmlConstructor with worksheets, header styling after Ezygrid.ready
Eventsevents.htmlworkbook.onOperation live recalculation
Advanced sheetadvanced.htmlToolbar + formula bar, validation, conditional formats, tables, CSV export

Running locally

bash
pnpm build   # generates packages/core/dist/browser/

Serve the repository root with any static file server and open examples/declarative.html.

Key snippets

Live recalculation hook

js
workbook.onOperation((op) => {
  if (op.type === 'cell.set') status.textContent = `changed ${op.payload.row},${op.payload.column}`;
});
js
const sheet = editor.workbook.activeWorksheet;
sheet.addValidation({ range: 'B2:B100', type: 'number', action: 'reject', min: 0, max: 1000 });
sheet.conditionalFormats.add({ range: 'B2:B100', type: 'cellIs', operator: 'lt', value: 0, style: { color: '#b91c1c' }, priority: 1 });
sheet.addTable({ name: 'Inventory', range: 'A1:E50' });
sheet.addChart({ type: 'column', source: 'A1:B10', title: 'Stock', anchor: { row: 12, column: 6 }, width: 420, height: 260 });
sheet.toCsv({ escapeFormulas: true });

Released under the MIT License.