Reactive Spreadsheet-like Calculation In JavaScript – xcell

Preview:

Description:

The xcell library enables you to apply reactive, spreadsheet-like calculations to any elements such as input fields, table cells and more.

Basic usage:

Insert the UMD version of the xcell’s files into the document.

<script src="https://unpkg.com/xcell@latest/dist/xcell-umd.js"></script>
<script src="https://unpkg.com/xcell-inspect@latest/dist/xcell-inspect-umd.js"></script>

The basic example.

<input id="A"> + <input id="B"> = <input id="C" readonly>

const $a = xcell(1)
const $b = xcell(2)
const $c = xcell([$a, $b], (a, b) => a + b)
A.value = $a.value
B.value = $b.value
C.value = $c.value
A.addEventListener('input', e => $a.value = +e.target.value)
B.addEventListener('input', e => $b.value = +e.target.value)
$c.on('change', ({ value }) => C.value = value)
const inspector = xcellInspect([$a, $b, $c], {
  renderDOT: true,
  renderGraph: true,
  hidden: false,
})
document.body.appendChild(inspector.element)

Changelog:

07/29/2018

• v0.0.10