@xlcalc/vue

@xlcalc/vue

A Vue 3 spreadsheet component for xlcalc workbooks: Excel in the browser, with the workbook's styles, formulas, editing, context menus, Find and Replace, data validation and outline. Wherever the component could behave differently from Excel, it follows Excel's behavior as measured by xlcalc.

The component accesses its data only through a SheetSource. Two sources are included: memorySource, an in-memory workbook for examples and tests, and localSource from @xlcalc/vue/local, which calculates an xlcalc workbook in a Web Worker and reads and writes xlsx files. A server-side source implements the same interface. MIT license.

Install

npm install @xlcalc/vue vue
npm install xlcalc        # for @xlcalc/vue/local, 0.46.0 or later

At runtime the main entry point depends only on vue and does not include the calculation engine. Its types use xlcalc/contract, so a TypeScript project that uses only the main entry point installs xlcalc as a dev dependency: npm install -D xlcalc.

Quick start

<script setup lang="ts">
import { SheetView, memorySource } from '@xlcalc/vue'
import '@xlcalc/vue/style.css'

const source = memorySource({ sheets: [{ name: 'Sheet1', cells: { A1: 'Hello', B1: 42 } }] })
</script>

<template>
  <SheetView :source="source" style="height: 480px" />
</template>

A workbook from an xlsx file, calculated in the browser:

import { localSource, openXlsx, saveXlsx } from '@xlcalc/vue/local'

const { book, cached } = await openXlsx(file, { locale: 'ru-RU' }) // a File from a file input or a drop
const source = localSource(book, { session: { cached } })           // <SheetView :source="source" :locale="source.locale" />
const { data } = await saveXlsx(source)                             // the xlsx bytes: formulas along with their values

Excel's formatting toolbar (SheetToolbar) and Format Cells dialog (FormatDialog) work with the same source; see toolbar.md.

Apart from the two required methods that read sheets and cells, every feature is an optional method of the source: without edit the sheet is read-only, without find there is no search, and so on. The interface is in English by default and in Russian with ruMessages. Colors and sizes are set by --xs-* CSS variables.

More of these, from a table the page already has to a workbook on your server, are in the quick start.

Documentation

• Quick start: common uses, each with a component that works as written.
• API reference: components, the sheet's methods, the SheetSource contract, memorySource, @xlcalc/vue/local, CSS variables.
• Cell editing and keyboard shortcuts: Excel's keyboard shortcuts, Point mode, Spelling, and the features each optional source method enables.
• Rows, columns and sheets: row, column and sheet tab context menus, sizes, outline.
• Clipboard and fill handle
• Freeze Panes, zoom, Watch Window, Reapply, Show Formulas, Trace Precedents and Trace Dependents
• Tables: Create Table, Convert to Range, Delete Table.
• Hyperlinks, notes, Clear and the default font
• Find and Replace
• Go To and Symbol
• Data validation
• Conditional formatting: Excel's quick rules, galleries, Clear Rules, New Rule and the Rules Manager as the sheet's methods.
• Formula AutoComplete
• Defined names: the Name Box, Define Name, the Name Manager.
• The formatting toolbar and Format Cells
• In-browser calculation: how @xlcalc/vue/local works, xlsx files.
• List mode: the host's list (a view or a report) displayed on the sheet, sorted by the host, with drill-down and a totals row.
• Example app and browser tests

Development

npm install
npm test               # unit tests
npm run typecheck
npm run build          # dist/
npm run check:package  # publint and attw over the packed package
npm run dev:example    # the example app at http://localhost:5181/spa.html

License

MIT