DEV Community


Posted on

Writing spreadsheet with SVG and Vue.js


I like handsontable, but I want to write my own from scratch.


Try it from here:


How to implement

There are so many things to implement. I can't do them all.

Selection UI

Because SVG Spec doesn't have z-index for now, I decided to split UI and Contents layer into two svg elements.

The UI layer has visual elements such as bounding-boxes or selection rects. They have to be always on top.

In-place editing

There is a hidden text field on selected cell. At first its opacity is set to 0. When the cell is clicked, opacity changes to 1.

This hidden text field always capture key inputs to handle Input Method. This is important to users who uses Chinese characters.


SVG is very useful to implement complex GUI. It's just DOM and bindable with Vue's ViewModel. Especially, I like to handle SVG with computed.

  <div class="grid" @mouseup="onMouseUpSvg()" @mousemove="headerResizeMove">
    <svg :width="positionLeft(data.length + 1) + 1" height=24>
      <g v-for="(col, ci) in headerObj" :key="ci" :transform="translateCol(ci)" @mousedown="startColumnSelect(ci)" @mousemove="changeColumnSelect(ci)" @mouseup="endColumnSelect">
        <rect class="col-header" x=0 y=0 :width="widthAt(ci)" :height="rowHeight">
        <text class="col-header__text" text-anchor="middle" :x="widthAt(ci) / 2" y=12 :width="widthAt(ci)" :height="rowHeight">{{}}</text>
        <rect class="col-header__resize" :class="{'active': ci === headerResizeAt}" :x="widthAt(ci) - 5" :y=0 :width="5" :height="rowHeight" @mousedown.stop="headerResizeStart(ci)"></rect>

    <div ref="wrapper" style="height: 400px; overflow: scroll; position:relative;">
      <svg :width="positionLeft(data.length + 1) + 1" :height="data.length * 24" >
        <g v-for="(row, ri) in data" :key="ri" :transform="translateRow(ri)">
          <g v-for="(col, ci) in row" :key="ci" :transform="translateCol(ci)" @mousedown="onMouseDownCell(ci, ri)" @mousemove="onMouseMoveCell(ci, ri)">
            <rect x=0 y=0 :width="widthAt(ci)" :height="rowHeight">
            <text x=2 y=12 :width="widthAt(ci)" :height="rowHeight">{{col}}</text>
        <rect :transform="selectionTransform" class="selection" x=0 y=0 :width="selectionSize.w" :height="selectionCount.h * rowHeight"></rect>
      <div class="editor__frame" :style="editorStyleObj">
        <input ref="hiddenInput"  @mousedown="onMouseDownCell(selection.c, selection.r)" class="editor__textarea" v-model="editingText" @blur="onBlur" :class="{'editor--visible': editing}" autofocus />

This is an one-file template and just 413 lines. If I use canvas or div to implement this, I think its LOC will be doubled.

Bundle with bili

bili is a useful tool to distribute SFCs.

I created this project with vue create, but its default .babelrc seems to prevent build with bili.

According to this issue, I should use this:

bili --plugin vue --no-babel.babelrc

UPDATE 03-14-2018

This issue has been fixed today, We no longer need --no-babel.babelrc. Thanks EGOIST!

then I could publish this to npm.


Writing GUI with SVG is so fun!

Top comments (3)

t3ndai profile image
Prince T Dzonga

Thanks a lot. Needed this. was building a app with a lot of tables, editing the table cells using content-editable. seems your approach is clean too.

ginollerena profile image
Gino Llerena

Thanks! Good work, I did a quick version on React.

hashrock profile image

Cool! It looks cleaner!