### Basic Meta Information Example (HTML)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/meta-information.md
Initializes a Jspreadsheet instance with meta information and demonstrates setting and getting meta data for specific cells.
```html
```
--------------------------------
### Basic HTML Setup with Native Editors
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/editors.md
This example shows a basic HTML structure for setting up a Jspreadsheet instance with multiple native editors configured for different columns. It includes the necessary script and CSS includes.
```html
```
--------------------------------
### Basic Meta Information Example (Angular)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/meta-information.md
Demonstrates using Jspreadsheet within an Angular component, including initial meta data setup and runtime interaction.
```typescript
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Create component
@Component({
standalone: true,
selector: "app-root",
template: "",
})
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, {
worksheets: [{
data: [
['Apple', 'Banana'],
['Orange', 'Pineapple']
],
columns: [
{ width: 100 },
{ width: 100 }
],
// Initial meta information
meta: {
A1: { category: 'Fruit', id: '123' },
B1: { category: 'Fruit', id: '124' }
}
}],
});
// Set meta information for B2
this.worksheets[0].setMeta('B2', 'category', 'Citrus');
// Get meta information for A1
console.log(this.worksheets[0].getMeta('A1'));
}
}
```
--------------------------------
### Clone jspreadsheet Configuration (HTML/JS)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/config.md
This example shows how to get the configuration of an existing jspreadsheet instance, display it, and use it to create a new, identical spreadsheet. It involves stringifying and parsing the configuration object.
```html
```
--------------------------------
### Basic Meta Information Example (React)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/meta-information.md
Sets up a Jspreadsheet component in React, initializing it with meta information and demonstrating runtime updates and retrieval.
```jsx
import React, { useRef, useEffect } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default function App() {
const spreadsheet = useRef();
const data = [
['Apple', 'Banana'],
['Orange', 'Pineapple']
]
const columns = [
{ width: 100 },
{ width: 100 }
]
const meta = {
A1: { category: 'Fruit', id: '123' },
B1: { category: 'Fruit', id: '124' }
}
useEffect(() => {
if (spreadsheet.current) {
spreadsheet.current[0].setMeta('B2', 'category', 'Citrus');
console.log(spreadsheet.current[0].getMeta('A1'));
}
}, [])
return (
<>
)
}
```
--------------------------------
### Start Jspreadsheet CE Web Service
Source: https://github.com/jspreadsheet/ce/blob/master/README.md
Start the web service for Jspreadsheet CE development using npm.
```bash
% npm run start
```
--------------------------------
### Install Jspreadsheet Vue Wrapper
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/vue.md
Install the Jspreadsheet Vue wrapper version 5.0.0-beta.3 using npm.
```bash
npm install @jspreadsheet-ce/vue@5.0.0-beta.3
```
--------------------------------
### Include Theme CSS and Initialize Spreadsheet (HTML)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/themes.md
To use themes in Jspreadsheet, include the `jspreadsheet.themes.css` file in your project. This example demonstrates basic HTML setup with CDN links for Jspreadsheet and its themes, followed by initialization.
```html
```
--------------------------------
### Basic Nested Headers in HTML
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/nested-headers.md
This example shows a fundamental setup for nested headers within a JSS spreadsheet using plain HTML and JavaScript. It includes the necessary CDN links for JSS and JSuites, along with the HTML structure and JavaScript initialization.
```html
```
--------------------------------
### Configure Jest to Use Setup File
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/react/tests.md
Update your package.json to point Jest to the custom setup file, ensuring JSDOM is correctly configured for Jspreadsheet tests.
```json
{
"jest": {
"setupFilesAfterEnv": ["/jest.setup.js"]
}
}
```
--------------------------------
### Clone jspreadsheet Configuration (React)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/config.md
This React example demonstrates cloning a jspreadsheet configuration using refs to manage DOM elements and state. It mirrors the HTML/JS approach by getting, displaying, and reapplying the configuration to a new instance.
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
const console = useRef();
const copy = useRef();
// Method to clone the data grid
const clone = function() {
// Get the data grid configuration
let config = JSON.stringify(spreadsheet.current[0].parent.getConfig());
// Show on the textarea
console.current.value = config;
// Destroy any existing spreadsheet
jspreadsheet.destroy(copy.current);
// Parse
config = JSON.parse(config);
// Create a new spreadsheet
jspreadsheet(copy.current, config);
}
return (
<>
clone()} />
);
}
```
--------------------------------
### Install Jspreadsheet React Wrapper
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/react.md
Install the Jspreadsheet React Data Grid wrapper using NPM. Ensure you are using version 5.0.0-beta.3 or compatible.
```bash
npm install @jspreadsheet-ce/react@5.0.0-beta.3
```
--------------------------------
### Include Jspreadsheet CE for Basic Demo
Source: https://github.com/jspreadsheet/ce/blob/master/README.md
Include Jspreadsheet CE and JSuites from specific versions for a basic demo setup.
```html
```
--------------------------------
### Initialize Spreadsheet Component (Angular)
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/cells.md
This Angular example shows the basic setup for a jspreadsheet component, including template definition and import statements. It is a starting point for integrating jspreadsheet into an Angular application.
```typescript
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Create the data grid component
@Component({
standalone: true,
selector: "app-root",
template: `
`,
})
export class AppComponent {
```
--------------------------------
### VueJS 3 Custom Wrapper Example
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/vue.md
Example of creating a custom wrapper for Jspreadsheet in Vue 3, allowing for direct integration and custom behaviors. This setup uses a local Jspreadsheet component.
```vue
```
--------------------------------
### Create Vue.js Project and Navigate
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/vue/tests.md
Use Vue CLI to create a new Vue.js project and navigate into the project directory.
```bash
vue create jspreadsheet-vue-testing
cd jspreadsheet-vue-testing
```
--------------------------------
### Jspreadsheet Helpers Example
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/helpers.md
Demonstrates the usage of several Jspreadsheet helper functions for cell name and range conversions within a basic spreadsheet setup.
```javascript
// Returns A1
jspreadsheet.helpers.getCellNameFromCoords(0,0);
// Returns (4) [1, 0, 2, 3]
jspreadsheet.helpers.getCoordsFromRange('B1:C4');
// Also works with the worksheet instance. Returns 1,1
jspreadsheet.helpers.getCoordsFromCellName('B2');
```
```html
```
--------------------------------
### Create a New React Project with Next.js
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/react/tests.md
Use create-next-app to scaffold a new React project for testing Jspreadsheet. Navigate into the project directory.
```bash
npx create-next-app jspreadsheet-react-testing
cd jspreadsheet-react-testing
```
--------------------------------
### Intercept Paste Event in Vanilla JavaScript
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/clipboard.md
Use the 'onbeforepaste' event to prevent pasting data into the spreadsheet. This example demonstrates the basic setup in plain HTML and JavaScript.
```html
```
--------------------------------
### React: Spreadsheet with Comments and Column Definitions
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet.md
A React example showing how to configure a spreadsheet with initial data, column widths, and cell comments. Ensure JSUites and Jspreadsheet CSS are imported.
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default function App() {
const spreadsheet = useRef();
const data = [
['US', 'Cheese', '2019-02-12'],
['CA', 'Apples', '2019-03-01'],
];
const columns = [
{ width: '170px' },
{ width: '170px' },
{ width: '170px' },
];
const comments = {
B1: 'Initial comments on B1',
C1: 'Initial comments on C1'
};
return (
<>
);
}
```
--------------------------------
### React jspreadsheet with HTML Editor
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/examples/richtext-html-editor.md
Integrate jspreadsheet with HTML editor capabilities into a React application. This example shows the setup for using jspreadsheet components within a React environment.
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";
const data = [
[ 'the Sorcerer`s Stone', '
```
--------------------------------
### Vue: Spreadsheet with Comments and Column Definitions
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet.md
This Vue.js snippet illustrates how to set up a spreadsheet with initial data, column configurations, and comments. Remember to import the necessary CSS files.
```vue
```
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<>
);
}
```
```vue
```
```typescript
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
@Component({
standalone: true,
selector: "app-root",
template: `
`
})
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, {
worksheets: [
{
minDimensions: [6,6],
}
]
});
}
}
```
--------------------------------
### Initialize and Update Headers in HTML/JavaScript
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/headers.md
Demonstrates creating a spreadsheet with initial headers and then updating them using the setHeader method. Ensure the Jspreadsheet and jSuites libraries are included.
```html
```
--------------------------------
### AngularJS Row Operations
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/rows.md
Provides an example of integrating Jspreadsheet row operations within an Angular component. This setup allows users to interact with spreadsheet rows via clickable links.
```typescript
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
// Create component
@Component({
standalone: true,
selector: "app-root",
template: `
`,
})
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, {
data: [
['US', 'Cheese', 1000 ],
['CA', 'Apples', 1200 ],
['CA', 'Carrots', 2000 ],
['BR', 'Oranges', 3800 ],
],
worksheetName: 'Row management',
});
}
}
```
--------------------------------
### Configure Jest Setup File for Jspreadsheet
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/react/tests.md
Create a jest.setup.js file to initialize Jspreadsheet and JSDOM environment before each test. This includes destroying previous instances and setting up the global document and jspreadsheet objects.
```javascript
// jest.setup.js
const jspreadsheet = require('jspreadsheet-ce');
// Code that runs between each test
beforeEach(() => {
if (typeof document !== 'undefined') {
jspreadsheet.destroyAll();
if (!global.jspreadsheet && !global.root) {
global.jspreadsheet = jspreadsheet;
global.root = document.createElement('div');
global.root.style.width = '100%';
global.root.style.height = '100%';
document.body.appendChild(global.root);
}
}
});
```
--------------------------------
### Intercept Paste Event in Vue
Source: https://github.com/jspreadsheet/ce/blob/master/docs/jspreadsheet/docs/clipboard.md
Configure paste event interception in a Vue.js application using the 'onbeforepaste' prop of the Jspreadsheet Vue component. This example shows the setup within a Vue SFC.
```vue
```
