Data Grid Shapes

Shapes Extensions

The shapes extension allows users to add floating shapes on their worksheets.

Documentation

Initial Setting

Settings Description
type?: String One of the chart types describe below.
options?: Object Shapes options
top?: Number Shape relative top position. Default 0px
left?: Number Shape relative left position. Default 0px
width?: Number Shape width. Default 400px
height?: Number Shape height. Default 300px
zIndex?: Number Shape zIndex. Default 3

Shapes Types

Chart types
rectangle
rounded
triangle
right
ellipse
diamond
trapezium
pentagon
parallelogram
hexagon
heptagon
octagon
decagon

Installation

Please choose one of the following options

Using NPM

$ npm install @jspreadsheet/shapes

Using a CDN

You can include the charts on your browser as below. To run the extension please make sure all extensions area loaded, as shown on the following example.

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

Examples

Data grid shapes

Create a new data grid with some basic shapes.

<html>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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/v11/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/formula-pro/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('OGEwZGZkMDI0MTg2N2MyOTVkMDk5ZDUwYjVmZWRjYjFjMDJkZTljZWMzZWE0OTM3M2JhMzEwNTFlNWEzMWE1MmJlNDAzYjM1ZGI1OTkxNjhmN2FhNDg4NWNiZGFiOGU1NzQ1MzM0MzhiZmJkNGE0ZDllYjIyMWIzNjliOGIxOTAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWXlOemcyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Set the extensions
jspreadsheet.setExtensions({ formula, 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 formula from "@jspreadsheet/formula";

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

// Add license
jspreadsheet.setLicense('OGEwZGZkMDI0MTg2N2MyOTVkMDk5ZDUwYjVmZWRjYjFjMDJkZTljZWMzZWE0OTM3M2JhMzEwNTFlNWEzMWE1MmJlNDAzYjM1ZGI1OTkxNjhmN2FhNDg4NWNiZGFiOGU1NzQ1MzM0MzhiZmJkNGE0ZDllYjIyMWIzNjliOGIxOTAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWXlOemcyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Define the data grid extensions
jspreadsheet.setExtensions({ formula, 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: 'shapes',
        options: {
            type: 'rounded-rectangle',
            text: 'test'
        },
        top: 50,
        left: 50,
        width: 100,
        height: 80,
    }]

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} toolbar>
            <Worksheet data={data} media={media} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" toolbars>
        <Worksheet :data="data" :media="media" :minDimensions="[10,10]" />
    </Spreadsheet>
</template>

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

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

// Add license
jspreadsheet.setLicense('OGEwZGZkMDI0MTg2N2MyOTVkMDk5ZDUwYjVmZWRjYjFjMDJkZTljZWMzZWE0OTM3M2JhMzEwNTFlNWEzMWE1MmJlNDAzYjM1ZGI1OTkxNjhmN2FhNDg4NWNiZGFiOGU1NzQ1MzM0MzhiZmJkNGE0ZDllYjIyMWIzNjliOGIxOTAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWXlOemcyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Define the data grid extensions
jspreadsheet.setExtensions({ formula, 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: 'shapes',
          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 * as jspreadsheet from "jspreadsheet";
import shapes from "@jspreadsheet/charts";
import formula from "@jspreadsheet/formula";

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

// Add license
jspreadsheet.setLicense('OGEwZGZkMDI0MTg2N2MyOTVkMDk5ZDUwYjVmZWRjYjFjMDJkZTljZWMzZWE0OTM3M2JhMzEwNTFlNWEzMWE1MmJlNDAzYjM1ZGI1OTkxNjhmN2FhNDg4NWNiZGFiOGU1NzQ1MzM0MzhiZmJkNGE0ZDllYjIyMWIzNjliOGIxOTAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFME5UWXlOemcyTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Define the data grid extensions
jspreadsheet.setExtensions({ formula, 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: 'shapes',
                options: {
                    type: 'rounded-rectangle',
                    text: 'test'
                },
                top: 50,
                left: 50,
                width: 100,
                height: 80,
            }]
        }],
    });
    }
}

Edit this page on GitHub