@libraz/formulon-cell-vue

@libraz/formulon-cell-vue

A working spreadsheet in a Vue app. <Spreadsheet> and SpreadsheetToolbar wrap @libraz/formulon-cell, a canvas-rendered grid with desktop-spreadsheet chrome over the formulon WASM calc engine. Prop changes go through the core imperative API, so the canvas is never re-mounted and selection, focus, and event subscriptions survive.

Try it in the live demo.

The grid, ribbon, menus, commands, and dialogs all live in core; this package only binds them to Vue.

Install

npm install @libraz/formulon-cell-vue @libraz/formulon-cell vue zustand

Bundler settings are in the project README.

Quick start

<script setup lang="ts">
import { Spreadsheet, presets, type SpreadsheetInstance } from '@libraz/formulon-cell-vue';
import '@libraz/formulon-cell/styles.css';

const ready = (instance: SpreadsheetInstance) => {
  console.log('mounted', instance.workbook.version);
};
</script>

<template>
  <Spreadsheet
    :features="presets.full()"
    locale="en"
    style="width: 100%; height: 100vh"
    @ready="ready"
  />
</template>

Composables

const sheetRef = ref<SpreadsheetExposed | null>(null);
const instance = computed(() => sheetRef.value?.instance.value ?? null);
const selection = useSelection(instance);
const { locale, strings } = useI18n(instance);

Ribbon toolbar

SpreadsheetToolbar ships as an SFC subpath so it compiles with your own Vue pipeline. It adapts core Spreadsheet.mountToolbar; pass dropdownActions to replace individual dropdown handlers without forking the ribbon.

<script setup lang="ts">
import SpreadsheetToolbar from '@libraz/formulon-cell-vue/toolbar.vue';
import '@libraz/formulon-cell-vue/toolbar.css';
</script>

<template>
  <SpreadsheetToolbar :instance="instance" :active-tab="tab" locale="en" @tab-change="tab = $event" />
</template>

Restricted embedding

ui, policy, viewport, context-menu, overlays, and toolbar props apply at runtime without re-mounting. fixedFormPolicy and viewerPolicy are re-exported, and successful batch updates are emitted as change-batch.

<Spreadsheet
  :ui="{ profile: 'embedded' }"
  :policy="fixedFormPolicy([{ sheet: 0, r0: 1, c0: 1, r1: 9, c1: 2 }])"
  @change-batch="save"
/>

See Embedding and use cases for viewport limits, context-menu composition, and host updates.

Documentation

• Live demo
• React / Vue
• Options
• Embedding and use cases
• Modals and fullscreen
• Theming
• Language and labels

License

Apache-2.0