How to create an Excel spreadsheet in Vue.js

Simple vue.js based Excel spreadsheet

---

What is a spreadsheet?

This is a rather difficult question to answer in 2024 since we have seen and used it for 40 years already.

It is computational data in tabular form and you can use it in many ways to represent data with numbers that can be used to run some algebraic equations on the individual cells.

The cells can have some numerical data like integer or float and we can do means, averages and standard deviations. Kind of looks like Pandas but without the power.

What is vue.js?

Vue.js is a very popular SPA framework created by Evan You and we have seen many articles on vue programming before.

We consistently view vue.js, svelte and htmx for a while now.

How to setup vue project?

$ npm create vue@latest
$ cd <project>
$ yarn
$ yarn serve

Why marry the two?

It looks like vue.js has good reactivity and ease of use and you can easily make a working application that does spreadsheet arithmetic using vue.

This demonstrates the power of vue to do complex things without much difficulty.

This can also serve as a good springboard for learning the message passing, refs and other advanced aspects of vue not to mention its for loops and other templating.

Code sample and demo

sheetstore.js

import { reactive } from 'vue'

const COLS = 5
const ROWS = 20

export const cells = reactive(
  Array.from(Array(COLS).keys()).map(() =>
    Array.from(Array(ROWS).keys()).map(() => '')
  )
)

// adapted from
// https://codesandbox.io/s/jotai-7guis-task7-cells-mzoit?file=/src/atoms.ts
// by @dai-shi
export function evalCell(exp) {
  if (!exp.startsWith('=')) {
    return exp
  }

  // = A1 + B2 ---> get(0,1) + get(1,2)
  exp = exp
    .slice(1)
    .replace(
      /\b([A-Z])(\d{1,2})\b/g,
      (_, c, r) => `get(${c.charCodeAt(0) - 65},${r})`
    )

  try {
    return new Function('get', `return ${exp}`)(getCellValue)
  } catch (e) {
    return `#ERROR ${e}`
  }
}

function getCellValue(c, r) {
  const val = evalCell(cells[c][r])
  const num = Number(val)
  return Number.isFinite(num) ? num : val
}

SpreadSheetChild.vue

<script setup>
import { ref } from 'vue'
import { cells, evalCell } from './sheetstore.js'

const props = defineProps({
  c: Number,
  r: Number
})

const editing = ref(false)

function update(e) {
  editing.value = false
  cells[props.c][props.r] = e.target.value.trim()
}
</script>

<template>
  <div class="cell" :title="cells[c][r]" @click="editing = true">
    <input
      v-if="editing"
      :value="cells[c][r]"
      @change="update"
      @blur="update"
      @vue:mounted="({ el }) => el.focus()"
    >
    <span v-else>{{ evalCell(cells[c][r]) }}</span>
  </div>
</template>

<style>
.cell, .cell input {
  height: 1.5em;
  line-height: 1.5;
  font-size: 15px;
}

.cell span {
  padding: 0 6px;
}

.cell input {
  width: 100%;
  box-sizing: border-box;
}
</style>

SpreadSheetParent.vue

<!--
https://eugenkiss.github.io/7guis/tasks/#cells
-->

<script setup>
import SpreadSheetChild from './SpreadSheetChild.vue'
import { cells } from './sheetstore.js'

const cols = cells.map((_, i) => String.fromCharCode(65 + i))
</script>

<template>
  <table>
    <thead>
      <tr>
        <th></th>
        <th v-for="c in cols" :key="c.id">{{ c }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="i in cells[0].length" :key="i.id">
        <th>{{ i - 1 }}</th>
        <td v-for="(c, j) in cols" :key="j">
          <SpreadSheetChild :r="i - 1" :c="j"></SpreadSheetChild>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style>
body {
  margin: 0;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

th {
  background-color: #eee;
}

tr:first-of-type th {
  width: 100px;
}

tr:first-of-type th:first-of-type {
  width: 25px;
}

td {
  border: 1px solid #ccc;
  height: 1.5em;
  overflow: hidden;
}
</style>

main.js

import { createApp } from 'vue'
import SpreadSheetParent from './SpreadSheetParent.vue';

createApp(SpreadSheetParent).mount('#app')

Conclusion

The idea of running a simple spreadsheet using vue.js is an interesting way to learn vue. You can see it uses a lot of code and lot of source files to get the job done.

Answer

What is meant by Net Promoter Score?

A NPS tells how likely your customers are to suggest your product to their friends and colleagues. This is a great way to measure user engagement and WOMM metrics.

A good product that makes users happy should lead to really high NPS scores.

Question

What is computational intelligence?

Feedback

The importance of making money from SaaS cannot be overestimated.

You can easily make your first million and much more if you code a really amazing SaaS product.

Our newsletter helps you do exactly that. If you wish that I cover a certain topic do not hesitate to send me a reply.

---