## Development ### Build your package % npm run build ### Start a web service % npm run start ## Data Grid Examples - https://bossanova.uk/jspreadsheet/docs/examples/create-from-table - https://bossanova.uk/jspreadsheet/docs/examples/translations - https://bossanova.uk/jspreadsheet/docs/examples/table-overflow - https://bossanova.uk/jspreadsheet/docs/examples/richtext-html-editor - https://bossanova.uk/jspreadsheet/docs/examples/column-dragging - https://bossanova.uk/jspreadsheet/docs/examples/web-component - https://bossanova.uk/jspreadsheet/docs/examples/jquery ## Jspreadsheet Changelog ### Custom - Add onupdateresult event after search/filter; ### Jspreadsheet 5.0.0 - Separation of spreadsheet and worksheets; - New worksheet methods and events; - Dedicated wrappers for React and Vue for better framework integration; - Modern development environment powered by Webpack; - Updated architecture aligned with other distributions; [More information](https://bossanova.uk/jspreadsheet/docs/upgrade-from-v4-to-v5) ### Jspreadsheet 4.6.0 - Jexcel renamed to Jspreadsheet. - Integration with Jsuites v4. ### Jspreadsheet 4.2.3 - The spreadsheet plugin is now compatible with Jsuites v3. - New flags and security implementations. - New DOM element references in the toolbar. - Worksheet events are now tabbed. ### Jspreadsheet 4.0.0 Special thanks to [FDL - Fonds de Dotation du Libre](https://www.fdl-lef.org/) for their support and sponsorship, which made the new version possible with many exciting features. - Workbook/tab support for spreadsheets. - Create dynamic spreadsheets from static HTML elements. - Highlight selected cells in the spreadsheet after CTRL+C. - Footer with formula support. - Multiple column resizing. - JSON update support (helpers to update a remote server). - Centralized event dispatch method for all spreadsheet events. - Custom helpers: `=PROGRESS` (progress bar), `=RATING` (5-star rating). - Custom formula helpers: `=COLUMN`, `=ROW`, `=CELL`, `=TABLE`, `=VALUE`. - Dynamic nested header updates. - New HTML editing column type. - New flags: `includeHeadersOnCopy`, `persistence`, `filters`, `autoCasting`, `freezeColumns`. - New events: `onevent`, `onchangepage`, `onbeforesave`, `onsave`. - More examples and documentation. ### Jspreadsheet 3.9.0 - New methods. - General fixes. ### Jspreadsheet 3.6.0 - Improved spreadsheet formula parsing. - New spreadsheet events. - New initialization options. - General fixes. ### Jspreadsheet 3.2.3 - `getMeta`, `setMeta` methods. - NPM package with jSuites. - General fixes. ### Jspreadsheet 3.0.1 Jspreadsheet v3 is a complete rebuild of the JavaScript spreadsheet (previously a jQuery plugin). Due to the changes, full compatibility could not be ensured. If upgrading, your code may require some updates. For more information, refer to the article on upgrading from Jspreadsheet v2 or Handsontable. **New features in Jspreadsheet v3:** - Drag and drop columns. - Resizable rows. - Merge columns. - Search functionality. - Pagination. - Lazy loading. - Full-screen mode. - Image upload. - Native color picker. - Better mobile compatibility. - Enhanced nested headers support. - Advanced keyboard navigation. - Better hidden column management. - Data picker enhancements: dropdown, autocomplete, multiple selection, group options, and icons. - Import from XLSX (experimental). **Major improvements:** - A new formula engine with faster results and no external dependencies. - No use of selectors, leading to faster performance. - New native column types. - No jQuery required. - Examples for React, Vue, and Angular. - XLSX support via a custom SheetJS integration (experimental). ### Jspreadsheet 2.1.0 - Mobile touch improvements. - Paste fixes and a new CSV parser. ### Jspreadsheet 2.0.0 - New radio column type. - New dropdown with autocomplete and multiple selection options. - Header/body separation for better scroll and column resize behavior. - Text-wrap improvements, including Excel-compatible `alt+enter`. - New `set/get` meta information. - New `set/get` configuration parameters. - Programmatic `set/get` cell styles. - `set/get` cell comments. - Custom toolbar for tables. - Responsive calendar picker. ### Jspreadsheet 1.5.7 - Improvements to checkbox column type. - Updates to table destruction in jQuery. ### Jspreadsheet 1.5.1 - Spreadsheet data overflow and fixed headers. See an [example](https://jspreadsheet.com/examples/table-with-fixed-headers). - Navigation improvements. ### Jspreadsheet 1.5.0 - Relative `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`. See an [example](https://jspreadsheet.com/examples/working-with-the-data). - Redo and undo support for `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`, `moveRow`. - New formula column recursive chain. - New alternative design option (Bootstrap-like). See an [example](https://jspreadsheet.com/examples/a-custom-table-design). - `updateSettings` improvements. ## Official websites - [Jspreadsheet CE v4 - Javascript Spreadsheet](https://bossanova.uk/jspreadsheet/v4) - [Jspreadsheet CE v3 - Vanilla JavaScript](https://bossanova.uk/jspreadsheet/v3) - [Jspreadsheet CE v2 - jQuery Plugin](https://bossanova.uk/jspreadsheet/v2) - [Jspreadsheet Pro v11 - Javascript Spreadsheet](https://jspreadsheet.com/docs) - [Jspreadsheet Pro v10 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v10) - [Jspreadsheet Pro v9 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v9) - [Jspreadsheet Pro v8 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v8) - [Jspreadsheet Pro v7 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v7) ## Community - [GitHub](https://github.com/jspreadsheet/ce/issues) ## Contributing See [contributing](contributing.md) ## Copyright and license Jspreadsheet CE is released under the [MIT license]. Contact contact@jspreadsheet.com ## Other tools - [LemonadeJS Reactive Library](https://lemonadejs.com) - [jSuites Components](https://jsuites.net) - [CalendarJS](https://calendarjs.com) ================================================ FILE: build.cjs ================================================ module.exports = function (source) { let result = source.replace(/import\s+jSuites\s+from\s+(?:'|")jsuites(?:'|");?/gm, ''); result = result.replace(/import\s+formula\s+from\s+(?:'|")@jspreadsheet\/formula(?:'|");?/gm, ''); return result; }; ================================================ FILE: contributing.md ================================================ # Contributing When contributing to this repository, please follow the following process ## Pull Request Process 1. Create a fork of this repo 2. Create a branch named according to what you are developing (new-feature, fix-issue) 3. Make your changes 4. Create a Pull Request (PR) against origin:dev branch (origin:master) 5. Comment your PR explaining your changes, if it resolves an issue or adds a feature, also modify documentation accordingly if necessary. 6. Wait for yout PR to be reviewed and approved ## Steps to run the project locally after forking the repository. Open [http://localhost:8000](http://localhost:8000/) in your browser, or check the devServer settings in webpack.config.js if the port is different. Alternatively, you can change the port in the webpack.config.js file. # Code of Conduct ### Our Pledge In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. ### Our Standards Examples of behavior that contributes to creating a positive environment include: - Using welcoming and inclusive language - Being respectful of differing viewpoints and experiences - Gracefully accepting constructive criticism - Focusing on what is best for the community - Showing empathy towards other community members Examples of unacceptable behavior by participants include: - The use of sexualized language or imagery and unwelcome sexual attention or advances - Trolling, insulting/derogatory comments, and personal or political attacks - Public or private harassment - Publishing others' private information, such as a physical or electronic address, without explicit permission - Other conduct which could reasonably be considered inappropriate in a professional setting ### Our Responsibilities Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. ### Scope This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. ### Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. ### Attribution This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org [version]: http://contributor-covenant.org/version/1/4/ ================================================ FILE: dist/index.d.ts ================================================ export = jspreadsheet; export as namespace jspreadsheet; declare const jspreadsheet: jspreadsheet.JSpreadsheet; declare namespace jspreadsheet { type CellValue = string | number | boolean; type DropdownSourceItem = | string | number | { id: string | number; name: string; title?: string; image?: string; group?: string; }; interface CalendarOptions { /** * @default "YYYY-MM-DD" */ format?: string; /** * Open calendar in full screen mode (this is automatic set for screensize < 800). */ fullscreen?: boolean; /** Placeholder. */ placeholder?: string; /** * Allow keyboard date entry. * @default true */ readonly?: boolean; /** * Show the reset button. * @default true */ resetButton?: boolean; /** * Show timepicker. * @default false */ time?: boolean; /** Today is default. */ today?: boolean; } interface CustomEditor { /** * Event responsible for closing the editor of a cell with a custom editor. * @param cell - Td tag whose editor should close. * @param save - If true, the value returned by this event will be the cell's new value. Otherwise, the value returned by this event is ignored. * @param x - Cell column index. * @param y - Cell row index. * @param instance - Worksheet instance. * @param options - Column configuration object. * @returns New cell value. */ closeEditor?: (cell: HTMLTableCellElement, save: boolean, x: number, y: number, instance: WorksheetInstance, options: Column) => CellValue | undefined; /** * Event called when creating new cells. * @param cell - HTML element prepared to be the new cell. * @param value - Cell value. * @param x - Cell column index. * @param y - Cell row index. * @param instance - Worksheet instance. * @param options - Column configuration object. * @returns HTML element that will be the new cell. */ createCell?: (cell: HTMLTableCellElement, value: CellValue, x: number, y: number, instance: WorksheetInstance, options: Column) => HTMLTableCellElement; /** * Event responsible for opening the editor of a cell with a custom editor. * @param cell - Td tag whose editor should open. * @param value - Cell value. * @param x - Cell column index. * @param y - Cell row index. * @param instance - Worksheet instance. * @param options - Column configuration object. * @param e - Event that called this method. */ openEditor?: ( cell: HTMLTableCellElement, value: CellValue, x: number, y: number, instance: WorksheetInstance, options: Column, e: KeyboardEvent | MouseEvent | TouchEvent | undefined ) => void; /** * Event called before changing the value of a cell. * * The returned value will be the cell's new value. * @param cell - Cell whose value has changed. * @param value - New value. * @param x - Cell column index. * @param y - Cell row index. * @param instance - Worksheet instance. * @param options - Column configuration object. */ updateCell?: ( cell: HTMLTableCellElement, value: CellValue | undefined, x: number, y: number, instance: WorksheetInstance, options: Column ) => CellValue | undefined; } type HorizontalAlign = 'center' | 'left' | 'right' | 'justify'; interface BaseColumn { /** Cell alignment. */ align?: HorizontalAlign; decimal?: string; /** Cell mask. */ mask?: string; /** Name used to refer to this column if the data is arranged as an array of objects. */ name?: string; /** * Prevent user from changing cell values. * @default false */ readOnly?: boolean; /** * Defines a modification that must be made to a cell value before it is displayed in the spreadsheet. * @param cell - Cell whose value has changed. * @param value - New value. * @param x - Cell column index. * @param y - Cell row index. * @param instance - Worksheet instance. * @param options - Column configuration object. */ render?: (cell: HTMLTableCellElement, value: CellValue | undefined, x: number, y: number, instance: WorksheetInstance, options: Column) => void; /** Custom column title. */ title?: string; /** * The type of cells in this column. * @default "text" */ type?: 'text' | 'numeric' | 'hidden' | 'dropdown' | 'autocomplete' | 'checkbox' | 'radio' | 'calendar' | 'image' | 'color' | 'html' | CustomEditor; /** Column width. */ width?: string | number; /** * Enable automatic word wrapping in cells in this column. * @default false */ wordWrap?: boolean; } interface DropdownColumn extends BaseColumn { autocomplete?: boolean; /** * Allow selection of more than one item. * @default false */ multiple?: boolean; /** Options available in the dropdown. */ source?: DropdownSourceItem[]; /** Url to fetch options from an external source. */ url?: string; } interface CalendarColumn extends BaseColumn { /** Calendar options. */ options?: CalendarOptions; } interface ColorColumn extends Omit
{data-text="Jspreadsheet" .center}
# Contact Us
================================================
FILE: docs/jspreadsheet/demo.md
================================================
title: Jspreadsheet Demo Page
keywords: Jspreadsheet, JavaScript data grid, spreadsheet controls, interactive data grid, web-based applications, lightweight, responsive controls, agnostic platform, Angular, React, Vue, spreadsheet-like plugin, documentation, examples, license
description: Explore working examples of Jspreadsheet in action. See how it delivers interactive, customizable data grid solutions for web-based applications.
canonical: https://bossanova.uk/jspreadsheet/demo
#### Upgrades
Looking for more information?
Email: [contact@jspreadsheet.com](mailto:contact@jspreadsheet.com)
[Contact Us](mailto:contact@jspreadsheet.com){.button .dark target="_blank"}
#### Technical Support
Professional Technical Support
Email: [support@jspreadsheet.com](mailto:support@jspreadsheet.com)
[Talk to us](mailto:support@jspreadsheet.com){.button .dark target="_blank"}
#### Github
GitHub repository:
[https://github.com/jspreadsheet/ce](https://github.com/jspreadsheet/ce)
[](https://github.com/jspreadsheet/ce){target="_blank"}
{data-text="Demo"}
# Data Grid Demo
Explore the Jspreadsheet data grid through these interactive demos. Learn how its versatile spreadsheet controls integrate seamlessly with Angular, React, Vue, and other platforms. See practical use cases for building responsive, lightweight, and powerful web-based applications.
================================================
FILE: docs/jspreadsheet/docs/angular.md
================================================
title: Angular Spreadsheet
keywords: Angular, Jspreadsheet, data grid, spreadsheet controls, TypeScript, Angular integration, JavaScript grid, Angular application, interactive spreadsheets, data grid functionality
description: Create advanced data grids in Angular applications using Jspreadsheet. Integrate spreadsheet-like controls with TypeScript support for enhanced interactivity and data management.
# Angular Spreadsheet
## Overview
Create advanced JavaScript Data Grids with Angular using Jspreadsheet, featuring spreadsheet-like controls optimized for TypeScript. This guide provides integration steps and practical examples tailored for Angular projects.
## Documentation
### Installation
Install Jspreadsheet for Angular using npm:
```bash
npm install jspreadsheet-ce@5.0.0-beta.3
```
### Importing Stylesheets
Include the necessary styles for Jspreadsheet and Jsuites in your Angular project. Add the following to the styles array in your angular.json file:
```json
"styles": [
"jsuites/dist/jsuites.css",
"jspreadsheet-ce/dist/jspreadsheet.css"
]
```
## Examples
### Basic Angular Spreadsheet
Here's a simple example of integrating Jspreadsheet in an Angular component. The spreadsheet allows dropdowns and colour pickers within cells, demonstrating adding comments and using basic formulas.
```typescript
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
ngAfterViewInit() {
// Create the spreadsheet
jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
data: [
['Yes', '#ff0000'],
['No', '#00ff00']
],
minDimensions: [6, 4],
columns: [
{
type: "dropdown",
width: 100,
source: ["Yes", "No"]
},
{
type: "colour",
width: 100,
render: "square"
}
],
allowComments: true,
comments: {
A1: "Select Yes or No",
B1: "Choose a colour."
}
}
]
});
}
}
```
### Data from External Sources
Use Angular's HttpClient to load or save data dynamically from an API and pass it to Jspreadsheet.
{.ignore}
```angularjs
import { Component, ViewChild, ElementRef } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import jspreadsheet from "jspreadsheet-ce";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
constructor(private http: HttpClient) {}
ngAfterViewInit() {
// Fetch data from an external API and initialize the spreadsheet
this.http.get('https://api.example.com/spreadsheet-data')
.subscribe((data: any[][]) => {
jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
data: data,
columns: [
{ type: "dropdown", width: 100, source: ["Yes", "No"] },
{ type: "checkbox", width: 50 }
],
minDimensions: [10, 5]
}
]
});
});
}
}
```
### Online Spreadsheet with Angular
A basic Angular spreadsheet with export to XLSX.
- [Angular Online Spreadsheet](https://codesandbox.io/s/angular-spreadsheet-lbtcwf)
- [Angular Data Grid with Spreadsheet Controls](https://stackblitz.com/edit/data-grid-with-spreadsheet-controls)
- [Dynamic Spreadsheets](https://stackblitz.com/edit/online-spreadsheets)
### Online XLSX Editor with Angular
Import XLSX files and edit them online using Jspreadsheet Pro.
- [Angular Spreadsheet XLSX Editor](https://codesandbox.io/s/online-angular-excel-spreadsheet-lk5bnc)
### More Spreadsheet Angular Examples
- [Data Grid Custom Cell Editor](https://stackblitz.com/~/github.com/nicolasjesse/jss-custom-column-ng)
- [Angular Spreadsheet with Data Validation](https://stackblitz.com/edit/angular-data-validation-example)
{.pro}
> **Jspreadsheet Pro for Angular - Professional Spreadsheet Components**
>
> While Jspreadsheet CE provides core spreadsheet functionality for Angular, **Jspreadsheet Pro** offers enhanced Angular integration and enterprise features:
>
> **Enhanced Angular Integration:**
> - **Full TypeScript Support:** Complete type definitions for type-safe Angular development
> - **Angular Modules:** NgModule structure for easy integration into Angular apps
> - **Standalone Components:** Support for Angular standalone components (Angular 14+)
> - **Dependency Injection:** Full DI support for spreadsheet services
> - **RxJS Integration:** Observable streams for reactive data handling
> - **Angular Signals:** Support for Angular Signals (Angular 16+)
>
> **Professional Components:**
> - **Advanced Editors:** Conditional dropdowns, rich text, HTML editors with Angular forms
> - **Formula System:** 500+ Excel functions with Angular change detection
> - **Conditional Formatting:** Visual rules, data bars, color scales, icon sets
> - **Data Validation:** Real-time validation with Angular form validators
> - **Import/Export:** Full Excel (.xlsx) import/export with formatting preservation
> - **Charts & Graphs:** Built-in Angular chart components for data visualization
>
> **Angular Forms Integration:**
> - **Reactive Forms:** Full integration with Angular Reactive Forms
> - **Template-Driven Forms:** Support for template-driven form bindings
> - **Form Validators:** Built-in and custom Angular validators
> - **Form Control:** Spreadsheet as FormControl with validation
> - **Two-Way Binding:** [(ngModel)] support for spreadsheet data
> - **Form States:** Track pristine, dirty, touched, valid states
>
> **Performance & Scale:**
> - **Virtual Scrolling:** Handle 100K+ rows with smooth scrolling
> - **Lazy Loading:** Load data on-demand for optimal performance
> - **Zone.js Optimized:** Efficient change detection with Angular zones
> - **OnPush Strategy:** Support for OnPush change detection strategy
> - **Web Workers:** Background processing for heavy calculations
> - **AOT Compatible:** Fully compatible with Ahead-of-Time compilation
>
> **Developer Experience:**
> - **Angular-Specific Documentation:** Examples with TypeScript and Angular patterns
> - **Professional Support:** Priority support for Angular integration issues
> - **Regular Updates:** Continuous Angular version compatibility (14, 15, 16, 17+)
> - **Migration Tools:** Easy migration from CE to Pro with Angular examples
>
> **Angular-Specific Pro Features:**
> - **Custom Angular Components:** Use Angular components as cell editors
> - **Pipes Support:** Use Angular pipes for cell value transformation
> - **Directives:** Custom directives for cell customization
> - **Services:** Spreadsheet services for shared state management
> - **Router Integration:** Deep linking and navigation integration
> - **Testing Support:** Jasmine/Karma and Jest integration examples
>
> Perfect for Angular applications requiring enterprise-grade spreadsheet functionality with professional support.
>
> **[Explore Jspreadsheet Pro Angular →](https://jspreadsheet.com/docs/angular)** | **[Compare CE vs Pro →](https://jspreadsheet.com/docs/getting-started)** | **[View Pricing →](https://jspreadsheet.com/pricing)**
================================================
FILE: docs/jspreadsheet/docs/cells.md
================================================
title: Spreadsheet Cells
keywords: JavaScript, Jspreadsheet, Jexcel, Data Grid, Spreadsheet Features, Excel-like Functionality, Table Management, Cell Settings, Cell Configuration
description: Detailed documentation on Jspreadsheet cell configuration, covering events, methods, and settings for advanced customization.
# Spreadsheet Cells
This guide provides an in-depth overview of data grid cells in Jspreadsheet, including key methods, configuration options, and a basic implementation example.
{.pro}
> #### Differences in the Pro Version
>
> The Jspreadsheet Pro enables cell-level editor customization and allows dynamic programmatic changes to cell types.\
> \
> [Learn more](https://jspreadsheet.com/docs/cells){.button}
## Documentation
### Methods
This section outlines methods to facilitate interaction with cells and their attributes within the data grid.
| Method | Description |
|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|
| `getCell` | Get cell DOM element by cell name.@param `cell` - Cell name.
`worksheetInstance.getCell(cell: string): HTMLTableCellElement;`
Get cell DOM element by cell coords.
@param `x` - Cell column index.
@param `y` - Cell row index.
`worksheetInstance.getCell(x: number, y: number): HTMLTableCellElement;` | | `getCellFromCoords`{.nowrap} | Get cell DOM element by cell coordinates.
@param `x` - Column index of the cell.
@param `y` - Row index of the cell.
`worksheetInstance.getCellFromCoords(x: number, y: number): HTMLTableCellElement;` | ### Example The following example is a car loan calculation spreadsheet showcasing styles, merged cells, and row properties. ```html ``` ```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(); // Data const data = [ ['Car loan', ''], ['Purchase price', '19700'], ['Down payment', '1000'], ['Trade-in value', '500'], ['Interest rate', '0.0305'], ['Length of loan (in months)', '60'], ['', ''], ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'], ['Total cost', '=-(B8*B6)+(B3+B4)'], ]; // Columns const columns = [ { width:'300px' }, { width:'200px' }, ]; // Merge cells const mergeCells = { A1: [2, 1], } // Rows properties const rows = { 0: { height:'200px' } } const style = { A1: 'font-weight: bold' } const applyStyle = function() { if (spreadsheet.current) { spreadsheet.current[0].getCell('A1').style.backgroundColor = 'orange'; } } // Render component return ( <>
@param `cut` - If true, the operation is cut, if not, it is copy.
`worksheetInstance.copy(cut?: boolean): void;`
**Example**: `worksheetInstance.copy(true)` to cut the data. | | `paste` | Paste data at a coordinate.Pastes content into one or more cells.
@param `x` - Column index of the cell from which the content will be pasted.
@param `y` - Row index of the cell from which the content will be pasted.
@param `data` - Content to be pasted.
`worksheetInstance.paste(x: number, y: number, data: string): false \| undefined;` | ### Clipboard Operation Events These events let you hook into clipboard operations like copy and paste, providing greater control over how data is transferred or manipulated. | Event | Description | |--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `oncopy` | Fires when data is copied to the clipboard. Use this to inspect or modify the copied data before it goes to the clipboard.
`oncopy(instance: WorksheetInstance, selectedRange: [number, number, number, number], copiedData: string, cut: boolean \| undefined): string \| false \| undefined;` | | `onbeforepaste`{.nowrap} | Fires before pasting occurs, allowing you to validate or transform the incoming data. You can also cancel the paste if needed.
`onbeforepaste(instance: WorksheetInstance, copiedText: { value: CellValue }[][], colIndex: number \| string, rowIndex: number \| string): undefined \| boolean \| string;` | | `onpaste` | Fires after the paste action is completed. Useful for post-processing or triggering additional actions after the paste.
`onpaste(instance: WorksheetInstance, pastedInfo: { x: number, y: number, value: CellValue }[][]): void;` | > **Note** > In Jspreadsheet CE, it is not possible to cancel or modify the clipboard value during the oncopy event. ## Examples ### Intercept Pasted Data You can intercept and cancel the paste event if needed. ```html ``` ```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(); // Data const data = [ ['Mazda', 2001, 2000], ['Peugeot', 2010, 5000], ['Honda Fit', 2009, 3000], ['Honda CRV', 2010, 6000], ]; const onbeforepaste = function() { alert('Not allowed to paste'); return false; } // Render data grid component return (
@param `column` - Index of the column. If omitted, returns the widths of all columns.
`worksheetInstance.getWidth(column?: number): number \| (number \| string)[];` | | `setWidth` | Set the width of a column.
@param `column` - Column index.
@param `width` - New width.
`worksheetInstance.setWidth(column: number, width: number): void;`
Set the width of one or more columns.
@param `column` - Column indexes.
@param `width` - New widths.
`worksheetInstance.setWidth(column: number[], width: number \| number[]): void;` | | `getColumn` | Retrieves settings for a specified column.
`worksheetInstance.getColumn(colNumber: Number): Object` | | `moveColumn` | Move a column. This method returns false if the "This action will destroy any existing merged cells. Are you sure?" dialog receives a negative response.
@param o - Column index.
@param `d` - New column index.
`worksheetInstance.moveColumn(columnNumber: number, newPositionNumber: number): false \| undefined;` | | `insertColumn` | Insert one or more columns. This method returns false if the onbeforeinsertcolumn event returns false or if the "This action will destroy any existing merged cells. Are you sure?" dialog receives a negative response.
@param `mixed` - Number of columns to insert. It can also be an array of values, but in this case, only one column is inserted, whose data is based on the array items. Default: 1.
@param `columnNumber` - Index of the column used as reference for the insertion. Default: last column.
@param `insertBefore` - Insert new columns before or after the reference column. Default: false.
@param `properties` - New column properties.
`worksheetInstance.insertColumn(mixed?: number \| CellValue[], columnNumber?: number, insertBefore?: boolean, properties?: Column[]): false \| undefined;` | | `deleteColumn`{.nowrap} | Remove columns. This method returns false if the onbeforedeletecolumn event returns false or if the "This action will destroy any existing merged cells. Are you sure?" dialog receives a negative response.
@param `columnNumber` - Column index from which removal starts.
@param `numOfColumns` - Number of columns to be removed.
`worksheetInstance.deleteColumn(columnNumber?: number, numOfColumns?: number): false \| undefined;` | ### Events Several events are available for handling column actions in your spreadsheet, including `onbefore` events that let you intercept, validate, or cancel user actions. | Event | Description | |---------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------| | `onbeforeinsertcolumn`{.nowrap} | Triggered before a new column is inserted. Return `false` to cancel the action.
`onbeforeinsertcolumn(instance: WorksheetInstance, columns: { column: number, options: Column, data?: CellValue[] }[]): undefined \| boolean;` | | `oninsertcolumn` | Triggered after a new column is inserted.
`oninsertcolumn(instance: WorksheetInstance, columns: { column: number, options: Column, data?: CellValue[] }[]): void;` | | `onbeforedeletecolumn` | Triggered before a column is deleted. Return `false` to cancel the action.
`onbeforedeletecolumn(instance: WorksheetInstance, removedColumns: number[]): undefined \| boolean;` | | `ondeletecolumn` | Triggered after a column is deleted.
`ondeletecolumn(instance: WorksheetInstance, removedColumns: number[]): void;` | | `onmovecolumn` | Triggered after a column is moved to a new position.
`ondeletecolumn(instance: WorksheetInstance, removedColumns: number[]): void;` | ### Initial Settings The following column-related properties are configurable during the initialization of the online spreadsheet: | Property | Description | |---------------------------------------------|--------------------------------------------------------------------------------------------------------| | `allowInsertColumn: boolean` | Enables users to add new columns. `Default: true` | | `allowManualInsertColumn: boolean`{.nowrap} | Adds a new column when the user presses the Tab key in the last column. `Default: true` | | `allowDeleteColumn: boolean` | Allows users to delete columns. `Default: true` | | `allowRenameColumn: boolean` | Allows users to rename columns. `Default: true` | | `columnDrag: boolean` | Enables drag-and-drop for changing column positions. `Default: true` | | `columnSorting: boolean` | Allows users to sort columns. `Default: true` | | `columnResize: boolean` | Allows users to resize columns. `Default: true` | | `defaultColWidth: number` | Sets the default column width. `Default: 100px` | | `defaultColAlign: string` | Sets the default column text alignment. `Default: center` | | `minSpareCols: number` | Number of blank columns at the spreadsheet's end. `Default: none` | ### Available Properties Each column type in Jspreadsheet can hold specific properties. Below are some of the most commonly available options: | Property | Description | |----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------| | `type` | Defines the editor type for the column. It can be a string for a native editor or a method for a custom editor plugin. | | `title` | Title of the column. | | `name` | Property name or path when using JSON data. | | `width` | Width of the column. | | `align` | Alignment of the column content. `Default: center.` | | `url` | URL to load items for dropdowns in this column. | | `source` | Items for dropdown or autocomplete fields. | | `autocomplete` | Enables autocomplete for the column. | | `multiple` | Allows multiple selections in dropdown or autocomplete fields. | | `mask` | Input mask applied to data cells. | | `decimal` | Character used as the decimal separator. | | `disabledMaskOnEdition` | Disables the mask when editing. | | `render` | Renderer method or rule for cell content. | | `format` | Date or number format in the cell. `Default for the calendar: "DD/MM/YYYY".` | | `options` | Extended configuration for the column. | #### Adding a New Column To insert a new column into the data grid, you can pass an array of objects, each object containing three properties outlined below. This approach allows for the creation of multiple columns in a single operation. | Method | Description | | ----------------|--------------------------------------------------| | data: any[] | Array with the column data | | column: number | The index where the new column will be inserted. | | options: object | An object specifying the column's attributes. | ##### Example To add a new column at the beginning of the grid: {.ignore} ```javascript worksheet.insertColumn([ { data: [1,2,3], column: 0, options: { type: 'calendar', title: 'My new column' } } ]); ``` ## Examples ### Render Method The render method modifies visible data before inserting it into a grid cell. ```html ``` ```jsx import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react"; import "jspreadsheet-ce/dist/jspreadsheet.css"; // Adding an arbitrary number leading zeros. const pad = (cell, value, x, y, instance, options) => { if (value !== '') { let size = options.digits||0; value = value.toString(); while (value.length < size) { value = "0" + value; } cell.innerText = value; } } export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Data const data = [[1]]; // Columns const columns = [ { render: pad, digits: 6 } ]; // Render component return (
``` ```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(null); // Data const data = [ ['US', 'Cheese', 1000 ], ['CA', 'Apples', 1200 ], ['CA', 'Carrots', 2000 ], ['BR', 'Oranges', 3800 ], ]; // Render component return ( <>
); } ``` ```vue
- Click to insert a new blank column at the end of the table
- Click to insert two new blank columns at the beginning of the table
- Click to delete the last column
- Click to move the first column to the third position
- Hide the first column
- Show the first column
- Click to insert a new blank column at the end of the table
- Click to insert two new blank columns at the beginning of the table
- Click to delete the last column
- Click to move the first column to the third position
- Hide the first column
- Show the first column
@param `cell` - Cell name. If null or undefined, returns comments for all cells.
`worksheetInstance.getComments(cell?: string): Record
@param `cellId` - Cell name.
@param `comments` - New comment. If null, removes the comment from the cell.
`worksheetInstance.setComments(cellId: string, comments: string): void;`
Handle multiple cells:
@param `cellId` - Object where keys are cell names and values are cell comments. Null values remove the comments.
`worksheetInstance.setComments(cellId: Record
@param `instance` - The worksheet instance where the change occurred.
@param `newComments` - Object containing updated comments.
@param `oldComments` - Object containing previous comments.
`oncomments(instance: WorksheetInstance, newComments: Record
``` ```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'], ['CA', 'Carrots', '2018-11-10'], ['BR', 'Oranges', '2019-01-12'], ]; const columns = [ { width: '300px' }, { width: '200px' }, { width: '200px' }, ]; const comments = { B1: 'Initial comments on B1', C1: 'Initial comments on C1' }; const oncomments = () => { console.log(arguments); } return ( <>
`getConfig() => Object` | | `setConfig` | Updates the configuration for a worksheet.
`setConfig(options: Object, level?: Boolean) => void` | ## Examples ### Data Grid Cloning This example demonstrates how to copy a data grid configuration and use it to initialize a new spreadsheet. [See this example on JSFiddle](https://jsfiddle.net/spreadsheet/xz5pfgq7/) ```html
``` ```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()} /> ); } ``` ```vue
``` ```angularjs import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet-ce"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/jspreadsheet.css"; // Create component @Component({ standalone: true, selector: "app-root", template: `
`, }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; @ViewChild("console") console: ElementRef; @ViewChild("copy") copy: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ minDimensions: [4,4], }], contextmenu: function() { return false; } }); } // Clone the data grid clone() { // Get the data grid configuration let config = JSON.stringify(this.worksheets[0].parent.getConfig()); // Show on the textarea this.console.nativeElement.value = config; // Destroy any existing spreadsheet jspreadsheet.destroy(this.copy.nativeElement); // Parse config = JSON.parse(config); // Create a new spreadsheet jspreadsheet(this.copy.nativeElement, config); } } ``` ================================================ FILE: docs/jspreadsheet/docs/contextmenu.md ================================================ title: Data Grid Context Menu Customization keywords: Jspreadsheet, Jexcel, Angular data grid, JavaScript, Excel-like spreadsheet, data tables, data grid context menu, context customization, customize context menu, interactive data grid. description: Define and customize the context menu in Jspreadsheet. Manage default items, section info, and cell coordinates while adding custom menu entries based on application-specific rules. # Context Menu Customization Jspreadsheet lets you customize the context menu through a context menu method, which provides default items, section info, coordinates, and context, which allows you to add or modify menu options based on dynamic application rules. ## Documentation ### Item Properties The `contextmenu` handler method might return an array of menu items, each represented as an object with the following properties: | Property | Description | |------------|--------------------------------------------------------------------| | `type` | Type of menu item: `"line"`, `"divisor"`, or `"default"`. | | `title` | The title of the menu item. | | `icon` | Icon key for the item (uses Material icon key for identification). | | `id` | `id` attribute for the HTML element. | | `disabled` | If `true`, the item is disabled. | | `onclick` | `onclick` event handler function for the item. | | `shortcut` | Short description or shortcut instruction. | | `tooltip` | Tooltip text displayed on hover. | | `submenu` | Array of submenu items. | ### Translation You can define translations for default menu items in Jspreadsheet by using `jspreadsheet.setDictionary` as shown below: {.ignore} ```javascript jspreadsheet.setDictionary({ 'Rename this worksheet': 'Renomear worksheet', 'Delete this worksheet': 'Apagar worksheet', 'Are you sure?': 'Tem certeza?', 'Rename this cell': 'Renomear essa celula', 'Cut': 'Cortar', 'Copy': 'Copy', 'Paste': 'Colar', 'Insert a new column before': 'Inserir uma coluna antes', 'Insert a new column after': 'Inserior uma coluna depois', 'Insert a new column after': 'Inserior uma coluna depois', 'Delete selected columns': 'Apagar colunas selecionadas', 'Rename this column': 'Renomar essa coluna', 'Create a new row': 'Criar uma nova linha', 'Order ascending': 'Ordenar asc', 'Order descending': 'Ordenar desc', 'Insert a new row before': 'Inserir uma linha antes', 'Insert a new row after': 'Inserir uma nova linha depois', 'Delete selected rows': 'Apagar linhas selecionadas', 'Edit notes': 'Editar notas', 'Add notes': 'Adicionar notas', 'Notes': 'Notas', 'Clear notes': 'Apagar notas', 'Save as': 'Salvar como', 'About': 'Sobre', }); ``` Jspreadsheet uses the jSuites [contextmenu plugin](https://jsuites.net/docs/contextmenu). For further details and examples, refer to the documentation. ## Examples ### Customize the contextmenu Customize the contextmenu with a few basic options depending on the section clicked. ```html ``` ```jsx import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react"; import jSuites from "jsuites"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/jspreadsheet.css"; // Intercept the context menu const contextMenu = (o, x, y, e, items, section) => { // Reset all items items = []; // If the click was in the headers if (section == 'header') { // Items to the header only items.push({ title: jSuites.translate('Execute one action'), onclick: function() { alert('test') } }); // Add a line items.push({ type: 'line' }); } // Save items.push({ title: jSuites.translate('Save as'), shortcut: 'Ctrl + S', icon: 'save', onclick: function () { o.download(); } }); // About items.push({ title: jSuites.translate('About'), onclick: function() { alert('https://jspreadsheet.com'); } }); return items; } export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Data const data = [ ["Apples", "Produce", 1.5, 10, "=C1*(1-(D1/100))"], ["Bread", "Bakery", 3.0, 20, "=C2*(1-(D2/100))"], ["Cheese", "Dairy", 5.0, 15, "=C3*(1-(D3/100))"], ["Eggs", "Dairy", 2.5, 0, "=C4*(1-(D4/100))"], ]; // Columns const columns = [ { title: 'Food', width: '140px' }, { title: 'Category' }, { title: 'Unit Price' }, { title: 'Discount' }, { title: 'Total ' }, ]; return (
> [Learn more](https://jspreadsheet.com/products/formulas){.button} ================================================ FILE: docs/jspreadsheet/docs/data.md ================================================ title: Spreadsheet Data Operations keywords: Jspreadsheet, Jexcel, data grid, JavaScript, Excel-like formulas, spreadsheet data, worksheet data, data management, update cell data, manage worksheet data, programmatically update data description: Learn how to load, manage, and manipulate worksheet data in Jspreadsheet. Explore methods for programmatic data updates and integrate spreadsheet functionality with your web applications using related events. # Data Management This section details the methods, events, and settings for loading, updating, and managing data in Jspreadsheet data grids. ## Loading the Data ### Formats You can create spreadsheets using various data formats, including: - Existing HTML tables - CSV files - JSON objects - JavaScript arrays ## Documentation ### Methods These methods assist in managing data in your grid or spreadsheet. #### Read Methods | Method | Description | |-------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `getValue` | Get the value of a cell.
@param `cell` - Cell name.
@param `processedValue` - If true, it returns the cell's innerHTML. Otherwise, it returns the value of the cell in the data property.
`worksheetInstance.getValue(cell: string, processedValue?: boolean): CellValue \| null;` | | `getValueFromCoords`{.nowrap} | Get the value of a cell by its coordinates.
@param `x` - Column index.
@param `y` - Row index.
@param `processedValue` - If true, it returns the cell's innerHTML. Otherwise, it returns the value of the cell in the data property.
`worksheetInstance.getValueFromCoords(x: number, y: number, processedValue?: boolean): CellValue \| null;` | | `getData` | Get the full or partial table data.
@param `highlighted` - If true, get only data from highlighted cells. If false, get data from all cells. Default: false.
@param `processed` - If false, the return is constructed using the innerHTML of the cells. Otherwise, it is constructed using the {@link WorksheetOptions.data} property. Default: false.
@param `delimiter` - Column delimiter. If this property is specified, the result will be formatted like a csv.
@param `asJson` - If this property is true, the result will be formatted as json.
`getData(highlighted?: boolean, processed?: boolean, delimiter?: string, asJson?: boolean): CellValue[][];` | | `getRowData` | Get data from a row by its index.
@param `rowNumber` - Row index.
@param `processed` - If true, the return is constructed using the innerHTML of the cells. Otherwise, it is constructed using the data property. Default: false.
`worksheetInstance.getRowData(rowNumber: number, processed?: boolean): CellValue[] \| undefined;` | | `getColumnData` | Get the data from one column by its index.
@param `columnNumber` - Column index.
@param `processed` - If true, the return is constructed using the innerHTML of the cells. Otherwise, it is constructed using the data property. Default: false.
`worksheetInstance.getColumnData(columnNumber: number, processed?: boolean): CellValue[];` | | `download` | Get the current data as a CSV file.
@param `includeHeaders` - If true, include the header regardless of the {@link SpreadsheetOptions.includeHeadersOnDownload} property value.
@param `processed` - If true, the result will contain the displayed cell values. Otherwise, the result will contain the actual cell values.
`worksheetInstance.download(includeHeaders?: boolean, processed?: boolean): void;` | #### Write Methods | Method | Description | |-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------| | `setValue` | Change the value of one or more cells.
@param `cell` - Name of a cell, HTML element that represents a cell or an array whose items can be any of the previous alternatives or objects. When an array item is an object, it must have the cell coordinates ("x" and "y") and can have the cell's new value ("value"), but if does not have it, the "value" parameter is used instead.
@param `value` - New cell value.
@param `force` - If true, changes the value of even read-only cells.
`worksheetInstance.setValue(cell: string \| HTMLTableCellElement \| (string \| { x: number; y: number; value?: CellValue } \| HTMLTableCellElement)[], value?: CellValue, force?: boolean): void;` | | `setValueFromCoords`{.nowrap} | Set a cell value based on its coordinates.
@param `x` - Cell column index.
@param `y` - Cell row index.
@param `value` - New value.
@param `force` - If true, changes the value of even read-only cells.
`worksheetInstance.setValueFromCoords(x: number, y: number, value: CellValue, force?: boolean): void;` | | `setData` | Set data.
@param `data` - New data. It can be an array of cell values or an array of objects whose values are cell values.
`worksheetInstance.setData(data?: CellValue[][] \| Record
@param `rowNumber` - Row index.
@param `data` - New data. Positions with the null value are not changed in the table.
@param `force` - If true, the method also changes the contents of readonly columns.
`worksheetInstance.setRowData(rowNumber: number, data: (CellValue \| null)[], force?: boolean): void;` | | `setColumnData` | Set the data from one column by index.
@param `colNumber` - Column index.
@param `data` - New data. Positions with the null value are not changed in the table.
@param `force` - If true, the method also changes the contents of readonly columns.
`worksheetInstance.setColumnData(colNumber: number, data: (CellValue \| null)[], force?: boolean): void;` | ### Events You can find a list of javascript events related to the data operations. | Event | Description | |---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| | `onbeforechange`{.nowrap} | Occurs before a column value is changed. If any value is returned, it will be the cell's new value.
@param `instance` - Instance of the worksheet where the changes will occur.
@param `cell` - HTML element that represents the cell being changed.
@param `colIndex` - Cell column index being changed.
@param `rowIndex` - Cell row index being changed.
@param `newValue` - Value being applied to the cell
`onbeforechange(instance: WorksheetInstance, cell: HTMLTableCellElement, colIndex: string \| number, rowIndex: string \| number, newValue: CellValue): undefined \| CellValue;` | | `onchange` | Occurs after a column value is changed.
@param `instance` - Instance of the worksheet where the change occurred.
@param `cell` - HTML element that represents the cell being changed.
@param `colIndex` - Cell column index being changed.
@param `rowIndex` - Cell row index being changed.
@param `newValue` - New cell value.
@param `oldValue` - Old cell value.
`onchange(instance: WorksheetInstance, cell: HTMLTableCellElement, colIndex: string \| number, rowIndex: string \| number, newValue: CellValue, oldValue: CellValue): void;` | | `onafterchanges` | Occurs after all changes are applied in the tables.
@param `instance` - Instance of the worksheet where the change occurred.
@param `changes` - list of changes.
`onafterchanges(instance: WorksheetInstance, changes: CellChange[]): void;` | ### Initial Settings A list of settings that can be utilized when initializing the data grid. | Property | Description | |-------------------------|---------------------------------------------------| | `data: Array \| Object` | Defines initial data from a JSON or array. | | `url: String` | Loads data from an external file. | | `csv: String` | Loads data from an external CSV file. | | `csvHeaders: Boolean` | The first row of the CSV file is used as headers. | | `csvDelimiter: String` | Sets the CSV delimiter (default: ','). | ## Examples ### Create a data grid from an 2D array. Create a spreadsheet from a JavaScript array ```html ``` ```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(); // Data const data = [ ['Mazda', 2001, 2000], ['Peugeot', 2010, 5000], ['Honda Fit', 2009, 3000], ['Honda CRV', 2010, 6000], ]; // Columns const columns = [ { title:'Model', width:'300px' }, { title:'Price', width:'80px' }, { title:'Model', width:'100px' } ]; // Render data grid component return (
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
``` ```jsx import React, { useRef, useEffect } from "react"; import { 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(); useEffect(() => { if (spreadsheet.current) { jspreadsheet(spreadsheet.current); } }, []) // Render component return ( <>
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
`openEditor(cell: HTMLElement, empty: boolean, e: MouseEvent): void` | | `closeEditor` | Close the editor.
`closeEditor(cell: HTMLElement, save: boolean): void` | ### Events Events related to editors and data grid editing: | Event | Description | |---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `oneditionstart` | Triggered when cell editing starts.
`oneditionstart(worksheet: Object, cell: HTMLElement, x: number, y: number): void \| boolean` | | `oneditionend` | Triggered when cell editing ends.
`oneditionend(worksheet: Object, cell: HTMLElement, x: number, y: number, v: any, save: boolean): void` | | `oncreateeditor`{.nowrap} | Triggered when an editor is created.
`oncreateeditor(worksheet: Object, cell: HTMLElement, x: number, y: number, input: HTMLElement, options: object): void` |
### Declaring the Editors In CE, the `type` property declares the editor at the column level. The Pro version allows defining editors at the cell level. ```html ``` ```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(); // Columns const columns = [ { type: 'text' }, { type: 'dropdown', source: ['Male','Female'] } ]; // Render data grid component return (
`createCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object): void` | | `updateCell` | Triggered when the cell value changes.
`updateCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object): void` | | `openEditor` | Triggered when the user starts editing a cell.
`openEditor(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object): void` | | `closeEditor` | Triggered when the user finalizes the cell edit.
`closeEditor(cell: Object, confirmChanges: Boolean, x: Number, y: Number, instance: Object, options: Object): void` | | `destroyCell` | Triggered when a cell is destroyed.
`destroyCell(cell: Object, x: Number, y: Number, instance: Object): void` | | `get` | Converts raw data into processed data, such as displaying text instead of an ID in a dropdown type.
`get(options: Object, value: Any): Any` | ## Examples ### Native Editors A basic example showcasing the use of multiple native editors. ```html ``` ```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(); // Data const data = [ ['Jazz', 'Honda', '2019-02-12', '/templates/default/img/nophoto.jpg', true, 2000.00, '#777700'], ['Civic', 'Honda', '2018-07-11', '/templates/default/img/nophoto.jpg', true, 4000.01, '#007777'], ]; // Columns const columns = [ { type:'text', title:'Car', width:120 }, { type: 'dropdown', title:'Make', width:180, source:[ "Alfa Romeo", "Audi", "Bmw", "Chevrolet", // (...) ] }, { type: 'calendar', title:'Available', width:120, options:{ format:'DD/MM/YYYY' } }, { type: 'image', title:'Photo', width:120 }, { type: 'checkbox', title:'Stock', width:80 }, { type: 'text', title:'Price', mask:'$ #.##0,00', width:100, decimal:',', disabledMaskOnEdition: true }, { type: 'color', width:100, render:'square', }, ]; // Render data grid component return (
The Official Top 40 biggest albums of 2019
| General | |||
| Info | Stats | ||
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
| 4 | WHEN WE ALL FALL ASLEEP WHERE DO WE GO | BILLIE EILISH | 1 |
| 5 | STAYING AT TAMARA'S | GEORGE EZRA | 1 |
| 6 | BOHEMIAN RHAPSODY - OST | QUEEN | 3 |
| 7 | THANK U NEXT | ARIANA GRANDE | 1 |
| 8 | WHAT A TIME TO BE ALIVE | TOM WALKER | 1 |
| 9 | A STAR IS BORN | MOTION PICTURE CAST RECORDING | 1 |
| 10 | YOU'RE IN MY HEART | ROD STEWART | 1 |
| =SUM(B1,B2,B3) | |||
``` ```jsx import React, { useRef, useEffect } from "react"; import { 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(); useEffect(() => { if (spreadsheet.current) { jspreadsheet(spreadsheet.current); } }, []) // Render component return ( <>
| General | |||
| Info | Stats | ||
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
| 4 | WHEN WE ALL FALL ASLEEP WHERE DO WE GO | BILLIE EILISH | 1 |
| 5 | STAYING AT TAMARA'S | GEORGE EZRA | 1 |
| 6 | BOHEMIAN RHAPSODY - OST | QUEEN | 3 |
| 7 | THANK U NEXT | ARIANA GRANDE | 1 |
| 8 | WHAT A TIME TO BE ALIVE | TOM WALKER | 1 |
| 9 | A STAR IS BORN | MOTION PICTURE CAST RECORDING | 1 |
| 10 | YOU'RE IN MY HEART | ROD STEWART | 1 |
| =SUM(B1,B2,B3) | |||
| General | |||
| Info | Stats | ||
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
| 4 | WHEN WE ALL FALL ASLEEP WHERE DO WE GO | BILLIE EILISH | 1 |
| 5 | STAYING AT TAMARA'S | GEORGE EZRA | 1 |
| 6 | BOHEMIAN RHAPSODY - OST | QUEEN | 3 |
| 7 | THANK U NEXT | ARIANA GRANDE | 1 |
| 8 | WHAT A TIME TO BE ALIVE | TOM WALKER | 1 |
| 9 | A STAR IS BORN | MOTION PICTURE CAST RECORDING | 1 |
| 10 | YOU'RE IN MY HEART | ROD STEWART | 1 |
| =SUM(B1,B2,B3) | |||
``` ================================================ FILE: docs/jspreadsheet/docs/examples/richtext-html-editor.md ================================================ title: HTML Editor keywords: Jexcel, JavaScript, rich text, HTML editor, spreadsheet editor, excel-like features, dynamic columns description: Learn how to create a rich text column with an HTML editor in Jspreadsheet for enhanced data input and formatting. # Rich Text and HTML Editor Column Type Add an HTML Editor input to your spreadsheet to create rich text columns. ### Source code ```html ``` ```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', '
On his 11th birthday, Harry receives a letter inviting him to study magic at the Hogwarts School of Witchcraft and Wizardry. Harry discovers that not only is he a wizard, but he is a famous one. He meets two best friends, Ron Weasley and Hermione Granger, and makes his first enemy, Draco Malfoy.' ]
];
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Columns
const columns = [
{ type:'text', width:'200px', title:'Title' },
{ type:'html', width:'400px', title:'HTML' },
];
// Render data grid component
return (
`openFilter(columnNumber: Number, getAsSets?: boolean): void` | | `closeFilter()` | Closes the filter input.
`closeFilter(): void` | | `resetFilters()` | Resets all applied filters.
`resetFilters(): void` | ### Initial Settings | Property | Description | |----------------------------|------------------------------------------------------------------| | `filters: boolean\|string` | Start the spreadsheet with the filters enabled. `Default: false` | #### Enabling Spreadsheet Filters To activate a filter for a specific column, use the filter attribute in the column object during spreadsheet initialization: ```html ``` ```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(null); // Data const data = [ ['Jazz', 'Honda'], ['Civic', 'Honda'], ['Civic', 'Honda'], ['Picanto', 'Kia'], ['Optima', 'Kia'], ]; // Render component return ( <>
`render(td, value, x, y, worksheet, options) => void` | {.pro} > #### Differences in the Pro Version > > Jspreadsheet Pro allows cell-level format and other advanced format customizations.\ > \ > [Learn more](https://jspreadsheet.com/docs/format){.button} ## Documentation ### Mask and Format Settings In Jspreadsheet CE, the `mask` property enforces a specific input pattern during cell editing using spreadsheet-like tokens. The `format` property applies formatting rules to cell content after editing. Below are examples of tokens that can be used: | Valid examples | |----------------| | 0 | | 0.00 | | 0% | | 0.00% | | #,##0 | | #,##0.00 | | #,##0 | | d-mmm-yy | | d-mmm | | dd/mm/yyyy | | mmm-yy | | h:mm AM/PM | | h:mm:ss AM/PM | | h:mm | | h:mm:ss | | m/d/yy h:mm | | mm:ss | | [h]:mm:ss | #### Example ```html ``` ```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(); // Data const columns = [{ type: 'number', // Excel like token to format the currency input mask: 'U$ #.##0,00' }]; // Render data grid component return (
onbeforeformula(worksheet: Object, expression: String, x: Number, y: Number) => String | ### Methods All methods related to formulas. | Method | Description | | --------------------------|-----------------------------------------------------------------------------------------------------------------| | executeFormula?: Function | Execute a formula.
executeFormula(expression: string, x?: number, y?: number, caching?: boolean) => String | ## Examples ### Basic excel-like formulas usage A basic spreadsheet example using formulas, including currency, percentage and mask. ```html ``` ```jsx import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/jspreadsheet.css"; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Worksheet data const data = [ [ 'Crayons Crayola only (No Rose Art)', 2, 5.01, 0.01, '=B1*C1*(1-D1)' ], [ 'Colored Pencils Crayola only', 2, 4.41, 0.02, '=B2*C2*(1-D2)' ], [ 'Expo Dry-erase Markers Wide', 4, 3.00, 0.1, '=B3*C3*(1-D3)' ], [ 'Index Cards Unlined', 3, 6.00, 0.03, '=B4*C4*(1-D4)' ], [ 'Tissues', 10, 1.90, 0.01, '=B5*C5*(1-D5)' ], [ 'Ziploc Sandwich-size Bags', 5, 1.00, 0.01, '=B6*C6*(1-D6)' ], [ 'Thin Markers Crayola only', 2, 3.00, 0.02, '=B7*C7*(1-D7)' ], [ 'Highlighter', 4, 1.20, 0.01, '=B8*C8*(1-D8)' ], [ 'Total', '=SUM(B1:B8)', '=ROUND(SUM(C1:C8), 2)', '', '=SUM(E1:E8)' ], ] // Column definitions const columns = [ { type: 'text', title:'Product', width:'300' }, { type: 'text', title:'Qtd', width:'80', mask:'#.##0' }, { type: 'text', title:'Price', width:'100px', mask:'$ #.##0,00' }, { type: 'text', title:'Discount', mask:'0.00%' }, { type: 'number', title: 'Total', width: '100px', format: 'US #.##0,00', }, ] // Render component return (
`jspreadsheet(element: HTMLDivElement \| HTMLTableElement, options: SpreadsheetOptions): WorksheetInstance[];` | | Destroy a given spreadsheet.
`jspreadsheet.destroy(element: JspreadsheetInstanceElement, destroyEventHandlers?: boolean): void;` | | Destroy all spreadsheets in all namespaces.
`jspreadsheet.destroyAll(): void;` | | Translate Jspreadsheet components and extensions.
`jspreadsheet.setDictionary(translations: Record
`jspreadsheet.getWorksheetInstanceByName(worksheetName: string \| null \| undefined, namespace: string): WorksheetInstance \| Record
``` ================================================ FILE: docs/jspreadsheet/docs/headers.md ================================================ title: Spreadsheet Headers keywords: Jspreadsheet, Jexcel, data grids, JavaScript data grid, Excel-like headers, column title, headers, data grid headers, column headers, customize headers, modify headers, spreadsheet customization, column title customization, data grid organization description: Customize and modify column headers in your data grids. Explore programmatic header updates and advanced options for organizing and managing your data grid. # Spreadsheet Headers This section explains how to create and modify custom headers in Jspreadsheet. Users can change header titles via the context menu or by performing a long click on the header. ## Documentation ### Methods You can update the headers programmatically using the following methods. | Method | Description | | ------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | getHeaders | Get all header titles.
@param `asArray` - If true, returns the items in an array, if false, returns them separated by ";" within a single string.
`worksheetInstance.getHeaders(asArray?: boolean): string \| string[];` | | getHeader | Get the column title.
@param `column` - Column index.
`worksheetInstance.getHeader(column: number): string;` | | setHeader | Sets a custom header title for a specified column (starting at zero).
@param `column` - column number starting on zero.
@param `newValue` - New title. Empty string or undefined to reset the header title.
`worksheetInstance.setHeader(column: number, newValue?: string): void;` | ### Initial Settings To customize headers, use the `title` and `tooltip` attributes in the column settings. {.ignore} ```html ``` ### Available Events | Event | Description | | ---------------|------------------------------------------------------------------------------------------------------------------------------------| | onchangeheader | Triggered when the header title is changed.
`onchangeheader(instance: WorksheetInstance, colIndex: number, newValue: string, oldValue: string): void;` | ## Examples ### Updates to the Headers The following example initializes the spreadsheet with basic headers and demonstrates how to update the titles programmatically. ```html ``` ```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() { // Spreadsheet array of worksheets const spreadsheet = useRef(); const columns = [ { title: 'Header 1' }, { title: 'Header 2' }, { title: 'Header 3' } ]; useEffect(() => { if (spreadsheet.current) { spreadsheet.current[0].setHeader(0, 'New Header 1'); spreadsheet.current[0].setHeader(1, 'New Header 2'); spreadsheet.current[0].setHeader(2, 'New Header 3'); } }, []) // Render component return ( <>
``` ================================================ FILE: docs/jspreadsheet/docs/history.md ================================================ title: Jspreadsheet: Undo & Redo History keywords: Jspreadsheet, Jexcel, JavaScript data grid, undo, redo, Ctrl+Z, Ctrl+Y, spreadsheet change tracking, action history, data revisions, Jspreadsheet history description: Discover how to manage action history in Jspreadsheet with undo and redo features, allowing easy tracking of data grid changes and control over modifications. # History Tracker The Jspreadsheet History Tracker captures all changes within each spreadsheet, enabling users to undo (CTRL+Z) and redo (CTRL+Y) actions. In Jspreadsheet CE, the history tracker operates independently for each worksheet. {.pro} > #### What you can find on the Pro Version > > In the Pro version of Jspreadsheet, the unified history tracker supports cross-spreadsheet calculations and integration across all spreadsheets displayed on the same screen. > > \ > [Learn more](https://jspreadsheet.com/docs/history){.button} ## Documentation ### Methods The undo and redo methods are normally invoked by the CTRL+Z, CTRL+Y keyboard shortcut. The following methods can be called programmatically, as follows: | Method | Description | |----------|---------------------------------------------------------------------------------| | `undo()` | Undo the last worksheet change.
`worksheet.undo() : void` | | `redo()` | Redo the most recent worksheet change.
`worksheet.redo() : void` | ### Events Events related to the history changes tracker. | Event | Description | |----------|--------------------------------------------------------------------------------------------------------------------------| | `onredo` | `onredo(worksheet: Object, info: Object) : null`
The info array contains all necessary information about the action. | | `onundo` | `onundo(worksheet: Object, info: Object) : null`
The info array contains all necessary information about the action. | ### History Tracker State Use the history tracker with caution. You can turn it off temporarily by setting `worksheet.ignoreHistory` to true. ## Examples ### Controlling the changes programmatically As explained above, the history actions are available on the spreadsheet level. ```html
```
```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();
// Render component
return (
<>
@param `cellName` - Name of a cell. If it is a falsy value, this method merges the selected cells in the table and ignores all parameters of this method.
@param `colspan` - Number of columns this merge occupies.
@param `rowspan` - Number of rows this merge occupies.
`worksheetInstance.setMerge(cellName?: string, colspan?: number, rowspan?: number,): null \| undefined;` | | `getMerge` | Get information from one or all merged cells.
@param `cellName` - Cell name. If it is a falsy value, it returns the information of all merges. If the given cell is not the anchor of a merge, it returns null.
`worksheetInstance.getMerge(cellName?: string): Record
@param `cellName` - Merge anchor cell.
@param `data` - Data to be placed in cells released from the merge.
`worksheetInstance.removeMerge(cellName: string, data?: CellValue[]): void;`. | | `destroyMerge`{.nowrap} | Removes all merged cells.
`worksheetInstance.destroyMerge(): void;` | ### Events Spreadsheet merge cells related events. | Event | Description | |-----------|-----------------------------------------------------------------------------------------------------------------------------| | `onmerge` | Occurs when a merge is created.
`onmerge(instance: WorksheetInstance, merges: Record
@param `cell` - Cell name. If it is a falsy value, the metadata of all cells is returned.
`worksheetInstance.getMeta(cell?: string): any;` | | `setMeta` | Set a property on a cell's meta information.
@param `cellName` - Cell name.
@param `key` - Property name.
@param `value` - Property value.
`worksheetInstance.setMeta(cellName: string, key: string, value: string): void;`
Remove current and define new meta information for one or more cells.
@param `newMeta` - Object with the new meta information.
`worksheetInstance.setMeta(newMeta: Record
@param `pageNumber` - Page number (starting at 0).
`worksheetInstance.page(pageNumber: number): void;` | | `whichPage` | Get the page index of a row.
@param `cell` - Row index.
`worksheetInstance.whichPage(cell: number): number;` | | `quantiyOfPages` | `worksheet.quantiyOfPages() : number`
Get the total number of pages available. | ### Events This event is triggered when the user changes the page. | Event | Description | |-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `onchangepage`{.nowrap} | After the page has changed.
@param `instance` - Instance of the worksheet where the change occurred.
@param `newPageNumber` - Page the worksheet is on.
@param `oldPageNumber` - Page the worksheet was on.
@param `quantityPerPage` - Maximum number of lines on pages.
`onchangepage(instance: WorksheetInstance, newPageNumber: number, oldPageNumber: number, quantityPerPage: number): void;` | ### Initial Settings Initial configuration related to the pagination of your data grid. | Property | Description | |-------------------------------|--------------------------------------------------------------------| | `pagination: number` | The number of items per page | | `paginationOptions: number[]` | The options for the user to select the number of results per page. | ## Examples ### Data Grid Search and Pagination Enabling search and pagination features during the spreadsheet initialization. ```html
``` ```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(); // Columns const columns = [ { type:'text', width:80 }, { type:'text', width:200 }, { type:'text', width:100 }, { type:'text', width:200 }, { type:'text', width:100 }, ]; // Event const onchangepage = (el, pageNumber, oldPage) => { console.log('New page: ' + pageNumber); } // Render component return (
`beforeinit(worksheet: Object, config: Object): void \| object` | | `init` | When a new worksheet is added.
`init(worksheet: Object): void` | | `onevent` | Called for every spreadsheet event.
`onevent(event: String, a?: any, b?: any, c?: any, d?: any): void` | | `persistence` | Handles server-side data persistence.
`persistence(worksheet: Object, method: String, args: Array): void` | | `contextMenu` | When the context menu opens.
`contextMenu(worksheet: Object, x: Number, y: Number, e: Object, items: [], section: String): void` | | `toolbar` | When the toolbar is created or clicked.
`toolbar(worksheet: Object, items: Array): void` | ### Worksheet Options You can define custom options for each worksheet using the `pluginOptions` property. ### Basic Implementation Below is a basic implementation example that can be used as a reference for defining custom worksheet options. {.ignore} ```javascript const newPlugin = (function() { // Plugin object let plugin = {}; /** * It will be executed for every new worksheet */ plugin.init = function(worksheet) { } /** * Jspreadsheet events */ plugin.onevent = function() { // It would be executed in every single event and can be used to customize actions } /** * It would be call every single time persistence is required * @param {object} worksheet - worksheet * @param {string} method - action executed * @param {object} args - depending on the action. */ plugin.persistence = function(worksheet, method, args) { // Different options are used depending on the action performed. } /** * Run on the context menu * @param instance Jexcel Spreadsheet Instance * @param x coordinates from the clicked cell * @param y coordinates from the clicked cell * @param e click object * @param items current items in the contextMenu */ plugin.contextMenu = function(instance, x, y, e, items) { // Can be used to overwrite the contextMenu return items; } /** * Run on toolbar * @param instance Jexcel Spreadsheet Instance * @param items current items in the toolbar */ plugin.toolbar = function(instance, items) { // Can be used to overwrite the toolbar return items; } // Any startup configuration goes here // (...) // Return the object return plugin; }); ``` ## Examples The following code is a working example of a plugin in action. ### Spreadsheet properties update The properties plugin allow the user to change some of the spreadsheet settings, through a new option included in the context menu. {.small} Right-click in any cell and choose the last option in the context menu. ```html ``` ```jsx import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet-ce/dist/jspreadsheet.css"; // Installation npm install @jspreadsheet/properties import properties from "@jspreadsheet/properties"; export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Render data grid component return (
`setReadOnly(ident: HTMLElement\|string, state: boolean): void` | | `isReadOnly(number, number)` | Checks if a cell is read-only.
`isReadOnly(x: number, y: number): boolean` | ## Examples ### Readonly A basic spreadsheet example with a read-only column and an additional read-only cell. ```html ``` ```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(); // Data const data = [ ['Mazda', 2001, 2000, 1], ['Peugeot', 2010, 5000, 1], ['Honda Fit', 2009, 3000, 1], ['Honda CRV', 2010, 6000, 0], ]; const columns = [ { type: 'text', title:'Description', width:'200px', readOnly:true, }, { type: 'text', title:'Year', width:'200px' }, { type: 'text', title:'Price', width:'100px', mask:'#.##', }, { type: 'checkbox', title:'Automatic', width:'100px' }, ]; const updateTable = function(el, cell, x, y, source, value, id) { if (x == 2 && y == 2) { cell.classList.add('readonly'); } } // Render component return ( <>
- Click to insert a new blank row at the end of the spreadsheet
- Click to insert two new blank rows at the beginning of the spreadsheet
- Click to delete the last row
- Click to move the first row to the third position
- Hide the first row
- Show the first row
`worksheetInstance.getHeight(row?: undefined): string[];`
Retrieves the height of a row.
`worksheetInstance.getHeight(row: number): string;` | | `setHeight` | Sets the height of a row.
@param `row` - Row index.
@param `height` - New height. An integer greater than zero.
`worksheetInstance.setHeight(row: number, height: number): void;` | | `moveRow` | Moves a row to a new position.
@param `rowNumber` - Row index.
@param `newPositionNumber` - New row index.
`worksheetInstance.moveRow(rowNumber: number, newPositionNumber: number): false \| undefined;` | | `insertRow` | Inserts one or more new rows.
@param `mixed` - Number of rows to insert. It can also be an array of values, but in this case, only one row is inserted, whose data is based on the array items. Default: 1.
@param `rowNumber` - Index of the row used as reference for the insertion. Default: last row.
@param `insertBefore` - Insert new rows before or after the reference row. Default: false.
`worksheetInstance.insertRow(mixed?: number \| CellValue[],rowNumber?: number,insertBefore?: number): false \| undefined;` | | `deleteRow` | Deletes one or more rows.
@param `rowNumber` - Row index from which removal starts.
@param `numOfRows` - Number of rows to be removed.
`worksheetInstance.deleteRow(rowNumber?: number, numOfRows?: number): false \| undefined;` | ### Events The following events are related to rows in your spreadsheet. | Event | Description | |---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------| | `onbeforeinsertrow` | Triggered before a new row is inserted. Return `false` to cancel the action.
`onbeforeinsertrow(worksheet: Object, rows: Object[]) => Boolean \| Object[] \| void` | | `oninsertrow` | Triggered after a new row is inserted.
`oninsertrow(worksheet: Object, rows: Object[]) => void` | | `onbeforedeleterow` | Triggered before a row is deleted. Return `false` to cancel the action.
`onbeforedeleterow(worksheet: Object, rows: Number[]) => Number[] \| Boolean \| void` | | `ondeleterow` | Triggered after a row is deleted.
`ondeleterow(worksheet: Object, rows: Number[]) => void` | | `onmoverow` | Triggered after a row is moved to a new position.
`onmoverow(worksheet: Object, origin: Number, destination: Number) => void` | | `onresizerow` | Triggered after the height of one or more rows is changed.
`onresizerow(worksheet: Object, row: Mixed, height: Mixed, oldHeight: Mixed) => void` | ### Initial Settings The following row-related properties are available during spreadsheet initialization. | Property | Description | |---------------------------------|----------------------------------------------------------------------------------------------| | `allowInsertRow: boolean` | Enables the user to insert new rows. `Default: true` | | `allowManualInsertRow: boolean` | Automatically inserts a new row when the user presses Enter on the last row. `Default: true` | | `allowDeleteRow: boolean` | Allows the user to delete rows. `Default: true` | | `rowDrag: boolean` | Enables the user to change the position of a row by dragging and dropping. `Default: true` | | `rowResize: boolean` | Allows the user to resize rows. `Default: true` | | `defaultRowHeight: number` | Sets the default row height. | | `minSpareRows: number` | Specifies the number of mandatory blank rows at the end of the spreadsheet. `Default: none.` | ### Available properties You can initialize the spreadsheet with custom `id`, `text`, and `height` using the following properties: | Property | Description | |-------------------|----------------------------------------------------------------------------------------------| | `id: number` | Unique identifier for the row, which can be used to synchronize the content with a database. | | `height: number` | The row height in pixels. | | `title: string` | The title or name of the row. | ## Examples A basic spreadsheet with a few programmatic methods available. ```html
``` ```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(); // Data const data = [ ['US', 'Cheese', 1000 ], ['CA', 'Apples', 1200 ], ['CA', 'Carrots', 2000 ], ['BR', 'Oranges', 3800 ], ]; // Render component return ( <>
); } ``` ```vue
- Click to insert a new blank row at the end of the spreadsheet
- Click to insert two new blank rows at the beginning of the spreadsheet
- Click to delete the last row
- Click to move the first row to the third position
- Hide the first row
- Show the first row
- Click to insert a new blank row at the end of the spreadsheet
- Click to insert two new blank rows at the beginning of the spreadsheet
- Click to delete the last row
- Click to move the first row to the third position
- Hide the first row
- Show the first row
@param `query` - Text to be searched.
`worksheetInstance.search(query: string): void;` | | `resetSearch` | Resets search terms and displays all rows.
`worksheetInstance.resetSearch(): void;` | ### Initial Settings The following property is available to configure the search functionality during spreadsheet initialization: | Property | Description | |-------------------|-----------------------------------------| | `search: boolean` | Enables or disables the search feature. | ## Examples ### Data Grid with Search and Pagination The example below demonstrates a data grid configured with search functionality and pagination support. ```html ``` ```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(); // Columns const columns = [ { type:'text', width:80 }, { type:'text', width:100 }, { type:'text', width:100 }, { type:'text', width:200 }, { type:'text', width:100 }, ] // Render component return ( <>
`getSelection(preserveOrder: Boolean) : Array \| null` | | `getHighlighted` | Get the coordinates of the highlighted selections.
`getHighlighted() : Array \| null` | | `getRange` | Get the range description of the highlighted cells.
`getRange() : String \| null` | | `getSelectedColumns` | Get the selected columns.
@param `visibleOnly` - If true, the method returns only visible columns.
`worksheetInstance.getSelectedColumns(visibleOnly?: boolean): number[];` | | `getSelectedRows` | Get the selected rows.
@param `visibleOnly` - If true, the method returns only visible rows.
`worksheetInstance.getSelectedRows(visibleOnly?: boolean): number[];` | | `getSelected` | Get the worksheet selected cell names or objects.
@param {Boolean?} columnNameOnly: To get only the cell names as string (true). Get the cell coordinates as an object (false). `worksheetInstance.getSelected(columnNameOnly: Boolean) => []` | | `isSelected` | Verify if the coordinates given are included in the current selection.
`isSelected(x: Number, y: Number) : Boolean` | | `selectAll` | Select all cells available in the data grid.
`worksheetInstance.selectAll(): void;` | | `updateSelectionFromCoords`{.nowrap} | Select cells based on the given coordinates.
@param `x1` - Column index of the first cell of the selection. If omitted or null, rows "y1" through "y2" are selected.
@param `y1` - Row index of the first cell of the selection. If omitted or null, columns "x1" through "x2" are selected.
@param `x2` - Column index of the last cell of the selection. Default: Parameter "x1".
@param `y2` - Row index of the last cell of the selection. Default: Parameter "y1".
`worksheetInstance.updateSelectionFromCoords: (x1: number \| null, y1: number \| null, x2?: number \| null, y2?: number \| null): void;` | | `resetSelection` | Remove the selection.
@returns If there were highlighted cells, it returns 1, otherwise it returns 0.
`worksheetInstance.resetSelection(): 0 \| 1;` | ### Selection Events | Event | Description | |------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `onblur` | Occurs when the table is blurred.
`onblur(instance: WorksheetInstance): void;` | | `onfocus` | Occurs when the table is focused.
`onfocus(instance: WorksheetInstance): void;` | | `onbeforeselection`{.nowrap} | `onbeforeselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : void` | | `onselection` | `onselection(instance: WorksheetInstance, borderLeftIndex: number, borderTopIndex: number, borderRightIndex: number, borderBottomIndex: number, origin: Event \| undefined): void;` | ### Initial Settings | Property | Description | |-------------------------|------------------------------| | `selectionCopy: boolean` | Disable the clone selection. | ## Examples ### Programmatically Data Grid Selection Demonstrates how to select all cells within a worksheet in the grid programmatically. ```html
``` ```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 ( <>
@param {number} columnNumber - Sort by column number
@param {boolean} direction: false (asc), true (desc)
`orderBy(columnNumber: Number, direction: Boolean) : void` | ### Events | Event | Description | | -------------|-----------------------------------------------------------------------------------------------| | onsort | `onsort(worksheet: Object, column: Number, direction: Number, newValue: Array) : void` | ### Initial Settings You can define the sorting behaviour of your spreadsheet using the following properties: | Property | Description | |----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------| | sorting: function | Defines a custom sorting handler. Use this to implement your specific sorting logic.
`sorting(direction: Boolean) : function` | | columnSorting: boolean | Enables or disables column-based sorting for the spreadsheet.`Default: true` | ## Examples ### Basic Sorting The example below demonstrates sorting behaviour across various column types. {.small} Double-click on any `data grid` column header below to observe sorting functionality. ```html
``` ```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(); const select = useRef(); // Data const data = [ ['Mazda', 2001, 2000, '2006-01-01', '453.00', '2', '=E1*F1'], ['Peugeot', 2010, 5000, '2005-01-01', '23.00', '5', '=E2*F2'], ['Honda Fit', 2009, 3000, '2004-01-01', '214.00', '3', '=E3*F3'], ['Honda CRV', 2010, 6000, '2003-01-01', '56.11', '2', '=E4*F4'], ]; // Render component return ( <>
@param `cell` - Name or coordinate of a cell. If omitted, returns styles for all cells.
@param `key` - Style property. if specified, returns only that property. Otherwise, it returns all the cell's style properties.
`worksheetInstance.getStyle(cell?: string \| [number, number], key?: string): string \| Record
@param `cells` - Name of a cell.
@param `k` - property to be changed.
@param `v` - New property value. If equal to the property's current value and the "force" parameter is false, removes that property from the style.
@param `force` - If true, changes the value of the property even if the cell is read-only. Also, if true, even if the new value of the property is the same as the current one, the property is not removed.
`worksheetInstance.setStyle(cells: string, k: string, v: string, force?: boolean): void;`
Change cell styles.
@param `o` - Object where each key is the name of a cell and each value is the style changes for that cell. Each value can be a string with css styles separated by semicolons or an array where each item is a string with a css style.
@param `k` - It is not used.
@param `v` - It is not used.
@param `force` - If true, changes the value of the property even if the cell is read-only. Also, if true, even if the new value of the property is the same as the current one, the property is not removed.
`worksheetInstance.setStyle(cells: Record
@param `cells` - Object whose keys are the names of the cells that must have their styles reset.
@param `ignoreHistoryAndEvents` - If true, do not add this action to history.
`worksheetInstance.resetStyle(cells: Record
`onchangestyle(instance: WorksheetInstance, changes: Record
`worksheet.parent.showToolbar() : void` | | `hideToolbar` | Hides the toolbar.
`worksheet.parent.hideToolbar() : void` | ### Settings Customize toolbar items during initialization using the following property: | Property | Description | |-------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------| | `toolbar: boolean \| ToolbarItem[] \| ((defaultToolbar: ToolbarItem[]) => ToolbarItem[])` | Enables toolbar customization. Options include: `true` for the default toolbar, a function for dynamic setup, or an array for specific configurations. | ### Toolbar Object Customize toolbar items during initialization using the properties below. #### Toolbar General Properties | Property | Description | |--------------|-------------------------------------------------| | `container` | Displays a border around the toolbar container. | | `badge` | Adds a badge for each toolbar element. | | `title` | Shows a title below each icon. | | `responsive` | Enables a responsive toolbar. `Default: false` | | `items` | Array of items to display in the toolbar. | #### Toolbar Item Properties | Property | Description | |----------------------|-------------------------------------------------------------------------| | `type: string` | Specifies the element type: `icon` \| `divisor` \| `label` \| `select`. | | `content: string` | Defines the content of the toolbar element. | | `title: boolean` | Sets the tooltip for the toolbar element. | | `width: number` | Width of the toolbar element. | | `active: boolean` | Initial active state for the toolbar element. | | `class: string` | CSS class for each toolbar element. | | `value: number` | Initially selected option for `select` type. | | `render: function` | Render function for dropdown elements when `type: select`. | | `onclick: function` | Callback for when an item is clicked. | | `onchange: function` | Callback for when a new item is selected (`select` type only). | ## Examples ### Toolbar visibility The example below shows how to enable the default data grid toolbar and programmatically control its visibility after initialization. ```html
``` ```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 ( <>
``` ## Jspreadsheet Pro ### More examples If you are interested in using Jspreadsheet Pro, explore the following resources for advanced features and integrations. These examples demonstrate how to leverage Jspreadsheet Pro for creating advanced and feature-rich spreadsheets in Vue.js applications. * [Vue Spreadsheet Pro](https://jspreadsheet.com/docs/vue) * [Vue Spreadsheet with actions](https://codesandbox.io/s/vue3-spreadsheet-with-actions-chx7dw) * [Vue Spreadsheet Editor](https://codesandbox.io/s/vue-spreadsheet-zpmf2) {.pro} > **Jspreadsheet Pro for Vue - Professional Spreadsheet Components** > > While Jspreadsheet CE provides core spreadsheet functionality for Vue, **Jspreadsheet Pro** offers enhanced Vue integration and enterprise features: > > **Enhanced Vue Integration:** > - **TypeScript Support:** Full TypeScript definitions for Vue 3 with type-safe development > - **Composition API:** Native Composition API support with custom composables > - **Vue 3 Optimized:** Built specifically for Vue 3 with full reactivity system support > - **Pinia Integration:** Built-in Pinia store integration for state management > - **Nuxt Support:** Full SSR/SSG support for Nuxt 3 applications > - **Vue DevTools:** Enhanced debugging with Vue DevTools integration > > **Professional Components:** > - **Advanced Editors:** Conditional dropdowns, rich text, HTML editors with Vue reactivity > - **Formula System:** 500+ Excel functions with Vue reactive bindings > - **Conditional Formatting:** Visual rules, data bars, color scales, icon sets > - **Data Validation:** Real-time validation with custom Vue components > - **Import/Export:** Full Excel (.xlsx) import/export with formatting preservation > - **Charts & Graphs:** Built-in Vue chart components for data visualization > > **Vue Reactivity Features:** > - **Reactive Data Binding:** Two-way binding with Vue ref/reactive objects > - **Computed Properties:** Use computed values for cell formulas > - **Watchers:** Automatic updates when source data changes > - **V-Model Support:** Full v-model binding for spreadsheet data > - **Teleport Support:** Use Vue Teleport for dialogs and overlays > - **Suspense Ready:** Async component loading with Suspense > > **Performance & Scale:** > - **Virtual Scrolling:** Handle 100K+ rows with smooth scrolling > - **Lazy Loading:** Load data on-demand for optimal performance > - **Vue 3 Performance:** Optimized for Vue 3's improved rendering engine > - **Web Workers:** Background processing for heavy calculations > - **Memory Efficiency:** Optimized memory usage for large datasets > > **Developer Experience:** > - **Vue-Specific Documentation:** Examples with Options API and Composition API > - **Professional Support:** Priority support for Vue integration issues > - **Regular Updates:** Continuous Vue 3 compatibility improvements > - **Migration Tools:** Easy migration from CE to Pro with Vue examples > > **Vue-Specific Pro Features:** > - **Custom Vue Components:** Use Vue components as cell editors and renderers > - **Scoped Slots:** Advanced customization with scoped slots > - **Event Integration:** Seamless integration with Vue event system > - **Provide/Inject:** Share spreadsheet context across component tree > - **Testing Support:** Vitest/Vue Test Utils integration examples > > Perfect for Vue applications requiring enterprise-grade spreadsheet functionality with professional support. > > **[Explore Jspreadsheet Pro Vue →](https://jspreadsheet.com/docs/vue)** | **[Compare CE vs Pro →](https://jspreadsheet.com/docs/getting-started)** | **[View Pricing →](https://jspreadsheet.com/pricing)** ================================================ FILE: docs/jspreadsheet/docs/worksheets.md ================================================ title: Worksheets Settings, Methods, and Related Events keywords: Jspreadsheet, data grid, javascript, excel-like worksheets, spreadsheet, data tables, grid, worksheet events, worksheet support, Jspreadsheet worksheets, worksheet settings, worksheet methods, worksheet events, create worksheets, customize worksheets, track changes in worksheets, worksheet control, dynamic data grids, JavaScript data tables, worksheet customization, worksheet organization, interactive worksheets, data management description: Learn how to set up and manage worksheets in Jspreadsheet programmatically. Explore various worksheet properties, settings, and efficient handling and customization techniques. # Worksheets Jspreadsheet offers robust tools for managing spreadsheets with multiple worksheets. It enables precise control over user interactions and provides programmatic controls and event listeners to customize the behaviour and monitor changes within the spreadsheet. ## Documentation ### Methods Explore the available methods to programmatically interact with and manage worksheets in Jspreadsheet. | Property | Description | |-----------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `openWorksheet(number)` | Opens a worksheet by its index.
`openWorksheet(position?: Number) => void` | | `createWorksheet(object, number)` | Adds a new worksheet based on a configuration object, optionally at a specific position.
`createWorksheet(worksheetOptions: Object, position?: Number) => worksheetInstance` | | `deleteWorksheet(number)` | Removes an existing worksheet by its index.
`deleteWorksheet(position?: Number) => void` | ### Events Explore the available events to monitor and respond to worksheet interactions in Jspreadsheet. | Event | Description | |---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `onopenworksheet` | `onopenworksheet(worksheet: Object, worksheetNumber: Number) : void` | | `onbeforecreateworksheet` | Intercept worksheet creation to cancel or configure the new worksheet.
`onbeforecreateworksheet(worksheet: Object, options: Object, worksheetNumber: Number) : mixed` | | `oncreateworksheet` | `oncreateworksheet(worksheet: Object, worksheetOptions: Object, worksheetNumber: Number) : void` | | `ondeleteworksheet` | `ondeleteworksheet(worksheet: Object, oldWorksheetNumber: Number) : void` | ### Configuration You can customize spreadsheet and worksheet behaviour using the following settings. #### Worksheet Settings | Property | Description | |--------------------------|--------------------------------------| | `worksheetId: string` | Unique identifier for the worksheet. | | `worksheetName: string` | Title of the worksheet. | #### Spreadsheet Properties | Property | Description | |----------------------------------|----------------------------------------------------------------------------------------------------| | `tabs: boolean\|object` | Enables tabs for worksheet navigation and allows users to create new worksheets. Default: `false`. | | `allowDeleteWorksheet: boolean` | Enables the delete worksheet option in the context menu. Default: `true`. | | `allowRenameWorksheet: boolean` | Enables the rename worksheet option in the context menu. Default: `true`. | | `allowMoveWorksheet: boolean` | Enables drag-and-drop functionality for rearranging worksheets. Default: `true`. | {.green} > ##### Tabs > The `tabs` object uses the same properties as the `jSuites.tabs` plugin, allowing you to customize the position and behaviour of the worksheet tabs. For more details, visit the: [Tabs Plugin](https://jsuites.net/docs/javascript-tabs) #### Quick example {.ignore-execution} ```html ``` ```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(); // Tabs const tabs = { allowCreate: true, allowChangePosition: true, animation: true, position: "bottom", }; // Render component return (
@Param boolan onlyHighlighedCells - Get only highlighted cells | $('#my').jexcel('getData', false); | | **getRowData: get the data from the a row**
@Param integer rowNumber - Row number starting from zero. | $('#my').jexcel('getRowData', 1); | | **getColumnData: get the data from the a column**
@Param integer columnNumber - Column number starting from zero. | $('#my').jexcel('getColumnData', 2); | | **setData: Update the table data**
@Param json newData - New data, null will reload what is in memory.
@Param boolean ignoreSpare - Ignore configuration of min spare column and rows. | $('#my').jexcel('setData', [data], false); | | **insertColumn: add a new column**
@Param mixed [array or integer] - Integer as the number of columns to be added. Or array to define the data you would like to insert.
@Param json - Properties of the new columns, null to set default.
@Param integer columnNumber - Column reference, null to add the new column after the last column. | $('#my').jexcel('insertColumn', 1, null, 3); | | **deleteColumn: remove column by number**
@Param integer columnNumber - Which column should be excluded starting on zero
@Param integer numOfColumns - How many columns should be deleted | $('#my').jexcel('deleteColumn', 1); | | **insertRow: add a new row**
@Param mixed - Array with the new data or integer with the number of rows should be added
@Param rowNumber - Reference where to add the new row. | $('#my').jexcel('insertRow', 1); | | **deleteRow: remove row by number**
@Param integer rowNumber - Which row should be excluded starting on zero
@Param integer numberOfRows - How many rows should be excluded | $('#my').jexcel('deleteRow', 1); | | **getHeader: get the current header by column number**
@Param integer columnNumber - Column number starting on zero | $('#my').jexcel('getHeader', 2); | | **setHeader: change header by column**
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | $('#my').jexcel('setHeader', 1, 'Title'); | | **getWidth: get the current column width**
@Param integer columnNumber - column number starting on zero | $('#my').jexcel('getWidth', 2); | | **setWidth: change column width**
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | $('#my').jexcel('setWidth', 1, 100); | | **orderBy: will reorder a column asc or desc**
@Param integer columnNumber - column number starting on zero
@Param smallint sortType - Zero will toggle current option, one for desc, two for asc | $('#my').jexcel('orderBy', 2); | | **getValue: get current cell value**
@Param mixed cellIdent - str compatible with excel, or as object. | $('#my').jexcel('getValue', 'A1'); | | **setValue: change the cell value**
@Param mixed cellIdent - str compatible with excel, or as object.
@Param string Value - new value for the cell | $('#my').jexcel('setValue', 'A1'); | | **updateSelection: select cells**
@Param object startCell - cell object
@Param object endCell - cell object | $('#my').jexcel('updateSelection', [cell], [cell]); | | **download: get the current data as a CSV file.**
@Param none | $('#my').jexcel('download'); | | **destroy: remove the table and all references and events attached.**
@Param none | $('#my').jexcel('destroy'); | | **getCell: get the cell object based on a string**
@Param styring cellIdent - str compatible with excel, or as object. | $('#my').jexcel('getCell', 'B1'); | | **getSelectedCells: get all selected cells**
@Param none | $('#my').jexcel('getSelectedCells'); | | **undo: undo an action**
@Param none | $('#my').jexcel('undo'); | | **redo: redo an action**
@Param none | $('#my').jexcel('redo'); | | **moveRow: move an row to another position**
@Param from - from position y0
@Param to - to position y1 | $('#my').jexcel('moveRow', 1, 2); | | **getStyle: get table or cell style**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getStyle', 'A1'); | | **setStyle: set cell(s) CSS style**
@Param mixed - json with whole table style information or just one cell identification. Ex. A1.
@Param k [optional]- CSS key
@Param v [optional]- CSS value | $('#my').jexcel('setSyle', [ { A1:'background-color:red' }, { B1: 'color:red'} ]); | | **getComments: get cell comments**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getComments', 'A1'); | | **setComments: set cell comments**
@Param cell - cell identification
@Param text - comments | $('#my').jexcel('setComments', 'A1', 'My cell comments!'); | | **getMeta: get the table or cell meta information**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getMeta', 'A1'); | | **setMeta: set the table or cell meta information**
@Param mixed - json with whole table meta information. | $('#my').jexcel('setMeta', [ A1: { info1:'test' }, { B1: { info2:'test2', info3:'test3'} } ]); | ================================================ FILE: docs/jspreadsheet/v2/docs/quick-reference.md ================================================ title: Quick Reference keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features description: Quick Reference for Jexcel spreadsheet properties [Back to Documentation](/jspreadsheet/v2/docs "Back to the documentation section") # The javascript spreadsheet quick reference ## Methods | Method | Description | |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------| | **getData: Get the full or partial table data**
@Param boolan onlyHighlighedCells - Get only highlighted cells | $('#my').jexcel('getData', false); | | **setData: Update the table data**
@Param json newData - New json data, null will reload what is in memory.
@Param boolean ignoreSpare - ignore configuration of minimal spareColumn/spareRows | $('#my').jexcel('setData', [json], false); | | **insertColumn: add a new column**
@Param integer numberOfColumns - Number of columns should be added
@Param string headerTitle - Header title | $('#my').jexcel('insertColumn', 1, { header:'Title' }); | | **deleteColumn: remove column by number**
@Param integer columnNumber - Which column should be excluded starting on zero | $('#my').jexcel('deleteColumn', 1); | | **insertRow: add a new row**
@Param integer numberOfRows - Number of rows should be added | $('#my').jexcel('insertRow', 1); | | **deleteRow: remove row by number**
@Param integer rowNumber - Which row should be excluded starting on zero | $('#my').jexcel('deleteRow', 1); | | **getHeader: get the current header by column number**
@Param integer columnNumber - Column number starting on zero | $('#my').jexcel('getHeader', 2); | | **setHeader: change header by column**
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | $('#my').jexcel('setHeader', 1, 'Title'); | | **getWidth: get the current column width**
@Param integer columnNumber - column number starting on zero | $('#my').jexcel('getWidth', 2); | | **setWidth: change column width**
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | $('#my').jexcel('setWidth', 1, 100); | | **orderBy: will reorder a column asc or desc**
@Param integer columnNumber - column number starting on zero
@Param smallint sortType - Zero will toggle current option, one for desc, two for asc | $('#my').jexcel('orderBy', 2); | | **getValue: get current cell value**
@Param mixed cellIdent - str compatible with excel, or as object. | $('#my').jexcel('getValue', 'A1'); | | **setValue: change the cell value**
@Param mixed cellIdent - str compatible with excel, or as object.
@Param string Value - new value for the cell | $('#my').jexcel('setValue', 'A1'); | | **updateSelection: select cells**
@Param object startCell - cell object
@Param object endCell - cell object
@Param boolean ignoreEvents - ignore onselection event | $('#my').jexcel('updateSelection', [cell], [cell], true); | | **download: get the current data as a CSV file.**
@Param none | $('#my').jexcel('download'); | | **getConfig: get the current value of one configuration by key**
@Param string configuration key | $('#my').jexcel('getConfig', 'allowInsertColumn'); | | **setConfig: set the value of one configuration by key**
@Param string configuration key
@Param mixed configuration value | $('#my').jexcel('setConfig', 'allowInsertColumn', true); | | **download: get the current data as a CSV file.**
@Param none | $('#my').jexcel('download'); | | **getStyle: get table or cell style**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getStyle', 'A1'); | | **setStyle: set cell(s) CSS style**
@Param mixed - json with whole table style information or just one cell identification. Ex. A1.
@Param k [optional]- CSS key
@Param v [optional]- CSS value | $('#my').jexcel('setSyle', [ { A1:'background-color:red' }, { B1: 'color:red'} ]); | | **getComments: get cell comments**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getComments', 'A1'); | | **setComments: set cell comments**
@Param cell - cell identification
@Param text - comments | $('#my').jexcel('setComments', 'A1', 'My cell comments!'); | | **getMeta: get the table or cell meta information**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getMeta', 'A1'); | | **setMeta: set the table or cell meta information**
@Param mixed - json with whole table meta information. | $('#my').jexcel('setMeta', [ A1: { info1:'test' }, { B1: { info2:'test2', info3:'test3'} } ]); | [Working example](/jspreadsheet/v2/docs/programmatically-changes) ## Events | Event| description | | ---|--- | | **onload** | This method is called when the method setData | | **onbeforechange** | Before a column value is changed. | | **onchange** | After a column value is changed. | | **onafterchange** | After all change events is performed. | | **oninsertrow** | After a new row is inserted. | | **ondeleterow** | After a row is excluded. | | **oninsertcolumn** | After a new column is inserted. | | **ondeletecolumn** | After a column is excluded. | | **onselection** | On the selection is changed. | | **onsort** | After a colum is sorted. | | **onresize** | After a colum is resized. | | **onmoverow** | After a row is moved to a new position. | | **onfocus** | On table focus | | **onblur** | On table blur | [Example on handling events on your javascript spreadsheet](/jspreadsheet/v2/examples/tracking-changes-on-the-spreadsheet) ## Initialization parameters | Parameter| description | | ---|--- | | **columns** | Column type, dropdown options, text wrapping,marking, etc. | | **colHeaders** | Column header titles | | **colWidths** | Column widths: width in px. | | **colAlignments** | Column alignments: left, right, center. | | **colHeaderClasses** | Column custom CSS classes | | **defaultColWidth** | Default width for a new column | | **minSpareRows** | Minimum number of spare rows | | **minSpareCols** | Minimum number of spare cols | | **minDimensions** | Minimum table dimensions: [cols,rows] | | **contextMenu** | Context menu content: function() { return customMenu } | | **columnSorting** | Allow column sorting: bool | | **columnResize** | Allow column resizing: bool | | **rowDrag** | Allow row dragging: bool | | **editable** | Allow table edition: bool | | **allowInsertRow** | Allow insert a new row: bool | | **allowManualInsertRow** | Allow user to insert a new row: bool | | **allowInsertColumn** | Allow insert a new column: bool | | **allowManualInsertColumn** | Allow user to create a new column: bool | | **allowDeleteRow** | Allow delete a row: bool | | **allowDeleteColumn** | Allow delete a column: bool | | **wordWrap** | Global text wrapping: bool | | **csvFileName** | CSV default file name: string | | **selectionCopy** | Allow selection copy: bool | | **tableOverflow** | Allow table overflow: bool | | **tableHeight** | Force the max height of the table | | **tableWidth** | Force the max width of the table | | **allowComments** | Allow comments over the cells | | **toolbar** | Add custom toolbars | ================================================ FILE: docs/jspreadsheet/v2/docs.md ================================================ title: Jspreadsheet | Documentation keywords: Jspreadsheet, grid, data, table, datatable, json, excel, excel-like, jquery, javascript, spreadsheet description: Introduction, basic methods, event handles and all information you need about this jquery plugin. ## Column types Jspreadsheet brings some native columns in addition to the default input text. It means you can get alternative ways to entry data in your spreadsheet. From advanced numeric inputs, dropdowns to calendar picks and a very easy way to have your custom integrations, makes the jExcel plugin a very flexible tool to enhance the user experience when using your applications. In the example below, you will have text, numeric inputs and a calendar picker. But, other native options will be available such as: _text, numeric, calendar, checkbox, dropdown, autocomplete._ ```javascript $('#my').jexcel({ data:data, colHeaders: ['Model', 'Date', 'Price', 'Date'], colWidths: [ 300, 80, 100, 100 ], columns: [ { type: 'text' }, { type: 'numeric' }, { type: 'numeric' }, { type: 'calendar', options: { format:'DD/MM/YYYY' } }, ] }); ``` ### Custom columns To make a flexible tools, it is possible to extend the plugin to create your custom entries. The following example will show you how to integrate a third party plugin to create your custom columns. [http://bossanova.uk/jspreadsheet/v2/examles/integrating-a-third-party-plugin-into-your-spreadsheet](/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet) ================================================ FILE: docs/jspreadsheet/v2/examples/a-custom-table-design.md ================================================ title: Jspreadsheet | Examples | Bootstrap and custom table design keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid description: Create a custom table design. For example a bootstrap-like spreadsheet table. canonical: https://bossanova.uk/jspreadsheet/v2/examples/a-custom-table-design [Back to Examples](/jspreadsheet/v2/examples) # Create custom CSS for your javascript spreadsheet The following example shows a CSS addon to change the core layout of your jquery tables. ## Green borders and corners jquery spreadsheet [Bootstrap-like jquery spreadsheet example](/jspreadsheet/v2/examples/a-custom-table-design) ## Bootstrap-like jquery spreadsheet. [Green borders and corners jquery spreadsheet example](/jspreadsheet/v2/examples/a-custom-table-design?layout=green) Your jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/autocomplete.md ================================================ title: Autocomplete Column keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column description: Customize your column type to autocomplete [Back to Examples](/jspreadsheet/v2/examples) # Autocomplete column It is natively presented as single dropdown with text filter enabled and it is based on a pre-defined options defined in the instance declaration or in a dynamic remote JSON source. [Json source demo](/jspreadsheet/countries) ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/comments.md ================================================ title: Jspreadsheet | Examples | Add comments in your jquery table keywords: Jexcel, jquery, javascript, cell comments, jquery table description: Manage a table cell comments [Back to Examples](/jspreadsheet/v2/examples) # Manage cell comments in your jquery table The most recent version the spreadsheet plugin brings the possibility to manage custom comments for each individual cells. By allowComments in the initialization, the user will be able to add comments in the rigth click contextMenu. It is also possible to manage your cell comments programmatically by the use of commands such as setComments or getComments, for example: | Method | Description | |-------------------------------------------------------------------------|--------------------| | $('#my1').jexcel('setComments', 'A1', 'This is the comments from A1'); | Set A1 comments | | $('#my1').jexcel('getComments', 'A1'); | Get A1 comments | | $('#my1').jexcel('setComments', 'A1', ''); | Reset A1 comments | ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/create-from-a-existing-html-table.md ================================================ title: Create From HTML Table keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, table description: Create Spreadsheet based on HTML Table ```html
| Creado | Creado por | N | Nombre | Nombre | Tipo | Calle | Poblacin | Nombre SAP | Cdigo Producto | Respuesta |
|---|---|---|---|---|---|---|---|---|---|---|
| 2019-04-02 | ocastellanos | 30616 | GRUPO UVESCO, S.A. "NETTO" | GRANDE | Supermercado grande | CTRA. S-20. BARRIO MONTE, S/N | SANTANDER | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-02 | ocastellanos | 30616 | GRUPO UVESCO, S.A. "NETTO" | GRANDE | Supermercado grande | CTRA. S-20. BARRIO MONTE, S/N | SANTANDER | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-02 | ocastellanos | 30616 | GRUPO UVESCO, S.A. "NETTO" | GRANDE | Supermercado grande | CTRA. S-20. BARRIO MONTE, S/N | SANTANDER | NUGGETS | 206776 | ROTURA |
| 2019-04-02 | ocastellanos | 30616 | GRUPO UVESCO, S.A. "NETTO" | GRANDE | Supermercado grande | CTRA. S-20. BARRIO MONTE, S/N | SANTANDER | ESCALOPA | 206777 | PRESENTE |
| 2019-04-02 | ocastellanos | 30716 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | JUAN XXIII, 12 | TORRELAVEGA | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-02 | ocastellanos | 30716 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | JUAN XXIII, 12 | TORRELAVEGA | ESCALOPA | 206777 | NO EST EN SURTIDO |
| 2019-04-02 | ocastellanos | 30716 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | JUAN XXIII, 12 | TORRELAVEGA | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-02 | ocastellanos | 30716 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | JUAN XXIII, 12 | TORRELAVEGA | NUGGETS | 206776 | NO EST EN SURTIDO |
| 2019-04-03 | ocastellanos | 46825 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | Barrio la Cruz S/N | Liencres | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-03 | ocastellanos | 46825 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | Barrio la Cruz S/N | Liencres | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-03 | ocastellanos | 46825 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | Barrio la Cruz S/N | Liencres | ESCALOPA | 206777 | NO EST EN SURTIDO |
| 2019-04-03 | ocastellanos | 46825 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado medianos | Barrio la Cruz S/N | Liencres | NUGGETS | 206776 | PRESENTE |
| 2019-04-05 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | NUGGETS | 206776 | PRESENTE |
| 2019-04-05 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-05 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-05 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | ESCALOPA | 206777 | NO EST EN SURTIDO |
| 2019-04-05 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-05 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-05 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | NUGGETS | 206776 | PRESENTE |
| 2019-04-05 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | ESCALOPA | 206777 | PRESENTE |
| 2019-04-15 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | ESCALOPA | 206777 | PRESENTE |
| 2019-04-15 | ocastellanos | 30296 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | 1 | Supermercado grande | LEONARDO RUCABADO, 26 | CASTRO URDIALES | NUGGETS | 206776 | PRESENTE |
| 2019-04-12 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-12 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-12 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | NUGGETS | 206776 | ROTURA |
| 2019-04-12 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | ESCALOPA | 206777 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | NUGGETS | 206776 | ROTURA |
| 2019-04-15 | ocastellanos | 30596 | GRUPO UVESCO, S.A. "BM SUPERMERCADOS" | PEQUEO | Supermercado grande | RUBEN DARIO, 2 | SANTANDER | ESCALOPA | 206777 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | ESCALOPA | 206777 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | NUGGETS | 206776 | PRESENTE |
| 2019-04-15 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | HAMBURGUESA BARBACOA | 206775 | NO EST EN SURTIDO |
| 2019-04-15 | ocastellanos | 30676 | GRUPO UVESCO, S.A. "NORCASH" | PEQUEO | Supermercado pequeo | P ALISAS, S/N | SOLARES | HAMBURGUESA NATURAL | 206774 | NO EST EN SURTIDO |
``` ## Online demo on jsFiddle [How to extract data example from your jquery table on jsFiddle](https://jsfiddle.net/spreadsheet/tzy1h6rg/) ================================================ FILE: docs/jspreadsheet/v2/examples/headers.md ================================================ title: Jspreadsheet | Examples | Nested Headers keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, nested headers description: Creating a Jspreadsheet table with nested headers. [Back to Examples](/jspreadsheet/v2/examples) # Nested Headers The most recent version of the jquery plugin Jspreadsheet implements nested headers natively. A few examples on how to add nested headers your jquery table: ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/images.md ================================================ title: Jspreadsheet | Examples | Images on your images keywords: Jexcel, jquery, javascript, spreadsheet, table, jquery plugin, images description: Add images on your spreadsheet cells [Back to Examples](/jspreadsheet/v2/examples) # Embed images on your cells The following example shows how to render images inside your spreadsheet cells ## Source code ```html ``` [Edit this example on jsFiddle](https://jsfiddle.net/spreadsheet/9296zmpf/) ================================================ FILE: docs/jspreadsheet/v2/examples/including-formulas-on-your-spreadsheet.md ================================================ title: Jspreadsheet | Examples | Formulas on Spreadsheet keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column description: Using Functions inside your spreadsheet [Back to Examples](/jspreadsheet/v2/examples) # Including formulas on your javascript spreadsheet plugin The example below shows how to use Excel like formulas on your jquery spreadsheet. ## Source code ```html ``` # Third party formula implementations You can use a third party libraries to execute various Excel like formulas. ## Source code ```html ``` # Custom javascript formulas The example below shows how to create your own method in javascript to apply as a Excel like formula ## Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet.md ================================================ title: Jspreadsheet | Examples | Custom column and integrating plugins on your table keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by description: How to create custom column types based on a third party jquery plugin [Back to Examples](/jspreadsheet/v2/examples) # Create a custom column based on a third party jquery plugin This particular example shows how to create a custom color picker column type using the [Spectrum Jquery Plugin](https://bgrins.github.io/spectrum/). This example illustrates how to create your own custom columns based on any third party jquery plugin. [See this example on jsFiddle](https://jsfiddle.net/spreadsheet/rp0876b1/) ## Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/jquery-table-with-toolbars.md ================================================ title: Jspreadsheet | Examples | Your jquery table with toolbars keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, jquery table, toolbars description: Full examples how to load a autocomplete dropdown. [Back to Examples](/jspreadsheet/v2/examples) # Add a custom toolbar in your jquery tables The following example will show how to integrate a custom native toolbar in your spreadsheet plugin. ## Instructions The toolbar can be customized with a few parameters. | | | | ---|--- | | _**type**_ | could be **i** for icon, **select** for a dropdown, **spectrum** or a colorpicker. | | _**content**_ | defines the icon (from material icons) when you use type:i; [click here for all possible keys](https://material.io/tools/icons/) | | _**k**_ | means the style should be apply to the cell; | | _**v**_ | means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; | | _**method**_ | can be used together with type:i to implement any custom method. The method will receive the spreadsheet instance and all marked cells by default. | ## Source code ```html ``` **NOTE:** It is important to have google material fonts loaded. ================================================ FILE: docs/jspreadsheet/v2/examples/meta-information.md ================================================ title: Jspreadsheet | Examples | Add meta information in your cells keywords: Jexcel, jquery, javascript, jquery table, meta information description: Manage the table meta information [Back to Examples](/jspreadsheet/v2/examples) # Add meta information in your spreadsheet spreadsheet plugin You can keep meta information bind to cells but not visible to users. This can be useful for integrating Jspreadsheet with third party software. But, after the initialization is still possible to manage the cell meta information programmatically using the method getMeta and setMeta, as follow. | | | | ---|--- | | $('#my1').jexcel('setMeta', [{ A1: { newInfo:'newInfo' } }, { B1: { info1:'test1', info2:'test2'} }, { C2: { metaTest:'test3' } }]); | Set meta data for the table in a batch | | $('#my1').jexcel('setMeta', 'A2', 'myKeyMeta', 'myValueMeta'); | Set a meta information for A2 | | $('#my1').jexcel('getMeta', 'A1'); | Get the meta information for A1 | | $('#my1').jexcel('getMeta'); | Get all meta information | ## Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/mobile.md ================================================ title: Jspreadsheet | Examples | Mobile Layout keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, mobile description: Responsive Layout {.ignore} ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/multiple-spreadsheets-in-the-same-page.md ================================================ title: Jspreadsheet | Examples | Create multiple instances in the same page keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by description: How to create multiple table instances in the same page [Back to Examples](/jspreadsheet/v2/examples) # Multiple spreadsheets in the same page How to embed multiple spreadsheets in the same page. ## Source code {.ignore} ```html
``` ================================================ FILE: docs/jspreadsheet/v2/examples/readonly-options.md ================================================ title: Jspreadsheet | Examples | Handling readonly column and cells on your spreadsheet keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, events description: Understanding how to set a readonly column or multiple custom cells [Back to Examples](/jspreadsheet/v2/examples) # Readonly columns and cells. ## Source code ```html ``` ## Online demo on jsFiddle ================================================ FILE: docs/jspreadsheet/v2/examples/responsive-columns.md ================================================ title: Jspreadsheet | Examples | Responsive Layout keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column description: Creating a more responsive layout on jexcel [Back to Examples](/jspreadsheet/v2/examples) # Responsive columns The Jspreadsheet jquery plugin brings a more responsive column types.  [Open this table only in a new window](/jspreadsheet/v2/examples/mobile) ================================================ FILE: docs/jspreadsheet/v2/examples/sorting-data.md ================================================ title: Jspreadsheet | Examples | Sorting your grid keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by description: Sorting your Jspreadsheet spreadsheet [Back to Examples](/jspreadsheet/v2/examples) # Sorting your table You can reorder your jquery table by double clicking in the header or by selecting the desired option in the context menu. The example shows how to change the order of your jquery table programmatically. ## Source code ```html
``` ### Programmatically sorting {.ignore} ```html ``` ### Disable the table sorting The ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization. {.ignore} ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/table-styling.md ================================================ title: Jspreadsheet | Examples | Changing the table style keywords: Jexcel, jquery, javascript, table design, spreadsheet, table, grid, colours description: Table styling [Back to Examples](/v2/examples#more) # How to change the spreadsheet style. You can define the CSS for specific columns during the initialization. The following example uses the directive style:[] to bring populate the style attribute for each column. But, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle. | | | | ---|--- | | $('#my1').jexcel('setStyle', 'A1', 'font-weight', 'bold'); | Change A1 fontWeight | | $('#my1').jexcel('setStyle', 'A2', 'background-color', 'yellow'); | Change A2 backgroundColor | | $('#my1').jexcel('setStyle', [ { A1: 'font-weight: bold; color:red;' }, { B2: 'background-color: yellow;' }, { C1: 'text-decoration: underline;' }, { D2: 'text-align:left;' } ]); | Change the table in one batch | | $('#my1').jexcel('getStyle', 'A1');| Get A1 style attributes | | $('#my1').jexcel('getStyle');| Get the whole table attributes | ### Source code ```html ``` ## How to set global CSS rules for your jquery tables Give your clients a nice look table with colours and styling. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/table-with-fixed-headers.md ================================================ title: Jspreadsheet | Examples | Data table with fixed headers and scrolling keywords: Jexcel, jquery, javascript, fixed headers, scrolling, data tables description: Overflow table and scrolling [Back to Examples](/jspreadsheet/v2/examples) # Spreadsheet with fixed headers and scrolling Create an instance of your jquery plugin to allow a table overflow and scrolling. ## Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/text-wrapping.md ================================================ title: Jspreadsheet | Examples | Text wrap keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, text wrapping description: How to change the text wrap behavior in a Jspreadsheet column [Back to Examples](/jspreadsheet/v2/examples) # Text wrapping The javascript spreadsheet default configuration does not wrap the text. But, you can change this behavior by using the wordWrap option in the jquery plugin initialization. In the most recent version of Jspreadsheet, alt+enter will allow the user to add a new line when editing the text when the wrap is enabled ## Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/tracking-changes-on-the-spreadsheet.md ================================================ title: Jspreadsheet | Examples | Events keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, events description: Handling events on your spreadsheet [Back to Examples](/jspreadsheet/v2/examples) # Handling events Tracking changes on your spreadsheet. [See this example on jsFiddle](https://jsfiddle.net/spreadsheet/0dyms2b9/) ## Advanced Example Update the chart on every change in your spreadsheet, using the onchange handler ## Source code ```html ``` ## Online demo on jsFiddle ================================================ FILE: docs/jspreadsheet/v2/examples/using-a-calendar-column-type.md ================================================ title: Jspreadsheet | Examples | Calendar column type with date and datetime picker keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, date, datetime picker description: How to handle a calendar with date and datetime picker. [Back to Examples](/jspreadsheet/v2/examples) # Calendar column type The example below shows how to use and customize special calendar column type. See a live example of calendar usage on [jsfiddle](https://jsfiddle.net/spreadsheet/ajv413cb/). ## Source code ```html ``` ## Date column customization Customize the format and the behavior of your column through the initialization options, as follow: ### Calendar initialization options {.ignore} ```javascript { options: { format:'DD/MM/YYYY', // Date format readonly:0, // Input as readonly (true or false) today:0, // Input with at today as default (true or false) time:0, // Show time picker clear:1, // Show clear button mask:1, // Mask the input months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // Translations can be done here weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], // Translations can be done here weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'] // Translations can be done here }; } ``` Considering the example above, you can create a calendar including a time picker by simple send the option **time:1** as the following example. {.ignore} ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/working-with-dropdowns.md ================================================ title: Jspreadsheet | Examples | Advanced dropdown column type keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by description: Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns. [Back to Examples](/jspreadsheet/v2/examples) # Working with dropdowns Jspreadsheet brings some new very flexible dropdown options that enables you to delivery great user experience though applications. The new dropdown column options include the autocomplete, multiple options, data picker, different template types and much more advantages, such as: * Create a simple dropdown from array * Value or key-value select is available * Populate a dropdown from a external JSON request * Dynamic autocomplete search based on another column value * Conditional dropdowns: options from a dropdown based on a method return * Multiple and autocomplete * Responsive data picker ## Multiple and autocomplete options The highlight features introduced in the most version of the jquery table is definitely the autocomplete and multiple options. The following example shows the column Product Origin with the autocomplete and multiple directives initiated as true. ### Source code ```html ``` ## Conditional dropdown Jspreadsheet dropdown column can show different options based on the value of other columns. To use that function you should use a method defined by the filter parameter in the initialization. The following example shows the product column options based on the value selected on the column Category. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples/working-with-the-data.md ================================================ title: Jspreadsheet | Examples | Working with the data keywords: Jexcel, jquery, javascript, insert, remove and move columns and rows, spreadsheet, CSV, table, grid description: Insert, remove and move columns and rows [Back to Examples](/jspreadsheet/v2/examples) # Programmatically insert, remove and move columns and rows The following example shows how to manage data programmatically in your javascript spreadsheet. ## Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v2/examples.md ================================================ title: Examples keywords: Jexcel, javascript, examples description: Examples how to create web based spreadsheets using Jexcel. # Examples The Spreadsheet minimalist jQuery Plugin examples shows the usage with various column types such as text, dropdown, autocomplete, checkbox and date. ```html ``` [See this example on jsfiddle](https://jsfiddle.net/spreadsheet/kgmcav01/) ## Source code ```html ``` ## More examples * [Advanced dropdowns](/jspreadsheet/v2/examples/working-with-dropdowns "Advanced dropdown column type") Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns. * [Programmaticaly changes](/jspreadsheet/v2/examples/working-with-the-data "Jspreadsheet | Examples | Working with the data") Insert, remove and move columns and rows * [Fixed headers](/jspreadsheet/v2/examples/table-with-fixed-headers "Jspreadsheet | Examples | Data table with fixed headers and scrolling") Overflow table and scrolling * [Custom table design](/jspreadsheet/v2/examples/a-custom-table-design "Jspreadsheet | Examples | Bootstrap and custom table design") Create a custom table design. For example a bootstrap-like spreadsheet table. * [Table styling](/jspreadsheet/v2/examples/table-styling "Jspreadsheet | Examples | Changing the table style") Table styling * [Manage cell comments](/jspreadsheet/v2/examples/comments "Jspreadsheet | Examples | Add comments in your jquery table") Manage a table cell comments * [Custom meta information](/jspreadsheet/v2/examples/meta-information "Jspreadsheet | Examples | Add meta information in your cells") Manage the table meta information * [Custom toolbars](/jspreadsheet/v2/examples/jquery-table-with-toolbars "Jspreadsheet | Examples | Your jquery table with toolbars") Full examples how to load a autocomplete dropdown. * [Loading remote data](/jspreadsheet/v2/examples/creating-a-table-from-an-external-csv-file "Jspreadsheet | Examples | Creating a web spreadsheet based on an external CSV") How to load the data from an external CSV file into a Jspreadsheet grid or table. * [Masking and formating](/jspreadsheet/v2/examples/currency-and-masking-numbers "Jspreadsheet | Examples | Using currency column type and how to masking numbers") Handling currency types and masking numbers. * [Calendar picker](/jspreadsheet/v2/examples/using-a-calendar-column-type "Jspreadsheet | Examples | Calendar column type with date and datetime picker") How to handle a calendar with date and datetime picker. * [Sorting](/jspreadsheet/v2/examples/sorting-data "Jspreadsheet | Examples | Sorting your grid") Sorting your Jspreadsheet spreadsheet * [Create custom cells](/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet "Jspreadsheet | Examples | Custom column and integrating plugins on your table") How to create custom column types based on a third party jquery plugin * [Handling events](/jspreadsheet/v2/examples/tracking-changes-on-the-spreadsheet "Jspreadsheet | Examples | Events") Handling events on your spreadsheet * [Readonly options](/jspreadsheet/v2/examples/readonly-options "Jspreadsheet | Examples | Handling readonly column and cells on your spreadsheet") Understanding how to set a readonly column or multiple custom cells * [Multiple instances](/jspreadsheet/v2/examples/multiple-spreadsheets-in-the-same-page "Jspreadsheet | Examples | Create multiple instances in the same page") How to create multiple table instances in the same page * [Text wrap](/jspreadsheet/v2/examples/text-wrapping "Jspreadsheet | Examples | Text wrap") How to change the text wrap behavior in a Jspreadsheet column * [Nested headers](/jspreadsheet/v2/examples/headers "Jspreadsheet | Examples | Nested Headers") Creating a Jspreadsheet table with nested headers. * [Add images on your cells](/jspreadsheet/v2/examples/images "Jspreadsheet | Examples | Images on your images") Add images on your spreasheet cells ================================================ FILE: docs/jspreadsheet/v2/getting-started.md ================================================ title: Getting Started with jExcel keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features description: Create data grids with spreadsheet controls with jExcel. [Back to Documentation](/jspreadsheet/v2/docs) # Getting started with the jquery plugin ## Initialization Jspreadsheet can receive data from a JS array, CSV or a JSON format, following the examples below: There are three ways to load data into your spreadsheet. Using the parameter _data:_ passing a reference of a javascript array. The second method is to load the data straight from a remove CSV file using the _csv:_ parameter. The third is to pass the URL from a json content using the _url:_ parameter as show in the following examples. ### Loading from a javascript array ```html ``` ### Loading from a JSON file {.ignore} ```html ``` ### Loading from a CSV file {.ignore} ```html ``` [See a working example](/jspreadsheet/v2/examples/creating-a-table-from-an-external-csv-file) ## Destroying a table You can destroy the table, all data and events related to an existing table by using the method _destroy_ as shown below. {.ignore} ```html ``` ## Header titles If you do not define the column title, the default will be the use of a letter, just as any other spreadsheet software. But, if you would like to have custom column names you can use the directive colHeaders: {.ignore} ```javascript $('#my').jexcel({ data:data, colHeaders: ['Model', 'Price', 'Price', 'Date'], colWidths: [ 300, 80, 100, 100 ], }); ``` **Note** : If you are loading your data from a CSV file, you can define the csvHeader:true, so the first row will be used as your column names. ## Column width The parameter _colWidths_ can be used to define your column widths. ## Column types The javascript spreadsheet has available some extra native column types in addition to the default input text. It means you can get alternative ways to enter data in your spreadsheet. Advanced numeric inputs, dropdowns to calendar picks and a very easy way to have your custom integrations, makes the spreadsheet plugin a very flexible tool to enhance the user experience when using your applications. In the example below, you will have text, numeric inputs and a calendar picker. But, other native options will be available such as: _**text, numeric, hidden, dropdown, autocomplete, checkbox, calendar.**_ {.ignore} ```javascript $('#my').jexcel({ data:data, colHeaders: ['Model', 'Date', 'Price', 'Date'], colWidths: [ 300, 80, 100, 100 ], columns: [ { type: 'text' }, { type: 'numeric' }, { type: 'numeric' }, { type: 'calendar', options: { format:'DD/MM/YYYY' } }, ] }); ``` ### Calendar type When using the calendar column, you can change the behavior behavior of your calendar by sending some extra options as example above. The possible values are: {.ignore} ```javascript let defaults = { format:'DD/MM/YYYY', // Date format readonly:0, // Readonly input today:0, // Default as today time:0, // Show time picker clear:1, // Clear buttom mask:1, // Mask calendar }; ``` [See a working example](/jspreadsheet/v2/examples/using-a-calendar-column-type) ### Dropdown and autocomplete type There are different ways to work with dropdowns in Jspreadsheet. It is possible to define the parameter _source_ as a simple or key-value array. Additionally, is possible to use the paramter _url_ to populate your dropdown from an external json format source. The autocomplete drowndown has the same configuration inputs, and both can be used as follow: {.ignore} ```javascript let data = [ ['Honda', 1, 'Civic', '4'], ['Peugeot', 3,'1007', '2'], ['Smart', 3,'Cabrio', '4;5'], ]; $('#my').jexcel({ data:data, colHeaders: ['Model','Color', 'Description'], colWidths: [ 300, 80, 100 ], columns: [ { type: 'dropdown', source:['Seat', 'Renault', 'Peugeot'] }, { type: 'dropdown', source:[{'id':1,'name':'Yellow'}, {'id':2,'name':'Black'}, {'id':3,'name':'Green'}] }, { type: 'dropdown', url:'/jspreadsheet/test' }, { type: 'dropdown', url:'/jspreadsheet/countries' autocomplete:true, multiple:true }, ] }); ``` [See a working example](/jspreadsheet/v2/examples/working-with-dropdowns) ### Custom type Jspreadsheet makes possible to extend third party jquery plugins to create your custom columns. Basically to use this feature, you should implement some basic methods such as: openEditor, closeEditor, getValue, setValue as following. {.ignore} ```javascript let customEditor = { // Methods closeEditor : function(cell, save) { // Get value var value = $(cell).find('.editor').spectrum('get').toHexString(); // Set visual value $(cell).html(value); $(cell).css('color', value); // Close edition $(cell).removeClass('edition'); }, openEditor : function(cell) { var main = this; // Get current content var html = $(cell).html(); // Basic editor var editor = document.createElement('div'); $(cell).html(editor); $(editor).prop('class', 'editor'); $(editor).spectrum({ color:html, preferredFormat:'hex', hide: function(color) { main.closeEditor($(cell), true); }}); $(editor).spectrum('show'); }, getValue : function(cell) { return $(cell).html(); }, setValue : function(cell, value) { $(cell).html(value); $(cell).css('color', value); return true; } } let data = [ ['Google', '#542727'], ['Yahoo', '#724f4f'], ['Bing', '#b43131'], ]; $('#my').jexcel({ data:data, colHeaders: [ 'Name', 'Custom color' ], colWidths: [ 300, 200 ], columns: [ { type: 'text' }, { type: 'text', editor:customEditor }, ] }); ``` [See a working example](/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet) ## Define a minimum table dimension size. The follow example will create a data table with a minimum number of ten columns and five rows: {.ignore} ```javascript data3 = [ ['Mazda', 2001, 2000], ['Peugeot', 2010, 5000], ['Honda Fit', 2009, 3000], ['Honda CRV', 2010, 6000], ]; $('#minExample').jexcel({ data:data3, minDimensions:[10,5], colHeaders: ['Model', 'Year', 'Price' ], colWidths: [ 300, 80, 100 ] }); ``` ================================================ FILE: docs/jspreadsheet/v3/docs/events.md ================================================ title: Spreadsheet Events: Integration and Customization keywords: Jspreadsheet, data grid, JavaScript, Excel-like features, spreadsheet events, event handling, customized actions, JavaScript integration, interactive spreadsheets, feature customization, event-driven programming, data grid events description: Learn more about Jspreadsheet’s comprehensive event system for advanced customization and integration. [Back to Documentation](/jspreadsheet/v3/docs) # Events on the online spreadsheet ## Custom table scripting after changes Jspreadsheet offers a native feature to customize your table on the fly. You can define the method updateTable to create rules to customize the data should be shown to the user, as the example below. [See an example in action](/jspreadsheet/v3/examples/table-scripting) ## Events Jspreadsheet available events in this version. [Example on handling events on your spreasheet](/jspreadsheet/v3/examples/events) | Event | description | | ---|--- | | **onload** | This method is called when the method setData | | **onbeforechange** | Before a column value is changed. NOTE: It is possible to overwrite the original value, by return a new value on this method. v3.4.0+ | | **onchange** | After a column value is changed. | | **onafterchanges** | After all changes are applied in the table. | | **onpaste** | After a paste action is performed in the javascript table. | | **onbeforepaste** | Before the paste action is performed. Used to parse any input data, should return the data. | | **oninsertrow** | After a new row is inserted. | | **onbeforeinsertrow** | Before a new row is inserted. You can cancel the insert event by returning false. | | **ondeleterow** | After a row is excluded. | | **onbeforedeleterow** | Before a row is deleted. You can cancel the delete event by returning false. | | **oninsertcolumn** | After a new column is inserted. | | **onbeforeinsertcolumn** | Before a new column is inserted. You can cancel the insert event by returning false. | | **ondeletecolumn** | After a column is excluded. | | **onbeforedeletecolumn** | Before a column is excluded. You can cancel the insert event by returning false. | | **onmoverow** | After a row is moved to a new position. | | **onmovecolumn** | After a column is moved to a new position. | | **onresizerow** | After a change in row height. | | **onresizecolumn** | After a change in column width. | | **onselection** | On the selection is changed. | | **onsort** | After a colum is sorted. | | **onfocus** | On table focus | | **onblur** | On table blur | | **onmerge** | On column merge | | **onchangeheader** | On header change | | **onundo** | On undo is applied | | **onredo** | On redo is applied | | **oneditionstart** | When a openEditor is called. | | **oneditionend** | When a closeEditor is called. | | **onchangestyle** | When a setStyle is called. | | **onchangemeta** | When a setMeta is called. | ================================================ FILE: docs/jspreadsheet/v3/docs/programmatically-changes.md ================================================ title: Programmatically Changes keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features description: Create data grids with spreadsheet controls with Jspreadsheet CE. [Back to Documentation](/jspreadsheet/v3/docs "Back to the documentation section") # Programmatically changes Jspreadsheet has a comprehensive number of native methods to programmatically interact with your javascript spreadsheet and its data. [Go to a working example](/jspreadsheet/v3/examples/programmatically-updates) ## General Methods | Method | Example | |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | **getData:** Get the full or partial table data
@Param boolan onlyHighlighedCells - Get only highlighted cells | spreadsheet.getData([bool]); | | **getJson:** Get the full or partial table data in JSON format
@Param boolan onlyHighlighedCells - Get only highlighted cells | spreadsheet.getData([bool]); | | **getRowData:** Get the data from one row by number
@Param integer rowNumber - Row number | spreadsheet.getRowData([int]); | | **setRowData:** Set the data from one row by number
@Param integer rowNumber - Row number
@param array rowData - Row data | spreadsheet.setRowData([int], [array]); | | **getColumnData:** Get the data from one column by number
@Param integer columnNumber - Column number | spreadsheet.getColumnData([int]); | | **setColumnData:** Set the data from one column by number
@Param integer columnNumber - Column number
@Param array colData - Column data | spreadsheet.setColumnData([int], [array]); | | **setData:** Set the table data
@Param json newData - New json data, null will reload what is in memory. | spreadsheet.setData([json]); | | **setMerge:** Merge cells
@Param string columnName - Column name, such as A1.
@Param integer colspan - Number of columns
@Param integer rowspan - Number of rows | spreadsheet.setMerge([string], [int], [int]); | **getMerge:** Get merged cells properties
@Param string columnName - Column name, such as A1. | spreadsheet.getMerge([string]); | | **removeMerge:** Destroy merged by column name
@Param string columnName - Column name, such as A1. | spreadsheet.removeMerge([string]); | | **destroyMerged:** Destroy all merged cells | spreadsheet.destroyMerge(); | | **getCell** : get current cell DOM
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getCell([string]); | | **getLabel** : get current cell DOM innerHTML
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getLabel([string]); | | **getValue:** get current cell value
@Param mixed cellIdent - str compatible with excel, or as object. | spreadsheet.getValue([string]); | | **getValueFromCoords:** get value from coords
@Param integer x
@Param integer y | spreadsheet.getValueFromCoords([integer], [integer]); | **setValue:** change the cell value
@Param mixed cellIdent - str compatible with excel, or as object.
@Param string Value - new value for the cell
@Param bool force - update readonly columns | spreadsheet.setValue([string], [string], [bool]); | | **setValueFromCoords:** get value from coords
@Param integer x
@Param integer y
@Param string Value - new value for the cell
@Param bool force - update readonly columns | spreadsheet.getValueFromCoords([integer], [integer], [string], [bool]); | | **resetSelection:** Reset the table selection
@Param boolean executeBlur - execute the blur from the table | spreadsheet.resetSelection([bool]); | | **updateSelection:** select cells
@Param object startCell - cell object
@Param object endCell - cell object
@Param boolean ignoreEvents - ignore onselection event | spreadsheet.updateSelection([cell], [cell], true); | | **updateSelectionFromCoords:** select cells
@Param integer x1
@Param integer y1
@Param integer x2
@Param integer y2 | spreadsheet.updateSelectionFromCoords([integer], [integer], [integer], [integer]); | | **getWidth:** get the current column width
@Param integer columnNumber - column number starting on zero | spreadsheet.getWidth([integer]); | | **setWidth:** change column width
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | spreadsheet.setWidth([integer], [integer]); | | **getHeight:** get the current row height
@Param integer rowNumber - row number starting on zero | spreadsheet.getHeight([integer]); | | **setHeight:** change row height
@Param integer rowNumber - row number starting on zero
@Param string newRowHeight- New row height | spreadsheet.setHeight([integer], [integer]); | | **getHeader:** get the current header by column number
@Param integer columnNumber - Column number starting on zero | spreadsheet.getHeader([integer]); | | **getHeaders:** get all header titles | spreadsheet.getHeaders(); | | **setHeader:** change header by column
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | spreadsheet.setHeader([integer], [string]); | | **getStyle:** get table or cell style
@Param mixed - cell identification or null for the whole table. | spreadsheet.getStyle([string]); | | **setStyle:** set cell(s) CSS style
@Param mixed - json with whole table style information or just one cell identification. Ex. A1.
@Param k [optional]- CSS key
@Param v [optional]- CSS value | spreadsheet.setSyle([object], [string], [string]); | | **resetStyle:** remove all style from a cell
@Param string columnName - Column name, example: A1, B3, etc | spreadsheet.resetStyle([string]); | | **getComments:** get cell comments
@Param mixed - cell identification or null for the whole table. | spreadsheet.getComments([string]); | | **setComments:** set cell comments
@Param cell - cell identification
@Param text - comments | spreadsheet.setComments([string], [string]); | | **orderBy:** reorder a column asc or desc
@Param integer columnNumber - column number starting on zero
@Param smallint sortType - One will order DESC, zero will order ASC, anything else will toggle the current order | spreadsheet.orderBy([integer], [boolean]); | | **getConfig:** get table definitions | spreadsheet.getConfig(); | | **insertColumn:** add a new column
@Param mixed - num of columns to be added or data to be added in one single column
@Param int columnNumber - number of columns to be created
@Param boolean insertBefore
@Param object properties - column properties | spreadsheet.insertColumn([mixed], [integer], [boolean], [object]); | | **deleteColumn:** remove column by number
@Param integer columnNumber - Which column should be excluded starting on zero
@Param integer numOfColumns - number of columns to be excluded from the reference column | spreadsheet.deleteColumn([integer], [integer]); | | **moveColumn:** change the column position
@Param integer columnPosition
@Param integer newColumnPosition | spreadsheet.moveColumn([integer], [integer]); | | **insertRow:** add a new row
@Param mixed - number of blank lines to be insert or a single array with the data of the new row
@Param integer rowNumber - reference row number
@param boolean insertBefore | spreadsheet.insertRow([mixed], [integer], [boolean]); | | **deleteRow:** remove row by number
@Param integer rowNumber - Which row should be excluded starting on zero
@Param integer numOfRows - number of lines to be excluded | spreadsheet.deleteRow([integer], [integer]); | | **moveRow:** change the row position
@Param integer rowPosition
@Param integer newRowPosition | >spreadsheet.moveRow([integer], [integer]); | | **download:** get the current data as a CSV file
@Param bool - true to download parsed formulas. | spreadsheet.download([bool]); | | **getMeta:** get the table or cell meta information
@Param mixed - cell identification or null for the whole table. | spreadsheet.getMeta([string]); | | **setMeta:** set the table or cell meta information
@Param mixed - json with whole table meta information. | spreadsheet.setMeta([mixed]); | | **fullscreen:** Toogle table fullscreen mode
@Param boolan fullscreen - define fullscreen status as true or false | spreadsheet.fullscreen([bool]); | | **getSelectedRows:** Get the selected rows
@Param boolean asIds - Get the rowNumbers or row DOM elements | spreadsheet.getSelectedRows([bool]); | | **getSelectedColumns:** Get the selected columns
@Param boolan asIds - Get the colNumbers or row DOM elements | spreadsheet.getSelectedColumns([bool]); | | **showIndex:** show column of index numbers | spreadsheet.showIndex(); | | **hideIndex:** hide column of index numbers | spreadsheet.hideIndex(); | | **search:** search in the table, only if directive is enabled during inialization.
@Param string - Search for word | spreadsheet.search([string]); | | **resetSearch:** reset search table | spreadsheet.resetSearch(); | | **whichPage:** Which page showing on jspreadsheet - Valid only when pagination is true. | spreadsheet.whichPage(); | | **page:** Go to page number- Valid only when pagination is true.
@Param integer - Go to page number | spreadsheet.page([integer]); | | **undo:** Undo last changes | spreadsheet.undo(); | | **redo:** Redo changes | spreadsheet.redo(); | ================================================ FILE: docs/jspreadsheet/v3/docs/quick-reference.md ================================================ title: Quick Reference keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features description: Quick Reference of the jspreadsheet properties [Back to Documentation](/jspreadsheet/v3/docs) # The online spreadsheet quick reference ## Methods | Method | Example | | --- | --- | | **getData:** Get the full or partial table data
@Param boolean onlyHighlightedCells - Get only highlighted cells | spreadsheet.getData([bool]); | | **getJson:** Get the full or partial table data in JSON format
@Param boolean onlyHighlightedCells - Get only highlighted cells | spreadsheet.getJson([bool]); | | **getRowData:** Get the data from one row by number
@Param integer rowNumber - Row number | spreadsheet.getRowData([int]); | | **setRowData:** Set the data from one row by number
@Param integer rowNumber - Row number
@Param array rowData - Row data | spreadsheet.setRowData([int], [array]); | | **getColumnData:** Get the data from one column by number
@Param integer columnNumber - Column number | spreadsheet.getColumnData([int]); | | **setColumnData:** Set the data from one column by number
@Param integer columnNumber - Column number
@Param array colData - Column data | spreadsheet.setColumnData([int], [array]); | | **setData:** Set the table data
@Param json newData - New json data, null will reload what is in memory. | spreadsheet.setData([json]); | | **setMerge:** Merge cells
@Param string columnName - Column name, such as A1.
@Param integer colspan - Number of columns
@Param integer rowspan - Number of rows | spreadsheet.setMerge([string], [int], [int]); | | **getMerge:** Get merged cells properties
@Param string columnName - Column name, such as A1. | spreadsheet.getMerge([string]); | | **removeMerge:** Destroy merged by column name
@Param string columnName - Column name, such as A1. | spreadsheet.removeMerge([string]); | | **destroyMerged:** Destroy all merged cells | spreadsheet.destroyMerge(); | | **getCell** : get current cell DOM
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getCell([string]); | | **getLabel** : get current cell DOM innerHTML
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getLabel([string]); | | **getValue:** get current cell value
@Param mixed cellIdent - str compatible with excel, or as object. | spreadsheet.getValue([string]); | | **getValueFromCoords:** get value from coords
@Param integer x
@Param integer y | spreadsheet.getValueFromCoords([integer], [integer]); | | **setValue:** change the cell value
@Param mixed cellIdent - str compatible with excel, or as object.
@Param string Value - new value for the cell
@Param bool force - update readonly columns | spreadsheet.setValue([string], [string], [bool]); | | **setValueFromCoords:** get value from coords
@Param integer x
@Param integer y
@Param string Value - new value for the cell
@Param bool force - update readonly columns | spreadsheet.setValueFromCoords([integer], [integer], [string], [bool]); | | **resetSelection:** Reset the table selection
@Param boolean executeBlur - execute the blur from the table | spreadsheet.resetSelection([bool]); | | **updateSelection:** select cells
@Param object startCell - cell object
@Param object endCell - cell object
@Param boolean ignoreEvents - ignore onselection event | spreadsheet.updateSelection([cell], [cell], true); | | **updateSelectionFromCoords:** select cells
@Param integer x1
@Param integer y1
@Param integer x2
@Param integer y2 | spreadsheet.updateSelectionFromCoords([integer], [integer], [integer], [integer]); | | **getWidth:** get the current column width
@Param integer columnNumber - column number starting on zero | spreadsheet.getWidth([integer]); | | **setWidth:** change column width
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | spreadsheet.setWidth([integer], [integer]); | | **getHeight:** get the current row height
@Param integer rowNumber - row number starting on zero | spreadsheet.getHeight([integer]); | | **setHeight:** change row height
@Param integer rowNumber - row number starting on zero
@Param string newRowHeight- New row height | spreadsheet.setHeight([integer], [integer]); | | **getHeader:** get the current header by column number
@Param integer columnNumber - Column number starting on zero | spreadsheet.getHeader([integer]); | | **getHeaders:** get all header titles | spreadsheet.getHeaders(); | | **setHeader:** change header by column
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | spreadsheet.setHeader([integer], [string]); | | **getStyle:** get table or cell style
@Param mixed - cell identification or null for the whole table. | spreadsheet.getStyle([string]); | | **setStyle:** set cell(s) CSS style
@Param mixed - json with whole table style information or just one cell identification. Ex. A1.
@Param k [optional]- CSS key
@Param v [optional]- CSS value | spreadsheet.setStyle([object], [string], [string]); | | **resetStyle:** remove all style from a cell
@Param string columnName - Column name, example: A1, B3, etc | spreadsheet.resetStyle([string]); | | **getComments:** get cell comments
@Param mixed - cell identification or null for the whole table. | spreadsheet.getComments([string]); | | **setComments:** set cell comments
@Param cell - cell identification
@Param text - comments | spreadsheet.setComments([string], [string]); | | **orderBy:** reorder a column asc or desc
@Param integer columnNumber - column number starting on zero
@Param smallint sortType - One will order DESC, zero will order ASC, anything else will toggle the current order | spreadsheet.orderBy([integer], [boolean]); | | **getConfig:** get table definitions | spreadsheet.getConfig(); | | **insertColumn:** add a new column
@Param mixed - num of columns to be added or data to be added in one single column
@Param int columnNumber - number of columns to be created
@Param boolean insertBefore
@Param object properties - column properties | spreadsheet.insertColumn([mixed], [integer], [boolean], [object]); | | **deleteColumn:** remove column by number
@Param integer columnNumber - Which column should be excluded starting on zero
@Param integer numOfColumns - number of columns to be excluded from the reference column | spreadsheet.deleteColumn([integer], [integer]); | | **moveColumn:** change the column position
@Param integer columnPosition
@Param integer newColumnPosition | spreadsheet.moveColumn([integer], [integer]); | | **insertRow:** add a new row
@Param mixed - number of blank lines to be insert or a single array with the data of the new row
@Param integer rowNumber - reference row number
@Param boolean insertBefore | spreadsheet.insertRow([mixed], [integer], [boolean]); | | **deleteRow:** remove row by number
@Param integer rowNumber - Which row should be excluded starting on zero
@Param integer numOfRows - number of lines to be excluded | spreadsheet.deleteRow([integer], [integer]); | | **moveRow:** change the row position
@Param integer rowPosition
@Param integer newRowPosition | spreadsheet.moveRow([integer], [integer]); | | **download:** get the current data as a CSV file
@Param bool - true to download parsed formulas. | spreadsheet.download([bool]); | | **getMeta:** get the table or cell meta information
@Param mixed - cell identification or null for the whole table. | spreadsheet.getMeta([string]); | | **setMeta:** set the table or cell meta information
@Param mixed - json with whole table meta information. | spreadsheet.setMeta([mixed]); | | **fullscreen:** Toggle table fullscreen mode
@Param boolean fullscreen - define fullscreen status as true or false | spreadsheet.fullscreen([bool]); | | **getSelectedRows:** Get the selected rows
@Param boolean asIds - Get the rowNumbers or row DOM elements | spreadsheet.getSelectedRows([bool]); | | **getSelectedColumns:** Get the selected columns
@Param boolean asIds - Get the colNumbers or row DOM elements | spreadsheet.getSelectedColumns([bool]); | | **showColumn:** show column by number | spreadsheet.showIndex([int]); | | **hideColumn:** hide column by number | spreadsheet.hideColumn([int]); | | **showIndex:** show column of index numbers | spreadsheet.showIndex(); | | **hideIndex:** hide column of index numbers | spreadsheet.hideIndex(); | | [Working example](/jspreadsheet/v3/examples/programmatically-changes) ## Events | Event | Description | | --- | --- | | **onload** | This method is called when the method setData | | **onbeforechange** | Before a column value is changed. NOTE: It is possible to overwrite the original value by returning a new value on this method. v3.4.0+ | | **onchange** | After a column value is changed. | | **onafterchanges** | After all changes are applied in the table. | | **onpaste** | After a paste action is performed in the JavaScript table. | | **onbeforepaste** | Before the paste action is performed. Used to parse any input data, should return the data. | | **oninsertrow** | After a new row is inserted. | | **onbeforeinsertrow** | Before a new row is inserted. You can cancel the insert event by returning false. | | **ondeleterow** | After a row is excluded. | | **onbeforedeleterow** | Before a row is deleted. You can cancel the delete event by returning false. | | **oninsertcolumn** | After a new column is inserted. | | **onbeforeinsertcolumn** | Before a new column is inserted. You can cancel the insert event by returning false. | | **ondeletecolumn** | After a column is excluded. | | **onbeforedeletecolumn** | Before a column is excluded. You can cancel the insert event by returning false. | | **onmoverow** | After a row is moved to a new position. | | **onmovecolumn** | After a column is moved to a new position. | | **onresizerow** | After a change in row height. | | **onresizecolumn** | After a change in column width. | | **onselection** | When the selection is changed. | | **onsort** | After a column is sorted. | | **onfocus** | On table focus | | **onblur** | On table blur | | **onmerge** | On column merge | | **onchangeheader** | On header change | | **onundo** | When undo is applied | | **onredo** | When redo is applied | | **oneditionstart** | When openEditor is called. | | **oneditionend** | When closeEditor is called. | | **onchangestyle** | When setStyle is called. | | **onchangemeta** | When setMeta is called. | | **onchangepage** | When the page is changed. | [Example on handling events on Jspreadsheet](/jspreadsheet/v3/examples/events) ## Initialization | Parameter | Description | | --- | --- | | **url** | Load an external JSON file from this URL: string | | **data** | Load this data into the JavaScript table: array | | **copyCompatibility** | When true, copy and export will bring formula results; if false, will bring formulas: boolean | | **rows** | Row properties: height.: object | | **columns** | Column type, title, width, align, dropdown options, text wrapping, mask, etc.: object | | **defaultColWidth** | Default width for a new column: integer | | **defaultColAlign** | Default align for a new column: [center, left, right] | | **minSpareRows** | Minimum number of spare rows: [integer] | | **minSpareCols** | Minimum number of spare cols: [integer] | | **minDimensions** | Minimum table dimensions: [cols, rows] | | **allowExport** | Allow table export: bool | | **includeHeadersOnDownload** | Include header titles on download: bool | | **columnSorting** | Allow column sorting: bool | | **columnDrag** | Allow column dragging: bool | | **columnResize** | Allow column resizing: bool | | **rowResize** | Allow row resizing: bool | | **rowDrag** | Allow row dragging: bool | | **editable** | Allow table edition: bool | | **allowInsertRow** | Allow insert a new row: bool | | **allowManualInsertRow** | Allow user to insert a new row: bool | | **allowInsertColumn** | Allow insert a new column: bool | | **allowManualInsertColumn** | Allow user to create a new column: bool | | **allowDeleteRow** | Allow delete a row: bool | | **allowDeleteColumn** | Allow delete a column: bool | | **allowRenameColumn** | Allow rename a column: bool | | **allowComments** | Allow comments over the cells: bool | | **wordWrap** | Global text wrapping: bool | | **csv** | Load an external CSV file from this URL: string | | **csvFileName** | Default filename for a download method: string | | **csvHeaders** | Load header titles from the CSV file: bool | | **csvDelimiter** | Default delimiter for the CSV file: string | | **selectionCopy** | Allow selection copy: bool | | **mergeCells** | Cells to be merged in the table initialization: object | | **toolbar** | Add custom toolbars: object | | **search** | Allow search in the table: bool | | **pagination** | Break the table by pages: integer | | **paginationOptions** | Number of records per page: 25, 50, 75, 100 for example: [array of numbers] | | **fullscreen** | Fullscreen mode: bool | | **lazyLoading** | Activate the table lazy loading: bool | | **loadingSpin** | Activate the loading spin: bool | | **tableOverflow** | Allow table overflow: bool | | **tableHeight** | Force the max height of the table: CSS String | | **tableWidth** | Force the max width of the table: CSS String | | **meta** | Meta information: object | | **style** | Cells style in the table initialization: object | | **parseFormulas** | Enable execution of formulas inside the table: bool | | **autoIncrement** | Auto increment actions when using the dragging corner: bool | | **updateTable** | Method to config custom script execution. NOTE: This does not work with lazyLoading, Pagination or Search options. | | **nestedHeaders** | Define the nested headers, including title, colspan, etc.: object | | **contextMenu** | Context menu content: function() { return customMenu } | | **text** | All messages to be customized: object | ## Translations | Key | Default value | | --- | --- | | **noRecordsFound** | No records found | | **showingPage** | Showing page {0} of {1} entries | | **show** | Show | | **entries** | entries | | **insertANewColumnBefore** | Insert a new column before | | **insertANewColumnAfter** | Insert a new column after | | **deleteSelectedColumns** | Delete selected columns | | **renameThisColumn** | Rename this column | | **orderAscending** | Order ascending | | **orderDescending** | Order descending | | **insertANewRowBefore** | Insert a new row before | | **insertANewRowAfter** | Insert a new row after | | **deleteSelectedRows** | Delete selected rows | | **editComments** | Edit comments | | **addComments** | Add comments | | **comments** | Comments | | **clearComments** | Clear comments | | **copy** | Copy... | | **paste** | Paste... | | **saveAs** | Save as... | | **about** | About | | **areYouSureToDeleteTheSelectedRows** | Are you sure to delete the selected rows? | | **areYouSureToDeleteTheSelectedColumns** | Are you sure to delete the selected columns? | | **thisActionWillDestroyAnyExistingMergedCellsAreYouSure** | This action will destroy any existing merged cells. Are you sure? | | **thisActionWillClearYourSearchResultsAreYouSure** | This action will clear your search results. Are you sure? | | **thereIsAConflictWithAnotherMergedCell** | There is a conflict with another merged cell | | **invalidMergeProperties** | Invalid merged properties | | **cellAlreadyMerged** | Cell already merged | | **noCellsSelected** | No cells selected | [Working example](/jspreadsheet/v3/examples/translations) ================================================ FILE: docs/jspreadsheet/v3/docs.md ================================================ title: The javascript spreadsheet documentation keywords: Jexcel, javascript, excel-like, spreadsheet, table, grid description: Jspreadsheet CE official documentation, the javascript spreadsheet Jspreadsheet v3 Documentation ============================= The Jspreadsheet is a lightweight javascript spreadsheet component to help with data management in web applications. * [Getting started](/jspreadsheet/v3/docs/getting-started "Getting started with Jspreadsheet") Getting started with Jspreadsheet - the online spreadsheet. Learning the basics, create instances, and more about the general spreadsheet configuration. * [Programmatically changes](/jspreadsheet/v3/docs/programmatically-changes "Programmatically changes") How to interact with your Jspreadsheet - the online spreadsheet and tables through javascript. * [Handling events](/jspreadsheet/v3/docs/events "Handling events on Jspreadsheet") How to handle events on your javascript spreadsheet. * [Quick reference](/jspreadsheet/v3/docs/quick-reference "Jspreadsheet method and events") Quick reference of all methods, configuration variables, events and language. ================================================ FILE: docs/jspreadsheet/v3/examples/angular.md ================================================ title: Jexcel with Angular keywords: Jexcel, javascript, using jspreadsheet and angular description: A full example on how to integrate Jspreadsheet with Angular [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # The Javascript spreadsheet with Angular [Click here to see the project running on codesandbox.](https://codesandbox.io/s/jexcel-and-angular-ej4u2) ### Source code {.ignore} ```javascript import { Component } from "@angular/core"; import * as jexcel from "jexcel"; require("jexcel/dist/jexcel.css"); @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "CodeSandbox"; ngAfterViewInit() { jexcel(document.getElementById("spreadsheet"), { data: [[]], columns: [ { type: "dropdown", width: "100px", source: ["Y", "N"] }, { type: "color", width: "100px", render: "square" } ], minDimensions: [10, 10] }); } } ``` ================================================ FILE: docs/jspreadsheet/v3/examples/column-types.md ================================================ title: Column types keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: Learn more about the powerful column types. This example brings all native column types and how to create your own custom type. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Column types The native available types in jspreadsheet javascript spreadsheet are the following: * text * numeric * hidden * dropdown * autocomplete * checkbox * radio * calendar * image * color ## Native column types There are several other properties to change the behavior of those columns, please check the dropdown, calendar examples to get more advanced examples. ```html ``` ## Custom column type Jspreadsheet is very powerful and flexible, and you can create custom column type based on any external plugins. A time custom column based on the [clockpicker plugin](https://weareoutman.github.io/clockpicker/) by weareoutman. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/comments.md ================================================ title: Allow comments in your javascript table keywords: Jexcel, spreadsheet, javascript, cell comments, javascript table description: Allow comments in your table spreadsheet. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Comments on your javascript spreadsheet The javascript vanilla spreadsheet plugin allows the user to set custom comments for each individual cells. By allowComments in the initialization, the user will be able to add comments in the rigth click contextMenu. ## Manage cell comments programmatically To apply comments via javascript, you can use the methods setComments or getComments, as follow: ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples/contextmenu.md ================================================ title: Custom contextmenu keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: How to customize Jspreadsheet contextmenu [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Custom contextmenu The following example remove the copy and paste from the contextmenu in order to create a custom contextMenu ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/custom-table-design.md ================================================ title: Custom Table Design keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: Customized CSS for your datagrid [Back to Examples](jspreadsheet/v3/examples) # Create custom CSS for your javascript spreadsheet The following example shows a CSS addon to change the core layout of your jquery tables. ## Green borders and corners jquery spreadsheet Your jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/datatables.md ================================================ title: Searchable Datatables keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Javascript spreadsheet with search and pagination The following example shows how to create a javascript spreadsheet instance with a design similar to datatables jquery plugin. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/date-and-datetime-picker.md ================================================ title: Calendar with date and datetime picker keywords: Jexcel, javascript, excel-like, spreadsheet, date, datetime, calendar description: Example from basic to advanced calendar usage, date and datetime picker [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Calendar column type The example below shows how to use and customize special calendar column type. Jspreadsheet uses the jSuites [Javascript Calendar](https://jsuites.net/docs/javascript-calendar) plugin ```html ``` ## Date column customization Customize the format and the behavior of your column through the initialization options, as follow: ```javascript { options : { // Date format format:'DD/MM/YYYY', // Allow keyboard date entry readonly:0, // Today is default today:0, // Show timepicker time:0, // Show the reset button resetButton:true, // Placeholder placeholder:'', // Translations can be done here months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'], // Value value:null, // Events onclose:null, onchange:null, // Fullscreen (this is automatic set for screensize < 800) fullscreen:false, }; } ``` ## JavaScript Calendar Picker More information about the jSuites responsive [JavaScript calendar](https://jsuites.net/docs/javascript-calendar) plugin. ================================================ FILE: docs/jspreadsheet/v3/examples/dropdown-and-autocomplete.md ================================================ title: Advanced dropdown column type keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by description: Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing javascript tables using categories and images in your dropdowns. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Dropdown and autocomplete column type Jspreadsheet brings a very powerful, reflexive and responsive dropdown column type to support a better user experience through your applications. The new dropdown column options include autocomplete, multiple options, data picker, different template types and much more advantages, such as: * Create a simple dropdown from array * Value or key-value select box is available * Populate a dropdown from a external JSON request * Dynamic autocomplete search based on another column value * Conditional dropdowns: options from a dropdown based on a method return * Multiple selection and internal dropdown search * Responsive data picker with multiple render types * Image icon and group items ## Multiple and autocomplete options The highlight features introduced in the most version of the vanilla javascript spreadsheet is definitely the autocomplete and multiple options. The following example shows the column Product Origin with the autocomplete and multiple directives initiated as true. ```html ``` ## Conditional dropdown The example below shows the dependency of the second column in relation to the first. ```html ``` ## Group, images, and advanced render options Improve the user experience with a responsive data picker. ```html ``` ## JavaScript Dropdown Component More options for the dropdowns, please refer to the [jSuites JavaScript Dropdown Documentation](https://jsuites.net/docs/dropdown). ================================================ FILE: docs/jspreadsheet/v3/examples/events.md ================================================ title: Handling events on Jspreadsheet keywords: Jexcel, javascript, excel-like, spreadsheet, table, grid, events description: Learn how to handle events on Jspreadsheet [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Handling events ## Various tracking javascript methods Binding tracking events on your javascript spreadsheet ```html ``` ## Advanced Example Update the chart on every change in your spreadsheet, using the onchange handler ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/headers.md ================================================ title: Nested headers and column header updates keywords: Jexcel, spreadsheet, javascript, header updates, nested headers, javascript table description: Enabled nested headers in your spreadsheet and learn how to set or get header values [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Headers ## Nested headers The online spreadsheet implements nested headers natively though the directive **nestedHeaders** ## Programmatically header updates There are a few options to allow the user to interact with the header titles. Using the contextMenu over the desired header, by pressing an selected header and holding the click for 500ms, or via javascript. ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples/image-upload.md ================================================ title: Embed images to your spreadsheet using base64 keywords: Jexcel, javascript, excel-like, spreadsheet, image upload, base64, embed images description: This examples shows how to embed and upload images to your spreadsheet. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Embed images into your spreadsheet The following examples shows how to embed images into your spreadsheet. ## Load a local image to your table Load images from your local machine into your javascript spreadsheet ```html ``` ## Embed remote images to your table Automatic image rendering from a remote URL using updateTable method ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/import-data.md ================================================ title: Load data from CSV or JSON or XLSX keywords: Jexcel, javascript, excel-like, spreadsheet, loading data, csv, json, xlsx. description: How to import data from an external CSV, json file or XLSX. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Create a javascript spreadsheet There are a few different ways to load data to your javascript spreadsheet shown in the next four examples below ## Based on a external CSV file The example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers. ```html ``` ## Based on an external JSON file In a similar way, you can create a table based on an external JSON file format by using the _url: directive_ as below. ```html ``` ## Based on an JSON object The data directive can be used to define a JSON object. In this case you can define by the name directive the order of the columns. ### Source code ```html ``` **NOTE** : This example is based on a customized version of the free version of SheetsJS. There is no guarantee in the use of this library. Please consider purchase their professional version. ================================================ FILE: docs/jspreadsheet/v3/examples/jquery.md ================================================ title: Jspreadsheet with Jquery keywords: Jexcel, javascript, using jspreadsheet and Jquery description: A full example on how to integrate Jspreadsheet with Jquery [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Jquery Creating a jspreadsheet javascript instance using jQuery ### Source code {.ignore} ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/lazy-loading.md ================================================ title: Dealing with big spreadsheets through lazy loading keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: This example brings a very nice feature to deal with large table datasets. [Back to Examples](/jspreadsheet/v3/examples) # Lazy loading The following table is dealing with 60.000 columns. The lazy loading method allows render up to 130 rows at the same time and will render other rows based on the scrolling. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/merged-cells.md ================================================ title: How to merge the spreadsheet cells keywords: Jexcel, spreadsheet, javascript, javascript table, merged cells description: Full example on how to handle merge cells in your javascript tables. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Merged cells You can merge cells on your spreadsheet in the table initialization or programmatically as follows: The following methods are available for merge cells management: `setMerge`, `getMerge`, `removeMerge`, `destroyMerged`_ ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples/meta-information.md ================================================ title: Meta information keywords: Javascript spreadsheet, javascript, javascript table, meta information description: Keep hidden information about your data grid cells using the Jspreadsheet meta information methods [Back to Examples](/jspreadsheet/v3/examples#more) # Meta information This feature helps you keep import information about the cells hidden from users. You can define any meta information during the initialization or programmatically after that thought getMeta or setMeta methods. ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples/programmatically-updates.md ================================================ title: Update your table by javascript keywords: Jexcel, javascript, excel-like, spreadsheet, javascript programmatically changes description: How to update your spreadsheet programmatically via JavaScript. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Programmatically table updates ## Insert, remove and move columns and rows The following example shows how to manage data programmatically in your javascript spreadsheet. ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples/react.md ================================================ title: Jspreadsheet with React keywords: Jexcel, javascript, using Jspreadsheet and react description: A full example on how to integrate Jspreadsheet with React [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # The Javascript spreadsheet with React Integrating Jspreadsheet with React [React with jspreadsheet sample project](https://codesandbox.io/s/jexcel-and-react-hmx0k) ### Source code {.ignore} ```javascript class Jspreadsheet extends React.Component { constructor(props) { super(props); this.options = props.options; } componentDidMount = function() { this.el = jexcel(ReactDOM.findDOMNode(this).children[0], this.options); } addRow = function() { this.el.insertRow(); } render() { return (
this.addRow()}>
``` ## Disable the table sorting The ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/spreadsheet-formulas.md ================================================ title: Basic to advance use of formulas keywords: Jexcel, javascript, excel-like, spreadsheet, formulas, currency, calculations description: Unleash the power of your tables bringing formulas and custom javascript methods on your Jspreadsheet - the online spreadsheet. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Adding formulas on your online spreadsheet ## Simple spreadsheet-like formula usage The example below shows how to use spreadsheet like formulas on your javascript table spreadsheet. ```html ``` ## Creating Custom formulas You can declare custom javascript methods and use in your tables as the example below. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/spreadsheet-toolbars.md ================================================ title: Enable and customize the toolbar on your spreadsheet keywords: Jexcel, javascript, vanilla javascript, excel-like, spreadsheet, datatables, data, table, toolbars description: Full example on how to enable nor customize your javascript spreadsheet toolbar. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Custom toolbars The following example shows how to include and customize a toolbar in your javascript spreadsheet. ## Instructions The toolbar can be customized with a few parameters. | | | |----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------| | **type** | could be **i** for icon, **select** for a dropdown, **color** or a color picker. | | **content**{.nowrap} | defines the icon (from material icons) when you use type: i; [click here for all possible keys](https://material.io/tools/icons/) | | **k** | means the style should be apply to the cell; | | **v** | means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; | | **onclick** | can be used together with type:i to implement any custom method. The method will receive the jspreadsheet instance and all marked cells by default. | ```html ``` **NOTE:** You need to include the material icons style sheet. {.ignore} ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/table-overflow.md ================================================ title: Table overflow with Jspreadshee Version 3 keywords: Jexcel, javascript, javascript vanilla, javascript, table, table overflow description: How define a fixed width and height for the Jspreadsheet grids. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Table overflow Define width and height for your Jspreadsheet table ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/table-scripting.md ================================================ title: Customize the spreadsheet via javascript keywords: Jexcel, javascript, excel-like, spreadsheet, table scripting description: Customize the table behavior using javascript [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Table scripting and customizations Customize the table behavior though javascript. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/table-style.md ================================================ title: Customize the spreadsheet style CSS keywords: Jexcel, javascript, excel-like, spreadsheet, table style, css description: Bring a very special touch to your applications customizing your javascript spreadsheet. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Custom javascript spreadsheet style ## How to apply style to your table You can define the CSS for specific columns during the initialization, or through programmatically javascript calls. But, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle. ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples/translations.md ================================================ title: Jspreadsheet Translations keywords: Jexcel, spreadsheet, javascript, javascript table, translate, translations description: How to translate the default Jspreadsheet text and controls. [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # Internationalization How to update the default texts from Jspreadsheet. ```html ``` ================================================ FILE: docs/jspreadsheet/v3/examples/vue.md ================================================ title: Jspreadsheet with Vue keywords: Jexcel, javascript, using Jspreadsheet and Vue description: A full example on how to integrate Jspreadsheet with Vue [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") # The Javascript spreadsheet with Vue Integrating jspreadsheet with Vue [See a full example on codesandbox](https://codesandbox.io/embed/vue-default-template-p4hwn) [Get a source code of a sample Vue project](https://github.com/jspreadsheet/jexcel-with-vue) ```html
``` ================================================ FILE: docs/jspreadsheet/v3/examples.md ================================================ title: Examples keywords: Jexcel, javascript, examples description: Examples how to create web based spreadsheets using Jspreadsheet. Jspreadsheet v3 Examples ======================== For us, the best way to learn is via examples. We bring in this section various examples from basic to advance applications. * [React Implementation](/jspreadsheet/v3/examples/react "Jspreadsheet with React") A full example on how to integrate Jspreadsheet with React * [VUE Implementation](/jspreadsheet/v3/examples/vue "Jspreadsheet with Vue") A full example on how to integrate Jspreadsheet with Vue * [Angular Implementation](/jspreadsheet/v3/examples/angular "Jexcel with Angular") A full example on how to integrate Jspreadsheet with Angular * [Jquery Implementation](/jspreadsheet/v3/examples/jquery "Jspreadsheet with Jquery") A full example on how to integrate Jspreadsheet with Jquery * [Search and pagination](/jspreadsheet/v3/examples/datatables "Searchable databatable") Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables. * [Column types](/jspreadsheet/v3/examples/column-types "Column types") Learn more about the powerful column types. This example brings all native column types and how to create your own custom type. * [Advanced dropdown](/jspreadsheet/v3/examples/dropdown-and-autocomplete "Advanced dropdown column type") Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing javascript tables using categories and images in your dropdowns. * [Date and datetime picker](/jspreadsheet/v3/examples/date-and-datetime-picker "Calendar with date and datetime picker") Example from basic to advanced calendar usage, date and datetime picker * [Images](/jspreadsheet/v3/examples/image-upload "Embed images to your spreadsheet using base64") This examples shows how to embed and upload images to your spreadsheet * [Programmatically updates](/jspreadsheet/v3/examples/programmatically-updates "Update your table by javascript") How to update your spreadsheet and its data by javascript * [Table Style](/jspreadsheet/v3/examples/table-style "Customize the spreasheet style CSS") Bring a very special touch to your applications customizing your javascript spreadsheet. * [Table Scripting](/jspreadsheet/v3/examples/table-scripting "Customize the spreasheet via javascript") Customize the table behavior using javascript * [Events](/jspreadsheet/v3/examples/events "Handling events on Jspreadsheet") Learn how to handle events on Jspreadsheet * [Importing data](/jspreadsheet/v3/examples/import-data "Load data from CSV or JSON or XLSX") How to import data from an external CSV, json file or XLSX. * [Formulas](/jspreadsheet/v3/examples/spreadsheet-formulas "Basic to advance use of formulas") Unleash the power of your tables bringing formulas and custom javascript methods on your Jspreadsheet - the online spreadsheet. * [Custom toolbars](/jspreadsheet/v3/examples/spreadsheet-toolbars "Enable and customize the toolbar on your spreadsheet") Full example on how to enable nor customize your javascript spreadsheet toolbar. * [Column comments](/jspreadsheet/v3/examples/comments "Allow comments in your javascript table") Allow comments in your table spreadsheet. * [Headers](/jspreadsheet/v3/examples/headers "Nested headers and column header updates") Enabled nested headers in your spreadsheet and learn how to set or get header values * [Translations](/jspreadsheet/v3/examples/translations "How to translate the default messages from Jspreadsheet") How to translate the default messages from Jspreadsheet. * [Meta information](/jspreadsheet/v3/examples/meta-information "Meta information") Keep hidden information about your cells using meta information methods * [Merged cells](/jspreadsheet/v3/examples/merged-cells "How to merge the spreadsheet cells") Full example on how to handle merge cells in your javascript tables. * [Sorting columns](/jspreadsheet/v3/examples/sorting "Sorting the spreadsheet columns") Example how to sort the table by a column via javascript. * [Readonly Columns](/jspreadsheet/v3/examples/readonly "Readonly Columns") Example how to setup readonly cells * [Lazy loading](/jspreadsheet/v3/examples/lazy-loading "Dealing with big spreadsheets through lazy loading") This example brings a very nice feature to deal with large table datasets. * [Custom Contextmenu](/jspreadsheet/v3/examples/contextmenu "Custom contextmenu") How to customize Jspreadsheet contextmenu * [Table overflow](/jspreadsheet/v3/examples/table-overflow "Table overflow") How define a fixed width and height for the Jspreadsheet grids. ================================================ FILE: docs/jspreadsheet/v3/getting-started.md ================================================ title: Getting Started with Jspreadsheet CE keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features description: Create data grids with spreadsheet controls with Jspreadsheet CE. [Back to Documentation](/jspreadsheet/v3/docs) # Getting started Jspreadsheet is a vanilla javascript plugin to embed a online spreadsheet in your web based applications. Bring highly dynamic datasets to your application and improve the user experience of your software. ```bash npm install jspreadsheet-ce ``` Download from our github page:
``` ================================================ FILE: docs/jspreadsheet/v4/examples/contextmenu.md ================================================ title: Custom contextmenu keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: How to customize jspreadsheet contextmenu # Custom contextmenu The following example remove the copy and paste from the contextmenu in order to create a custom contextMenu ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/create-from-table.md ================================================ title: Create a Data Grid From a HTML table keywords: Jexcel, javascript, create a dynamic jspreadsheet table from a HTML table element. description: A full example on how to create a dynamic jspreadsheet table from a HTML table. # Create a Data Grid From a HTML table From the v4+ is is possible to create a online spreadsheet from a static simple HTML table. ```html
The Official Top 40 biggest albums of 2019
| General | |||
| Info | Stats | ||
| POS | TITLE | ARTIST | PEAK |
| 1 | DIVINELY UNINSPIRED TO A HELLISH EXTENT | LEWIS CAPALDI | 1 |
| 2 | NO 6 COLLABORATIONS PROJECT | ED SHEERAN | 1 |
| 3 | THE GREATEST SHOWMAN | MOTION PICTURE CAST RECORDING | 1 |
| 4 | WHEN WE ALL FALL ASLEEP WHERE DO WE GO | BILLIE EILISH | 1 |
| 5 | STAYING AT TAMARA'S | GEORGE EZRA | 1 |
| 6 | BOHEMIAN RHAPSODY - OST | QUEEN | 3 |
| 7 | THANK U NEXT | ARIANA GRANDE | 1 |
| 8 | WHAT A TIME TO BE ALIVE | TOM WALKER | 1 |
| 9 | A STAR IS BORN | MOTION PICTURE CAST RECORDING | 1 |
| 10 | YOU'RE IN MY HEART | ROD STEWART | 1 |
| =SUMCOL(3) | |||
``` ### More examples * [Including merged cells](https://jsfiddle.net/spreadsheet/45h6odug/ "Merged cells") ================================================ FILE: docs/jspreadsheet/v4/examples/custom-table-design.md ================================================ title: Custom Table Design keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: Customized CSS for your datagrid # Create custom CSS for your javascript spreadsheet The following example shows a CSS addon to change the core layout of your jquery tables. ## Green borders and corners jquery spreadsheet [Bootstrap-like jquery spreadsheet example](/jspreadsheet/examples/a-custom- table-design) ## Bootstrap-like jquery spreadsheet. Your jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/datatables.md ================================================ title: Searchable datatable keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables. # Spreadsheet Search and Pagination The following example shows how to create a javascript spreadsheet instance with a design similar to datatables jquery plugin. ### Source code {.ignore} ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/date-and-datetime-picker.md ================================================ title: Calendar with date and datetime picker keywords: Jexcel, javascript, excel-like, spreadsheet, date, datetime, calendar description: Example from basic to advanced calendar usage, date and datetime picker # Calendar column type The example below shows how to use and customize special calendar column type. Jspreadsheet uses the jSuites [Javascript Calendar](https://jsuites.net/docs/javascript-calendar) plugin ### Source code ```html ``` ## Date column customization Customize the format and the behavior of your column through the initialization options, as follow: {.ignore} ```javascript options : { // Date format format:'DD/MM/YYYY', // Allow keyboard date entry readonly:0, // Today is default today:0, // Show timepicker time:0, // Show the reset button resetButton:true, // Placeholder placeholder:'', // Translations can be done here months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'], // Value value:null, // Events onclose:null, onchange:null, // Fullscreen (this is automatic set for screensize < 800) fullscreen:false, }; ``` More information about the jSuites [Responsive date time picker](https://jsuites.net/docs/javascript-calendar) Considering the example above, you can create a calendar including a time picker by simple send the option **time:1** as the following example. ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/dropdown-and-autocomplete.md ================================================ title: Advanced dropdown column type keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by description: Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing javascript tables using categories and images in your dropdowns. # Dropdown and autocomplete column type Jspreadsheet brings a very powerful, flexible and responsive dropdown column type to support a better user experience through your applications. The new dropdown column options include autocomplete, multiple options, data picker, different template types and much more advantages, such as: * Create a simple dropdown from array * Value or key-value select is available * Populate a dropdown from a external JSON request * Dynamic autocomplete search based on another column value * Conditional dropdowns: options from a dropdown based on a method return * Multiple selection and internal dropdown search * Responsive data picker with multiple render types * Image icon and group items ## Multiple and autocomplete options The highlight features introduced in the most version of the vanilla javascript spreadsheet is definitely the autocomplete and multiple options. The following example shows the column Product Origin with the autocomplete and multiple directives initiated as true. ### Source code ```html ``` ## Conditional dropdown The example below shows the dependency of the second column in relation to the first. ```html ``` ## Group, images, and advanced render options Improve the user experience with a responsive data picker. ### Source code ```html ``` More options for the dropdowns, please refer to the [jSuites documentation](https://jsuites.net/v4). ================================================ FILE: docs/jspreadsheet/v4/examples/events.md ================================================ title: Handling events on Jspreadsheet keywords: Jexcel, javascript, excel-like, spreadsheet, table, grid, events description: Learn how to handle events on Jspreadsheet # Handling events ## Various tracking javascript methods Binding events on your javascript spreadsheet. [See a list of all event handlers](/jspreadsheet/v4/docs/events) ### Source code ```html ``` ## Global Super event One method to handle all events on the online spreadsheet. **NOTE** : Open the console to see the events. ================================================ FILE: docs/jspreadsheet/v4/examples/footers.md ================================================ title: Adding formulas fixed on the table footer keywords: Jexcel, javascript, multiple spreadsheets, formulas, table footer description: Adding formulas fixed on the table footer. # Table footer Adding fixed custom calculations in the footer of an online spreadsheet. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/freeze-columns.md ================================================ title: Freeze columns keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data, frezee columns description: Setup freeze columns in Jspreadsheet # Freeze columns Define the number of freeze columns by using the freezeColumn directive with tableOverflow as follow ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/headers.md ================================================ title: Header updates & column dragging keywords: Jexcel, spreadsheet, javascript, header updates, programmatically header updates, enable column dragging description: Header updates and column dragging # Header updates There are three ways to change a header title. * The user clicks in a selected header and hold the mouse for 2 seconds, a prompt will request the new title; * Via contextMenu. the user right clicks in the column and select the option Rename column * Using the method setHeader(colNumber, title) as example below: ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/image-upload.md ================================================ title: Embed images to your spreadsheet using base64 keywords: Jexcel, javascript, excel-like, spreadsheet, image upload, base64, embed images description: This examples shows how to embed and upload images to your spreadsheet # Embed images into your spreadsheet The following examples shows how to embed images into your spreadsheet. ## Load a local image to your table Load images from your local machine into your javascript spreadsheet ### Source code ```html ``` ## Embed remote images to your table Automatic image rendering from a remote URL using updateTable method ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/import-data.md ================================================ title: Load data from CSV or JSON or XLSX keywords: Jexcel, javascript, excel-like, spreadsheet, loading data, csv, json, xlsx. description: How to import data from an external CSV, json file or XLSX. # Create a javascript spreadsheet There are a few different ways to load data to your javascript spreadsheet shown in the next four examples below ## Based on a external CSV file The example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers. ### Source code ```html ``` ## Based on an external JSON file In a similar way, you can create a table based on an external JSON file format by using the _url: directive_ as below. ### Source code ```html ``` ## Based on an JSON object The data directiva can be used to define a JSON object. In this case you can define by the name directive the order of the columns. ### Source code ```html ``` ## Importing from a XLSX file The following example imports the data from a XLSX file using a thirdy party library, slighly customized in order to improve the CSS parser. IMPORTANT: This is an experimental implementation and there is no garantee your spreadsheet will be correctly parsed. ### Source code ```html ``` **NOTE** : This example is based on a customized version of the free version of [Sheetjs](https://sheetjs.com/). There is no garantee in the use of this library. Please consider purchase their professional version. ================================================ FILE: docs/jspreadsheet/v4/examples/jquery.md ================================================ title: Jspreadsheet with Jquery keywords: Jexcel, javascript, using Jspreadsheet and Jquery description: A full example on how to integrate Jspreadsheet with Jquery # Jquery Creating a Jspreadsheet javascript instance using jQuery ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/lazy-loading.md ================================================ title: Dealing with big spreadsheets through lazy loading keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data description: This example brings a very nice feature to deal with large table datasets. # Lazy loading The following table is dealing with 60.000 columns. The lazyloading method allows render up to 130 rows at the same time and will render other rows based on the scrolling. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/merged-cells.md ================================================ title: How to merge the spreadsheet cells keywords: Jexcel, spreadsheet, javascript, javascript table, merged cells description: Full example on how to handle merge cells in your javascript tables. # Merged cells You can merge cells on your spreadsheet in the table initialization or programatically as follow: The following methods are available for merge cells management: _setMerge, getMerge, removeMerge, destroyMerged_ ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/meta-information.md ================================================ title: Meta information keywords: Javascript spreadsheet, javascript, javascript table, meta information description: Keep hidden information about your cells using meta information methods # Meta information This feature helps you keep import information about the cells hidden from users. You can define any meta information during the initialization or programatically after that thought getMeta or setMeta methods. Set meta data for multiple columns Set a meta information for B2 Get the meta information for A1 Get all meta information ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/nested-headers.md ================================================ title: Nested headers and column header updates keywords: Jexcel, spreadsheet, javascript, header updates, nested headers, javascript table description: Enabled nested headers in your spreadsheet and learn how to set or get header values # Headers ## Nested headers The online spreadsheet implements nested headers natively though the directive **nestedHeaders** , as example below: ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/programmatically-changes.md ================================================ title: Programmatic Data Grid Updates in Jspreadsheet v4 keywords: Jexcel, JavaScript, spreadsheet updates, programmatically modify data, JavaScript data grid, Excel-like functionality description: Learn how to programmatically update your spreadsheet and its data using JavaScript with Jspreadsheet v4. canonical: https://bossanova.uk/jspreadsheet/v4/examples/programmatically-updates # Programmatically Data Grid Updates ## Insert, remove and move columns and rows The following example shows how to manage data programmatically in your javascript spreadsheet. ### Source code ```html
``` ## Updating column width and row height Update the table width and height properties. ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/programmatically-updates.md ================================================ title: Programmatic Data Grid Updates in Jspreadsheet v4 keywords: Jexcel, JavaScript, spreadsheet updates, programmatically modify data, JavaScript data grid, Excel-like functionality description: Learn how to programmatically update your spreadsheet and its data using JavaScript with Jspreadsheet v4. canonical: https://bossanova.uk/jspreadsheet/v4/examples/programmatically-updates # Programmatically Data Grid Updates ## Insert, remove and move columns and rows The following example shows how to manage data programmatically in your javascript spreadsheet. ### Source code ```html
``` ## Updating column width and row height Update the table width and height properties. ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/react.md ================================================ title: Jspreadsheet with React keywords: Jexcel, javascript, using jspreadsheet and react description: A full example on how to integrate Jspreadsheet with React # The Javascript spreadsheet with React ### 1\. Integrating Jspreadsheet with React [React with Jspreadsheet sample project](https://codesandbox.io/s/jexcel-and-react-k7nf0) {.ignore} ```jsx import React from "react"; import ReactDOM from "react-dom"; import jexcel from "jexcel"; import "./styles.css"; import "../node_modules/jexcel/dist/jexcel.css"; class App extends React.Component { constructor(props) { super(props); this.options = props.options; this.wrapper = React.createRef(); } componentDidMount = function() { this.el = jexcel(this.wrapper.current, this.options); }; addRow = function() { this.el.insertRow(); }; render() { return (
this.addRow()} />
this.addRow()}>
``` ## Disable the table sorting The ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization. ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/spreadsheet-formulas.md ================================================ title: Basic to advance use of formulas keywords: Jexcel, javascript, excel-like, spreadsheet, formulas, currency, calculations description: Unleash the power of your tables bringing formulas and custom javascript methods on your Jspreadsheet spreadsheet. # Adding formulas on your online spreadsheet ## Simple spreadsheet-like formula usage The example below shows how to use spreadsheet like formulas on your javascript table spreadsheet. ### Source code ```html ``` ## Creating Custom formulas You can declare custom javascript methods and use in your tables as the example below. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/spreadsheet-toolbars.md ================================================ title: Enable and customize the toolbar on your spreadsheet keywords: Jexcel, javascript, vanilla javascript, excel-like, spreadsheet, datatables, data, table, toolbars description: Full example on how to enable nor customize your javascript spreadsheet toolbar. # Custom toolbars The following example shows how to include and customize a toolbar in your javascript spreadsheet. ## Instructions The toolbar can be customized with a few parameters. | | | | ---|--- | | _**type**_| could be **i** for icon, **select** for a dropdown, **color** or a colorpicker. | | _**content**_| defines the icon (from material icons) when you use type:i; [click here for all possible keys](https://material.io/tools/icons/) | | _**k**_| means the style should be apply to the cell; | | _**v**_| means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; | | _**onclick**_| can be used together with type:i to implement any custom method. The method will receive the Jspreadsheet instance and all marked cells by default. | ### Source code ```html ``` **NOTE:** don't forget to include the material icons style sheet. ================================================ FILE: docs/jspreadsheet/v4/examples/spreadsheet-webcomponent.md ================================================ title: Jspreadsheet Webcomponent keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data, webcomponent description: Use the Jspreadsheet datagrid as webcomponent # Javascript web component online spreadsheet ## Create a online javascript spreadsheet using Jspreadsheet Ce. ### Javascript {.ignore} ```javascript class Jspreadsheet extends HTMLElement { constructor() { super(); } init(o) { // Shadow root const shadowRoot = this.attachShadow({mode: 'open'}); // Style const css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css' css.href = 'https://bossanova.uk/spreadsheet/v4/spreadsheet.css'; shadowRoot.appendChild(css); const css2 = document.createElement('link'); css2.rel = 'stylesheet'; css2.type = 'text/css' css2.href = 'https://bossanova.uk/spreadsheet/v4/jsuites.css'; shadowRoot.appendChild(css2); // Jspreadsheet container var container = document.createElement('div'); shadowRoot.appendChild(container); // Create element this.el = jspreadsheet(container, { root: shadowRoot, minDimensions: [10,10] }); } connectedCallback() { this.init(this); } disconnectedCallback() { } attributeChangedCallback() { } } window.customElements.define('j-spreadsheet', Jspreadsheet); ``` ### HTML ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/tabs.md ================================================ title: Grouping multiple spreadsheets in tabs keywords: Jexcel, javascript, multiple spreadsheets, tabs description: Grouping multiple spreadsheets in tabs. # Tabs Grouping different spreadsheets in tabs ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples/translations.md ================================================ title: How to translate the default messages from Jspreadsheet Version 4 keywords: Jexcel, spreadsheet, javascript, javascript table, translate, translations description: How to translate the default messages from Jspreadsheet # Jspreadsheet internationalization How to update the default texts from the online spreadsheet. ### Source code ```html ``` ================================================ FILE: docs/jspreadsheet/v4/examples/vue.md ================================================ title: Jspreadsheet with Vue keywords: Jexcel, javascript, using jspreadsheet and Vue description: A full example on how to integrate Jspreadsheet with Vue # The Javascript spreadsheet with Vue Integrating Jspreadsheet with Vue [See a full example on codesandbox](https://codesandbox.io/embed/vue-default-template-p4hwn) [Get a source code of a sample Vue project](https://github.com/jspreadsheet/jexcel-with-vue) ### Source code ```html
``` ================================================ FILE: docs/jspreadsheet/v4/examples.md ================================================ title: Examples keywords: Jexcel, javascript, examples description: Examples how to create web based spreadsheets using Jspreadsheet. # Jspreadsheet v4 Examples We bring in this section various examples from basic to advance applications. * [Angular](/jspreadsheet/v4/examples/angular) * [Column Dragging](/jspreadsheet/v4/examples/column-dragging) * [Column Filters](/jspreadsheet/v4/examples/column-filters) * [Column Types](/jspreadsheet/v4/examples/column-types) * [Comments](/jspreadsheet/v4/examples/comments) * [Contextmenu](/jspreadsheet/v4/examples/contextmenu) * [Create From Table](/jspreadsheet/v4/examples/create-from-table) * [Custom Table Design](/jspreadsheet/v4/examples/custom-table-design) * [Datatables](/jspreadsheet/v4/examples/datatables) * [Date And Datetime Picker](/jspreadsheet/v4/examples/date-and-datetime-picker) * [Dropdown And Autocomplete](/jspreadsheet/v4/examples/dropdown-and-autocomplete) * [Events](/jspreadsheet/v4/examples/events) * [Footers](/jspreadsheet/v4/examples/footers) * [Freeze Columns](/jspreadsheet/v4/examples/freeze-columns) * [Headers](/jspreadsheet/v4/examples/headers) * [Image Upload](/jspreadsheet/v4/examples/image-upload) * [Import Data](/jspreadsheet/v4/examples/import-data) * [Jquery](/jspreadsheet/v4/examples/jquery) * [Lazy Loading](/jspreadsheet/v4/examples/lazy-loading) * [Merged Cells](/jspreadsheet/v4/examples/merged-cells) * [Meta Information](/jspreadsheet/v4/examples/meta-information) * [Nested Headers](/jspreadsheet/v4/examples/nested-headers) * [Programmatically Updates](/jspreadsheet/v4/examples/programmatically-updates) * [React](/jspreadsheet/v4/examples/react) * [Readonly](/jspreadsheet/v4/examples/readonly) * [Richtext Html Editor](/jspreadsheet/v4/examples/richtext-html-editor) * [Sorting](/jspreadsheet/v4/examples/sorting) * [Spreadsheet Formulas](/jspreadsheet/v4/examples/spreadsheet-formulas) * [Spreadsheet Toolbars](/jspreadsheet/v4/examples/spreadsheet-toolbars) * [Spreadsheet Webcomponent](/jspreadsheet/v4/examples/spreadsheet-webcomponent) * [Table Overflow](/jspreadsheet/v4/examples/table-overflow) * [Table Scripting](/jspreadsheet/v4/examples/table-scripting) * [Table Style](/jspreadsheet/v4/examples/table-style) * [Tabs](/jspreadsheet/v4/examples/tabs) * [Translations](/jspreadsheet/v4/examples/translations) * [Vue](/jspreadsheet/v4/examples/vue) ================================================ FILE: docs/jspreadsheet/v4/getting-started.md ================================================ title: Getting Started with Jspreadsheet CE v4 keywords: Jspreadsheet CE, Jexcel, JavaScript data grid, spreadsheets, JavaScript tables, Excel-like data grids, web-based spreadsheets, interactive data grid controls, spreadsheet features description: Learn how to create and manage data grids with powerful spreadsheet controls using Jspreadsheet CE v4. canonical: https://bossanova.uk/jspreadsheet/v4/docs/getting-started # Getting started Jspreadsheet is a vanilla javascript plugin to embed a online spreadsheet in your web based applications. Bring highly dynamic datasets to your application and improve the user experience of your software. ## Install ### NPM ```bash npm install jspreadsheet-ce@4 ``` ### CDN Use jspreadsheet directly from JSDelivr CDN {.ignore} ```html ``` ### GitHub Download from our GitHub page [https://github.com/jspreadsheet/ce](https://github.com/jspreadsheet/ce) ## Initialization You can initiate an online spreadsheet including data from a HTML table, a JS array, a CSV or a JSON file, following the examples below: ### Loading from a javascript array ```html ``` ### Loading from a JSON file ```html ``` ### Loading from a CSV file ```html ``` [See a working example](/jspreadsheet/v4/examples/import-data) ### Headers from a CSV file If you are loading your data from a CSV file, you can define the **csvHeader:true**, so the first row will be used as your column names. [See a working example](/jspreadsheet/v4/examples/import-data) ### Programmatically header updates The methods **setHeader()**, **getHeader()** and **getHeaders()** are available for the developer to interact programmatically with the spreadsheet. [Working example](/jspreadsheet/v4/examples/headers#Programmatically-header-updates) ### Nested headers The nested headers area available in the innitialization through the directive **nestedHeaders:[]**, and should be use follow: ```html ``` [See this example in action](/jspreadsheet/v4/examples/headers) ## Column width The initial width can be defined in the width property in the column parameter. ```html ``` ### Programmatically column width updates The methods setWidth(), getWidth() are available for the developer to update the column width via javascript. [See this example in action](/jspreadsheet/v4/examples/programmatically-updates#setWidth) ## Row height The initial row height can be defined in the height property include in the rows directive. It is also possible to enabled a resizeble row by using rowResize: true in the initialization. ```html ``` ### Programmatically row height updates The methods setHeight(), getHeight() are available for the developer to update the row height via javascript. [See this example in action](/jspreadsheet/v4/examples/programmatically-updates#setHeight) ## Column types Jspreadsheet has available some extra native column types in addition to the default input text. It means you have extended nice responsive ways to get data into your spreadsheet. In addition to that is available integration methods to facilitate you to bring any custom column to your tables. This makes the Jspreadsheet plugin a very flexible tool to enhance the user experience of your applications. Jspreadsheet is integrate with jSuites, so it brings some native columns, such as: **text, numeric, hidden, dropdown, autocomplete, checkbox, radio, calendar, image and color.**_ {.ignore} ```html ``` ### Calendar type When using the calendar column, you can change the behavior behavior of your calendar by sending some extra options as example above. The possible values are: {.ignore} ```javascript { options : { // Date format format:'DD/MM/YYYY', // Allow keyboard date entry readonly:0, // Today is default today:0, // Show timepicker time:0, // Show the reset button resetButton:true, // Placeholder placeholder:'', // Translations can be done here months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], weekdays\_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'], // Value value:null, // Events onclose:null, onchange:null, // Fullscreen (this is automatic set for screensize < 800) fullscreen:false, } } ``` [See a working example](/jspreadsheet/v4/examples/date-and-datetime-picker) ### Dropdown and autocomplete type There are different ways to work with dropdowns in Jspreadsheet. It is possible to define the parameter _source_ as a simple or key-value array. It is also possible to use the param _url_ to populate your dropdown from an external json format source. In addition to that it is possible to have conditional values. Basically, the values from one dropdown can be conditional to other dropdowns in your table. You can set the autocomplete dropdown through the initial param _autocomplete:true_ and the multiple picker can be activate by _multiple:true_ property as shown in the following example: {.ignore} ```html ``` [See a working example](/jspreadsheet/v4/examples/dropdown-and-autocomplete) ### Custom type Jspreadsheet makes possible to extend third party javascript plugins to create your custom columns. Basically to use this feature, you should implement some basic methods such as: openEditor, closeEditor, getValue, setValue as following. {.ignore} ```html ``` [See a working example](/jspreadsheet/v4/examples/column-types#custom) ## Define a minimum table dimension size. The follow example will create a data table with a minimum number of ten columns and five rows: {.ignore} ```html ``` ### Clone our project http://github.com/jspreadsheet/ce ## Create amazing online spreadsheets A example how to embed a simple javascript spreadsheet in your application. You can check out for more [examples](/jspreadsheet/v4/examples) here. ```html ``` ## Jspreadsheet History ### Jspreadsheet 4.6.0 - Jexcel is renamed to Jspreadsheet. - Integration with Jsuites v4. ### Jspreadsheet 4.2.3 - The spreadsheet plugin is now compatible with Jsuites v3. - New flags and security implementations. - New DOM element references are in the toolbar, and worksheet events are tabbed. ### Jspreadsheet 4.0.0 Special thanks to [FDL - Fonds de Dotation du Libre](https://www.fdl-lef.org/) for their support and sponsorship, which made the new version possible with many exciting features. - Workbook/tab support for spreadsheets. - Create dynamic spreadsheets from static HTML elements. - Highlight selected cells in the spreadsheet after CTRL+C. - Footer with formula support. - Multiple column resizing. - JSON update support (helpers to update a remote server). - Centralized event dispatch method for all spreadsheet events. - Custom helpers: `=PROGRESS` (progress bar), `=RATING` (5-star rating). - Custom formula helpers: `=COLUMN`, `=ROW`, `=CELL`, `=TABLE`, `=VALUE`. - Dynamic nested header updates. - New HTML editing column type. - New flags: `includeHeadersOnCopy`, `persistence`, `filters`, `autoCasting`, `freezeColumns`. - New events: `onevent`, `onchangepage`, `onbeforesave`, `onsave`. - More examples and documentation. ### Jspreadsheet 3.9.0 - New methods. - General fixes. ### Jspreadsheet 3.6.0 - Improved spreadsheet formula parsing. - New spreadsheet events. - New initialization options. - General fixes. ### Jspreadsheet 3.2.3 - `getMeta`, `setMeta` methods. - NPM package with jSuites. - General fixes. ### Jspreadsheet 3.0.1 Jspreadsheet v3 is a complete rebuild of the JavaScript spreadsheet (previously a jQuery plugin). Due to the changes, full compatibility could not be ensured. If upgrading, your code may require some updates. For more information, refer to the article on upgrading from Jspreadsheet v2 or Handsontable. New features in Jspreadsheet v3: - Drag and drop columns. - Resizable rows. - Merge columns. - Search functionality. - Pagination. - Lazy loading. - Full-screen mode. - Image upload. - Native color picker. - Better mobile compatibility. - Enhanced nested headers support. - Advanced keyboard navigation. - Better hidden column management. - Data picker enhancements: dropdown, autocomplete, multiple selection, group options, and icons. - Import from XLSX (experimental). Major improvements: - A new formula engine with faster results and no external dependencies. - No use of selectors, leading to faster performance. - New native column types. - No jQuery required. - Examples for React, Vue, and Angular. - XLSX support via a custom SheetJS integration (experimental). ### Jspreadsheet 2.1.0 - Mobile touch improvements. - Paste fixes and a new CSV parser. ### Jspreadsheet 2.0.0 - New radio column type. - There is a new dropdown with autocomplete and multiple selection options. - Header/body separation for better scroll and column resize behaviour. - Text-wrap improvements, including Excel-compatible `alt+enter`. - New `set/get` meta information. - New `set/get` configuration parameters. - Programmatic `set/get` cell styles. - `set/get` cell comments. - Custom toolbar for tables. - Responsive calendar picker. ### Jspreadsheet 1.5.7 - Improvements to checkbox column type. - Updates to table destruction in jQuery. ### Jspreadsheet 1.5.1 - Spreadsheet data overflow and fixed headers. - Navigation improvements. ### Jspreadsheet 1.5.0 - Relative `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`. - Redo and undo support for `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`, `moveRow`. - New formula column recursive chain. - There is a new alternative design option (Bootstrap-like). - `updateSettings` improvements. ## Copyright and License Jspreadsheet CE is released under the MIT license. ## About Jspreadsheet Jspreadsheet is an original JavaScript software that facilitates data manipulation in web-based applications. It was inspired by other spreadsheet software and designed to be a lightweight, easy-to-use data input tool for users. This free software was developed as a lightweight alternative to create amazing online JavaScript spreadsheets. ================================================ FILE: docs/jspreadsheet.md ================================================ title: Jspreadsheet CE - The JavaScript Data Grid with Spreadsheet Controls keywords: Jspreadsheet CE, JavaScript spreadsheet, data grid, Excel-like functionality, JavaScript plugins, web components, data table, interactive spreadsheets, customizable grid, spreadsheet integration description: Jspreadsheet CE is a lightweight JavaScript data grid with powerful spreadsheet controls. Easily create interactive, customizable, and Excel-compatible web-based spreadsheets for seamless data management and enhanced user experience. canonical: https://bossanova.uk/jspreadsheet
JavaScript component to create web applications with spreadsheet UI
Free and open-source JavaScript component to create web applications with spreadsheet UI.
23k+
Weekly downloads
6700+
GitHub stars
MIT License
Free and open-sourceCompatible with
React, Angular, and Vue.
Jspreadsheet CE provides compatibility across different environments, ensuring your spreadsheet solution fits perfectly into your chosen stack.
A complete solution to make rich and user-friendly web applications
Fully customizable JavaScript spreadsheet library, offering various components to enhance web development projects.
Column Types
A variety of customisable column types
Nested Headers
Create multi-level column headers
Cell Comments
Add comments to your spreadsheet cells
Custom Toolbar
Personalize your spreadsheet toolbar
```html
```
```jsx
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet-ce/react";
import "jspreadsheet-ce/dist/jspreadsheet.css";
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [
['Hello', 13123, '', 'Yes', true, '#AA4411'],
['World!', 8, '', 'No', false, '#99BE23']
];
// Columns
const columns = [
{ type: 'text', title: 'Text' },
{ type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
{ type: 'calendar', title: 'Calendar' },
{ type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
{ type: 'checkbox', title: 'Checkbox' },
{ type: 'color', title: 'Color', width: 50, render: 'square' }
];
// Render component
return (
);
}
```
```vue
```
```angularjs
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jspreadsheet-ce/dist/jspreadsheet.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: [
['Hello', 13123, '', 'Yes', true, '#AA4411'],
['World!', 8, '', 'No', false, '#99BE23']
],
columns: [
{ type: 'text', title: 'Text' },
{ type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },
{ type: 'calendar', title: 'Calendar' },
{ type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },
{ type: 'checkbox', title: 'Checkbox' },
{ type: 'color', title: 'Color', width: 50, render: 'square' }
]
}],
});
}
}
```
```html
```
```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();
// Nested headers
const nestedHeaders = [
[
{
title: 'Supermarket information',
colspan: '6',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '3'
}
],
];
// Render component
return (
<>
);
}
```
```vue
```
```angularjs
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: [[]],
minDimensions: [5, 2],
nestedHeaders:[
[
{
title: 'Supermarket information',
colspan: '6',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '3'
}
],
]
}]
});
}
}
```
```html
```
```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 (
<>
);
}
```
```vue
```
```angularjs
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet-ce";
import "jsuites/dist/jsuites.css";
import "jspreadsheet-ce/dist/jspreadsheet.css";
@Component({
standalone: true,
selector: "app-root",
template: ``
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{
data: [
['US', 'Cheese', '2019-02-12'],
['CA', 'Apples', '2019-03-01'],
['CA', 'Carrots', '2018-11-10'],
['BR', 'Oranges', '2019-01-12'],
],
columns: [
{ width: '170px' },
{ width: '170px' },
{ width: '170px' },
],
allowComments: true,
comments: {
B1: 'Initial comments on B1',
C1: 'Initial comments on C1'
},
}
],
});
}
}
```
```html
```
```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 toolbar = function(toolbar) {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
}
return (
<>
);
}
```
```vue
```
```angularjs
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, {
toolbar: function(toolbar) {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
},
worksheets: [{
minDimensions: [6, 2]
}]
});
}
}
```
Create an online spreadsheet from various data formats
With Jspreadsheet, you can quickly create online spreadsheets using JavaScript arrays, JSON, CSV, and XLSX files. This flexibility simplifies data integration and minimizes your application's need for complex processing.
Deliver high-quality interfaces and applications to your end-user
Jspreadsheet reduces customers development time.
Here are some of their experiences.
Rich Interfaces
Make rich and user-friendly web interfaces and applications
User-Friendly Inputs
You can easily handle complicated data inputs in a way users are used to
Enhanced Experience
Improve your user software experience
Beautiful CRUDs
Create rich CRUDS and beautiful UI
Compatibility with excel spreadsheets
Users can move data around with common copy and paste shortcuts
Easy Customization
Easy customizations with easy third-party plugin integrations
Fast and Simple
Lean, fast and simple to use
Faster Data Entry
Speed up your work dealing with difficult data entry in a web-based software
Shareable Spreadsheets
Create and share amazing online spreadsheets
Component Ecosystem
Explore the powerful and versatile components designed to elevate your productivity. From data management to collaboration, our ecosystem seamlessly integrates to meet your needs.
Jspreadsheet Pro
Enterprise JavaScript data grid component to integrate spreadsheet UI into your web-based application.
Intrasheets
Collaborate with ease using Intrasheets, an intuitive tool for managing spreadsheets across teams, ensuring that everyone stays on the same page.
Jsuites
Comprehensive JavaScript plugins and web components for diverse web-based applications and requirements.
LemonadeJS
A light and easy-to-use solution for creating elegant UI elements, giving your web apps a refreshing boost in both style and functionality.
Subscribe to our newsletter
Tech news, tips and technical advice