Spreadsheet Shapes

The shapes extension enables users to add floating shapes to their worksheets.

Documentation

Initial Setting

Settings	Description
`type: String`	Must be 'shape' when using shape-based media
`options: Object`	Shape configuration object. Must include type to define the shape type
`options.type: String`	The shape to display. See Shape Types below
`top?: Number`	Shape top position (relative). Default: 0px
`left?: Number`	Shape left position (relative). Default: 0px
`width?: Number`	Shape width. Default: 400px
`height?: Number`	Shape height. Default: 300px
`zIndex?: Number`	Shape z-index. Default: 3

Shape Types

Below are the most common shape types. Additional shapes can be found at the end of this page.

Shape types
`rectangle`
`triangle`
`ellipse`
`diamond`
`trapezium`
`pentagon`
`parallelogram`
`hexagon`
`heptagon`
`octagon`
`decagon`
`simpleLine`
`lineWithArrow`

Installation

Choose one of the following options:

Using NPM

$ npm install @jspreadsheet/shapes

Using a CDN

You can include shapes in your browser as follows. Ensure all extensions are loaded as shown in the following example.

<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/shapes/dist/index.min.js"></script>

Examples

Data grid shapes

Create a data grid with basic shapes.

<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/shapes/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/shapes/dist/index.min.js"></script>

<div id="spreadsheet"></div>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MGVhMmVjODFiYjUxNGEzMmRlZjRlZGU4ZmQ0ZDVlYTcwMjVlMzA3YTk1OGRlNzBlZDljMjllZDRmMjM3ZDRhMTdhZjU1MTFjMWVhMzRmYTg4MzIwNjQwMmFkODE2YmVhMWE5NDg0MDI3MjA1OTMwYjViM2EzYzk2Njg0MmQzMjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EazJNVFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Set the extensions
jspreadsheet.setExtensions({ shapes });

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true,
    worksheets: [{
        minDimensions: [8,8],
        data: [
            ['Test','',''],
            ['Jan','400','234'],
            ['Fev','300','431'],
            ['Mar','200','134'],
            ['Apr','321','513'],
        ],
        media: [{
            type: 'shape',
            options: {
                type: 'rounded-rectangle',
                text: 'test'
            },
            top: 50,
            left: 50,
            width: 100,
            height: 80,
        }]
    }],
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import shapes from "@jspreadsheet/shapes";

import "@lemonadejs/studio";
import "@lemonadejs/studio/dist/style.css";
import "@jspreadsheet/shapes/dist/style.css";
import "jsuites/dist/jsuites.css"
import "jspreadsheet/dist/jspreadsheet.css"

// Add license
jspreadsheet.setLicense('MGVhMmVjODFiYjUxNGEzMmRlZjRlZGU4ZmQ0ZDVlYTcwMjVlMzA3YTk1OGRlNzBlZDljMjllZDRmMjM3ZDRhMTdhZjU1MTFjMWVhMzRmYTg4MzIwNjQwMmFkODE2YmVhMWE5NDg0MDI3MjA1OTMwYjViM2EzYzk2Njg0MmQzMjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EazJNVFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Define the data grid extensions
jspreadsheet.setExtensions({ shapes });

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();

    // Data
    const data = [
        ['Test', '', ''],
        ['Jan', '400', '234'],
        ['Fev', '300', '431'],
        ['Mar', '200', '134'],
        ['Apr', '321', '513'],
    ];

    // Media declaration
    const media = [{
        type: 'shape',
        options: {
            type: 'rounded-rectangle',
            text: 'test'
        },
        top: 50,
        left: 50,
        width: 100,
        height: 80,
    }]

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} toolbar={true}>
            <Worksheet data={data} media={media} minDimensions={[8, 8]} />
        </Spreadsheet>
    );
}

<template>
  <Spreadsheet ref="spreadsheet" :toolbar="true">
      <Worksheet :data="data" :media="media" :minDimensions="[8, 8]" />
  </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import shapes from "@jspreadsheet/shapes";

import "@lemonadejs/studio";
import "@lemonadejs/studio/dist/style.css";
import "@jspreadsheet/shapes/dist/style.css";
import "jsuites/dist/jsuites.css"
import "jspreadsheet/dist/jspreadsheet.css"

// Add license
jspreadsheet.setLicense('MGVhMmVjODFiYjUxNGEzMmRlZjRlZGU4ZmQ0ZDVlYTcwMjVlMzA3YTk1OGRlNzBlZDljMjllZDRmMjM3ZDRhMTdhZjU1MTFjMWVhMzRmYTg4MzIwNjQwMmFkODE2YmVhMWE5NDg0MDI3MjA1OTMwYjViM2EzYzk2Njg0MmQzMjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EazJNVFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Define the data grid extensions
jspreadsheet.setExtensions({ shapes });

export default {
  components: {
      Spreadsheet,
      Worksheet,
  },
  data() {
      // Data
      const data = [
          ['Test','',''],
          ['Jan','400','234'],
          ['Fev','300','431'],
          ['Mar','200','134'],
          ['Apr','321','513'],
      ];

      // Media declaration
      const media = [{
        type: 'shape',
        options: {
          type: 'rounded-rectangle',
          text: 'test'
        },
        top: 50,
        left: 50,
        width: 100,
        height: 80,
      }]

      return {
          data,
          media
      };
  }
}
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import shapes from "@jspreadsheet/shapes";

// Add license
jspreadsheet.setLicense('MGVhMmVjODFiYjUxNGEzMmRlZjRlZGU4ZmQ0ZDVlYTcwMjVlMzA3YTk1OGRlNzBlZDljMjllZDRmMjM3ZDRhMTdhZjU1MTFjMWVhMzRmYTg4MzIwNjQwMmFkODE2YmVhMWE5NDg0MDI3MjA1OTMwYjViM2EzYzk2Njg0MmQzMjgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpZek9EazJNVFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
// Define the data grid extensions
jspreadsheet.setExtensions({ shapes });

@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
    // Create spreadsheet
    this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
        toolbar: true,
        worksheets: [{
            minDimensions: [8,8],
            data: [
                ['Test','',''],
                ['Jan','400','234'],
                ['Fev','300','431'],
                ['Mar','200','134'],
                ['Apr','321','513'],
            ],
            media: [{
                type: 'shape',
                options: {
                    type: 'rounded-rectangle',
                    text: 'test'
                },
                top: 50,
                left: 50,
                width: 100,
                height: 80,
            }]
        }],
    });
    }
}

All Shape Types

All Shape types
`rectangle`
`triangle`
`ellipse`
`diamond`
`trapezium`
`pentagon`
`parallelogram`
`hexagon`
`heptagon`
`octagon`
`decagon`
`simpleLine`
`lineWithArrow`
`doubleArrowLine`
`elbowConnector`
`elbowArrowConnector`
`doubleArrowElbowConnector`
`curvedElbowConnector`
`curvedArrowConnector`
`curvedDoubleArrowConnector`
`rounded-rectangle`
`singleCutCornerRectangle`
`doubleCutCornerRectangle`
`oppositeCutCornerRectangle`
`roundedTopRightRectangle`
`roundedTopLeftRectangle`
`roundedTopRightBottomLeftRectangle`
`right-triangle`
`ovalInterfaceIcon`
`cutCircle`
`circlewithtoprightoutsideangle`
`doubleLineSquare`
`doubledtoprighangle`
`doubleLineShape`
`mouldingCrown`
`crossIcon`
`plaqueShape`
`cylinderShape`
`cubeShape`
`bevelShape`
`donutShape`
`noShape`
`blockArk`
`smileyFace`
`heart`
`lightningBolt`
`sun`
`crescentMoon`
`cloud`
`arcCurve`
`leftSquareBrackets`
`rightSquareBrackets`
`squareBracketsPair`
`leftFlowerBracket`
`rightFlowerBracket`
`flowerBrackets`
`rightBlockArrow`
`leftBlockArrow`
`upBlockArrow`
`downBlockArrow`
`upDownArrow`
`leftRightArrow`
`quadArrow`
`leftRightUpArrow`
`bentArrow`
`uTurnArrow`
`leftUpArrow`
`bentUpArrow`
`curvedRightArrow`
`curvedLeftArrow`
`curvedUpArrow`
`curvedDownArrow`
`stripedRightArrow`
`notchedRightArrow`
`pentagonArrow`
`chevron`
`rightArrowCallout`
`downArrowCallout`
`leftArrowCallout`
`upArrowCallout`
`leftRightArrowCallout`
`quadArrowCallout`
`circularArrow`
`plus`
`minus`
`multiplication`
`division`
`equal`
`notEqualTo`
`predefinedTask`
`internalStorage`
`document`
`multitaskingDocuments`
`terminator`
`preparation`
`manualInput`
`manualOperation`
`offpageConnector`
`card`
`punchedTape`
`swimmingJunction`
`orShape`
`collateShape`
`sortShape`
`extractShape`
`mergeShape`
`storedDataShape`
`delayShape`
`sequentialAccessStorageShape`
`directAccessStorage`
`displayShape`
`blockShape`

Edit this page on GitHub