Data Grid Cell 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.
Method | Description |
---|---|
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) |
resetMeta | Reset the meta information in a batch or reset all the meta information for all cells. @param {string[]?} - List of cell names resetMeta(cellName: String[]) |
Events
Event | Description |
---|---|
onchangemeta | onchangemeta(worksheet: Object, newValue: Object) : void |
Initial Settings
The meta
property defines the meta information for the data grid cells.
Property | Description |
---|---|
meta: Object | Initial 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. Set meta data for multiple cells Set a meta information for B2 Reset the meta information for A1, B2, C2 Get the meta information for A1 Get all meta information
Data Grid Meta Information working example on JSFiddle.
<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>
<p><textarea id='console' style='width:100%;height:80px;'></textarea></p>
<input type="button" id="btn1" value="Set meta data for multiple columns"/><br/><br/>
<input type="button" id="btn2" value="Set a meta information for B2"/><br/><br/>
<input type="button" id="btn3" value="Reset the meta information for A1, B2, C2"/><br/><br/>
<input type="button" id="btn4" value="Get the meta information for A1"/><br/><br/>
<input type="button" id="btn5" value="Get all meta information"/><br/><br/>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YjhlYzQ3Y2MwMzhmYmZkYmYzYmNjY2Q1NzdlMTQ4ZDlhOTliNjhlODBkY2JhYWZjYWQ4NjEyNWI3Y2RhMmU4MDFhMzc0YmIwZGNkZDE1MzhmYmFjZTYyZmNiZmU1YjJmMmVjNzA0MTcxMmNhNzlkYzA1NTc1YTgxZDhiN2E3NTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create the spreadsheet
let 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' }
},
}]
});
document.getElementById("btn1").onclick = () => table[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } });
document.getElementById("btn2").onclick = () => table[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'));
document.getElementById("btn3").onclick = () => table[0].resetMeta(['A1','B2','C2'])
document.getElementById("btn4").onclick = () => document.getElementById('console').value = JSON.stringify(table[0].getMeta('A1'));
document.getElementById("btn5").onclick = () => document.getElementById('console').value = JSON.stringify(table[0].getMeta());
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YjhlYzQ3Y2MwMzhmYmZkYmYzYmNjY2Q1NzdlMTQ4ZDlhOTliNjhlODBkY2JhYWZjYWQ4NjEyNWI3Y2RhMmU4MDFhMzc0YmIwZGNkZDE1MzhmYmFjZTYyZmNiZmU1YjJmMmVjNzA0MTcxMmNhNzlkYzA1NTc1YTgxZDhiN2E3NTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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' }
}
let style = { width: '100%', height: '80px' }
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} meta={meta} />
</Spreadsheet>
<textarea ref={console} style={style}></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="Reset the meta information for A1, B2, C2"
onClick={() => spreadsheet.current[0].resetMeta(['A1','B2','C2'])} />
<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())} />
</>
);
}
<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="Reset the meta information for A1, B2, C2"
@click="this.$refs.spreadsheet.current[0].resetMeta(['A1','B2','C2'])" />
<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";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YjhlYzQ3Y2MwMzhmYmZkYmYzYmNjY2Q1NzdlMTQ4ZDlhOTliNjhlODBkY2JhYWZjYWQ4NjEyNWI3Y2RhMmU4MDFhMzc0YmIwZGNkZDE1MzhmYmFjZTYyZmNiZmU1YjJmMmVjNzA0MTcxMmNhNzlkYzA1NTc1YTgxZDhiN2E3NTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import jSuites from "jSuites";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YjhlYzQ3Y2MwMzhmYmZkYmYzYmNjY2Q1NzdlMTQ4ZDlhOTliNjhlODBkY2JhYWZjYWQ4NjEyNWI3Y2RhMmU4MDFhMzc0YmIwZGNkZDE1MzhmYmFjZTYyZmNiZmU1YjJmMmVjNzA0MTcxMmNhNzlkYzA1NTc1YTgxZDhiN2E3NTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTROalEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Create component
@Component({
standalone: true,
selector: "app-root",
template: `
<div #spreadsheet></div>
<textarea #console style='width:100%;height:80px;'></textarea>
<button type="button" (click)="this.worksheets[0].setMeta({ C1: { id:'1', y:'2019' }, C2: { id:'2' } });">
Set meta data for multiple columns
</button>
<button type="button" (click)="this.worksheets[0].setMeta('B2', 'myMetaData', prompt('myMetaData:'));">
Set a meta information for B2
</button>
<button type="button" (click)="this.worksheets[0].resetMeta(['A1','B2','C2'])">
Reset the meta information for A1, B2, C2
</button>
<button type="button" (click)="this.log.nativeElement.value = JSON.stringify(this.worksheets[0].getMeta('A1'));">
Get the meta information for A1
</button>
<button type="button" (click)="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
ngAfterViewInit() {
// 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' }
},
}]
});
}
}