Meta information

This feature allows for keeping hidden metadata about cells without an interface for defining the information. It must be done programmatically.

Documentation

Methods

Methods related to managing the spreadsheet meta information.
MethodDescription
getMeta Get the meta information from a cell or from the whole spreadsheet.
@Param mixed - cell identification or null for the whole table.
getMeta(cellName: String | null)
setMeta Set the meta information for a single cell by name or for multiple cells.
@param {string|Object} - Identification of a cell or an array of objects with multiple cell meta information.
@param {string=} k - the key string to identify the meta information.
@param {string=} v - the value string with the meta information.
setMeta(cellName: String | Object[], key: String, value: String)


Events

EventDescription
onchangemetaonchangemeta(worksheet: Object, newValue: Object) : void


Initial Settings

The meta property defines the meta information for the data grid cells.
PropertyDescription
meta: ObjectInitial meta information.


Examples

Basic example using the native meta information methods.



You can interact with any meta information using the getMeta and setMeta methods, either during initialization or programmatically.





Spreadsheet meta information working example on JSFiddle.

JavaScript example

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

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

<textarea id='console' style='width:100%;height:80px;'></textarea>

<button type="button" onclick="table[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } });">
Set meta data for multiple columns
</button>

<button type="button" onclick="table[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'));">
Set a meta information for B2
</button>

<button type="button" onclick="document.getElementById('console').value = JSON.stringify(table[0].getMeta('A1'));">
Get the meta information for A1
</button>

<button type="button" onclick="document.getElementById('console').value  = JSON.stringify(table[0].getMeta());">
Get all meta information
</button>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZGI0NDExNTdlNDEyZmJmZWVmYWRmNWE2NjhhZmFhYmQ5Mzg4YTFjZGFlOWQ3MmFmY2Y3MDJlY2VkNGJiZDIwNzY3ODliMTlmODE0ODdiNjc0YTFlNDNmNGUzOTY3NTM3NGVmNWFiMmMwYWYwMWI0Mzg4ZGFiOGVhMTU1NzU1ZDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpFeU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create the spreadsheet
var table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['US', 'Apples', 'Yes', '2019-02-12'],
            ['CA;US;UK', 'Carrots', 'Yes', '2019-03-01'],
            ['CA;BR', 'Oranges', 'No', '2018-11-10'],
            ['BR', 'Coconuts', 'Yes', '2019-01-12'],
        ],
        columns: [
            {
                type: 'dropdown',
                title: 'Product Origin',
                width: '300px',
                url: '/jspreadsheet/countries',
                autocomplete: true,
                multiple: true
            },
            { type: 'text', title: 'Description', width: '200px' },
            { type: 'dropdown', title: 'Stock', width: '100px', source: ['No','Yes'] },
            { type: 'calendar', title: 'Best before', width: '100px' },
        ],
        meta:{
            A1: { myMeta: 'this is just a test', otherMetaInformation: 'other test' },
            A2: { info: 'test' }
        },
    }]
});
</script>
</html>

React example

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

const license = 'ZGI0NDExNTdlNDEyZmJmZWVmYWRmNWE2NjhhZmFhYmQ5Mzg4YTFjZGFlOWQ3MmFmY2Y3MDJlY2VkNGJiZDIwNzY3ODliMTlmODE0ODdiNjc0YTFlNDNmNGUzOTY3NTM3NGVmNWFiMmMwYWYwMWI0Mzg4ZGFiOGVhMTU1NzU1ZDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpFeU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    const console = useRef();
    // Data
    const data = [
        ['US', 'Apples', 'Yes', '2019-02-12'],
        ['CA;US;UK', 'Carrots', 'Yes', '2019-03-01'],
        ['CA;BR', 'Oranges', 'No', '2018-11-10'],
        ['BR', 'Coconuts', 'Yes', '2019-01-12'],
    ];
    // Columns
    const columns = [
        {
            type: 'dropdown',
            title: 'Product Origin',
            width: '300px',
            url: '/jspreadsheet/countries',
            autocomplete: true,
            multiple: true
        },
        { type: 'text', title: 'Description', width: '200px' },
        { type: 'dropdown', title: 'Stock', width: '100px', source: ['No','Yes'] },
        { type: 'calendar', title: 'Best before', width: '100px' },
    ];
    // Meta information
    const meta = {
        A1: { myMeta: 'this is just a test', otherMetaInformation: 'other test' },
        A2: { info: 'test' }
    }

    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet data={data} columns={columns} meta={meta} />
            </Spreadsheet>
            <textarea ref={console} style={{ width: '100%', height: '80px' }}></textarea>
            <button type="button" value="Set meta data for multiple columns"
                onClick={() => spreadsheet.current[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } })} />
            <button type="button" value="Set a meta information for B2"
                onClick={() => spreadsheet.current[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'))} />
            <button type="button" value="Get the meta information for A1"
                onClick={() => console.current.value = JSON.stringify(spreadsheet.current[0].getMeta('A1'))} />
            <button type="button" value="Get all meta information"
                onClick={() => console.current.value = JSON.stringify(spreadsheet.current[0].getMeta())} />
        </>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :data="data" :columns="columns" :meta="meta" />
    </Spreadsheet>
    <textarea ref="log" style='width:100%;height:80px;'></textarea>
    <button type="button" value="Set meta data for multiple columns"
        @click="this.$refs.spreadsheet.current[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } })} />
    <button type="button" value="Set a meta information for B2"
        @click="this.$refs.spreadsheet.current[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'))} />
    <button type="button" value="Get the meta information for A1"
        @click="this.$refs.console.value.value = JSON.stringify(this.$refs.spreadsheet.current[0].getMeta('A1'))} />
    <button type="button" value="Get all meta information"
        @click="this.$refs.console.value.value = JSON.stringify(this.$refs.spreadsheet.current[0].getMeta())} />
</template>

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

const license = 'ZGI0NDExNTdlNDEyZmJmZWVmYWRmNWE2NjhhZmFhYmQ5Mzg4YTFjZGFlOWQ3MmFmY2Y3MDJlY2VkNGJiZDIwNzY3ODliMTlmODE0ODdiNjc0YTFlNDNmNGUzOTY3NTM3NGVmNWFiMmMwYWYwMWI0Mzg4ZGFiOGVhMTU1NzU1ZDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpFeU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['US', 'Apples', 'Yes', '2019-02-12'],
            ['CA;US;UK', 'Carrots', 'Yes', '2019-03-01'],
            ['CA;BR', 'Oranges', 'No', '2018-11-10'],
            ['BR', 'Coconuts', 'Yes', '2019-01-12'],
        ];
        // Columns
        const columns = [
            {
                type: 'dropdown',
                title: 'Product Origin',
                width: '300px',
                url: '/jspreadsheet/countries',
                autocomplete: true,
                multiple: true
            },
            { type: 'text', title: 'Description', width: '200px' },
            { type: 'dropdown', title: 'Stock', width: '100px', source: ['No','Yes'] },
            { type: 'calendar', title: 'Best before', width: '100px' },
        ];
        // Meta information
        const meta = {
            A1: { myMeta: 'this is just a test', otherMetaInformation: 'other test' },
            A2: { info: 'test' }
        }

        return {
            data,
            columns,
            meta,
            license,
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
import jSuites from "jSuites";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZGI0NDExNTdlNDEyZmJmZWVmYWRmNWE2NjhhZmFhYmQ5Mzg4YTFjZGFlOWQ3MmFmY2Y3MDJlY2VkNGJiZDIwNzY3ODliMTlmODE0ODdiNjc0YTFlNDNmNGUzOTY3NTM3NGVmNWFiMmMwYWYwMWI0Mzg4ZGFiOGVhMTU1NzU1ZDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6TnpFeU1Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <textarea #console style='width:100%;height:80px;'></textarea>
        <button type="button" onclick="this.worksheets[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } });">
        Set meta data for multiple columns
        </button>
        <button type="button" onclick="this.worksheets[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'));">
        Set a meta information for B2
        </button>
        <button type="button" onclick="this.log.nativeElement.value = JSON.stringify(this.worksheets[0].getMeta('A1'));">
        Get the meta information for A1
        </button>
        <button type="button" onclick="this.log.nativeElement.value  = JSON.stringify(this.worksheets[0].getMeta());">
        Get all meta information
        </button>`;
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    @ViewChild("log") log: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                data: [
                    ['US', 'Apples', 'Yes', '2019-02-12'],
                    ['CA;US;UK', 'Carrots', 'Yes', '2019-03-01'],
                    ['CA;BR', 'Oranges', 'No', '2018-11-10'],
                    ['BR', 'Coconuts', 'Yes', '2019-01-12'],
                ],
                columns: [
                    {
                        type: 'dropdown',
                        title: 'Product Origin',
                        width: '300px',
                        url: '/jspreadsheet/countries',
                        autocomplete: true,
                        multiple: true
                    },
                    { type: 'text', title: 'Description', width: '200px' },
                    { type: 'dropdown', title: 'Stock', width: '100px', source: ['No','Yes'] },
                    { type: 'calendar', title: 'Best before', width: '100px' },
                ],
                meta:{
                    A1: { myMeta: 'this is just a test', otherMetaInformation: 'other test' },
                    A2: { info: 'test' }
                },
            }]
        });
    }
}

Releases notes

Differences from version 9


getMeta The method getMethod accepts one argument. The second argument is deprecated