\n\n## Development\n\n### Build your package\n\n% npm run build\n\n### Start a web service\n\n% npm run start\n\n## Data Grid Examples\n\n- https://bossanova.uk/jspreadsheet/docs/examples/create-from-table\n- https://bossanova.uk/jspreadsheet/docs/examples/translations\n- https://bossanova.uk/jspreadsheet/docs/examples/table-overflow\n- https://bossanova.uk/jspreadsheet/docs/examples/richtext-html-editor\n- https://bossanova.uk/jspreadsheet/docs/examples/column-dragging\n- https://bossanova.uk/jspreadsheet/docs/examples/web-component\n- https://bossanova.uk/jspreadsheet/docs/examples/jquery\n\n## Jspreadsheet Changelog\n\n### Custom\n\n- Add onupdateresult event after search/filter;\n\n### Jspreadsheet 5.0.0\n\n- Separation of spreadsheet and worksheets;\n- New worksheet methods and events;\n- Dedicated wrappers for React and Vue for better framework integration;\n- Modern development environment powered by Webpack;\n- Updated architecture aligned with other distributions;\n\n[More information](https://bossanova.uk/jspreadsheet/docs/upgrade-from-v4-to-v5)\n\n### Jspreadsheet 4.6.0\n\n- Jexcel renamed to Jspreadsheet.\n- Integration with Jsuites v4.\n\n### Jspreadsheet 4.2.3\n\n- The spreadsheet plugin is now compatible with Jsuites v3.\n- New flags and security implementations.\n- New DOM element references in the toolbar.\n- Worksheet events are now tabbed.\n\n### Jspreadsheet 4.0.0\n\nSpecial 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.\n\n- Workbook/tab support for spreadsheets.\n- Create dynamic spreadsheets from static HTML elements.\n- Highlight selected cells in the spreadsheet after CTRL+C.\n- Footer with formula support.\n- Multiple column resizing.\n- JSON update support (helpers to update a remote server).\n- Centralized event dispatch method for all spreadsheet events.\n- Custom helpers: `=PROGRESS` (progress bar), `=RATING` (5-star rating).\n- Custom formula helpers: `=COLUMN`, `=ROW`, `=CELL`, `=TABLE`, `=VALUE`.\n- Dynamic nested header updates.\n- New HTML editing column type.\n- New flags: `includeHeadersOnCopy`, `persistence`, `filters`, `autoCasting`, `freezeColumns`.\n- New events: `onevent`, `onchangepage`, `onbeforesave`, `onsave`.\n- More examples and documentation.\n\n### Jspreadsheet 3.9.0\n\n- New methods.\n- General fixes.\n\n### Jspreadsheet 3.6.0\n\n- Improved spreadsheet formula parsing.\n- New spreadsheet events.\n- New initialization options.\n- General fixes.\n\n### Jspreadsheet 3.2.3\n\n- `getMeta`, `setMeta` methods.\n- NPM package with jSuites.\n- General fixes.\n\n### Jspreadsheet 3.0.1\n\nJspreadsheet 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.\n\n**New features in Jspreadsheet v3:**\n\n- Drag and drop columns.\n- Resizable rows.\n- Merge columns.\n- Search functionality.\n- Pagination.\n- Lazy loading.\n- Full-screen mode.\n- Image upload.\n- Native color picker.\n- Better mobile compatibility.\n- Enhanced nested headers support.\n- Advanced keyboard navigation.\n- Better hidden column management.\n- Data picker enhancements: dropdown, autocomplete, multiple selection, group options, and icons.\n- Import from XLSX (experimental).\n\n**Major improvements:**\n\n- A new formula engine with faster results and no external dependencies.\n- No use of selectors, leading to faster performance.\n- New native column types.\n- No jQuery required.\n- Examples for React, Vue, and Angular.\n- XLSX support via a custom SheetJS integration (experimental).\n\n### Jspreadsheet 2.1.0\n\n- Mobile touch improvements.\n- Paste fixes and a new CSV parser.\n\n### Jspreadsheet 2.0.0\n\n- New radio column type.\n- New dropdown with autocomplete and multiple selection options.\n- Header/body separation for better scroll and column resize behavior.\n- Text-wrap improvements, including Excel-compatible `alt+enter`.\n- New `set/get` meta information.\n- New `set/get` configuration parameters.\n- Programmatic `set/get` cell styles.\n- `set/get` cell comments.\n- Custom toolbar for tables.\n- Responsive calendar picker.\n\n### Jspreadsheet 1.5.7\n\n- Improvements to checkbox column type.\n- Updates to table destruction in jQuery.\n\n### Jspreadsheet 1.5.1\n\n- Spreadsheet data overflow and fixed headers. See an [example](https://jspreadsheet.com/examples/table-with-fixed-headers).\n- Navigation improvements.\n\n### Jspreadsheet 1.5.0\n\n- Relative `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`. See an [example](https://jspreadsheet.com/examples/working-with-the-data).\n- Redo and undo support for `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`, `moveRow`.\n- New formula column recursive chain.\n- New alternative design option (Bootstrap-like). See an [example](https://jspreadsheet.com/examples/a-custom-table-design).\n- `updateSettings` improvements.\n\n## Official websites\n\n- [Jspreadsheet CE v4 - Javascript Spreadsheet](https://bossanova.uk/jspreadsheet/v4)\n- [Jspreadsheet CE v3 - Vanilla JavaScript](https://bossanova.uk/jspreadsheet/v3)\n- [Jspreadsheet CE v2 - jQuery Plugin](https://bossanova.uk/jspreadsheet/v2)\n- [Jspreadsheet Pro v11 - Javascript Spreadsheet](https://jspreadsheet.com/docs)\n- [Jspreadsheet Pro v10 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v10)\n- [Jspreadsheet Pro v9 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v9)\n- [Jspreadsheet Pro v8 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v8)\n- [Jspreadsheet Pro v7 - Javascript Spreadsheet](https://jspreadsheet.com/docs/v7)\n\n## Community\n\n- [GitHub](https://github.com/jspreadsheet/ce/issues)\n\n## Contributing\n\nSee [contributing](contributing.md)\n\n## Copyright and license\n\nJspreadsheet CE is released under the [MIT license]. Contact contact@jspreadsheet.com\n\n## Other tools\n\n- [LemonadeJS Reactive Library](https://lemonadejs.com)\n- [jSuites Components](https://jsuites.net)\n- [CalendarJS](https://calendarjs.com)\n" }, { "path": "build.cjs", "content": "module.exports = function (source) {\n let result = source.replace(/import\\s+jSuites\\s+from\\s+(?:'|\")jsuites(?:'|\");?/gm, '');\n\n result = result.replace(/import\\s+formula\\s+from\\s+(?:'|\")@jspreadsheet\\/formula(?:'|\");?/gm, '');\n\n return result;\n};\n" }, { "path": "contributing.md", "content": "# Contributing\n\nWhen contributing to this repository, please follow the following process\n\n## Pull Request Process\n\n1. Create a fork of this repo\n2. Create a branch named according to what you are developing (new-feature, fix-issue)\n3. Make your changes\n4. Create a Pull Request (PR) against origin:dev branch (origin:master)\n5. Comment your PR explaining your changes, if it resolves an issue or adds a feature, also modify documentation accordingly if necessary.\n6. Wait for yout PR to be reviewed and approved\n\n## Steps to run the project locally after forking the repository.\n\nOpen [http://localhost:8000](http://localhost:8000/) in your browser, or check the devServer settings in webpack.config.js if the port is different.\nAlternatively, you can change the port in the webpack.config.js file.\n\n# Code of Conduct\n\n### Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\n### Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n### Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n### Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n### Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n### Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n" }, { "path": "dist/index.d.ts", "content": "export = jspreadsheet;\nexport as namespace jspreadsheet;\n\ndeclare const jspreadsheet: jspreadsheet.JSpreadsheet;\n\ndeclare namespace jspreadsheet {\n type CellValue = string | number | boolean;\n\n type DropdownSourceItem =\n | string\n | number\n | {\n id: string | number;\n name: string;\n title?: string;\n image?: string;\n group?: string;\n };\n\n interface CalendarOptions {\n /**\n * @default \"YYYY-MM-DD\"\n */\n format?: string;\n\n /**\n * Open calendar in full screen mode (this is automatic set for screensize < 800).\n */\n fullscreen?: boolean;\n\n /** Placeholder. */\n placeholder?: string;\n\n /**\n * Allow keyboard date entry.\n * @default true\n */\n readonly?: boolean;\n\n /**\n * Show the reset button.\n * @default true\n */\n resetButton?: boolean;\n\n /**\n * Show timepicker.\n * @default false\n */\n time?: boolean;\n\n /** Today is default. */\n today?: boolean;\n }\n\n interface CustomEditor {\n /**\n * Event responsible for closing the editor of a cell with a custom editor.\n * @param cell - Td tag whose editor should close.\n * @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.\n * @param x - Cell column index.\n * @param y - Cell row index.\n * @param instance - Worksheet instance.\n * @param options - Column configuration object.\n * @returns New cell value.\n */\n closeEditor?: (cell: HTMLTableCellElement, save: boolean, x: number, y: number, instance: WorksheetInstance, options: Column) => CellValue | undefined;\n\n /**\n * Event called when creating new cells.\n * @param cell - HTML element prepared to be the new cell.\n * @param value - Cell value.\n * @param x - Cell column index.\n * @param y - Cell row index.\n * @param instance - Worksheet instance.\n * @param options - Column configuration object.\n * @returns HTML element that will be the new cell.\n */\n createCell?: (cell: HTMLTableCellElement, value: CellValue, x: number, y: number, instance: WorksheetInstance, options: Column) => HTMLTableCellElement;\n\n /**\n * Event responsible for opening the editor of a cell with a custom editor.\n * @param cell - Td tag whose editor should open.\n * @param value - Cell value.\n * @param x - Cell column index.\n * @param y - Cell row index.\n * @param instance - Worksheet instance.\n * @param options - Column configuration object.\n * @param e - Event that called this method.\n */\n openEditor?: (\n cell: HTMLTableCellElement,\n value: CellValue,\n x: number,\n y: number,\n instance: WorksheetInstance,\n options: Column,\n e: KeyboardEvent | MouseEvent | TouchEvent | undefined\n ) => void;\n\n /**\n * Event called before changing the value of a cell.\n *\n * The returned value will be the cell's new value.\n * @param cell - Cell whose value has changed.\n * @param value - New value.\n * @param x - Cell column index.\n * @param y - Cell row index.\n * @param instance - Worksheet instance.\n * @param options - Column configuration object.\n */\n updateCell?: (\n cell: HTMLTableCellElement,\n value: CellValue | undefined,\n x: number,\n y: number,\n instance: WorksheetInstance,\n options: Column\n ) => CellValue | undefined;\n }\n\n type HorizontalAlign = 'center' | 'left' | 'right' | 'justify';\n\n interface BaseColumn {\n /** Cell alignment. */\n align?: HorizontalAlign;\n\n decimal?: string;\n\n /** Cell mask. */\n mask?: string;\n\n /** Name used to refer to this column if the data is arranged as an array of objects. */\n name?: string;\n\n /**\n * Prevent user from changing cell values.\n * @default false\n */\n readOnly?: boolean;\n\n /**\n * Defines a modification that must be made to a cell value before it is displayed in the spreadsheet.\n * @param cell - Cell whose value has changed.\n * @param value - New value.\n * @param x - Cell column index.\n * @param y - Cell row index.\n * @param instance - Worksheet instance.\n * @param options - Column configuration object.\n */\n render?: (cell: HTMLTableCellElement, value: CellValue | undefined, x: number, y: number, instance: WorksheetInstance, options: Column) => void;\n\n /** Custom column title. */\n title?: string;\n\n /**\n * The type of cells in this column.\n * @default \"text\"\n */\n type?: 'text' | 'numeric' | 'hidden' | 'dropdown' | 'autocomplete' | 'checkbox' | 'radio' | 'calendar' | 'image' | 'color' | 'html' | CustomEditor;\n\n /** Column width. */\n width?: string | number;\n\n /**\n * Enable automatic word wrapping in cells in this column.\n * @default false\n */\n wordWrap?: boolean;\n }\n\n interface DropdownColumn extends BaseColumn {\n autocomplete?: boolean;\n\n /**\n * Allow selection of more than one item.\n * @default false\n */\n multiple?: boolean;\n\n /** Options available in the dropdown. */\n source?: DropdownSourceItem[];\n\n /** Url to fetch options from an external source. */\n url?: string;\n }\n\n interface CalendarColumn extends BaseColumn {\n /** Calendar options. */\n options?: CalendarOptions;\n }\n\n interface ColorColumn extends Omit
\n\n\n{data-text=\"Jspreadsheet\" .center}\n# Contact Us\n\n
\n\n
\n\n\n"
},
{
"path": "docs/jspreadsheet/demo.md",
"content": "title: Jspreadsheet Demo Page \nkeywords: 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 \ndescription: Explore working examples of Jspreadsheet in action. See how it delivers interactive, customizable data grid solutions for web-based applications. \ncanonical: https://bossanova.uk/jspreadsheet/demo\n\n\n\n
\n
\n\n\n\n#### Upgrades\n\nLooking for more information? \n\nEmail: [contact@jspreadsheet.com](mailto:contact@jspreadsheet.com)\n\n[Contact Us](mailto:contact@jspreadsheet.com){.button .dark target=\"_blank\"}\n\n
\n\n#### Technical Support\n\nProfessional Technical Support\n\nEmail: [support@jspreadsheet.com](mailto:support@jspreadsheet.com)\n\n[Talk to us](mailto:support@jspreadsheet.com){.button .dark target=\"_blank\"}\n\n
\n\n#### Github\n\nGitHub repository: \n\n[https://github.com/jspreadsheet/ce](https://github.com/jspreadsheet/ce)\n\n[](https://github.com/jspreadsheet/ce){target=\"_blank\"}\n\n
\n \n\n{data-text=\"Demo\"}\n# Data Grid Demo\n\nExplore 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.\n\n
\n"
},
{
"path": "docs/jspreadsheet/docs/angular.md",
"content": "title: Angular Spreadsheet\nkeywords: Angular, Jspreadsheet, data grid, spreadsheet controls, TypeScript, Angular integration, JavaScript grid, Angular application, interactive spreadsheets, data grid functionality \ndescription: Create advanced data grids in Angular applications using Jspreadsheet. Integrate spreadsheet-like controls with TypeScript support for enhanced interactivity and data management.\n\n# Angular Spreadsheet\n\n## Overview\n\nCreate 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.\n\n## Documentation\n\n### Installation\n\nInstall Jspreadsheet for Angular using npm:\n\n```bash\nnpm install jspreadsheet-ce@5.0.0-beta.3\n```\n\n### Importing Stylesheets\n\nInclude the necessary styles for Jspreadsheet and Jsuites in your Angular project. Add the following to the styles array in your angular.json file:\n\n```json\n\"styles\": [\n \"jsuites/dist/jsuites.css\",\n \"jspreadsheet-ce/dist/jspreadsheet.css\"\n]\n```\n\n## Examples\n\n### Basic Angular Spreadsheet\n\nHere'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.\n\n```typescript\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\n\n@Component({\n selector: \"app-root\",\n templateUrl: \"./app.component.html\",\n styleUrls: [\"./app.component.css\"]\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n\n ngAfterViewInit() {\n // Create the spreadsheet\n jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [\n {\n data: [\n ['Yes', '#ff0000'],\n ['No', '#00ff00']\n ],\n minDimensions: [6, 4],\n columns: [\n {\n type: \"dropdown\",\n width: 100,\n source: [\"Yes\", \"No\"]\n },\n {\n type: \"colour\",\n width: 100,\n render: \"square\"\n }\n ],\n allowComments: true,\n comments: {\n A1: \"Select Yes or No\",\n B1: \"Choose a colour.\"\n }\n }\n ]\n });\n }\n}\n```\n\n### Data from External Sources\n\nUse Angular's HttpClient to load or save data dynamically from an API and pass it to Jspreadsheet.\n\n{.ignore}\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport { HttpClient } from '@angular/common/http';\nimport jspreadsheet from \"jspreadsheet-ce\";\n\n@Component({\n selector: \"app-root\",\n templateUrl: \"./app.component.html\",\n styleUrls: [\"./app.component.css\"]\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n\n constructor(private http: HttpClient) {}\n\n ngAfterViewInit() {\n // Fetch data from an external API and initialize the spreadsheet\n this.http.get('https://api.example.com/spreadsheet-data')\n .subscribe((data: any[][]) => {\n jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [\n {\n data: data,\n columns: [\n { type: \"dropdown\", width: 100, source: [\"Yes\", \"No\"] },\n { type: \"checkbox\", width: 50 }\n ],\n minDimensions: [10, 5]\n }\n ]\n });\n });\n }\n}\n```\n\n### Online Spreadsheet with Angular\n\nA basic Angular spreadsheet with export to XLSX.\n\n- [Angular Online Spreadsheet](https://codesandbox.io/s/angular-spreadsheet-lbtcwf)\n- [Angular Data Grid with Spreadsheet Controls](https://stackblitz.com/edit/data-grid-with-spreadsheet-controls)\n- [Dynamic Spreadsheets](https://stackblitz.com/edit/online-spreadsheets)\n\n### Online XLSX Editor with Angular\n\nImport XLSX files and edit them online using Jspreadsheet Pro.\n\n- [Angular Spreadsheet XLSX Editor](https://codesandbox.io/s/online-angular-excel-spreadsheet-lk5bnc)\n\n### More Spreadsheet Angular Examples\n\n- [Data Grid Custom Cell Editor](https://stackblitz.com/~/github.com/nicolasjesse/jss-custom-column-ng)\n- [Angular Spreadsheet with Data Validation](https://stackblitz.com/edit/angular-data-validation-example)\n\n{.pro}\n> **Jspreadsheet Pro for Angular - Professional Spreadsheet Components**\n>\n> While Jspreadsheet CE provides core spreadsheet functionality for Angular, **Jspreadsheet Pro** offers enhanced Angular integration and enterprise features:\n>\n> **Enhanced Angular Integration:**\n> - **Full TypeScript Support:** Complete type definitions for type-safe Angular development\n> - **Angular Modules:** NgModule structure for easy integration into Angular apps\n> - **Standalone Components:** Support for Angular standalone components (Angular 14+)\n> - **Dependency Injection:** Full DI support for spreadsheet services\n> - **RxJS Integration:** Observable streams for reactive data handling\n> - **Angular Signals:** Support for Angular Signals (Angular 16+)\n>\n> **Professional Components:**\n> - **Advanced Editors:** Conditional dropdowns, rich text, HTML editors with Angular forms\n> - **Formula System:** 500+ Excel functions with Angular change detection\n> - **Conditional Formatting:** Visual rules, data bars, color scales, icon sets\n> - **Data Validation:** Real-time validation with Angular form validators\n> - **Import/Export:** Full Excel (.xlsx) import/export with formatting preservation\n> - **Charts & Graphs:** Built-in Angular chart components for data visualization\n>\n> **Angular Forms Integration:**\n> - **Reactive Forms:** Full integration with Angular Reactive Forms\n> - **Template-Driven Forms:** Support for template-driven form bindings\n> - **Form Validators:** Built-in and custom Angular validators\n> - **Form Control:** Spreadsheet as FormControl with validation\n> - **Two-Way Binding:** [(ngModel)] support for spreadsheet data\n> - **Form States:** Track pristine, dirty, touched, valid states\n>\n> **Performance & Scale:**\n> - **Virtual Scrolling:** Handle 100K+ rows with smooth scrolling\n> - **Lazy Loading:** Load data on-demand for optimal performance\n> - **Zone.js Optimized:** Efficient change detection with Angular zones\n> - **OnPush Strategy:** Support for OnPush change detection strategy\n> - **Web Workers:** Background processing for heavy calculations\n> - **AOT Compatible:** Fully compatible with Ahead-of-Time compilation\n>\n> **Developer Experience:**\n> - **Angular-Specific Documentation:** Examples with TypeScript and Angular patterns\n> - **Professional Support:** Priority support for Angular integration issues\n> - **Regular Updates:** Continuous Angular version compatibility (14, 15, 16, 17+)\n> - **Migration Tools:** Easy migration from CE to Pro with Angular examples\n>\n> **Angular-Specific Pro Features:**\n> - **Custom Angular Components:** Use Angular components as cell editors\n> - **Pipes Support:** Use Angular pipes for cell value transformation\n> - **Directives:** Custom directives for cell customization\n> - **Services:** Spreadsheet services for shared state management\n> - **Router Integration:** Deep linking and navigation integration\n> - **Testing Support:** Jasmine/Karma and Jest integration examples\n>\n> Perfect for Angular applications requiring enterprise-grade spreadsheet functionality with professional support.\n>\n> **[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)**\n"
},
{
"path": "docs/jspreadsheet/docs/cells.md",
"content": "title: Spreadsheet Cells\nkeywords: JavaScript, Jspreadsheet, Jexcel, Data Grid, Spreadsheet Features, Excel-like Functionality, Table Management, Cell Settings, Cell Configuration\ndescription: Detailed documentation on Jspreadsheet cell configuration, covering events, methods, and settings for advanced customization.\n\n# Spreadsheet Cells\n\nThis guide provides an in-depth overview of data grid cells in Jspreadsheet, including key methods, configuration options, and a basic implementation example. \n\n{.pro}\n> #### Differences in the Pro Version\n>\n> The Jspreadsheet Pro enables cell-level editor customization and allows dynamic programmatic changes to cell types.\\\n> \\\n> [Learn more](https://jspreadsheet.com/docs/cells){.button}\n\n## Documentation\n\n### Methods\n\nThis section outlines methods to facilitate interaction with cells and their attributes within the data grid.\n\n| Method | Description |\n|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n| `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;` |\n\n### Example\n\nThe following example is a car loan calculation spreadsheet showcasing styles, merged cells, and row properties.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n // Data\n const data = [\n ['Car loan', ''],\n ['Purchase price', '19700'],\n ['Down payment', '1000'],\n ['Trade-in value', '500'],\n ['Interest rate', '0.0305'],\n ['Length of loan (in months)', '60'],\n ['', ''],\n ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],\n ['Total cost', '=-(B8*B6)+(B3+B4)'],\n ];\n\n // Columns\n const columns = [\n { width:'300px' },\n { width:'200px' },\n ];\n\n // Merge cells\n const mergeCells = {\n A1: [2, 1],\n }\n\n // Rows properties\n const rows = {\n 0: { height:'200px' }\n }\n\n const style = {\n A1: 'font-weight: bold'\n }\n\n const applyStyle = function() {\n if (spreadsheet.current) {\n spreadsheet.current[0].getCell('A1').style.backgroundColor = 'orange';\n }\n }\n\n // Render component\n return (\n <>\n
\n \n \n \n
\n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\n\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\nimport \"jsuites/dist/jsuites.css\"\n\n// Create the data grid component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: `\n `,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n data: [\n ['Car Loan', ''],\n ['Purchase price', '19700'],\n ['Down payment', '1000'],\n ['Trade-in value', '500'],\n ['Interest rate', '0.0305'],\n ['Length of loan (in months)', '60'],\n ['', ''],\n ['Monthly payment', '=PMT(B5/12,B6,B2-(B3+B4))'],\n ['Total cost', '=-(B8*B6)+(B3+B4)'],\n ],\n columns: [\n { width:'300px' },\n { width:'200px' },\n ],\n mergeCells: {\n A1: [2, 1]\n },\n rows: {\n 0: { height:'200px' }\n },\n style: {\n 'A1': 'font-weight: bold'\n }\n }]\n });\n }\n\n applyStyle() {\n if (this.worksheets) {\n this.worksheets[0].getCell('A1').style.backgroundColor = 'orange';\n }\n }\n}\n```\n\n{.pro}\n> **Upgrade to Jspreadsheet Pro for Advanced Cell Features**\n>\n> Jspreadsheet CE provides basic cell operations and styling. **Jspreadsheet Pro** adds powerful cell-level capabilities:\n>\n> **Cell-Level Validation:**\n> - **Required Cells:** Mark specific cells as required with custom error messages\n> - **Custom Validators:** Define validation functions per cell (not just column-level)\n> - **Cross-Cell Validation:** Validate based on values in other cells\n> - **Real-Time Validation:** Instant feedback with visual indicators as users type\n> - **Validation Rules:** Min/max values, regex patterns, custom logic per cell\n> - **Error Highlighting:** Automatic visual highlighting of invalid cells\n>\n> **Advanced Cell Formatting:**\n> - **Conditional Cell Formatting:** Auto-apply colors, styles based on cell values\n> - **Data Bars:** In-cell bar charts showing relative values\n> - **Color Scales:** Gradient colors based on value ranges\n> - **Icon Sets:** Visual icons (arrows, flags, traffic lights) based on values\n> - **Rich Text in Cells:** Bold, italic, underline, colors within single cell\n> - **Cell-Specific Masks:** Different format masks per cell (not just column)\n>\n> **Cell Protection & Security:**\n> - **Cell-Level Protection:** Lock specific cells while allowing others to edit\n> - **Conditional Protection:** Protect/unprotect cells based on user roles or values\n> - **Password Protection:** Protect cells with passwords\n> - **Read-Only Cells:** Programmatically set individual cells as read-only\n>\n> **Enhanced Cell Features:**\n> - **Cell Comments/Notes:** Advanced commenting system with threads and mentions\n> - **Cell Metadata:** Store custom business data per cell\n> - **Cell History:** Track changes per cell with audit trail\n> - **Cell Dependencies:** Track which cells depend on each other\n> - **Cell Types:** Dynamic cell type changes at runtime\n> - **Custom Renderers:** Per-cell custom rendering functions\n>\n> Perfect for data entry applications requiring strict validation and conditional formatting.\n>\n> **[Explore Pro Cell Features →](https://jspreadsheet.com/docs/cells)** | **[Compare Editions →](https://jspreadsheet.com/docs/getting-started)** | **[View Pricing →](https://jspreadsheet.com/pricing)**"
},
{
"path": "docs/jspreadsheet/docs/clipboard.md",
"content": "title: Jspreadsheet Clipboard\nkeywords: Jspreadsheet, Jexcel, data grid, JavaScript, Excel-like formulas, spreadsheet data, worksheet data, manage spreadsheet data, change cell data, update worksheet data\ndescription: Explore Jspreadsheet’s clipboard methods and events, enabling seamless copy-paste operations for managing and updating data within your spreadsheets.\n\n# Data Grid Clipboard\n\n## Overview\n\nThe clipboard in Jspreadsheet offers a comprehensive set of features that facilitate copying and pasting data between Jspreadsheet instances and other spreadsheet software, such as Excel or Google Sheets. These features include automatic formula updates, data overwriting during paste actions, and custom event handling.\n\nThis section details the methods and events you can use to control clipboard behaviour, customize paste actions, and ensure smooth interoperability between different data grids.\n\n### Key Features\n\n- **Automatic Formula Updates**: When pasting data containing formulas, Jspreadsheet automatically updates the formulas to match the new data context;\n- **Data Overwriting**: Jspreadsheet supports data overwriting during paste actions, giving you fine-grained control over pasted data handling;\n- **Custom Events**: You can hook into specific clipboard-related events to customize the behaviour of copy-paste operations, including validation, transformation, and data filtering;\n\n{.pro}\n> #### What you can find on the Pro Version\n> \n> The **Pro version** of Jspreadsheet includes additional clipboard capabilities, enhancing your experience with formatting, styles, and formula reference updates:\n> - **Copy and Paste Formatting**: When using the Pro version, not only data but also cell formats (like font styles, borders, and colours) and styles are transferred during copy-paste actions.\n> - **Formula Reference Updates**: The Pro version ensures that pasted formulas automatically adjust their references according to the new locations, maintaining the integrity of your spreadsheet formulas.\\\n>\n>\\\n> [Learn more](https://jspreadsheet.com/docs/clipboard){.button}\n\n\n## Documentation\n\n### Clipboard Management Methods\n\nJspreadsheet provides methods to control clipboard operations, allowing smooth data transfers between spreadsheets or external tools like Excel.\n\n| Method | Description |\n|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `copy` | Copies or cuts the contents of selected cells in the worksheet.@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. |\n| `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;` |\n\n### Clipboard Operation Events\n\nThese events let you hook into clipboard operations like copy and paste, providing greater control over how data is transferred or manipulated.\n\n| Event | Description |\n|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n| `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;` |\n| `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;` |\n\n> **Note**\n> In Jspreadsheet CE, it is not possible to cancel or modify the clipboard value during the oncopy event.\n\n## Examples\n\n### Intercept Pasted Data\n\nYou can intercept and cancel the paste event if needed.\n\n```html\n\n\n\n\n\n\n\n \n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n ['Mazda', 2001, 2000],\n ['Peugeot', 2010, 5000],\n ['Honda Fit', 2009, 3000],\n ['Honda CRV', 2010, 6000],\n ];\n \n const onbeforepaste = function() {\n alert('Not allowed to paste');\n return false;\n }\n\n // Render data grid component\n return (\n
@param `column` - Index of the column. If omitted, returns the widths of all columns.
`worksheetInstance.getWidth(column?: number): number \\| (number \\| string)[];` |\n| `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;` |\n| `getColumn` | Retrieves settings for a specified column.
`worksheetInstance.getColumn(colNumber: Number): Object` |\n| `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;` |\n| `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;` |\n| `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;` |\n\n### Events\n\nSeveral events are available for handling column actions in your spreadsheet, including `onbefore` events that let you intercept, validate, or cancel user actions.\n\n| Event | Description |\n|---------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n| `oninsertcolumn` | Triggered after a new column is inserted.
`oninsertcolumn(instance: WorksheetInstance, columns: { column: number, options: Column, data?: CellValue[] }[]): void;` |\n| `onbeforedeletecolumn` | Triggered before a column is deleted. Return `false` to cancel the action.
`onbeforedeletecolumn(instance: WorksheetInstance, removedColumns: number[]): undefined \\| boolean;` |\n| `ondeletecolumn` | Triggered after a column is deleted.
`ondeletecolumn(instance: WorksheetInstance, removedColumns: number[]): void;` |\n| `onmovecolumn` | Triggered after a column is moved to a new position.
`ondeletecolumn(instance: WorksheetInstance, removedColumns: number[]): void;` |\n\n### Initial Settings\n\nThe following column-related properties are configurable during the initialization of the online spreadsheet:\n\n| Property | Description |\n|---------------------------------------------|--------------------------------------------------------------------------------------------------------|\n| `allowInsertColumn: boolean` | Enables users to add new columns. `Default: true` |\n| `allowManualInsertColumn: boolean`{.nowrap} | Adds a new column when the user presses the Tab key in the last column. `Default: true` |\n| `allowDeleteColumn: boolean` | Allows users to delete columns. `Default: true` |\n| `allowRenameColumn: boolean` | Allows users to rename columns. `Default: true` |\n| `columnDrag: boolean` | Enables drag-and-drop for changing column positions. `Default: true` |\n| `columnSorting: boolean` | Allows users to sort columns. `Default: true` |\n| `columnResize: boolean` | Allows users to resize columns. `Default: true` |\n| `defaultColWidth: number` | Sets the default column width. `Default: 100px` |\n| `defaultColAlign: string` | Sets the default column text alignment. `Default: center` |\n| `minSpareCols: number` | Number of blank columns at the spreadsheet's end. `Default: none` |\n\n\n### Available Properties\n\nEach column type in Jspreadsheet can hold specific properties. Below are some of the most commonly available options:\n\n| Property | Description |\n|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------|\n| `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. |\n| `title` | Title of the column. |\n| `name` | Property name or path when using JSON data. |\n| `width` | Width of the column. |\n| `align` | Alignment of the column content. `Default: center.` |\n| `url` | URL to load items for dropdowns in this column. |\n| `source` | Items for dropdown or autocomplete fields. |\n| `autocomplete` | Enables autocomplete for the column. |\n| `multiple` | Allows multiple selections in dropdown or autocomplete fields. |\n| `mask` | Input mask applied to data cells. |\n| `decimal` | Character used as the decimal separator. |\n| `disabledMaskOnEdition` | Disables the mask when editing. |\n| `render` | Renderer method or rule for cell content. |\n| `format` | Date or number format in the cell. `Default for the calendar: \"DD/MM/YYYY\".` |\n| `options` | Extended configuration for the column. |\n\n\n#### Adding a New Column\n\nTo 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.\n\n| Method | Description |\n| ----------------|--------------------------------------------------|\n| data: any[] | Array with the column data |\n| column: number | The index where the new column will be inserted. |\n| options: object | An object specifying the column's attributes. |\n\n##### Example\n\nTo add a new column at the beginning of the grid:\n\n{.ignore}\n```javascript\nworksheet.insertColumn([\n {\n data: [1,2,3],\n column: 0,\n options: {\n type: 'calendar',\n title: 'My new column'\n }\n }\n]);\n```\n\n## Examples\n\n### Render Method\n\nThe render method modifies visible data before inserting it into a grid cell.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n// Adding an arbitrary number leading zeros.\nconst pad = (cell, value, x, y, instance, options) => {\n if (value !== '') {\n let size = options.digits||0;\n value = value.toString();\n while (value.length < size) {\n value = \"0\" + value;\n }\n cell.innerText = value;\n }\n}\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [[1]];\n // Columns\n const columns = [\n { render: pad, digits: 6 }\n ];\n\n // Render component\n return (\n
\n\n
\n
\n
\n
\n
\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef(null);\n // Data\n const data = [\n ['US', 'Cheese', 1000 ],\n ['CA', 'Apples', 1200 ],\n ['CA', 'Carrots', 2000 ],\n ['BR', 'Oranges', 3800 ],\n ];\n // Render component\n return (\n <>\n
\n
\n
\n
\n
\n \n \n );\n}\n```\n```vue\n\n
- \n
- \n Click to insert a new blank column at the end of the table\n \n
- \n Click to insert two new blank columns at the beginning of the table\n \n
- \n Click to delete the last column\n \n
- \n Click to move the first column to the third position\n \n
- \n Hide the first column\n \n
- \n Show the first column\n \n
- \n
- \n Click to insert a new blank column at the end of the table\n \n
- \n Click to insert two new blank columns at the beginning of the table\n \n
- \n Click to delete the last column\n \n
- \n Click to move the first column to the third position\n \n
- \n Hide the first column\n \n
- \n Show the first column\n \n
@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
\n\n\n\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\nconst spreadsheet = useRef();\n\n const data = [\n ['US', 'Cheese', '2019-02-12'],\n ['CA', 'Apples', '2019-03-01'],\n ['CA', 'Carrots', '2018-11-10'],\n ['BR', 'Oranges', '2019-01-12'],\n ];\n\n const columns = [\n { width: '300px' },\n { width: '200px' },\n { width: '200px' },\n ];\n\n const comments = {\n B1: 'Initial comments on B1',\n C1: 'Initial comments on C1'\n };\n\n const oncomments = () => {\n console.log(arguments);\n }\n\n return (\n <>\n`getConfig() => Object` |\n| `setConfig` | Updates the configuration for a worksheet.
`setConfig(options: Object, level?: Boolean) => void` |\n\n\n## Examples\n\n### Data Grid Cloning\n\nThis example demonstrates how to copy a data grid configuration and use it to initialize a new spreadsheet.\n\n[See this example on JSFiddle](https://jsfiddle.net/spreadsheet/xz5pfgq7/)\n\n```html\n\n\n\n\n\n\n\n\n\n
\n\n
\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet, jspreadsheet } from \"@jspreadsheet-ce/react\";\n\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n const console = useRef();\n const copy = useRef();\n\n // Method to clone the data grid\n const clone = function() {\n // Get the data grid configuration\n let config = JSON.stringify(spreadsheet.current[0].parent.getConfig());\n // Show on the textarea\n console.current.value = config;\n // Destroy any existing spreadsheet\n jspreadsheet.destroy(copy.current);\n // Parse\n config = JSON.parse(config);\n // Create a new spreadsheet\n jspreadsheet(copy.current, config);\n }\n\n return (\n <>\n
\n
\n clone()} />\n \n );\n}\n```\n```vue\n\n
\n
\n \n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\n\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n// Create component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: `\n \n
\n
\n \n `,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n @ViewChild(\"console\") console: ElementRef;\n @ViewChild(\"copy\") copy: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n minDimensions: [4,4],\n }],\n contextmenu: function() {\n return false;\n }\n });\n }\n\n // Clone the data grid\n clone() {\n // Get the data grid configuration\n let config = JSON.stringify(this.worksheets[0].parent.getConfig());\n // Show on the textarea\n this.console.nativeElement.value = config;\n // Destroy any existing spreadsheet\n jspreadsheet.destroy(this.copy.nativeElement);\n // Parse\n config = JSON.parse(config);\n // Create a new spreadsheet\n jspreadsheet(this.copy.nativeElement, config);\n }\n}\n```\n \n" }, { "path": "docs/jspreadsheet/docs/contextmenu.md", "content": "title: Data Grid Context Menu Customization\nkeywords: Jspreadsheet, Jexcel, Angular data grid, JavaScript, Excel-like spreadsheet, data tables, data grid context menu, context customization, customize context menu, interactive data grid.\ndescription: 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.\n\n# Context Menu Customization\n\nJspreadsheet 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. \n\n## Documentation\n\n### Item Properties\n\nThe `contextmenu` handler method might return an array of menu items, each represented as an object with the following properties:\n\n| Property | Description |\n|------------|--------------------------------------------------------------------|\n| `type` | Type of menu item: `\"line\"`, `\"divisor\"`, or `\"default\"`. |\n| `title` | The title of the menu item. |\n| `icon` | Icon key for the item (uses Material icon key for identification). |\n| `id` | `id` attribute for the HTML element. |\n| `disabled` | If `true`, the item is disabled. |\n| `onclick` | `onclick` event handler function for the item. |\n| `shortcut` | Short description or shortcut instruction. |\n| `tooltip` | Tooltip text displayed on hover. |\n| `submenu` | Array of submenu items. |\n\n\n### Translation\n\nYou can define translations for default menu items in Jspreadsheet by using `jspreadsheet.setDictionary` as shown below: \n\n{.ignore}\n```javascript\njspreadsheet.setDictionary({\n 'Rename this worksheet': 'Renomear worksheet',\n 'Delete this worksheet': 'Apagar worksheet',\n 'Are you sure?': 'Tem certeza?',\n 'Rename this cell': 'Renomear essa celula',\n 'Cut': 'Cortar',\n 'Copy': 'Copy',\n 'Paste': 'Colar',\n 'Insert a new column before': 'Inserir uma coluna antes',\n 'Insert a new column after': 'Inserior uma coluna depois',\n 'Insert a new column after': 'Inserior uma coluna depois',\n 'Delete selected columns': 'Apagar colunas selecionadas',\n 'Rename this column': 'Renomar essa coluna',\n 'Create a new row': 'Criar uma nova linha',\n 'Order ascending': 'Ordenar asc',\n 'Order descending': 'Ordenar desc',\n 'Insert a new row before': 'Inserir uma linha antes',\n 'Insert a new row after': 'Inserir uma nova linha depois',\n 'Delete selected rows': 'Apagar linhas selecionadas',\n 'Edit notes': 'Editar notas',\n 'Add notes': 'Adicionar notas',\n 'Notes': 'Notas',\n 'Clear notes': 'Apagar notas',\n 'Save as': 'Salvar como',\n 'About': 'Sobre',\n});\n```\n\n\nJspreadsheet uses the jSuites [contextmenu plugin](https://jsuites.net/docs/contextmenu). For further details and examples, refer to the documentation.\n\n## Examples\n\n### Customize the contextmenu\n\nCustomize the contextmenu with a few basic options depending on the section clicked. \n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport jSuites from \"jsuites\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n// Intercept the context menu\nconst contextMenu = (o, x, y, e, items, section) => {\n // Reset all items\n items = [];\n\n // If the click was in the headers\n if (section == 'header') {\n // Items to the header only\n items.push({\n title: jSuites.translate('Execute one action'),\n onclick: function() {\n alert('test')\n }\n });\n\n // Add a line\n items.push({ type: 'line' });\n }\n\n // Save\n items.push({\n title: jSuites.translate('Save as'),\n shortcut: 'Ctrl + S',\n icon: 'save',\n onclick: function () {\n o.download();\n }\n });\n\n // About\n items.push({\n title: jSuites.translate('About'),\n onclick: function() {\n alert('https://jspreadsheet.com');\n }\n });\n\n return items;\n}\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n [\"Apples\", \"Produce\", 1.5, 10, \"=C1*(1-(D1/100))\"],\n [\"Bread\", \"Bakery\", 3.0, 20, \"=C2*(1-(D2/100))\"],\n [\"Cheese\", \"Dairy\", 5.0, 15, \"=C3*(1-(D3/100))\"],\n [\"Eggs\", \"Dairy\", 2.5, 0, \"=C4*(1-(D4/100))\"],\n ];\n // Columns\n const columns = [\n { title: 'Food', width: '140px' },\n { title: 'Category' },\n { title: 'Unit Price' },\n { title: 'Discount' },\n { title: 'Total ' },\n ];\n\n return (\n
\n> [Learn more](https://jspreadsheet.com/products/formulas){.button}\n" }, { "path": "docs/jspreadsheet/docs/data.md", "content": "title: Spreadsheet Data Operations\nkeywords: Jspreadsheet, Jexcel, data grid, JavaScript, Excel-like formulas, spreadsheet data, worksheet data, data management, update cell data, manage worksheet data, programmatically update data\ndescription: 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.\n\n# Data Management\n\nThis section details the methods, events, and settings for loading, updating, and managing data in Jspreadsheet data grids.\n\n## Loading the Data\n\n### Formats\n\nYou can create spreadsheets using various data formats, including:\n\n- Existing HTML tables\n- CSV files\n- JSON objects\n- JavaScript arrays\n\n\n## Documentation\n\n### Methods\n\nThese methods assist in managing data in your grid or spreadsheet.\n\n#### Read Methods\n\n| Method | Description |\n|-------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n| `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;` |\n| `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[][];` |\n| `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;` |\n| `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[];` |\n| `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;` |\n\n#### Write Methods\n\n| Method | Description |\n|-------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n| `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;` |\n| `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;` |\n| `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;` |\n\n### Events\n\nYou can find a list of javascript events related to the data operations.\n\n| Event | Description |\n|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| \n| `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;` |\n| `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;` |\n| `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;` |\n\n### Initial Settings\n\nA list of settings that can be utilized when initializing the data grid.\n\n| Property | Description |\n|-------------------------|---------------------------------------------------|\n| `data: Array \\| Object` | Defines initial data from a JSON or array. |\n| `url: String` | Loads data from an external file. |\n| `csv: String` | Loads data from an external CSV file. |\n| `csvHeaders: Boolean` | The first row of the CSV file is used as headers. |\n| `csvDelimiter: String` | Sets the CSV delimiter (default: ','). |\n\n\n## Examples\n\n### Create a data grid from an 2D array.\n\nCreate a spreadsheet from a JavaScript array \n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n ['Mazda', 2001, 2000],\n ['Peugeot', 2010, 5000],\n ['Honda Fit', 2009, 3000],\n ['Honda CRV', 2010, 6000],\n ];\n // Columns\n const columns = [\n { title:'Model', width:'300px' },\n { title:'Price', width:'80px' },\n { title:'Model', width:'100px' }\n ];\n // Render data grid component\n return (\n
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
\n\n\n\n```\n```jsx\nimport React, { useRef, useEffect } from \"react\";\nimport { jspreadsheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n useEffect(() => {\n if (spreadsheet.current) {\n jspreadsheet(spreadsheet.current);\n }\n }, [])\n\n // Render component\n return (\n <>\n
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
`openEditor(cell: HTMLElement, empty: boolean, e: MouseEvent): void` |\n| `closeEditor` | Close the editor.
`closeEditor(cell: HTMLElement, save: boolean): void` |\n\n### Events\n\nEvents related to editors and data grid editing:\n\n| Event | Description |\n|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `oneditionstart` | Triggered when cell editing starts.
`oneditionstart(worksheet: Object, cell: HTMLElement, x: number, y: number): void \\| boolean` |\n| `oneditionend` | Triggered when cell editing ends.
`oneditionend(worksheet: Object, cell: HTMLElement, x: number, y: number, v: any, save: boolean): void` |\n| `oncreateeditor`{.nowrap} | Triggered when an editor is created.
`oncreateeditor(worksheet: Object, cell: HTMLElement, x: number, y: number, input: HTMLElement, options: object): void` |\n\n
\n\n### Declaring the Editors\n\nIn CE, the `type` property declares the editor at the column level. The Pro version allows defining editors at the cell level.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n // Columns\n const columns = [\n { type: 'text' },\n { type: 'dropdown', source: ['Male','Female'] }\n ];\n\n // Render data grid component\n return (\n
`createCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object): void` |\n| `updateCell` | Triggered when the cell value changes.
`updateCell(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object): void` |\n| `openEditor` | Triggered when the user starts editing a cell.
`openEditor(cell: Object, value: Any, x: Number, y: Number, instance: Object, options: Object): void` |\n| `closeEditor` | Triggered when the user finalizes the cell edit.
`closeEditor(cell: Object, confirmChanges: Boolean, x: Number, y: Number, instance: Object, options: Object): void` |\n| `destroyCell` | Triggered when a cell is destroyed.
`destroyCell(cell: Object, x: Number, y: Number, instance: Object): void` |\n| `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` |\n\n## Examples\n\n### Native Editors\n\nA basic example showcasing the use of multiple native editors.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n ['Jazz', 'Honda', '2019-02-12', '/templates/default/img/nophoto.jpg', true, 2000.00, '#777700'],\n ['Civic', 'Honda', '2018-07-11', '/templates/default/img/nophoto.jpg', true, 4000.01, '#007777'],\n ];\n // Columns\n const columns = [\n {\n type:'text',\n title:'Car',\n width:120\n },\n {\n type: 'dropdown',\n title:'Make',\n width:180,\n source:[\n \"Alfa Romeo\",\n \"Audi\",\n \"Bmw\",\n \"Chevrolet\",\n // (...)\n ]\n },\n {\n type: 'calendar',\n title:'Available',\n width:120,\n options:{ format:'DD/MM/YYYY' }\n },\n {\n type: 'image',\n title:'Photo',\n width:120\n },\n {\n type: 'checkbox',\n title:'Stock',\n width:80\n },\n {\n type: 'text',\n title:'Price',\n mask:'$ #.##0,00',\n width:100,\n decimal:',',\n disabledMaskOnEdition: true\n },\n {\n type: 'color',\n width:100,\n render:'square',\n },\n ];\n\n // Render data grid component\n return (\n
\n \n \n
\n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport Highcharts from 'highcharts'\nimport jspreadsheet from \"jspreadsheet-ce\";\n\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\nimport \"jsuites/dist/jsuites.css\"\nimport charts from \"@jspreadsheet/charts\";\n\nconst chartOptions = {\n title: {\n text: \"Monthly Average Temperature\",\n x: -20 //center\n },\n subtitle: {\n text: \"Source: WorldClimate.com\",\n x: -20\n },\n xAxis: {\n categories: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]\n },\n yAxis: {\n title: {\n text: \"Temperature (°C)\"\n },\n plotLines: [{\n value: 0,\n width: 1,\n color: \"#808080\"\n }]\n },\n tooltip: {\n valueSuffix: \"°C\"\n },\n legend: {\n layout: \"vertical\",\n align: \"right\",\n verticalAlign: \"middle\",\n borderWidth: 0\n },\n series: [{\n name: \"Tokyo\",\n data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]\n },\n {\n name: \"New York\",\n data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]\n },\n {\n name: \"Berlin\",\n data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]\n },\n {\n name: \"London\",\n data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]\n }\n ]\n};\n\n// Create the data grid component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: `\n `,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n @ViewChild(\"chartContainer\") chartContainer: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create summary spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n data: [\n [ chartOptions.series[0].name, ...chartOptions.series[0].data ],\n [ chartOptions.series[1].name, ...chartOptions.series[1].data ],\n [ chartOptions.series[2].name, ...chartOptions.series[2].data ],\n [ chartOptions.series[3].name, ...chartOptions.series[3].data ]\n ],\n columns: [\n { type: 'text', width:'200' },\n ],\n }],\n onchange: (instance, cell, x, y, value) => {\n // If the related series does not exists create a new one\n if (! this.chart.series[y]) {\n // Create a new series row\n let row = [];\n for (i = 1; i < instance.options.data[y].length; i++) {\n row.push(parseFloat(instance.options.data[y][i]));\n }\n // Append new series to the chart\n chart.addSeries({ name: instance.options.data[y][0], data: row });\n } else {\n if (x == 0) {\n // Update legend\n this.chart.series[y].update({ name:value });\n } else {\n // Update chart data\n this.chart.series[y].data[x-1].update({ y:parseFloat(value) });\n }\n }\n },\n });\n\n // Create external chart component\n this.chart = Highcharts.chart(this.chartContainer.nativeElement, chartOptions);\n\n }\n}\n```"
},
{
"path": "docs/jspreadsheet/docs/examples/column-dragging.md",
"content": "title: Column Dragging \nkeywords: Jexcel, spreadsheet, JavaScript, JavaScript table, column dragging, data grid customization, interactive columns \ndescription: Learn how to enable and use column dragging functionality in Jspreadsheet CE to create dynamic and customizable data grids. \n\n# Column Dragging \n\nColumn dragging in Jspreadsheet CE is disabled by default. To enable this feature, set the `columnDrag: true` option during initialization, as demonstrated below: \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Tabs\n const data = [\n ['BR', 'Cheese', 1],\n ['CA', 'Apples', 0],\n ['US', 'Carrots', 1],\n ['GB', 'Oranges', 0],\n ];\n \n const columns = [\n {\n type: 'autocomplete',\n title: 'Country',\n width: '300',\n url: '/jspreadsheet/countries.json'\n },\n {\n type: 'dropdown',\n title: 'Food',\n width: '150',\n source: ['Apples','Bananas','Carrots','Oranges','Cheese']\n },\n {\n type: 'checkbox',\n title: 'Stock',\n width:'100'\n },\n ];\n\n return (\n The Official Top 40 biggest albums of 2019
\n\n| General | \n|||
| Info | \nStats | \n||
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 4 | \nWHEN WE ALL FALL ASLEEP WHERE DO WE GO | \nBILLIE EILISH | \n1 | \n
| 5 | \nSTAYING AT TAMARA'S | \nGEORGE EZRA | \n1 | \n
| 6 | \nBOHEMIAN RHAPSODY - OST | \nQUEEN | \n3 | \n
| 7 | \nTHANK U NEXT | \nARIANA GRANDE | \n1 | \n
| 8 | \nWHAT A TIME TO BE ALIVE | \nTOM WALKER | \n1 | \n
| 9 | \nA STAR IS BORN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 10 | \nYOU'RE IN MY HEART | \nROD STEWART | \n1 | \n
| \n | \n | \n | =SUM(B1,B2,B3) | \n
\n\n\n\n```\n```jsx\nimport React, { useRef, useEffect } from \"react\";\nimport { jspreadsheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n useEffect(() => {\n if (spreadsheet.current) {\n jspreadsheet(spreadsheet.current);\n }\n }, [])\n\n // Render component\n return (\n <>\n
| General | \n|||
| Info | \nStats | \n||
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 4 | \nWHEN WE ALL FALL ASLEEP WHERE DO WE GO | \nBILLIE EILISH | \n1 | \n
| 5 | \nSTAYING AT TAMARA'S | \nGEORGE EZRA | \n1 | \n
| 6 | \nBOHEMIAN RHAPSODY - OST | \nQUEEN | \n3 | \n
| 7 | \nTHANK U NEXT | \nARIANA GRANDE | \n1 | \n
| 8 | \nWHAT A TIME TO BE ALIVE | \nTOM WALKER | \n1 | \n
| 9 | \nA STAR IS BORN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 10 | \nYOU'RE IN MY HEART | \nROD STEWART | \n1 | \n
| \n | \n | \n | =SUM(B1,B2,B3) | \n
| General | \n|||
| Info | \nStats | \n||
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 4 | \nWHEN WE ALL FALL ASLEEP WHERE DO WE GO | \nBILLIE EILISH | \n1 | \n
| 5 | \nSTAYING AT TAMARA'S | \nGEORGE EZRA | \n1 | \n
| 6 | \nBOHEMIAN RHAPSODY - OST | \nQUEEN | \n3 | \n
| 7 | \nTHANK U NEXT | \nARIANA GRANDE | \n1 | \n
| 8 | \nWHAT A TIME TO BE ALIVE | \nTOM WALKER | \n1 | \n
| 9 | \nA STAR IS BORN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 10 | \nYOU'RE IN MY HEART | \nROD STEWART | \n1 | \n
| \n | \n | \n | =SUM(B1,B2,B3) | \n
\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/docs/examples/richtext-html-editor.md", "content": "title: HTML Editor \nkeywords: Jexcel, JavaScript, rich text, HTML editor, spreadsheet editor, excel-like features, dynamic columns \ndescription: Learn how to create a rich text column with an HTML editor in Jspreadsheet for enhanced data input and formatting. \n\n# Rich Text and HTML Editor Column Type \n\nAdd an HTML Editor input to your spreadsheet to create rich text columns. \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nconst data = [\n [ 'the Sorcerer`s Stone', '
`openFilter(columnNumber: Number, getAsSets?: boolean): void` |\n| `closeFilter()` | Closes the filter input.
`closeFilter(): void` |\n| `resetFilters()` | \tResets all applied filters.
`resetFilters(): void` |\n \n\n### Initial Settings\n\n| Property | Description |\n|----------------------------|------------------------------------------------------------------|\n| `filters: boolean\\|string` | Start the spreadsheet with the filters enabled. `Default: false` |\n\n \n\n#### Enabling Spreadsheet Filters\n\nTo activate a filter for a specific column, use the filter attribute in the column object during spreadsheet initialization:\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef(null);\n // Data\n const data = [\n ['Jazz', 'Honda'],\n ['Civic', 'Honda'],\n ['Civic', 'Honda'],\n ['Picanto', 'Kia'],\n ['Optima', 'Kia'],\n ];\n // Render component\n return (\n <>\n
`render(td, value, x, y, worksheet, options) => void` |\n\n\n{.pro}\n> #### Differences in the Pro Version\n>\n> Jspreadsheet Pro allows cell-level format and other advanced format customizations.\\\n> \\\n> [Learn more](https://jspreadsheet.com/docs/format){.button}\n\n## Documentation\n\n### Mask and Format Settings\n\nIn 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:\n\n| Valid examples |\n|----------------|\n| 0 |\n| 0.00 |\n| 0% |\n| 0.00% |\n| #,##0 |\n| #,##0.00 |\n| #,##0 |\n| d-mmm-yy |\n| d-mmm |\n| dd/mm/yyyy |\n| mmm-yy |\n| h:mm AM/PM |\n| h:mm:ss AM/PM |\n| h:mm |\n| h:mm:ss |\n| m/d/yy h:mm |\n| mm:ss |\n| [h]:mm:ss |\n\n#### Example\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const columns = [{\n type: 'number',\n // Excel like token to format the currency input\n mask: 'U$ #.##0,00'\n }];\n\n // Render data grid component\n return (\n
onbeforeformula(worksheet: Object, expression: String, x: Number, y: Number) => String |\n\n\n### Methods\n\nAll methods related to formulas.\n\n| Method | Description |\n| --------------------------|-----------------------------------------------------------------------------------------------------------------|\n| executeFormula?: Function | Execute a formula.
executeFormula(expression: string, x?: number, y?: number, caching?: boolean) => String |\n\n\n## Examples\n\n### Basic excel-like formulas usage\n\nA basic spreadsheet example using formulas, including currency, percentage and mask.\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n // Worksheet data\n const data = [\n [ 'Crayons Crayola only (No Rose Art)', 2, 5.01, 0.01, '=B1*C1*(1-D1)' ],\n [ 'Colored Pencils Crayola only', 2, 4.41, 0.02, '=B2*C2*(1-D2)' ],\n [ 'Expo Dry-erase Markers Wide', 4, 3.00, 0.1, '=B3*C3*(1-D3)' ],\n [ 'Index Cards Unlined', 3, 6.00, 0.03, '=B4*C4*(1-D4)' ],\n [ 'Tissues', 10, 1.90, 0.01, '=B5*C5*(1-D5)' ],\n [ 'Ziploc Sandwich-size Bags', 5, 1.00, 0.01, '=B6*C6*(1-D6)' ],\n [ 'Thin Markers Crayola only', 2, 3.00, 0.02, '=B7*C7*(1-D7)' ],\n [ 'Highlighter', 4, 1.20, 0.01, '=B8*C8*(1-D8)' ],\n [ 'Total', '=SUM(B1:B8)', '=ROUND(SUM(C1:C8), 2)', '', '=SUM(E1:E8)' ],\n ]\n\n // Column definitions\n const columns = [\n { type: 'text', title:'Product', width:'300' },\n { type: 'text', title:'Qtd', width:'80', mask:'#.##0' },\n { type: 'text', title:'Price', width:'100px', mask:'$ #.##0,00' },\n { type: 'text', title:'Discount', mask:'0.00%' },\n {\n type: 'number',\n title: 'Total',\n width: '100px',\n format: 'US #.##0,00',\n },\n ]\n\n // Render component\n return (\n
`jspreadsheet(element: HTMLDivElement \\| HTMLTableElement, options: SpreadsheetOptions): WorksheetInstance[];` |\n| Destroy a given spreadsheet.
`jspreadsheet.destroy(element: JspreadsheetInstanceElement, destroyEventHandlers?: boolean): void;` |\n| Destroy all spreadsheets in all namespaces.
`jspreadsheet.destroyAll(): void;` |\n| Translate Jspreadsheet components and extensions.
`jspreadsheet.setDictionary(translations: Record
`jspreadsheet.getWorksheetInstanceByName(worksheetName: string \\| null \\| undefined, namespace: string): WorksheetInstance \\| Record
\n\n\n\n```\n" }, { "path": "docs/jspreadsheet/docs/headers.md", "content": "title: Spreadsheet Headers\nkeywords: 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\ndescription: Customize and modify column headers in your data grids. Explore programmatic header updates and advanced options for organizing and managing your data grid.\n\n# Spreadsheet Headers\n\nThis 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.\n\n## Documentation\n\n### Methods\n\nYou can update the headers programmatically using the following methods.\n\n| Method | Description |\n| ------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| 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[];` |\n| getHeader | Get the column title.
@param `column` - Column index.
`worksheetInstance.getHeader(column: number): string;` |\n| 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;` |\n\n \n\n### Initial Settings\n\nTo customize headers, use the `title` and `tooltip` attributes in the column settings.\n\n\n{.ignore}\n```html\n\n```\n \n\n### Available Events\n\n| Event | Description |\n| ---------------|------------------------------------------------------------------------------------------------------------------------------------|\n| onchangeheader | Triggered when the header title is changed.
`onchangeheader(instance: WorksheetInstance, colIndex: number, newValue: string, oldValue: string): void;` |\n\n \n\n## Examples\n\n### Updates to the Headers\n\nThe following example initializes the spreadsheet with basic headers and demonstrates how to update the titles programmatically.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef, useEffect } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n const columns = [\n { title: 'Header 1' },\n { title: 'Header 2' },\n { title: 'Header 3' }\n ];\n\n useEffect(() => {\n if (spreadsheet.current) {\n spreadsheet.current[0].setHeader(0, 'New Header 1');\n spreadsheet.current[0].setHeader(1, 'New Header 2');\n spreadsheet.current[0].setHeader(2, 'New Header 3');\n }\n }, [])\n\n // Render component\n return (\n <>\n
\n\n\n\n```" }, { "path": "docs/jspreadsheet/docs/history.md", "content": "title: Jspreadsheet: Undo & Redo History\nkeywords: Jspreadsheet, Jexcel, JavaScript data grid, undo, redo, Ctrl+Z, Ctrl+Y, spreadsheet change tracking, action history, data revisions, Jspreadsheet history\ndescription: Discover how to manage action history in Jspreadsheet with undo and redo features, allowing easy tracking of data grid changes and control over modifications.\n\n# History Tracker\n\nThe 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.\n\n{.pro}\n> #### What you can find on the Pro Version\n>\n> In the Pro version of Jspreadsheet, the unified history tracker supports cross-spreadsheet calculations and integration across all spreadsheets displayed on the same screen.\n> \n> \\\n> [Learn more](https://jspreadsheet.com/docs/history){.button}\n\n\n## Documentation\n\n### Methods\n\nThe undo and redo methods are normally invoked by the CTRL+Z, CTRL+Y keyboard shortcut. The following methods can be called programmatically, as follows:\n\n| Method | Description |\n|----------|---------------------------------------------------------------------------------|\n| `undo()` | Undo the last worksheet change.
`worksheet.undo() : void` |\n| `redo()` | Redo the most recent worksheet change.
`worksheet.redo() : void` |\n\n### Events\n\nEvents related to the history changes tracker.\n\n| Event | Description |\n|----------|--------------------------------------------------------------------------------------------------------------------------|\n| `onredo` | `onredo(worksheet: Object, info: Object) : null`
The info array contains all necessary information about the action. |\n| `onundo` | `onundo(worksheet: Object, info: Object) : null`
The info array contains all necessary information about the action. |\n\n\n### History Tracker State\n\nUse the history tracker with caution. You can turn it off temporarily by setting `worksheet.ignoreHistory` to true.\n\n## Examples\n\n### Controlling the changes programmatically\n\nAs explained above, the history actions are available on the spreadsheet level. \n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet, jspreadsheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n // Render component\n return (\n <>\n
\n
\n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\nimport \"jsuites/dist/jsuites.css\"\n\n// Create component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: ``,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n data: [\n ['Test Icon', 'data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjRweCIgZmlsbD0iIzVmNjM2OCI+PHBhdGggZD0iTTI4MC0yODBoMTYwdi0xNjBIMjgwdjE2MFptMjQwIDBoMTYwdi0xNjBINTIwdjE2MFpNMjgwLTUyMGgxNjB2LTE2MEgyODB2MTYwWm0yNDAgMGgxNjB2LTE2MEg1MjB2MTYwWk0yMDAtMTIwcS0zMyAwLTU2LjUtMjMuNVQxMjAtMjAwdi01NjBxMC0zMyAyMy41LTU2LjVUMjAwLTg0MGg1NjBxMzMgMCA1Ni41IDIzLjVUODQwLTc2MHY1NjBxMCAzMy0yMy41IDU2LjVUNzYwLTEyMEgyMDBabTAtODBoNTYwdi01NjBIMjAwdjU2MFptMC01NjB2NTYwLTU2MFoiLz48L3N2Zz4='],\n ],\n minDimensions: [2,4],\n columns: [\n { type:'text', width:300, title:'Title' },\n { type:'image', width:120, title:'Image' },\n ],\n }],\n });\n }\n}\n```\n\n## Related Image Tools\n\n### Free Image Components\n- [JavaScript Image Cropper](https://jsuites.net/docs/image-cropper) - Crop, rotate, and edit images with brightness/contrast controls\n- [JavaScript Image Slider](https://jsuites.net/docs/image-slider) - Display image galleries and carousels\n- [LemonadeJS Image Cropper](https://lemonadejs.com/docs/plugins/image-cropper) - Reactive image cropper component\n\nThese free components complement Jspreadsheet CE for building complete image management solutions.\n"
},
{
"path": "docs/jspreadsheet/docs/javascript-calendar.md",
"content": "title: Javascript Calendar and Date Operations\nkeywords: Jspreadsheet, data grid, javascript, excel-like calendar, spreadsheet calendar, javascript calendar, data grid calendar, advanced calendar, calendar events, calendar settings, interactive data grid, customizable calendar, dynamic calendar, event-driven calendar, calendar integration\ndescription: Explore the data grid calendar input type, date operations, formatting, validations, events, and other related date operations and calendar features available in Jspreadsheet.\n\n# Date operations\n\nThis section explains how to handle dates in Jspreadsheet, focusing on the calendar input type and various date operations. You can work with dates by applying a mask to text input fields or using the dedicated calendar type.\n\n**Key Differences:**\n\n- **Text type with date mask**: This option supports date-related calculations, copy-paste functionality, and fill-handle operations similar to Excel. It allows dates to be treated as numerical values, making it ideal for performing operations.\n- **Calendar Type**: This option provides a calendar picker for selecting dates but stores the value as a string. It’s more focused on user-friendly input rather than complex date calculations.\n\nThis section covers the following topics: \n\n- **Configuring the calendar picker**: How to customize the calendar editor for user-friendly date selection.\n- **Validating date values**: Set rules to ensure date inputs are valid based on the values in other columns.\n- **Performing date calculations**: Use formulas to calculate date differences, add days, or perform other date-related operations.\n- **Formatting dates with new tokens**: Learn how to use tokens to format dates in different styles.\n- **Localization of date strings**: Translate date formats and related strings to match different locales and languages.\n\n## Documentation\n\n### Calendar editor\n\nThe [JavaScript calendar](https://jsuites.net/docs/javascript-calendar) from [jsuites.net](https://jsuites.net/docs) is a highly flexible and responsive plugin that offers numerous configurations to adapt to various application needs. For more information, refer to its [documentation](https://jsuites.net/docs/javascript-calendar).\n\n| Parameter | Description |\n|---------------------------------------|---------------------------------------------------------------------------------------------------|\n| type: `default \\| year-month-picker` | Render type. `Default: default` |\n| validRange: `[String, String]` | Disables the dates out of the defined range. `[Initial date, Final date]` |\n| startingDay: `Number` | The day of the week the calendar starts on (0 for Sunday - 6 for Saturday). `Default: 0 (Sunday)` |\n| format: `String` | Date format. `Default: YYYY-MM-DD` |\n| readonly: `Boolean` | Calendar input is readonly. `Default: false` |\n| today: `Boolean` | Select today's date automatically when no date value is defined. `Default: true` |\n| time: `Boolean` | Show hour and minute dropdown. `Default: false` |\n| resetButton: `Boolean` | Enabled reset button. `Default: true` |\n| placeholder: `String` | Default place holder for the calendar input. |\n| fullscreen: `Boolean` | Open in fullscreen mode. |\n\n\n\n## Examples\n\n### Cells with Date Format\n\nThe example below demonstrates applying a date format to the results of a formula.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n [ '=NOW()', ]\n ]\n // Data grid cell definitions\n const cells = {\n A1: { format: 'dd/mm/yyyy' },\n }\n // Render data grid component\n return (\n \n \n
\n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\n\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\nimport \"jsuites/dist/jsuites.css\"\n\n// Filter the options in real time before opening the editor\nconst filterOptions = function(worksheet, cell, x, y, value, config) {\n // Get the value of the previous column\n let previousColumnValue = worksheet.getValueFromCoords(x - 1, y);\n // Set a valid range to avoid past dates to be selected\n config.options.validRange = [ previousColumnValue, null ];\n // Customized options\n return config;\n}\n\n// Create component\n@Component({\n selector: \"app-root\",\n template: ``;\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n data: [\n ['Roger Taylor', '2019-01-01', '2019-03-01' ],\n ['Bob Shiran', '2019-04-03', '2019-05-03'],\n ['Daniel P.', '2018-12-03', '2018-12-03'],\n ['Karen Roberts', '2018-12-03', '2019-01-03'],\n ],\n columns: [\n {\n type:'text',\n title:'Name',\n width:'300px',\n },\n {\n type:'calendar',\n title:'From',\n options: { format:'DD/MM/YYYY' },\n width:'150px',\n },\n {\n type:'calendar',\n title:'To',\n options: { format:'DD/MM/YYYY' },\n filterOptions: filterOptions,\n width:'150px',\n },\n ],\n worksheetName: 'Rules',\n }],\n onbeforechange: function(worksheet, cell, x, y, value) {\n // Valid only for second column\n if (x == 2 && value) {\n // Get the value of the previous column\n let previousColumnValue = worksheet.getValueFromCoords(x - 1, y);\n if (previousColumnValue > value) {\n cell.style.border = '1px solid red';\n // Return nothing\n return '';\n } else {\n cell.style.border = '';\n }\n }\n return value;\n }\n });\n }\n}\n```\n \n\n \n\n### International Calendar Configurations\n\nTo translate the text in the calendar plugin, you can include the `setDictionary` method as below. \n\n```html\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet, jspreadsheet } from \"@jspreadsheet/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n// Send dictionary to the JSS scope\njspreadsheet.setDictionary({\n // Other entries (...)\n // Calendar specific entries\n 'Jan': 'Jan',\n 'Feb': 'Fev',\n 'Mar': 'Mar',\n 'Apr': 'Abr',\n 'May': 'Mai',\n 'Jun': 'Jun',\n 'Jul': 'Jul',\n 'Aug': 'Ago',\n 'Sep': 'Set',\n 'Oct': 'Out',\n 'Nov': 'Nov',\n 'Dec': 'Dez',\n 'January': 'Janeiro',\n 'February': 'Fevereiro',\n 'March': 'Março',\n 'April': 'Abril',\n 'May': 'Maio',\n 'June': 'Junho',\n 'July': 'Julho',\n 'August': 'Agosto',\n 'September': 'Setembro',\n 'October': 'Outubro',\n 'November': 'Novembro',\n 'December': 'Dezembro',\n 'Sunday': 'Domingo',\n 'Monday': 'Segunda',\n 'Tuesday': 'Terca',\n 'Wednesday': 'Quarta',\n 'Thursday': 'Quinta',\n 'Friday': 'Sexta',\n 'Saturday': 'Sabado',\n 'Done': 'Feito',\n 'Reset': 'Apagar',\n 'Update': 'Atualizar',\n});\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n { type: 'calendar', options: { startingDay: 1 } },\n { type: 'calendar', options: { startingDay: 1 } },\n { type: 'calendar', options: { startingDay: 1 } },\n { type: 'calendar', options: { startingDay: 1 } },\n ]\n\n // Render data grid component\n return (\n @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;` |\n| `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;`. |\n| `destroyMerge`{.nowrap} | Removes all merged cells.
`worksheetInstance.destroyMerge(): void;` |\n\n \n\n### Events\n\nSpreadsheet merge cells related events.\n\n| Event | Description |\n|-----------|-----------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n| `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;` |\n| `whichPage` | Get the page index of a row.
@param `cell` - Row index.
`worksheetInstance.whichPage(cell: number): number;` |\n| `quantiyOfPages` | `worksheet.quantiyOfPages() : number`
Get the total number of pages available. |\n\n\n### Events\n\nThis event is triggered when the user changes the page.\n\n| Event | Description |\n|-------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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;` |\n\n\n### Initial Settings\n\nInitial configuration related to the pagination of your data grid.\n\n| Property | Description |\n|-------------------------------|--------------------------------------------------------------------|\n| `pagination: number` | The number of items per page |\n| `paginationOptions: number[]` | The options for the user to select the number of results per page. |\n\n \n\n## Examples\n\n### Data Grid Search and Pagination\n\nEnabling search and pagination features during the spreadsheet initialization.\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Columns\n const columns = [\n { type:'text', width:80 },\n { type:'text', width:200 },\n { type:'text', width:100 },\n { type:'text', width:200 },\n { type:'text', width:100 },\n ];\n // Event\n const onchangepage = (el, pageNumber, oldPage) => {\n console.log('New page: ' + pageNumber);\n }\n\n // Render component\n return (\n`beforeinit(worksheet: Object, config: Object): void \\| object` |\n| `init` | When a new worksheet is added.
`init(worksheet: Object): void` |\n| `onevent` | Called for every spreadsheet event.
`onevent(event: String, a?: any, b?: any, c?: any, d?: any): void` |\n| `persistence` | Handles server-side data persistence.
`persistence(worksheet: Object, method: String, args: Array): void` |\n| `contextMenu` | When the context menu opens.
`contextMenu(worksheet: Object, x: Number, y: Number, e: Object, items: [], section: String): void` |\n| `toolbar` | When the toolbar is created or clicked.
`toolbar(worksheet: Object, items: Array): void` |\n\n \n### Worksheet Options\n\nYou can define custom options for each worksheet using the `pluginOptions` property.\n\n\n### Basic Implementation\n\nBelow is a basic implementation example that can be used as a reference for defining custom worksheet options.\n\n{.ignore}\n```javascript\nconst newPlugin = (function() {\n // Plugin object\n let plugin = {};\n\n /**\n * It will be executed for every new worksheet\n */\n plugin.init = function(worksheet) {\n }\n\n /**\n * Jspreadsheet events\n */\n plugin.onevent = function() {\n // It would be executed in every single event and can be used to customize actions\n }\n\n /**\n * It would be call every single time persistence is required\n * @param {object} worksheet - worksheet\n * @param {string} method - action executed\n * @param {object} args - depending on the action.\n */\n plugin.persistence = function(worksheet, method, args) {\n // Different options are used depending on the action performed.\n }\n\n /**\n * Run on the context menu\n * @param instance Jexcel Spreadsheet Instance\n * @param x coordinates from the clicked cell\n * @param y coordinates from the clicked cell\n * @param e click object\n * @param items current items in the contextMenu\n */\n plugin.contextMenu = function(instance, x, y, e, items) {\n // Can be used to overwrite the contextMenu\n\n return items;\n }\n\n /**\n * Run on toolbar\n * @param instance Jexcel Spreadsheet Instance\n * @param items current items in the toolbar \n */\n plugin.toolbar = function(instance, items) {\n // Can be used to overwrite the toolbar\n\n return items;\n }\n\n // Any startup configuration goes here\n // (...)\n\n // Return the object\n return plugin;\n});\n```\n\n## Examples\n\nThe following code is a working example of a plugin in action. \n\n### Spreadsheet properties update\n\nThe properties plugin allow the user to change some of the spreadsheet settings, through a new option included in the context menu. \n\n{.small}\nRight-click in any cell and choose the last option in the context menu. \n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n// Installation npm install @jspreadsheet/properties\nimport properties from \"@jspreadsheet/properties\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n\n // Render data grid component\n return (\n
`setReadOnly(ident: HTMLElement\\|string, state: boolean): void` |\n| `isReadOnly(number, number)` | Checks if a cell is read-only.
`isReadOnly(x: number, y: number): boolean` |\n\n## Examples\n\n### Readonly\n\nA basic spreadsheet example with a read-only column and an additional read-only cell.\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n ['Mazda', 2001, 2000, 1],\n ['Peugeot', 2010, 5000, 1],\n ['Honda Fit', 2009, 3000, 1],\n ['Honda CRV', 2010, 6000, 0],\n ];\n\n const columns = [\n {\n type: 'text',\n title:'Description',\n width:'200px',\n readOnly:true,\n },\n {\n type: 'text',\n title:'Year',\n width:'200px'\n },\n {\n type: 'text',\n title:'Price',\n width:'100px',\n mask:'#.##',\n },\n {\n type: 'checkbox',\n title:'Automatic',\n width:'100px'\n },\n ];\n\n const updateTable = function(el, cell, x, y, source, value, id) {\n if (x == 2 && y == 2) {\n cell.classList.add('readonly');\n }\n }\n\n // Render component\n return (\n <>\n
- \n
- \n Click to insert a new blank row at the end of the spreadsheet\n \n
- \n Click to insert two new blank rows at the beginning of the spreadsheet\n \n
- \n Click to delete the last row\n \n
- \n Click to move the first row to the third position\n \n
- \n Hide the first row\n \n
- \n Show the first row\n \n
`worksheetInstance.getHeight(row?: undefined): string[];`
Retrieves the height of a row.
`worksheetInstance.getHeight(row: number): string;` |\n| `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;` |\n| `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;` |\n| `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;` |\n| `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;` |\n\n\n### Events\n\nThe following events are related to rows in your spreadsheet.\n\n| Event | Description |\n|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `onbeforeinsertrow` | Triggered before a new row is inserted. Return `false` to cancel the action.
`onbeforeinsertrow(worksheet: Object, rows: Object[]) => Boolean \\| Object[] \\| void` |\n| `oninsertrow` | Triggered after a new row is inserted.
`oninsertrow(worksheet: Object, rows: Object[]) => void` |\n| `onbeforedeleterow` | Triggered before a row is deleted. Return `false` to cancel the action.
`onbeforedeleterow(worksheet: Object, rows: Number[]) => Number[] \\| Boolean \\| void` |\n| `ondeleterow` | Triggered after a row is deleted.
`ondeleterow(worksheet: Object, rows: Number[]) => void` |\n| `onmoverow` | Triggered after a row is moved to a new position.
`onmoverow(worksheet: Object, origin: Number, destination: Number) => void` |\n| `onresizerow` | Triggered after the height of one or more rows is changed.
`onresizerow(worksheet: Object, row: Mixed, height: Mixed, oldHeight: Mixed) => void` |\n\n \n\n### Initial Settings\n\nThe following row-related properties are available during spreadsheet initialization.\n\n| Property | Description |\n|---------------------------------|----------------------------------------------------------------------------------------------|\n| `allowInsertRow: boolean` | Enables the user to insert new rows. `Default: true` |\n| `allowManualInsertRow: boolean` | Automatically inserts a new row when the user presses Enter on the last row. `Default: true` |\n| `allowDeleteRow: boolean` | Allows the user to delete rows. `Default: true` |\n| `rowDrag: boolean` | Enables the user to change the position of a row by dragging and dropping. `Default: true` |\n| `rowResize: boolean` | Allows the user to resize rows. `Default: true` |\n| `defaultRowHeight: number` | Sets the default row height. |\n| `minSpareRows: number` | Specifies the number of mandatory blank rows at the end of the spreadsheet. `Default: none.` |\n\n\n\n### Available properties\n\nYou can initialize the spreadsheet with custom `id`, `text`, and `height` using the following properties:\n\n| Property | Description |\n|-------------------|----------------------------------------------------------------------------------------------|\n| `id: number` | Unique identifier for the row, which can be used to synchronize the content with a database. |\n| `height: number` | The row height in pixels. |\n| `title: string` | The title or name of the row. |\n\n\n## Examples\n\nA basic spreadsheet with a few programmatic methods available. \n\n```html\n\n\n\n\n\n\n\n\n
\n\n
\n
\n
\n
\n
\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n ['US', 'Cheese', 1000 ],\n ['CA', 'Apples', 1200 ],\n ['CA', 'Carrots', 2000 ],\n ['BR', 'Oranges', 3800 ],\n ];\n // Render component\n return (\n <>\n
\n
\n
\n
\n
\n
\n \n \n );\n}\n```\n```vue\n\n
- \n
- \n Click to insert a new blank row at the end of the spreadsheet\n \n
- \n Click to insert two new blank rows at the beginning of the spreadsheet\n \n
- \n Click to delete the last row\n \n
- \n Click to move the first row to the third position\n \n
- \n Hide the first row\n \n
- \n Show the first row\n \n
- \n
- \n Click to insert a new blank row at the end of the spreadsheet\n \n
- \n Click to insert two new blank rows at the beginning of the spreadsheet\n \n
- \n Click to delete the last row\n \n
- \n Click to move the first row to the third position\n \n
- \n Hide the first row\n \n
- \n Show the first row\n \n
@param `query` - Text to be searched.
`worksheetInstance.search(query: string): void;` |\n| `resetSearch` | Resets search terms and displays all rows.
`worksheetInstance.resetSearch(): void;` | \n\n### Initial Settings\n\nThe following property is available to configure the search functionality during spreadsheet initialization:\n\n| Property | Description |\n|-------------------|-----------------------------------------|\n| `search: boolean` | Enables or disables the search feature. |\n\n\n## Examples\n\n### Data Grid with Search and Pagination\n\nThe example below demonstrates a data grid configured with search functionality and pagination support.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Columns\n const columns = [\n { type:'text', width:80 },\n { type:'text', width:100 },\n { type:'text', width:100 },\n { type:'text', width:200 },\n { type:'text', width:100 },\n ]\n\n // Render component\n return (\n <>\n
`getSelection(preserveOrder: Boolean) : Array \\| null` |\n| `getHighlighted` | Get the coordinates of the highlighted selections.
`getHighlighted() : Array \\| null` |\n| `getRange` | Get the range description of the highlighted cells.
`getRange() : String \\| null` |\n| `getSelectedColumns` | Get the selected columns.
@param `visibleOnly` - If true, the method returns only visible columns.
`worksheetInstance.getSelectedColumns(visibleOnly?: boolean): number[];` |\n| `getSelectedRows` | Get the selected rows.
@param `visibleOnly` - If true, the method returns only visible rows.
`worksheetInstance.getSelectedRows(visibleOnly?: boolean): number[];` |\n| `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) => []` |\n| `isSelected` | Verify if the coordinates given are included in the current selection.
`isSelected(x: Number, y: Number) : Boolean` |\n| `selectAll` | Select all cells available in the data grid.
`worksheetInstance.selectAll(): void;` |\n| `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;` |\n| `resetSelection` | Remove the selection.
@returns If there were highlighted cells, it returns 1, otherwise it returns 0.
`worksheetInstance.resetSelection(): 0 \\| 1;` |\n\n\n ### Selection Events\n\n| Event | Description |\n|------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `onblur` | Occurs when the table is blurred.
`onblur(instance: WorksheetInstance): void;` |\n| `onfocus` | Occurs when the table is focused.
`onfocus(instance: WorksheetInstance): void;` |\n| `onbeforeselection`{.nowrap} | `onbeforeselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : void` |\n| `onselection` | `onselection(instance: WorksheetInstance, borderLeftIndex: number, borderTopIndex: number, borderRightIndex: number, borderBottomIndex: number, origin: Event \\| undefined): void;` |\n\n \n### Initial Settings\n\n| Property | Description |\n|-------------------------|------------------------------|\n| `selectionCopy: boolean` | Disable the clone selection. |\n\n\n## Examples\n\n### Programmatically Data Grid Selection\n\nDemonstrates how to select all cells within a worksheet in the grid programmatically.\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Render component\n return (\n <>\n@param {number} columnNumber - Sort by column number
@param {boolean} direction: false (asc), true (desc)
`orderBy(columnNumber: Number, direction: Boolean) : void` |\n \n\n### Events\n\n| Event | Description |\n| -------------|-----------------------------------------------------------------------------------------------|\n| onsort | `onsort(worksheet: Object, column: Number, direction: Number, newValue: Array) : void` |\n\n \n### Initial Settings\n\nYou can define the sorting behaviour of your spreadsheet using the following properties:\n\n| Property | Description |\n|----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------|\n| sorting: function | Defines a custom sorting handler. Use this to implement your specific sorting logic.
`sorting(direction: Boolean) : function` |\n| columnSorting: boolean | Enables or disables column-based sorting for the spreadsheet.`Default: true` |\n\n\n## Examples\n\n### Basic Sorting\n\nThe example below demonstrates sorting behaviour across various column types.\n\n{.small}\nDouble-click on any `data grid` column header below to observe sorting functionality.\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n const select = useRef();\n // Data\n const data = [\n ['Mazda', 2001, 2000, '2006-01-01', '453.00', '2', '=E1*F1'],\n ['Peugeot', 2010, 5000, '2005-01-01', '23.00', '5', '=E2*F2'],\n ['Honda Fit', 2009, 3000, '2004-01-01', '214.00', '3', '=E3*F3'],\n ['Honda CRV', 2010, 6000, '2003-01-01', '56.11', '2', '=E4*F4'],\n ];\n\n // Render component\n return (\n <>\n@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` |\n| `hideToolbar` | Hides the toolbar.
`worksheet.parent.hideToolbar() : void` |\n\n \n\n### Settings\n\nCustomize toolbar items during initialization using the following property:\n\n| Property | Description |\n|-------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `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. |\n\n\n### Toolbar Object\n\nCustomize toolbar items during initialization using the properties below.\n\n#### Toolbar General Properties\n\n| Property | Description |\n|--------------|-------------------------------------------------|\n| `container` | Displays a border around the toolbar container. |\n| `badge` | Adds a badge for each toolbar element. |\n| `title` | Shows a title below each icon. |\n| `responsive` | Enables a responsive toolbar. `Default: false` |\n| `items` | Array of items to display in the toolbar. |\n\n#### Toolbar Item Properties\n\n| Property | Description |\n|----------------------|-------------------------------------------------------------------------|\n| `type: string` | Specifies the element type: `icon` \\| `divisor` \\| `label` \\| `select`. |\n| `content: string` | Defines the content of the toolbar element. |\n| `title: boolean` | Sets the tooltip for the toolbar element. |\n| `width: number` | Width of the toolbar element. |\n| `active: boolean` | Initial active state for the toolbar element. |\n| `class: string` | CSS class for each toolbar element. |\n| `value: number` | Initially selected option for `select` type. |\n| `render: function` | Render function for dropdown elements when `type: select`. |\n| `onclick: function` | Callback for when an item is clicked. |\n| `onchange: function` | Callback for when a new item is selected (`select` type only). |\n\n\n## Examples\n\n### Toolbar visibility\n\nThe example below shows how to enable the default data grid toolbar and programmatically control its visibility after initialization. \n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n
\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Render component\n return (\n <>\n\n\n\n\n\n```\n \n## Jspreadsheet Pro\n\n### More examples\n\nIf 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.\n\n* [Vue Spreadsheet Pro](https://jspreadsheet.com/docs/vue)\n* [Vue Spreadsheet with actions](https://codesandbox.io/s/vue3-spreadsheet-with-actions-chx7dw)\n* [Vue Spreadsheet Editor](https://codesandbox.io/s/vue-spreadsheet-zpmf2)\n\n{.pro}\n> **Jspreadsheet Pro for Vue - Professional Spreadsheet Components**\n>\n> While Jspreadsheet CE provides core spreadsheet functionality for Vue, **Jspreadsheet Pro** offers enhanced Vue integration and enterprise features:\n>\n> **Enhanced Vue Integration:**\n> - **TypeScript Support:** Full TypeScript definitions for Vue 3 with type-safe development\n> - **Composition API:** Native Composition API support with custom composables\n> - **Vue 3 Optimized:** Built specifically for Vue 3 with full reactivity system support\n> - **Pinia Integration:** Built-in Pinia store integration for state management\n> - **Nuxt Support:** Full SSR/SSG support for Nuxt 3 applications\n> - **Vue DevTools:** Enhanced debugging with Vue DevTools integration\n>\n> **Professional Components:**\n> - **Advanced Editors:** Conditional dropdowns, rich text, HTML editors with Vue reactivity\n> - **Formula System:** 500+ Excel functions with Vue reactive bindings\n> - **Conditional Formatting:** Visual rules, data bars, color scales, icon sets\n> - **Data Validation:** Real-time validation with custom Vue components\n> - **Import/Export:** Full Excel (.xlsx) import/export with formatting preservation\n> - **Charts & Graphs:** Built-in Vue chart components for data visualization\n>\n> **Vue Reactivity Features:**\n> - **Reactive Data Binding:** Two-way binding with Vue ref/reactive objects\n> - **Computed Properties:** Use computed values for cell formulas\n> - **Watchers:** Automatic updates when source data changes\n> - **V-Model Support:** Full v-model binding for spreadsheet data\n> - **Teleport Support:** Use Vue Teleport for dialogs and overlays\n> - **Suspense Ready:** Async component loading with Suspense\n>\n> **Performance & Scale:**\n> - **Virtual Scrolling:** Handle 100K+ rows with smooth scrolling\n> - **Lazy Loading:** Load data on-demand for optimal performance\n> - **Vue 3 Performance:** Optimized for Vue 3's improved rendering engine\n> - **Web Workers:** Background processing for heavy calculations\n> - **Memory Efficiency:** Optimized memory usage for large datasets\n>\n> **Developer Experience:**\n> - **Vue-Specific Documentation:** Examples with Options API and Composition API\n> - **Professional Support:** Priority support for Vue integration issues\n> - **Regular Updates:** Continuous Vue 3 compatibility improvements\n> - **Migration Tools:** Easy migration from CE to Pro with Vue examples\n>\n> **Vue-Specific Pro Features:**\n> - **Custom Vue Components:** Use Vue components as cell editors and renderers\n> - **Scoped Slots:** Advanced customization with scoped slots\n> - **Event Integration:** Seamless integration with Vue event system\n> - **Provide/Inject:** Share spreadsheet context across component tree\n> - **Testing Support:** Vitest/Vue Test Utils integration examples\n>\n> Perfect for Vue applications requiring enterprise-grade spreadsheet functionality with professional support.\n>\n> **[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)**\n\n" }, { "path": "docs/jspreadsheet/docs/worksheets.md", "content": "title: Worksheets Settings, Methods, and Related Events\nkeywords: 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\ndescription: Learn how to set up and manage worksheets in Jspreadsheet programmatically. Explore various worksheet properties, settings, and efficient handling and customization techniques.\n\n# Worksheets\n\nJspreadsheet 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. \n\n## Documentation\n\n### Methods\n\nExplore the available methods to programmatically interact with and manage worksheets in Jspreadsheet.\n\n| Property | Description |\n|-----------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `openWorksheet(number)` | Opens a worksheet by its index.
`openWorksheet(position?: Number) => void` |\n| `createWorksheet(object, number)` | Adds a new worksheet based on a configuration object, optionally at a specific position.
`createWorksheet(worksheetOptions: Object, position?: Number) => worksheetInstance` |\n| `deleteWorksheet(number)` | Removes an existing worksheet by its index.
`deleteWorksheet(position?: Number) => void` |\n\n### Events\n\nExplore the available events to monitor and respond to worksheet interactions in Jspreadsheet.\n\n| Event | Description |\n|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `onopenworksheet` | `onopenworksheet(worksheet: Object, worksheetNumber: Number) : void` |\n| `onbeforecreateworksheet` | Intercept worksheet creation to cancel or configure the new worksheet.
`onbeforecreateworksheet(worksheet: Object, options: Object, worksheetNumber: Number) : mixed` |\n| `oncreateworksheet` | `oncreateworksheet(worksheet: Object, worksheetOptions: Object, worksheetNumber: Number) : void` |\n| `ondeleteworksheet` | `ondeleteworksheet(worksheet: Object, oldWorksheetNumber: Number) : void` |\n\n\n### Configuration\n\nYou can customize spreadsheet and worksheet behaviour using the following settings.\n\n#### Worksheet Settings\n\n| Property | Description |\n|--------------------------|--------------------------------------|\n| `worksheetId: string` | Unique identifier for the worksheet. |\n| `worksheetName: string` | Title of the worksheet. |\n\n#### Spreadsheet Properties\n\n| Property | Description |\n|----------------------------------|----------------------------------------------------------------------------------------------------|\n| `tabs: boolean\\|object` | Enables tabs for worksheet navigation and allows users to create new worksheets. Default: `false`. |\n| `allowDeleteWorksheet: boolean` | Enables the delete worksheet option in the context menu. Default: `true`. |\n| `allowRenameWorksheet: boolean` | Enables the rename worksheet option in the context menu. Default: `true`. |\n| `allowMoveWorksheet: boolean` | Enables drag-and-drop functionality for rearranging worksheets. Default: `true`. |\n\n\n{.green}\n> ##### Tabs\n> 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)\n\n \n#### Quick example\n\n{.ignore-execution}\n```html\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Tabs\n const tabs = {\n allowCreate: true,\n allowChangePosition: true,\n animation: true,\n position: \"bottom\",\n };\n // Render component\n return (\n
@Param boolan onlyHighlighedCells - Get only highlighted cells | $('#my').jexcel('getData', false); | \n| **getRowData: get the data from the a row**
@Param integer rowNumber - Row number starting from zero. | $('#my').jexcel('getRowData', 1); |\n| **getColumnData: get the data from the a column**
@Param integer columnNumber - Column number starting from zero. | $('#my').jexcel('getColumnData', 2); |\n| **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); | \n| **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); | \n| **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); | \n| **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); | \n| **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); | \n| **getHeader: get the current header by column number**
@Param integer columnNumber - Column number starting on zero | $('#my').jexcel('getHeader', 2); | \n| **setHeader: change header by column**
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | $('#my').jexcel('setHeader', 1, 'Title'); | \n| **getWidth: get the current column width**
@Param integer columnNumber - column number starting on zero | $('#my').jexcel('getWidth', 2); | \n| **setWidth: change column width**
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | $('#my').jexcel('setWidth', 1, 100); | \n| **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); | \n| **getValue: get current cell value**
@Param mixed cellIdent - str compatible with excel, or as object. | $('#my').jexcel('getValue', 'A1'); | \n| **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'); | \n| **updateSelection: select cells**
@Param object startCell - cell object
@Param object endCell - cell object | $('#my').jexcel('updateSelection', [cell], [cell]); | \n| **download: get the current data as a CSV file.**
@Param none | $('#my').jexcel('download'); | \n| **destroy: remove the table and all references and events attached.**
@Param none | $('#my').jexcel('destroy'); | \n| **getCell: get the cell object based on a string**
@Param styring cellIdent - str compatible with excel, or as object. | $('#my').jexcel('getCell', 'B1'); |\n| **getSelectedCells: get all selected cells**
@Param none | $('#my').jexcel('getSelectedCells'); |\n| **undo: undo an action**
@Param none | $('#my').jexcel('undo'); |\n| **redo: redo an action**
@Param none | $('#my').jexcel('redo'); |\n| **moveRow: move an row to another position**
@Param from - from position y0
@Param to - to position y1 | $('#my').jexcel('moveRow', 1, 2); |\n| **getStyle: get table or cell style**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getStyle', 'A1'); |\n| **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'} ]); |\n| **getComments: get cell comments**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getComments', 'A1'); |\n| **setComments: set cell comments**
@Param cell - cell identification
@Param text - comments | $('#my').jexcel('setComments', 'A1', 'My cell comments!'); |\n| **getMeta: get the table or cell meta information**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getMeta', 'A1'); |\n| **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'} } ]); |\n\n" }, { "path": "docs/jspreadsheet/v2/docs/quick-reference.md", "content": "title: Quick Reference\nkeywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features\ndescription: Quick Reference for Jexcel spreadsheet properties\n\n[Back to Documentation](/jspreadsheet/v2/docs \"Back to the documentation section\")\n\n# The javascript spreadsheet quick reference\n\n## Methods\n\n| Method | Description |\n|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------|\n| **getData: Get the full or partial table data**
@Param boolan onlyHighlighedCells - Get only highlighted cells | $('#my').jexcel('getData', false); |\n| **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); |\n| **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' }); |\n| **deleteColumn: remove column by number**
@Param integer columnNumber - Which column should be excluded starting on zero | $('#my').jexcel('deleteColumn', 1); | \n| **insertRow: add a new row**
@Param integer numberOfRows - Number of rows should be added | $('#my').jexcel('insertRow', 1); | \n| **deleteRow: remove row by number**
@Param integer rowNumber - Which row should be excluded starting on zero | $('#my').jexcel('deleteRow', 1); |\n| **getHeader: get the current header by column number**
@Param integer columnNumber - Column number starting on zero | $('#my').jexcel('getHeader', 2); |\n| **setHeader: change header by column**
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | $('#my').jexcel('setHeader', 1, 'Title'); |\n| **getWidth: get the current column width**
@Param integer columnNumber - column number starting on zero | $('#my').jexcel('getWidth', 2); |\n| **setWidth: change column width**
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | $('#my').jexcel('setWidth', 1, 100); |\n| **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); |\n| **getValue: get current cell value**
@Param mixed cellIdent - str compatible with excel, or as object. | $('#my').jexcel('getValue', 'A1'); |\n| **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'); | \n| **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); |\n| **download: get the current data as a CSV file.**
@Param none | $('#my').jexcel('download'); |\n| **getConfig: get the current value of one configuration by key**
@Param string configuration key | $('#my').jexcel('getConfig', 'allowInsertColumn'); |\n| **setConfig: set the value of one configuration by key**
@Param string configuration key
@Param mixed configuration value | $('#my').jexcel('setConfig', 'allowInsertColumn', true); |\n| **download: get the current data as a CSV file.**
@Param none | $('#my').jexcel('download'); |\n| **getStyle: get table or cell style**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getStyle', 'A1'); |\n| **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'} ]); |\n| **getComments: get cell comments**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getComments', 'A1'); |\n| **setComments: set cell comments**
@Param cell - cell identification
@Param text - comments | $('#my').jexcel('setComments', 'A1', 'My cell comments!'); |\n| **getMeta: get the table or cell meta information**
@Param mixed - cell identification or null for the whole table. | $('#my').jexcel('getMeta', 'A1'); |\n| **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'} } ]); |\n \n[Working example](/jspreadsheet/v2/docs/programmatically-changes)\n\n \n\n## Events\n\n| Event| description |\n| ---|--- |\n| **onload** | This method is called when the method setData |\n| **onbeforechange** | Before a column value is changed. |\n| **onchange** | After a column value is changed. |\n| **onafterchange** | After all change events is performed. |\n| **oninsertrow** | After a new row is inserted. |\n| **ondeleterow** | After a row is excluded. |\n| **oninsertcolumn** | After a new column is inserted. |\n| **ondeletecolumn** | After a column is excluded. |\n| **onselection** | On the selection is changed. |\n| **onsort** | After a colum is sorted. |\n| **onresize** | After a colum is resized. |\n| **onmoverow** | After a row is moved to a new position. |\n| **onfocus** | On table focus |\n| **onblur** | On table blur |\n \n[Example on handling events on your javascript spreadsheet](/jspreadsheet/v2/examples/tracking-changes-on-the-spreadsheet)\n\n## Initialization parameters\n\n| Parameter| description |\n| ---|--- |\n| **columns** | Column type, dropdown options, text wrapping,marking, etc. |\n| **colHeaders** | Column header titles |\n| **colWidths** | Column widths: width in px. |\n| **colAlignments** | Column alignments: left, right, center. |\n| **colHeaderClasses** | Column custom CSS classes |\n| **defaultColWidth** | Default width for a new column |\n| **minSpareRows** | Minimum number of spare rows |\n| **minSpareCols** | Minimum number of spare cols |\n| **minDimensions** | Minimum table dimensions: [cols,rows] |\n| **contextMenu** | Context menu content: function() { return customMenu } |\n| **columnSorting** | Allow column sorting: bool |\n| **columnResize** | Allow column resizing: bool |\n| **rowDrag** | Allow row dragging: bool |\n| **editable** | Allow table edition: bool |\n| **allowInsertRow** | Allow insert a new row: bool |\n| **allowManualInsertRow** | Allow user to insert a new row: bool |\n| **allowInsertColumn** | Allow insert a new column: bool |\n| **allowManualInsertColumn** | Allow user to create a new column: bool |\n| **allowDeleteRow** | Allow delete a row: bool |\n| **allowDeleteColumn** | Allow delete a column: bool |\n| **wordWrap** | Global text wrapping: bool |\n| **csvFileName** | CSV default file name: string |\n| **selectionCopy** | Allow selection copy: bool |\n| **tableOverflow** | Allow table overflow: bool |\n| **tableHeight** | Force the max height of the table |\n| **tableWidth** | Force the max width of the table |\n| **allowComments** | Allow comments over the cells |\n| **toolbar** | Add custom toolbars |\n\n" }, { "path": "docs/jspreadsheet/v2/docs.md", "content": "title: Jspreadsheet | Documentation\nkeywords: Jspreadsheet, grid, data, table, datatable, json, excel, excel-like, jquery, javascript, spreadsheet\ndescription: Introduction, basic methods, event handles and all information you need about this jquery plugin.\n\n## Column types\n\nJspreadsheet 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.\n\nIn 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._\n\n```javascript\n$('#my').jexcel({\n data:data,\n colHeaders: ['Model', 'Date', 'Price', 'Date'],\n colWidths: [ 300, 80, 100, 100 ],\n columns: [\n { type: 'text' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'calendar', options: { format:'DD/MM/YYYY' } },\n ]\n});\n```\n\n### Custom columns\n\nTo 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.\n\n[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)\n\n" }, { "path": "docs/jspreadsheet/v2/examples/a-custom-table-design.md", "content": "title: Jspreadsheet | Examples | Bootstrap and custom table design\nkeywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid\ndescription: Create a custom table design. For example a bootstrap-like spreadsheet table.\ncanonical: https://bossanova.uk/jspreadsheet/v2/examples/a-custom-table-design\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Create custom CSS for your javascript spreadsheet\n\nThe following example shows a CSS addon to change the core layout of your jquery tables.\n\n \n\n## Green borders and corners jquery spreadsheet\n\n[Bootstrap-like jquery spreadsheet example](/jspreadsheet/v2/examples/a-custom-table-design)\n\n## Bootstrap-like jquery spreadsheet.\n\n[Green borders and corners jquery spreadsheet example](/jspreadsheet/v2/examples/a-custom-table-design?layout=green)\n\nYour jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n" }, { "path": "docs/jspreadsheet/v2/examples/autocomplete.md", "content": "title: Autocomplete Column\nkeywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column\ndescription: Customize your column type to autocomplete\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Autocomplete column\n\nIt 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.\n\n[Json source demo](/jspreadsheet/countries)\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/comments.md", "content": "title: Jspreadsheet | Examples | Add comments in your jquery table\nkeywords: Jexcel, jquery, javascript, cell comments, jquery table\ndescription: Manage a table cell comments\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Manage cell comments in your jquery table\n\nThe 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.\n\nIt is also possible to manage your cell comments programmatically by the use of commands such as setComments or getComments, for example:\n\n| Method | Description |\n|-------------------------------------------------------------------------|--------------------|\n| $('#my1').jexcel('setComments', 'A1', 'This is the comments from A1'); | Set A1 comments |\n| $('#my1').jexcel('getComments', 'A1'); | Get A1 comments |\n| $('#my1').jexcel('setComments', 'A1', ''); | Reset A1 comments |\n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/create-from-a-existing-html-table.md", "content": "title: Create From HTML Table\nkeywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, table\ndescription: Create Spreadsheet based on HTML Table\n\n```html\n
| 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 |
\n\n\n
\n\n\n\n\n\n``` \n\n## Online demo on jsFiddle\n\n[How to extract data example from your jquery table on jsFiddle](https://jsfiddle.net/spreadsheet/tzy1h6rg/)\n\n" }, { "path": "docs/jspreadsheet/v2/examples/headers.md", "content": "title: Jspreadsheet | Examples | Nested Headers\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, nested headers\ndescription: Creating a Jspreadsheet table with nested headers.\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Nested Headers\n\nThe most recent version of the jquery plugin Jspreadsheet implements nested headers natively. A few examples on how to add nested headers your jquery table:\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/images.md", "content": "title: Jspreadsheet | Examples | Images on your images\nkeywords: Jexcel, jquery, javascript, spreadsheet, table, jquery plugin, images\ndescription: Add images on your spreadsheet cells\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Embed images on your cells\n\nThe following example shows how to render images inside your spreadsheet cells\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n```\n\n[Edit this example on jsFiddle](https://jsfiddle.net/spreadsheet/9296zmpf/)\n\n" }, { "path": "docs/jspreadsheet/v2/examples/including-formulas-on-your-spreadsheet.md", "content": "title: Jspreadsheet | Examples | Formulas on Spreadsheet\nkeywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column\ndescription: Using Functions inside your spreadsheet\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Including formulas on your javascript spreadsheet plugin\n\nThe example below shows how to use Excel like formulas on your jquery spreadsheet.\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n# Third party formula implementations\n\nYou can use a third party libraries to execute various Excel like formulas.\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n \n\n# Custom javascript formulas\n\nThe example below shows how to create your own method in javascript to apply as a Excel like formula\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet.md", "content": "title: Jspreadsheet | Examples | Custom column and integrating plugins on your table\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by\ndescription: How to create custom column types based on a third party jquery plugin\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Create a custom column based on a third party jquery plugin\n\nThis 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.\n\n[See this example on jsFiddle](https://jsfiddle.net/spreadsheet/rp0876b1/)\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/jquery-table-with-toolbars.md", "content": "title: Jspreadsheet | Examples | Your jquery table with toolbars\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, jquery table, toolbars\ndescription: Full examples how to load a autocomplete dropdown.\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Add a custom toolbar in your jquery tables\n\nThe following example will show how to integrate a custom native toolbar in your spreadsheet plugin.\n\n## Instructions\n\nThe toolbar can be customized with a few parameters. \n\n| | |\n| ---|--- |\n| _**type**_ | could be **i** for icon, **select** for a dropdown, **spectrum** or a colorpicker. |\n| _**content**_ | defines the icon (from material icons) when you use type:i; [click here for all possible keys](https://material.io/tools/icons/) | \n| _**k**_ | means the style should be apply to the cell; |\n| _**v**_ | means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; |\n| _**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. |\n \n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n**NOTE:** It is important to have google material fonts loaded.\n\n" }, { "path": "docs/jspreadsheet/v2/examples/meta-information.md", "content": "title: Jspreadsheet | Examples | Add meta information in your cells\nkeywords: Jexcel, jquery, javascript, jquery table, meta information\ndescription: Manage the table meta information\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Add meta information in your spreadsheet spreadsheet plugin\n\nYou can keep meta information bind to cells but not visible to users. This can be useful for integrating Jspreadsheet with third party software.\n\nBut, after the initialization is still possible to manage the cell meta information programmatically using the method getMeta and setMeta, as follow.\n\n| | |\n| ---|--- | \n| $('#my1').jexcel('setMeta', [{ A1: { newInfo:'newInfo' } }, { B1: { info1:'test1', info2:'test2'} }, { C2: { metaTest:'test3' } }]); | Set meta data for the table in a batch |\n| $('#my1').jexcel('setMeta', 'A2', 'myKeyMeta', 'myValueMeta'); | Set a meta information for A2 |\n| $('#my1').jexcel('getMeta', 'A1'); | Get the meta information for A1 |\n| $('#my1').jexcel('getMeta'); | Get all meta information |\n \n \n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/mobile.md", "content": "title: Jspreadsheet | Examples | Mobile Layout\nkeywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, mobile\ndescription: Responsive Layout\n\n{.ignore}\n```html\n\n\n\n```\n" }, { "path": "docs/jspreadsheet/v2/examples/multiple-spreadsheets-in-the-same-page.md", "content": "title: Jspreadsheet | Examples | Create multiple instances in the same page\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by\ndescription: How to create multiple table instances in the same page\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Multiple spreadsheets in the same page\n\nHow to embed multiple spreadsheets in the same page.\n\n## Source code\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/readonly-options.md", "content": "title: Jspreadsheet | Examples | Handling readonly column and cells on your spreadsheet\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, events\ndescription: Understanding how to set a readonly column or multiple custom cells\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Readonly columns and cells.\n\n## Source code\n\n```html\n\n \n \n \n \n \n \n \n \n\n``` \n\n## Online demo on jsFiddle\n\n\n\n" }, { "path": "docs/jspreadsheet/v2/examples/responsive-columns.md", "content": "title: Jspreadsheet | Examples | Responsive Layout\nkeywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column\ndescription: Creating a more responsive layout on jexcel\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Responsive columns\n\nThe Jspreadsheet jquery plugin brings a more responsive column types.\n\n\n\n[Open this table only in a new window](/jspreadsheet/v2/examples/mobile)\n\n" }, { "path": "docs/jspreadsheet/v2/examples/sorting-data.md", "content": "title: Jspreadsheet | Examples | Sorting your grid\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by\ndescription: Sorting your Jspreadsheet spreadsheet\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Sorting your table\n\nYou 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.\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n
\n\n\n```\n\n### Programmatically sorting\n\n{.ignore}\n```html\n\n``` \n\n### Disable the table sorting\n\nThe ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization.\n\n{.ignore}\n```html\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/table-styling.md", "content": "title: Jspreadsheet | Examples | Changing the table style\nkeywords: Jexcel, jquery, javascript, table design, spreadsheet, table, grid, colours\ndescription: Table styling\n\n[Back to Examples](/v2/examples#more)\n\n# How to change the spreadsheet style.\n\nYou 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.\n\nBut, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle.\n\n| | |\n| ---|--- |\n| $('#my1').jexcel('setStyle', 'A1', 'font-weight', 'bold'); | Change A1 fontWeight |\n| $('#my1').jexcel('setStyle', 'A2', 'background-color', 'yellow'); | Change A2 backgroundColor |\n| $('#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 |\n| $('#my1').jexcel('getStyle', 'A1');| Get A1 style attributes |\n| $('#my1').jexcel('getStyle');| Get the whole table attributes |\n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n \n\n## How to set global CSS rules for your jquery tables\n\nGive your clients a nice look table with colours and styling.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/table-with-fixed-headers.md", "content": "title: Jspreadsheet | Examples | Data table with fixed headers and scrolling\nkeywords: Jexcel, jquery, javascript, fixed headers, scrolling, data tables\ndescription: Overflow table and scrolling\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Spreadsheet with fixed headers and scrolling\n\nCreate an instance of your jquery plugin to allow a table overflow and scrolling.\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/text-wrapping.md", "content": "title: Jspreadsheet | Examples | Text wrap\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, text wrapping\ndescription: How to change the text wrap behavior in a Jspreadsheet column\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Text wrapping\n\nThe 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\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/tracking-changes-on-the-spreadsheet.md", "content": "title: Jspreadsheet | Examples | Events\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, events\ndescription: Handling events on your spreadsheet\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Handling events\n\nTracking changes on your spreadsheet.\n\n \n[See this example on jsFiddle](https://jsfiddle.net/spreadsheet/0dyms2b9/) \n\n## Advanced Example\n\nUpdate the chart on every change in your spreadsheet, using the onchange handler\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Online demo on jsFiddle\n\n\n" }, { "path": "docs/jspreadsheet/v2/examples/using-a-calendar-column-type.md", "content": "title: Jspreadsheet | Examples | Calendar column type with date and datetime picker\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, date, datetime picker\ndescription: How to handle a calendar with date and datetime picker.\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Calendar column type\n\nThe example below shows how to use and customize special calendar column type.\n\nSee a live example of calendar usage on [jsfiddle](https://jsfiddle.net/spreadsheet/ajv413cb/).\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Date column customization\n\nCustomize the format and the behavior of your column through the initialization options, as follow:\n\n### Calendar initialization options\n\n{.ignore}\n```javascript\n{\n options: {\n format:'DD/MM/YYYY', // Date format\n readonly:0, // Input as readonly (true or false)\n today:0, // Input with at today as default (true or false)\n time:0, // Show time picker\n clear:1, // Show clear button\n mask:1, // Mask the input\n months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // Translations can be done here\n weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], // Translations can be done here\n weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'] // Translations can be done here\n };\n}\n```\n\nConsidering the example above, you can create a calendar including a time picker by simple send the option **time:1** as the following example.\n\n{.ignore}\n```html\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples/working-with-dropdowns.md", "content": "title: Jspreadsheet | Examples | Advanced dropdown column type\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by\ndescription: Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns.\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Working with dropdowns\n\nJspreadsheet 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:\n\n * Create a simple dropdown from array\n * Value or key-value select is available\n * Populate a dropdown from a external JSON request\n * Dynamic autocomplete search based on another column value\n * Conditional dropdowns: options from a dropdown based on a method return\n * Multiple and autocomplete\n * Responsive data picker\n\n## Multiple and autocomplete options\n\nThe 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.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n \n\n## Conditional dropdown\n\nJspreadsheet 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.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n" }, { "path": "docs/jspreadsheet/v2/examples/working-with-the-data.md", "content": "title: Jspreadsheet | Examples | Working with the data\nkeywords: Jexcel, jquery, javascript, insert, remove and move columns and rows, spreadsheet, CSV, table, grid\ndescription: Insert, remove and move columns and rows\n\n[Back to Examples](/jspreadsheet/v2/examples)\n\n# Programmatically insert, remove and move columns and rows\n\nThe following example shows how to manage data programmatically in your javascript spreadsheet.\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v2/examples.md", "content": "title: Examples\nkeywords: Jexcel, javascript, examples\ndescription: Examples how to create web based spreadsheets using Jexcel.\n\n# Examples\n\nThe Spreadsheet minimalist jQuery Plugin examples shows the usage with various column types such as text, dropdown, autocomplete, checkbox and date.\n\n```html\n\n\n\n```\n\n[See this example on jsfiddle](https://jsfiddle.net/spreadsheet/kgmcav01/)\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n## More examples\n\n* [Advanced dropdowns](/jspreadsheet/v2/examples/working-with-dropdowns \"Advanced dropdown column type\") \n Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns.\n\n* [Programmaticaly changes](/jspreadsheet/v2/examples/working-with-the-data \"Jspreadsheet | Examples | Working with the data\") \n Insert, remove and move columns and rows\n\n* [Fixed headers](/jspreadsheet/v2/examples/table-with-fixed-headers \"Jspreadsheet | Examples | Data table with fixed headers and scrolling\") \n Overflow table and scrolling\n\n* [Custom table design](/jspreadsheet/v2/examples/a-custom-table-design \"Jspreadsheet | Examples | Bootstrap and custom table design\") \n Create a custom table design. For example a bootstrap-like spreadsheet table.\n\n* [Table styling](/jspreadsheet/v2/examples/table-styling \"Jspreadsheet | Examples | Changing the table style\") \n Table styling\n\n* [Manage cell comments](/jspreadsheet/v2/examples/comments \"Jspreadsheet | Examples | Add comments in your jquery table\") \n Manage a table cell comments\n\n* [Custom meta information](/jspreadsheet/v2/examples/meta-information \"Jspreadsheet | Examples | Add meta information in your cells\") \n Manage the table meta information\n\n* [Custom toolbars](/jspreadsheet/v2/examples/jquery-table-with-toolbars \"Jspreadsheet | Examples | Your jquery table with toolbars\") \n Full examples how to load a autocomplete dropdown.\n\n* [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\") \n How to load the data from an external CSV file into a Jspreadsheet grid or table.\n\n* [Masking and formating](/jspreadsheet/v2/examples/currency-and-masking-numbers \"Jspreadsheet | Examples | Using currency column type and how to masking numbers\") \n Handling currency types and masking numbers.\n\n* [Calendar picker](/jspreadsheet/v2/examples/using-a-calendar-column-type \"Jspreadsheet | Examples | Calendar column type with date and datetime picker\") \n How to handle a calendar with date and datetime picker.\n\n* [Sorting](/jspreadsheet/v2/examples/sorting-data \"Jspreadsheet | Examples | Sorting your grid\") \n Sorting your Jspreadsheet spreadsheet\n\n* [Create custom cells](/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet \"Jspreadsheet | Examples | Custom column and integrating plugins on your table\") \n How to create custom column types based on a third party jquery plugin\n\n* [Handling events](/jspreadsheet/v2/examples/tracking-changes-on-the-spreadsheet \"Jspreadsheet | Examples | Events\") \n Handling events on your spreadsheet\n\n* [Readonly options](/jspreadsheet/v2/examples/readonly-options \"Jspreadsheet | Examples | Handling readonly column and cells on your spreadsheet\") \n Understanding how to set a readonly column or multiple custom cells\n\n* [Multiple instances](/jspreadsheet/v2/examples/multiple-spreadsheets-in-the-same-page \"Jspreadsheet | Examples | Create multiple instances in the same page\") \n How to create multiple table instances in the same page\n\n* [Text wrap](/jspreadsheet/v2/examples/text-wrapping \"Jspreadsheet | Examples | Text wrap\") \n How to change the text wrap behavior in a Jspreadsheet column\n\n* [Nested headers](/jspreadsheet/v2/examples/headers \"Jspreadsheet | Examples | Nested Headers\") \n Creating a Jspreadsheet table with nested headers.\n\n* [Add images on your cells](/jspreadsheet/v2/examples/images \"Jspreadsheet | Examples | Images on your images\") \n Add images on your spreasheet cells\n" }, { "path": "docs/jspreadsheet/v2/getting-started.md", "content": "title: Getting Started with jExcel\nkeywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features\ndescription: Create data grids with spreadsheet controls with jExcel.\n\n[Back to Documentation](/jspreadsheet/v2/docs)\n\n# Getting started with the jquery plugin\n\n## Initialization\n\nJspreadsheet can receive data from a JS array, CSV or a JSON format, following the examples below:\n\nThere 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.\n\n### Loading from a javascript array\n\n```html\n\n \n\n```\n\n### Loading from a JSON file\n\n{.ignore}\n```html\n\n\n\n```\n\n### Loading from a CSV file\n\n{.ignore}\n```html\n\n\n\n```\n\n[See a working example](/jspreadsheet/v2/examples/creating-a-table-from-an-external-csv-file)\n\n \n\n## Destroying a table\n\nYou can destroy the table, all data and events related to an existing table by using the method _destroy_ as shown below.\n\n{.ignore}\n```html\n\n```\n\n## Header titles\n\nIf 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:\n\n{.ignore}\n```javascript\n$('#my').jexcel({\n data:data,\n colHeaders: ['Model', 'Price', 'Price', 'Date'],\n colWidths: [ 300, 80, 100, 100 ],\n});\n```\n\n**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.\n\n## Column width\n\nThe parameter _colWidths_ can be used to define your column widths.\n\n## Column types\n\nThe 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.\n\nIn 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.**_\n\n{.ignore}\n```javascript\n$('#my').jexcel({\n data:data,\n colHeaders: ['Model', 'Date', 'Price', 'Date'],\n colWidths: [ 300, 80, 100, 100 ],\n columns: [\n { type: 'text' },\n { type: 'numeric' },\n { type: 'numeric' },\n { type: 'calendar', options: { format:'DD/MM/YYYY' } },\n ]\n});\n```\n\n### Calendar type\n\nWhen 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:\n\n{.ignore}\n```javascript\nlet defaults = {\n format:'DD/MM/YYYY', // Date format\n readonly:0, // Readonly input\n today:0, // Default as today\n time:0, // Show time picker\n clear:1, // Clear buttom\n mask:1, // Mask calendar\n};\n```\n\n[See a working example](/jspreadsheet/v2/examples/using-a-calendar-column-type) \n\n### Dropdown and autocomplete type\n\nThere 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.\n\nThe autocomplete drowndown has the same configuration inputs, and both can be used as follow:\n\n{.ignore}\n```javascript\nlet data = [\n ['Honda', 1, 'Civic', '4'],\n ['Peugeot', 3,'1007', '2'],\n ['Smart', 3,'Cabrio', '4;5'],\n];\n\n$('#my').jexcel({\n data:data,\n colHeaders: ['Model','Color', 'Description'],\n colWidths: [ 300, 80, 100 ],\n columns: [\n { type: 'dropdown', source:['Seat', 'Renault', 'Peugeot'] },\n { type: 'dropdown', source:[{'id':1,'name':'Yellow'}, {'id':2,'name':'Black'}, {'id':3,'name':'Green'}] },\n { type: 'dropdown', url:'/jspreadsheet/test' },\n { type: 'dropdown', url:'/jspreadsheet/countries' autocomplete:true, multiple:true },\n ]\n});\n```\n\n[See a working example](/jspreadsheet/v2/examples/working-with-dropdowns)\n\n### Custom type\n\nJspreadsheet 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\nfollowing.\n\n{.ignore}\n```javascript\nlet customEditor = {\n // Methods\n closeEditor : function(cell, save) {\n // Get value\n var value = $(cell).find('.editor').spectrum('get').toHexString();\n\n // Set visual value\n $(cell).html(value);\n $(cell).css('color', value);\n\n // Close edition\n $(cell).removeClass('edition');\n },\n openEditor : function(cell) {\n var main = this;\n // Get current content\n var html = $(cell).html();\n\n // Basic editor\n var editor = document.createElement('div');\n $(cell).html(editor);\n $(editor).prop('class', 'editor');\n $(editor).spectrum({ color:html, preferredFormat:'hex', hide: function(color) {\n main.closeEditor($(cell), true);\n }});\n $(editor).spectrum('show');\n },\n getValue : function(cell) {\n return $(cell).html();\n },\n setValue : function(cell, value) {\n $(cell).html(value);\n $(cell).css('color', value);\n return true;\n }\n}\n\nlet data = [\n ['Google', '#542727'],\n ['Yahoo', '#724f4f'],\n ['Bing', '#b43131'],\n];\n\n$('#my').jexcel({\n data:data,\n colHeaders: [ 'Name', 'Custom color' ],\n colWidths: [ 300, 200 ],\n columns: [\n { type: 'text' },\n { type: 'text', editor:customEditor },\n ]\n});\n```\n\n[See a working example](/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet)\n\n \n \n\n## Define a minimum table dimension size.\n\nThe follow example will create a data table with a minimum number of ten columns and five rows:\n\n{.ignore}\n```javascript\ndata3 = [\n ['Mazda', 2001, 2000],\n ['Peugeot', 2010, 5000],\n ['Honda Fit', 2009, 3000],\n ['Honda CRV', 2010, 6000],\n];\n\n$('#minExample').jexcel({\n data:data3,\n minDimensions:[10,5],\n colHeaders: ['Model', 'Year', 'Price' ],\n colWidths: [ 300, 80, 100 ]\n});\n```\n\n" }, { "path": "docs/jspreadsheet/v3/docs/events.md", "content": "title: Spreadsheet Events: Integration and Customization\nkeywords: 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\ndescription: Learn more about Jspreadsheet’s comprehensive event system for advanced customization and integration.\n\n[Back to Documentation](/jspreadsheet/v3/docs)\n\n# Events on the online spreadsheet\n\n## Custom table scripting after changes\n\nJspreadsheet 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.\n\n[See an example in action](/jspreadsheet/v3/examples/table-scripting)\n\n## Events\n\nJspreadsheet available events in this version.\n\n[Example on handling events on your spreasheet](/jspreadsheet/v3/examples/events)\n\n| Event | description | \n| ---|--- |\n| **onload** | This method is called when the method setData |\n| **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+ |\n| **onchange** | After a column value is changed. |\n| **onafterchanges** | After all changes are applied in the table. |\n| **onpaste** | After a paste action is performed in the javascript table. |\n| **onbeforepaste** | Before the paste action is performed. Used to parse any input data, should return the data. |\n| **oninsertrow** | After a new row is inserted. | \n| **onbeforeinsertrow** | Before a new row is inserted. You can cancel the insert event by returning false. |\n| **ondeleterow** | After a row is excluded. |\n| **onbeforedeleterow** | Before a row is deleted. You can cancel the delete event by returning false. |\n| **oninsertcolumn** | After a new column is inserted. | \n| **onbeforeinsertcolumn** | Before a new column is inserted. You can cancel the insert event by returning false. |\n| **ondeletecolumn** | After a column is excluded. | \n| **onbeforedeletecolumn** | Before a column is excluded. You can cancel the insert event by returning false. |\n| **onmoverow** | After a row is moved to a new position. |\n| **onmovecolumn** | After a column is moved to a new position. |\n| **onresizerow** | After a change in row height. |\n| **onresizecolumn** | After a change in column width. |\n| **onselection** | On the selection is changed. |\n| **onsort** | After a colum is sorted. |\n| **onfocus** | On table focus |\n| **onblur** | On table blur |\n| **onmerge** | On column merge | \n| **onchangeheader** | On header change |\n| **onundo** | On undo is applied |\n| **onredo** | On redo is applied |\n| **oneditionstart** | When a openEditor is called. |\n| **oneditionend** | When a closeEditor is called. |\n| **onchangestyle** | When a setStyle is called. |\n| **onchangemeta** | When a setMeta is called. |\n\n" }, { "path": "docs/jspreadsheet/v3/docs/programmatically-changes.md", "content": "title: Programmatically Changes\nkeywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features\ndescription: Create data grids with spreadsheet controls with Jspreadsheet CE.\n\n[Back to Documentation](/jspreadsheet/v3/docs \"Back to the documentation section\")\n\n# Programmatically changes\n\nJspreadsheet has a comprehensive number of native methods to programmatically interact with your javascript spreadsheet and its data.\n\n[Go to a working example](/jspreadsheet/v3/examples/programmatically-updates)\n\n \n\n## General Methods\n\n| Method | Example |\n|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------|\n| **getData:** Get the full or partial table data@Param boolan onlyHighlighedCells - Get only highlighted cells | spreadsheet.getData([bool]); |\n| **getJson:** Get the full or partial table data in JSON format
@Param boolan onlyHighlighedCells - Get only highlighted cells | spreadsheet.getData([bool]); |\n| **getRowData:** Get the data from one row by number
@Param integer rowNumber - Row number | spreadsheet.getRowData([int]); |\n| **setRowData:** Set the data from one row by number
@Param integer rowNumber - Row number
@param array rowData - Row data | spreadsheet.setRowData([int], [array]); |\n| **getColumnData:** Get the data from one column by number
@Param integer columnNumber - Column number | spreadsheet.getColumnData([int]); |\n| **setColumnData:** Set the data from one column by number
@Param integer columnNumber - Column number
@Param array colData - Column data | spreadsheet.setColumnData([int], [array]); |\n| **setData:** Set the table data
@Param json newData - New json data, null will reload what is in memory. | spreadsheet.setData([json]); |\n| **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]); \n| **getMerge:** Get merged cells properties
@Param string columnName - Column name, such as A1. | spreadsheet.getMerge([string]); |\n| **removeMerge:** Destroy merged by column name
@Param string columnName - Column name, such as A1. | spreadsheet.removeMerge([string]); |\n| **destroyMerged:** Destroy all merged cells | spreadsheet.destroyMerge(); | \n| **getCell** : get current cell DOM
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getCell([string]); |\n| **getLabel** : get current cell DOM innerHTML
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getLabel([string]); |\n| **getValue:** get current cell value
@Param mixed cellIdent - str compatible with excel, or as object. | spreadsheet.getValue([string]); |\n| **getValueFromCoords:** get value from coords
@Param integer x
@Param integer y | spreadsheet.getValueFromCoords([integer], [integer]); \n| **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]); |\n| **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]); |\n| **resetSelection:** Reset the table selection
@Param boolean executeBlur - execute the blur from the table | spreadsheet.resetSelection([bool]); |\n| **updateSelection:** select cells
@Param object startCell - cell object
@Param object endCell - cell object
@Param boolean ignoreEvents - ignore onselection event | spreadsheet.updateSelection([cell], [cell], true); |\n| **updateSelectionFromCoords:** select cells
@Param integer x1
@Param integer y1
@Param integer x2
@Param integer y2 | spreadsheet.updateSelectionFromCoords([integer], [integer], [integer], [integer]); |\n| **getWidth:** get the current column width
@Param integer columnNumber - column number starting on zero | spreadsheet.getWidth([integer]); |\n| **setWidth:** change column width
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | spreadsheet.setWidth([integer], [integer]); |\n| **getHeight:** get the current row height
@Param integer rowNumber - row number starting on zero | spreadsheet.getHeight([integer]); |\n| **setHeight:** change row height
@Param integer rowNumber - row number starting on zero
@Param string newRowHeight- New row height | spreadsheet.setHeight([integer], [integer]); |\n| **getHeader:** get the current header by column number
@Param integer columnNumber - Column number starting on zero | spreadsheet.getHeader([integer]); |\n| **getHeaders:** get all header titles | spreadsheet.getHeaders(); |\n| **setHeader:** change header by column
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | spreadsheet.setHeader([integer], [string]); |\n| **getStyle:** get table or cell style
@Param mixed - cell identification or null for the whole table. | spreadsheet.getStyle([string]); | \n| **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]); |\n| **resetStyle:** remove all style from a cell
@Param string columnName - Column name, example: A1, B3, etc | spreadsheet.resetStyle([string]); |\n| **getComments:** get cell comments
@Param mixed - cell identification or null for the whole table. | spreadsheet.getComments([string]); |\n| **setComments:** set cell comments
@Param cell - cell identification
@Param text - comments | spreadsheet.setComments([string], [string]); |\n| **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]); |\n| **getConfig:** get table definitions | spreadsheet.getConfig(); |\n| **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]); |\n| **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]); |\n| **moveColumn:** change the column position
@Param integer columnPosition
@Param integer newColumnPosition | spreadsheet.moveColumn([integer], [integer]); |\n| **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]); |\n| **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]); |\n| **moveRow:** change the row position
@Param integer rowPosition
@Param integer newRowPosition | >spreadsheet.moveRow([integer], [integer]); |\n| **download:** get the current data as a CSV file
@Param bool - true to download parsed formulas. | spreadsheet.download([bool]); |\n| **getMeta:** get the table or cell meta information
@Param mixed - cell identification or null for the whole table. | spreadsheet.getMeta([string]); |\n| **setMeta:** set the table or cell meta information
@Param mixed - json with whole table meta information. | spreadsheet.setMeta([mixed]); |\n| **fullscreen:** Toogle table fullscreen mode
@Param boolan fullscreen - define fullscreen status as true or false | spreadsheet.fullscreen([bool]); |\n| **getSelectedRows:** Get the selected rows
@Param boolean asIds - Get the rowNumbers or row DOM elements | spreadsheet.getSelectedRows([bool]); |\n| **getSelectedColumns:** Get the selected columns
@Param boolan asIds - Get the colNumbers or row DOM elements | spreadsheet.getSelectedColumns([bool]); |\n| **showIndex:** show column of index numbers | spreadsheet.showIndex(); |\n| **hideIndex:** hide column of index numbers | spreadsheet.hideIndex(); |\n| **search:** search in the table, only if directive is enabled during inialization.
@Param string - Search for word | spreadsheet.search([string]); |\n| **resetSearch:** reset search table | spreadsheet.resetSearch(); |\n| **whichPage:** Which page showing on jspreadsheet - Valid only when pagination is true. | spreadsheet.whichPage(); |\n| **page:** Go to page number- Valid only when pagination is true.
@Param integer - Go to page number | spreadsheet.page([integer]); |\n| **undo:** Undo last changes | spreadsheet.undo(); |\n| **redo:** Redo changes | spreadsheet.redo(); |\n\n" }, { "path": "docs/jspreadsheet/v3/docs/quick-reference.md", "content": "title: Quick Reference\nkeywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features\ndescription: Quick Reference of the jspreadsheet properties\n\n[Back to Documentation](/jspreadsheet/v3/docs)\n\n# The online spreadsheet quick reference\n\n## Methods\n\n| Method | Example | \n| --- | --- | \n| **getData:** Get the full or partial table data
@Param boolean onlyHighlightedCells - Get only highlighted cells | spreadsheet.getData([bool]); | \n| **getJson:** Get the full or partial table data in JSON format
@Param boolean onlyHighlightedCells - Get only highlighted cells | spreadsheet.getJson([bool]); | \n| **getRowData:** Get the data from one row by number
@Param integer rowNumber - Row number | spreadsheet.getRowData([int]); | \n| **setRowData:** Set the data from one row by number
@Param integer rowNumber - Row number
@Param array rowData - Row data | spreadsheet.setRowData([int], [array]); | \n| **getColumnData:** Get the data from one column by number
@Param integer columnNumber - Column number | spreadsheet.getColumnData([int]); | \n| **setColumnData:** Set the data from one column by number
@Param integer columnNumber - Column number
@Param array colData - Column data | spreadsheet.setColumnData([int], [array]); | \n| **setData:** Set the table data
@Param json newData - New json data, null will reload what is in memory. | spreadsheet.setData([json]); | \n| **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]); | \n| **getMerge:** Get merged cells properties
@Param string columnName - Column name, such as A1. | spreadsheet.getMerge([string]); | \n| **removeMerge:** Destroy merged by column name
@Param string columnName - Column name, such as A1. | spreadsheet.removeMerge([string]); | \n| **destroyMerged:** Destroy all merged cells | spreadsheet.destroyMerge(); | \n| **getCell** : get current cell DOM
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getCell([string]); | \n| **getLabel** : get current cell DOM innerHTML
@Param string columnName - str compatible with excel, or as object. | spreadsheet.getLabel([string]); | \n| **getValue:** get current cell value
@Param mixed cellIdent - str compatible with excel, or as object. | spreadsheet.getValue([string]); | \n| **getValueFromCoords:** get value from coords
@Param integer x
@Param integer y | spreadsheet.getValueFromCoords([integer], [integer]); | \n| **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]); | \n| **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]); | \n| **resetSelection:** Reset the table selection
@Param boolean executeBlur - execute the blur from the table | spreadsheet.resetSelection([bool]); | \n| **updateSelection:** select cells
@Param object startCell - cell object
@Param object endCell - cell object
@Param boolean ignoreEvents - ignore onselection event | spreadsheet.updateSelection([cell], [cell], true); | \n| **updateSelectionFromCoords:** select cells
@Param integer x1
@Param integer y1
@Param integer x2
@Param integer y2 | spreadsheet.updateSelectionFromCoords([integer], [integer], [integer], [integer]); | \n| **getWidth:** get the current column width
@Param integer columnNumber - column number starting on zero | spreadsheet.getWidth([integer]); | \n| **setWidth:** change column width
@Param integer columnNumber - column number starting on zero
@Param string newColumnWidth - New column width | spreadsheet.setWidth([integer], [integer]); | \n| **getHeight:** get the current row height
@Param integer rowNumber - row number starting on zero | spreadsheet.getHeight([integer]); | \n| **setHeight:** change row height
@Param integer rowNumber - row number starting on zero
@Param string newRowHeight- New row height | spreadsheet.setHeight([integer], [integer]); | \n| **getHeader:** get the current header by column number
@Param integer columnNumber - Column number starting on zero | spreadsheet.getHeader([integer]); | \n| **getHeaders:** get all header titles | spreadsheet.getHeaders(); | \n| **setHeader:** change header by column
@Param integer columnNumber - column number starting on zero
@Param string columnTitle - New header title | spreadsheet.setHeader([integer], [string]); | \n| **getStyle:** get table or cell style
@Param mixed - cell identification or null for the whole table. | spreadsheet.getStyle([string]); | \n| **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]); | \n| **resetStyle:** remove all style from a cell
@Param string columnName - Column name, example: A1, B3, etc | spreadsheet.resetStyle([string]); | \n| **getComments:** get cell comments
@Param mixed - cell identification or null for the whole table. | spreadsheet.getComments([string]); | \n| **setComments:** set cell comments
@Param cell - cell identification
@Param text - comments | spreadsheet.setComments([string], [string]); | \n| **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]); | \n| **getConfig:** get table definitions | spreadsheet.getConfig(); | \n| **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]); | \n| **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]); | \n| **moveColumn:** change the column position
@Param integer columnPosition
@Param integer newColumnPosition | spreadsheet.moveColumn([integer], [integer]); | \n| **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]); | \n| **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]); | \n| **moveRow:** change the row position
@Param integer rowPosition
@Param integer newRowPosition | spreadsheet.moveRow([integer], [integer]); | \n| **download:** get the current data as a CSV file
@Param bool - true to download parsed formulas. | spreadsheet.download([bool]); | \n| **getMeta:** get the table or cell meta information
@Param mixed - cell identification or null for the whole table. | spreadsheet.getMeta([string]); | \n| **setMeta:** set the table or cell meta information
@Param mixed - json with whole table meta information. | spreadsheet.setMeta([mixed]); | \n| **fullscreen:** Toggle table fullscreen mode
@Param boolean fullscreen - define fullscreen status as true or false | spreadsheet.fullscreen([bool]); | \n| **getSelectedRows:** Get the selected rows
@Param boolean asIds - Get the rowNumbers or row DOM elements | spreadsheet.getSelectedRows([bool]); | \n| **getSelectedColumns:** Get the selected columns
@Param boolean asIds - Get the colNumbers or row DOM elements | spreadsheet.getSelectedColumns([bool]); | \n| **showColumn:** show column by number | spreadsheet.showIndex([int]); | \n| **hideColumn:** hide column by number | spreadsheet.hideColumn([int]); | \n| **showIndex:** show column of index numbers | spreadsheet.showIndex(); | \n| **hideIndex:** hide column of index numbers | spreadsheet.hideIndex(); | \n|\n\n\n \n[Working example](/jspreadsheet/v3/examples/programmatically-changes)\n\n## Events\n\n| Event | Description | \n| --- | --- | \n| **onload** | This method is called when the method setData | \n| **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+ | \n| **onchange** | After a column value is changed. | \n| **onafterchanges** | After all changes are applied in the table. | \n| **onpaste** | After a paste action is performed in the JavaScript table. | \n| **onbeforepaste** | Before the paste action is performed. Used to parse any input data, should return the data. | \n| **oninsertrow** | After a new row is inserted. | \n| **onbeforeinsertrow** | Before a new row is inserted. You can cancel the insert event by returning false. | \n| **ondeleterow** | After a row is excluded. | \n| **onbeforedeleterow** | Before a row is deleted. You can cancel the delete event by returning false. | \n| **oninsertcolumn** | After a new column is inserted. | \n| **onbeforeinsertcolumn** | Before a new column is inserted. You can cancel the insert event by returning false. | \n| **ondeletecolumn** | After a column is excluded. | \n| **onbeforedeletecolumn** | Before a column is excluded. You can cancel the insert event by returning false. | \n| **onmoverow** | After a row is moved to a new position. | \n| **onmovecolumn** | After a column is moved to a new position. | \n| **onresizerow** | After a change in row height. | \n| **onresizecolumn** | After a change in column width. | \n| **onselection** | When the selection is changed. | \n| **onsort** | After a column is sorted. | \n| **onfocus** | On table focus | \n| **onblur** | On table blur | \n| **onmerge** | On column merge | \n| **onchangeheader** | On header change | \n| **onundo** | When undo is applied | \n| **onredo** | When redo is applied | \n| **oneditionstart** | When openEditor is called. | \n| **oneditionend** | When closeEditor is called. | \n| **onchangestyle** | When setStyle is called. | \n| **onchangemeta** | When setMeta is called. | \n| **onchangepage** | When the page is changed. |\n\n \n[Example on handling events on Jspreadsheet](/jspreadsheet/v3/examples/events)\n\n## Initialization\n\n| Parameter | Description | \n| --- | --- | \n| **url** | Load an external JSON file from this URL: string | \n| **data** | Load this data into the JavaScript table: array | \n| **copyCompatibility** | When true, copy and export will bring formula results; if false, will bring formulas: boolean | \n| **rows** | Row properties: height.: object | \n| **columns** | Column type, title, width, align, dropdown options, text wrapping, mask, etc.: object | \n| **defaultColWidth** | Default width for a new column: integer | \n| **defaultColAlign** | Default align for a new column: [center, left, right] | \n| **minSpareRows** | Minimum number of spare rows: [integer] | \n| **minSpareCols** | Minimum number of spare cols: [integer] | \n| **minDimensions** | Minimum table dimensions: [cols, rows] | \n| **allowExport** | Allow table export: bool | \n| **includeHeadersOnDownload** | Include header titles on download: bool | \n| **columnSorting** | Allow column sorting: bool | \n| **columnDrag** | Allow column dragging: bool | \n| **columnResize** | Allow column resizing: bool | \n| **rowResize** | Allow row resizing: bool | \n| **rowDrag** | Allow row dragging: bool | \n| **editable** | Allow table edition: bool | \n| **allowInsertRow** | Allow insert a new row: bool | \n| **allowManualInsertRow** | Allow user to insert a new row: bool | \n| **allowInsertColumn** | Allow insert a new column: bool | \n| **allowManualInsertColumn** | Allow user to create a new column: bool | \n| **allowDeleteRow** | Allow delete a row: bool | \n| **allowDeleteColumn** | Allow delete a column: bool | \n| **allowRenameColumn** | Allow rename a column: bool | \n| **allowComments** | Allow comments over the cells: bool | \n| **wordWrap** | Global text wrapping: bool | \n| **csv** | Load an external CSV file from this URL: string | \n| **csvFileName** | Default filename for a download method: string | \n| **csvHeaders** | Load header titles from the CSV file: bool | \n| **csvDelimiter** | Default delimiter for the CSV file: string | \n| **selectionCopy** | Allow selection copy: bool | \n| **mergeCells** | Cells to be merged in the table initialization: object | \n| **toolbar** | Add custom toolbars: object | \n| **search** | Allow search in the table: bool | \n| **pagination** | Break the table by pages: integer | \n| **paginationOptions** | Number of records per page: 25, 50, 75, 100 for example: [array of numbers] | \n| **fullscreen** | Fullscreen mode: bool | \n| **lazyLoading** | Activate the table lazy loading: bool | \n| **loadingSpin** | Activate the loading spin: bool | \n| **tableOverflow** | Allow table overflow: bool | \n| **tableHeight** | Force the max height of the table: CSS String | \n| **tableWidth** | Force the max width of the table: CSS String | \n| **meta** | Meta information: object | \n| **style** | Cells style in the table initialization: object | \n| **parseFormulas** | Enable execution of formulas inside the table: bool | \n| **autoIncrement** | Auto increment actions when using the dragging corner: bool | \n| **updateTable** | Method to config custom script execution. NOTE: This does not work with lazyLoading, Pagination or Search options. | \n| **nestedHeaders** | Define the nested headers, including title, colspan, etc.: object | \n| **contextMenu** | Context menu content: function() { return customMenu } | \n| **text** | All messages to be customized: object |\n\n \n\n## Translations\n\n| Key | Default value | \n| --- | --- | \n| **noRecordsFound** | No records found | \n| **showingPage** | Showing page {0} of {1} entries | \n| **show** | Show | \n| **entries** | entries | \n| **insertANewColumnBefore** | Insert a new column before | \n| **insertANewColumnAfter** | Insert a new column after | \n| **deleteSelectedColumns** | Delete selected columns | \n| **renameThisColumn** | Rename this column | \n| **orderAscending** | Order ascending | \n| **orderDescending** | Order descending | \n| **insertANewRowBefore** | Insert a new row before | \n| **insertANewRowAfter** | Insert a new row after | \n| **deleteSelectedRows** | Delete selected rows | \n| **editComments** | Edit comments | \n| **addComments** | Add comments | \n| **comments** | Comments | \n| **clearComments** | Clear comments | \n| **copy** | Copy... | \n| **paste** | Paste... | \n| **saveAs** | Save as... | \n| **about** | About | \n| **areYouSureToDeleteTheSelectedRows** | Are you sure to delete the selected rows? | \n| **areYouSureToDeleteTheSelectedColumns** | Are you sure to delete the selected columns? | \n| **thisActionWillDestroyAnyExistingMergedCellsAreYouSure** | This action will destroy any existing merged cells. Are you sure? | \n| **thisActionWillClearYourSearchResultsAreYouSure** | This action will clear your search results. Are you sure? | \n| **thereIsAConflictWithAnotherMergedCell** | There is a conflict with another merged cell | \n| **invalidMergeProperties** | Invalid merged properties | \n| **cellAlreadyMerged** | Cell already merged | \n| **noCellsSelected** | No cells selected |\n\n \n[Working example](/jspreadsheet/v3/examples/translations)\n\n" }, { "path": "docs/jspreadsheet/v3/docs.md", "content": "title: The javascript spreadsheet documentation\nkeywords: Jexcel, javascript, excel-like, spreadsheet, table, grid\ndescription: Jspreadsheet CE official documentation, the javascript spreadsheet\n\nJspreadsheet v3 Documentation\n=============================\n\nThe Jspreadsheet is a lightweight javascript spreadsheet component to help with data management in web applications.\n\n* [Getting started](/jspreadsheet/v3/docs/getting-started \"Getting started with Jspreadsheet\") \n Getting started with Jspreadsheet - the online spreadsheet. Learning the basics, create instances, and more about the general spreadsheet configuration.\n \n* [Programmatically changes](/jspreadsheet/v3/docs/programmatically-changes \"Programmatically changes\") \n How to interact with your Jspreadsheet - the online spreadsheet and tables through javascript.\n \n* [Handling events](/jspreadsheet/v3/docs/events \"Handling events on Jspreadsheet\") \n How to handle events on your javascript spreadsheet.\n \n* [Quick reference](/jspreadsheet/v3/docs/quick-reference \"Jspreadsheet method and events\") \n Quick reference of all methods, configuration variables, events and language." }, { "path": "docs/jspreadsheet/v3/examples/angular.md", "content": "title: Jexcel with Angular\nkeywords: Jexcel, javascript, using jspreadsheet and angular\ndescription: A full example on how to integrate Jspreadsheet with Angular\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# The Javascript spreadsheet with Angular\n\n[Click here to see the project running on codesandbox.](https://codesandbox.io/s/jexcel-and-angular-ej4u2)\n\n### Source code\n\n{.ignore}\n```javascript\nimport { Component } from \"@angular/core\";\nimport * as jexcel from \"jexcel\";\n\nrequire(\"jexcel/dist/jexcel.css\");\n\n@Component({\n selector: \"app-root\",\n templateUrl: \"./app.component.html\",\n styleUrls: [\"./app.component.css\"]\n})\nexport class AppComponent {\n title = \"CodeSandbox\";\n\n ngAfterViewInit() {\n jexcel(document.getElementById(\"spreadsheet\"), {\n data: [[]],\n columns: [\n { type: \"dropdown\", width: \"100px\", source: [\"Y\", \"N\"] },\n { type: \"color\", width: \"100px\", render: \"square\" }\n ],\n minDimensions: [10, 10]\n });\n }\n}\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/column-types.md", "content": "title: Column types\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: Learn more about the powerful column types. This example brings all native column types and how to create your own custom type.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Column types\n\nThe native available types in jspreadsheet javascript spreadsheet are the following:\n\n * text\n * numeric\n * hidden\n * dropdown\n * autocomplete\n * checkbox\n * radio\n * calendar\n * image\n * color\n\n## Native column types\n\nThere are several other properties to change the behavior of those columns, please check the dropdown, calendar examples to get more advanced examples.\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Custom column type\n\nJspreadsheet is very powerful and flexible, and you can create custom column type based on any external plugins.\n\nA time custom column based on the [clockpicker plugin](https://weareoutman.github.io/clockpicker/) by weareoutman.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/comments.md", "content": "title: Allow comments in your javascript table\nkeywords: Jexcel, spreadsheet, javascript, cell comments, javascript table\ndescription: Allow comments in your table spreadsheet.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Comments on your javascript spreadsheet\n\nThe 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.\n\n## Manage cell comments programmatically\n\nTo apply comments via javascript, you can use the methods setComments or getComments, as follow:\n\n```html\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/contextmenu.md", "content": "title: Custom contextmenu\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: How to customize Jspreadsheet contextmenu\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Custom contextmenu\n\nThe following example remove the copy and paste from the contextmenu in order to create a custom contextMenu\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/custom-table-design.md", "content": "title: Custom Table Design\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: Customized CSS for your datagrid\n\n[Back to Examples](jspreadsheet/v3/examples)\n\n# Create custom CSS for your javascript spreadsheet\n\nThe following example shows a CSS addon to change the core layout of your jquery tables.\n\n \n\n## Green borders and corners jquery spreadsheet\n\nYour jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/datatables.md", "content": "title: Searchable Datatables\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Javascript spreadsheet with search and pagination\n\nThe following example shows how to create a javascript spreadsheet instance with a design similar to datatables jquery plugin.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/date-and-datetime-picker.md", "content": "title: Calendar with date and datetime picker\nkeywords: Jexcel, javascript, excel-like, spreadsheet, date, datetime, calendar\ndescription: Example from basic to advanced calendar usage, date and datetime picker\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Calendar column type\n\nThe example below shows how to use and customize special calendar column type.\n\nJspreadsheet uses the jSuites [Javascript Calendar](https://jsuites.net/docs/javascript-calendar) plugin\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Date column customization\n\nCustomize the format and the behavior of your column through the initialization options, as follow:\n\n```javascript\n{\n options : {\n // Date format\n format:'DD/MM/YYYY',\n // Allow keyboard date entry\n readonly:0,\n // Today is default\n today:0,\n // Show timepicker\n time:0,\n // Show the reset button\n resetButton:true,\n // Placeholder\n placeholder:'',\n // Translations can be done here\n months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],\n weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n // Value\n value:null,\n // Events\n onclose:null,\n onchange:null,\n // Fullscreen (this is automatic set for screensize < 800)\n fullscreen:false,\n };\n}\n```\n\n## JavaScript Calendar Picker\n\nMore information about the jSuites responsive [JavaScript calendar](https://jsuites.net/docs/javascript-calendar) plugin.\n" }, { "path": "docs/jspreadsheet/v3/examples/dropdown-and-autocomplete.md", "content": "title: Advanced dropdown column type\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by\ndescription: Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing javascript tables using categories and images in your dropdowns.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Dropdown and autocomplete column type\n\nJspreadsheet 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:\n\n * Create a simple dropdown from array\n * Value or key-value select box is available\n * Populate a dropdown from a external JSON request\n * Dynamic autocomplete search based on another column value\n * Conditional dropdowns: options from a dropdown based on a method return\n * Multiple selection and internal dropdown search\n * Responsive data picker with multiple render types\n * Image icon and group items\n\n## Multiple and autocomplete options\n\nThe 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.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Conditional dropdown\n\nThe example below shows the dependency of the second column in relation to the first.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Group, images, and advanced render options\n\nImprove the user experience with a responsive data picker.\n\n```html\n\n\n\n\n\n\n\n\n```\n\n## JavaScript Dropdown Component\n\nMore options for the dropdowns, please refer to the [jSuites JavaScript Dropdown Documentation](https://jsuites.net/docs/dropdown).\n\n \n \n\n" }, { "path": "docs/jspreadsheet/v3/examples/events.md", "content": "title: Handling events on Jspreadsheet\nkeywords: Jexcel, javascript, excel-like, spreadsheet, table, grid, events\ndescription: Learn how to handle events on Jspreadsheet\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Handling events\n\n## Various tracking javascript methods\n\nBinding tracking events on your javascript spreadsheet\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n \n## Advanced Example\n\nUpdate the chart on every change in your spreadsheet, using the onchange handler\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/headers.md", "content": "title: Nested headers and column header updates\nkeywords: Jexcel, spreadsheet, javascript, header updates, nested headers, javascript table\ndescription: Enabled nested headers in your spreadsheet and learn how to set or get header values\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Headers\n\n## Nested headers\n\nThe online spreadsheet implements nested headers natively though the directive **nestedHeaders**\n\n## Programmatically header updates\n\nThere 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.\n\n```html\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/image-upload.md", "content": "title: Embed images to your spreadsheet using base64\nkeywords: Jexcel, javascript, excel-like, spreadsheet, image upload, base64, embed images\ndescription: This examples shows how to embed and upload images to your spreadsheet.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Embed images into your spreadsheet\n\nThe following examples shows how to embed images into your spreadsheet.\n\n## Load a local image to your table\n\nLoad images from your local machine into your javascript spreadsheet\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Embed remote images to your table\n\nAutomatic image rendering from a remote URL using updateTable method\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/import-data.md", "content": "title: Load data from CSV or JSON or XLSX\nkeywords: Jexcel, javascript, excel-like, spreadsheet, loading data, csv, json, xlsx.\ndescription: How to import data from an external CSV, json file or XLSX.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Create a javascript spreadsheet\n\nThere are a few different ways to load data to your javascript spreadsheet shown in the next four examples below\n\n## Based on a external CSV file\n\nThe example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Based on an external JSON file\n\nIn a similar way, you can create a table based on an external JSON file format by using the _url: directive_ as below.\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Based on an JSON object\n\nThe 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.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n**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.\n\n \n \n\n" }, { "path": "docs/jspreadsheet/v3/examples/jquery.md", "content": "title: Jspreadsheet with Jquery\nkeywords: Jexcel, javascript, using jspreadsheet and Jquery\ndescription: A full example on how to integrate Jspreadsheet with Jquery\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Jquery\n\nCreating a jspreadsheet javascript instance using jQuery\n\n### Source code\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/lazy-loading.md", "content": "title: Dealing with big spreadsheets through lazy loading\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: This example brings a very nice feature to deal with large table datasets.\n\n[Back to Examples](/jspreadsheet/v3/examples)\n\n# Lazy loading\n\nThe 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.\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/merged-cells.md", "content": "title: How to merge the spreadsheet cells\nkeywords: Jexcel, spreadsheet, javascript, javascript table, merged cells\ndescription: Full example on how to handle merge cells in your javascript tables.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Merged cells\n\nYou can merge cells on your spreadsheet in the table initialization or programmatically as follows:\n\nThe following methods are available for merge cells management: `setMerge`, `getMerge`, `removeMerge`, `destroyMerged`_\n\n```html\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/meta-information.md", "content": "title: Meta information\nkeywords: Javascript spreadsheet, javascript, javascript table, meta information\ndescription: Keep hidden information about your data grid cells using the Jspreadsheet meta information methods\n\n[Back to Examples](/jspreadsheet/v3/examples#more)\n\n# Meta information\n\nThis feature helps you keep import information about the cells hidden from users.\n\nYou can define any meta information during the initialization or programmatically after that thought getMeta or setMeta methods.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/programmatically-updates.md", "content": "title: Update your table by javascript\nkeywords: Jexcel, javascript, excel-like, spreadsheet, javascript programmatically changes\ndescription: How to update your spreadsheet programmatically via JavaScript.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Programmatically table updates\n\n## Insert, remove and move columns and rows\n\nThe following example shows how to manage data programmatically in your javascript spreadsheet.\n\n```html\n\n\n\n\n\n\n
\n\n
\n \n \n \n \n \n \n \n \n
\n\n\n\n\n``` \n\n## Updating column width and row height\n\nUpdate the table width and height properties.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/react.md", "content": "title: Jspreadsheet with React\nkeywords: Jexcel, javascript, using Jspreadsheet and react\ndescription: A full example on how to integrate Jspreadsheet with React\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# The Javascript spreadsheet with React\n\nIntegrating Jspreadsheet with React\n\n[React with jspreadsheet sample project](https://codesandbox.io/s/jexcel-and-react-hmx0k)\n\n### Source code\n\n{.ignore}\n```javascript\nclass Jspreadsheet extends React.Component {\n constructor(props) {\n super(props);\n this.options = props.options;\n }\n \n componentDidMount = function() {\n this.el = jexcel(ReactDOM.findDOMNode(this).children[0], this.options);\n }\n \n addRow = function() {\n this.el.insertRow();\n }\n \n render() {\n return (\n
\n
\n this.addRow()}>\n
\n );\n }\n }\n \n var options = {\n data:[[]],\n minDimensions:[10,10],\n };\n \n ReactDOM.render(\n this.addRow()}>\n
\n\n\n\n\n``` \n\n## Disable the table sorting\n\nThe ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization.\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/spreadsheet-formulas.md", "content": "title: Basic to advance use of formulas\nkeywords: Jexcel, javascript, excel-like, spreadsheet, formulas, currency, calculations\ndescription: Unleash the power of your tables bringing formulas and custom javascript methods on your Jspreadsheet - the online spreadsheet.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Adding formulas on your online spreadsheet\n\n## Simple spreadsheet-like formula usage\n\nThe example below shows how to use spreadsheet like formulas on your javascript table spreadsheet.\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Creating Custom formulas\n\nYou can declare custom javascript methods and use in your tables as the example below.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/spreadsheet-toolbars.md", "content": "title: Enable and customize the toolbar on your spreadsheet\nkeywords: Jexcel, javascript, vanilla javascript, excel-like, spreadsheet, datatables, data, table, toolbars\ndescription: Full example on how to enable nor customize your javascript spreadsheet toolbar.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Custom toolbars\n\nThe following example shows how to include and customize a toolbar in your javascript spreadsheet.\n\n## Instructions\n\nThe toolbar can be customized with a few parameters. \n\n| | |\n|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------| \n| **type** | could be **i** for icon, **select** for a dropdown, **color** or a color picker. |\n| **content**{.nowrap} | defines the icon (from material icons) when you use type: i; [click here for all possible keys](https://material.io/tools/icons/) |\n| **k** | means the style should be apply to the cell; |\n| **v** | means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; |\n| **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. |\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n**NOTE:** You need to include the material icons style sheet.\n\n{.ignore}\n```html\n\n```" }, { "path": "docs/jspreadsheet/v3/examples/table-overflow.md", "content": "title: Table overflow with Jspreadshee Version 3\nkeywords: Jexcel, javascript, javascript vanilla, javascript, table, table overflow\ndescription: How define a fixed width and height for the Jspreadsheet grids.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Table overflow\n\nDefine width and height for your Jspreadsheet table\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/table-scripting.md", "content": "title: Customize the spreadsheet via javascript\nkeywords: Jexcel, javascript, excel-like, spreadsheet, table scripting\ndescription: Customize the table behavior using javascript\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Table scripting and customizations\n\nCustomize the table behavior though javascript.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/table-style.md", "content": "title: Customize the spreadsheet style CSS\nkeywords: Jexcel, javascript, excel-like, spreadsheet, table style, css\ndescription: Bring a very special touch to your applications customizing your javascript spreadsheet.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Custom javascript spreadsheet style\n\n## How to apply style to your table\n\nYou can define the CSS for specific columns during the initialization, or through programmatically javascript calls.\n\nBut, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle.\n\n```html\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/translations.md", "content": "title: Jspreadsheet Translations\nkeywords: Jexcel, spreadsheet, javascript, javascript table, translate, translations\ndescription: How to translate the default Jspreadsheet text and controls.\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# Internationalization\n\nHow to update the default texts from Jspreadsheet.\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples/vue.md", "content": "title: Jspreadsheet with Vue\nkeywords: Jexcel, javascript, using Jspreadsheet and Vue\ndescription: A full example on how to integrate Jspreadsheet with Vue\n\n[Back to Examples](/jspreadsheet/v3/examples \"Back to the examples section\")\n\n# The Javascript spreadsheet with Vue\n\nIntegrating jspreadsheet with Vue\n\n[See a full example on codesandbox](https://codesandbox.io/embed/vue-default-template-p4hwn)\n\n[Get a source code of a sample Vue project](https://github.com/jspreadsheet/jexcel-with-vue) \n\n```html\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v3/examples.md", "content": "title: Examples\nkeywords: Jexcel, javascript, examples\ndescription: Examples how to create web based spreadsheets using Jspreadsheet.\n\nJspreadsheet v3 Examples\n========================\n\nFor us, the best way to learn is via examples. We bring in this section various examples from basic to advance applications.\n\n* [React Implementation](/jspreadsheet/v3/examples/react \"Jspreadsheet with React\") \n A full example on how to integrate Jspreadsheet with React\n\n* [VUE Implementation](/jspreadsheet/v3/examples/vue \"Jspreadsheet with Vue\") \n A full example on how to integrate Jspreadsheet with Vue\n\n* [Angular Implementation](/jspreadsheet/v3/examples/angular \"Jexcel with Angular\") \n A full example on how to integrate Jspreadsheet with Angular\n\n* [Jquery Implementation](/jspreadsheet/v3/examples/jquery \"Jspreadsheet with Jquery\") \n A full example on how to integrate Jspreadsheet with Jquery\n\n* [Search and pagination](/jspreadsheet/v3/examples/datatables \"Searchable databatable\") \n Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables.\n\n* [Column types](/jspreadsheet/v3/examples/column-types \"Column types\") \n Learn more about the powerful column types. This example brings all native column types and how to create your own custom type.\n\n* [Advanced dropdown](/jspreadsheet/v3/examples/dropdown-and-autocomplete \"Advanced dropdown column type\") \n Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing javascript tables using categories and images in your dropdowns.\n\n* [Date and datetime picker](/jspreadsheet/v3/examples/date-and-datetime-picker \"Calendar with date and datetime picker\") \n Example from basic to advanced calendar usage, date and datetime picker\n\n* [Images](/jspreadsheet/v3/examples/image-upload \"Embed images to your spreadsheet using base64\") \n This examples shows how to embed and upload images to your spreadsheet\n\n* [Programmatically updates](/jspreadsheet/v3/examples/programmatically-updates \"Update your table by javascript\") \n How to update your spreadsheet and its data by javascript\n\n* [Table Style](/jspreadsheet/v3/examples/table-style \"Customize the spreasheet style CSS\") \n Bring a very special touch to your applications customizing your javascript spreadsheet.\n\n* [Table Scripting](/jspreadsheet/v3/examples/table-scripting \"Customize the spreasheet via javascript\") \n Customize the table behavior using javascript\n\n* [Events](/jspreadsheet/v3/examples/events \"Handling events on Jspreadsheet\") \n Learn how to handle events on Jspreadsheet\n\n* [Importing data](/jspreadsheet/v3/examples/import-data \"Load data from CSV or JSON or XLSX\") \n How to import data from an external CSV, json file or XLSX.\n\n* [Formulas](/jspreadsheet/v3/examples/spreadsheet-formulas \"Basic to advance use of formulas\") \n Unleash the power of your tables bringing formulas and custom javascript methods on your Jspreadsheet - the online spreadsheet.\n\n* [Custom toolbars](/jspreadsheet/v3/examples/spreadsheet-toolbars \"Enable and customize the toolbar on your spreadsheet\") \n Full example on how to enable nor customize your javascript spreadsheet toolbar.\n\n* [Column comments](/jspreadsheet/v3/examples/comments \"Allow comments in your javascript table\") \n Allow comments in your table spreadsheet.\n\n* [Headers](/jspreadsheet/v3/examples/headers \"Nested headers and column header updates\") \n Enabled nested headers in your spreadsheet and learn how to set or get header values\n\n* [Translations](/jspreadsheet/v3/examples/translations \"How to translate the default messages from Jspreadsheet\") \n How to translate the default messages from Jspreadsheet.\n\n* [Meta information](/jspreadsheet/v3/examples/meta-information \"Meta information\") \n Keep hidden information about your cells using meta information methods\n\n* [Merged cells](/jspreadsheet/v3/examples/merged-cells \"How to merge the spreadsheet cells\") \n Full example on how to handle merge cells in your javascript tables.\n\n* [Sorting columns](/jspreadsheet/v3/examples/sorting \"Sorting the spreadsheet columns\") \n Example how to sort the table by a column via javascript.\n\n* [Readonly Columns](/jspreadsheet/v3/examples/readonly \"Readonly Columns\") \n Example how to setup readonly cells\n\n* [Lazy loading](/jspreadsheet/v3/examples/lazy-loading \"Dealing with big spreadsheets through lazy loading\") \n This example brings a very nice feature to deal with large table datasets.\n\n* [Custom Contextmenu](/jspreadsheet/v3/examples/contextmenu \"Custom contextmenu\") \n How to customize Jspreadsheet contextmenu\n\n* [Table overflow](/jspreadsheet/v3/examples/table-overflow \"Table overflow\") \n How define a fixed width and height for the Jspreadsheet grids." }, { "path": "docs/jspreadsheet/v3/getting-started.md", "content": "title: Getting Started with Jspreadsheet CE\nkeywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features\ndescription: Create data grids with spreadsheet controls with Jspreadsheet CE.\n\n[Back to Documentation](/jspreadsheet/v3/docs)\n\n# Getting started\n\nJspreadsheet 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.\n\n```bash\nnpm install jspreadsheet-ce\n```\n\nDownload from our github page:
\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/contextmenu.md", "content": "title: Custom contextmenu\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: How to customize jspreadsheet contextmenu\n\n# Custom contextmenu\n\nThe following example remove the copy and paste from the contextmenu in order to create a custom contextMenu\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/create-from-table.md", "content": "title: Create a Data Grid From a HTML table\nkeywords: Jexcel, javascript, create a dynamic jspreadsheet table from a HTML table element.\ndescription: A full example on how to create a dynamic jspreadsheet table from a HTML table.\n\n# Create a Data Grid From a HTML table\n\nFrom the v4+ is is possible to create a online spreadsheet from a static simple HTML table.\n\n```html\n\n\n\n\n\n\n\n
The Official Top 40 biggest albums of 2019
\n\n| General | \n|||
| Info | \nStats | \n||
| POS | \nTITLE | \nARTIST | \nPEAK | \n
| 1 | \nDIVINELY UNINSPIRED TO A HELLISH EXTENT | \nLEWIS CAPALDI | \n1 | \n
| 2 | \nNO 6 COLLABORATIONS PROJECT | \nED SHEERAN | \n1 | \n
| 3 | \nTHE GREATEST SHOWMAN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 4 | \nWHEN WE ALL FALL ASLEEP WHERE DO WE GO | \nBILLIE EILISH | \n1 | \n
| 5 | \nSTAYING AT TAMARA'S | \nGEORGE EZRA | \n1 | \n
| 6 | \nBOHEMIAN RHAPSODY - OST | \nQUEEN | \n3 | \n
| 7 | \nTHANK U NEXT | \nARIANA GRANDE | \n1 | \n
| 8 | \nWHAT A TIME TO BE ALIVE | \nTOM WALKER | \n1 | \n
| 9 | \nA STAR IS BORN | \nMOTION PICTURE CAST RECORDING | \n1 | \n
| 10 | \nYOU'RE IN MY HEART | \nROD STEWART | \n1 | \n
| \n | \n | \n | =SUMCOL(3) | \n
\n\n\n\n```\n\n### More examples\n\n * [Including merged cells](https://jsfiddle.net/spreadsheet/45h6odug/ \"Merged cells\")\n\n" }, { "path": "docs/jspreadsheet/v4/examples/custom-table-design.md", "content": "title: Custom Table Design\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: Customized CSS for your datagrid\n\n# Create custom CSS for your javascript spreadsheet\n\nThe following example shows a CSS addon to change the core layout of your jquery tables.\n\n## Green borders and corners jquery spreadsheet\n\n[Bootstrap-like jquery spreadsheet example](/jspreadsheet/examples/a-custom- table-design)\n\n## Bootstrap-like jquery spreadsheet.\n\nYour jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n" }, { "path": "docs/jspreadsheet/v4/examples/datatables.md", "content": "title: Searchable datatable\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables.\n\n# Spreadsheet Search and Pagination\n\nThe following example shows how to create a javascript spreadsheet instance with a design similar to datatables jquery plugin.\n\n### Source code\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/date-and-datetime-picker.md", "content": "title: Calendar with date and datetime picker\nkeywords: Jexcel, javascript, excel-like, spreadsheet, date, datetime, calendar\ndescription: Example from basic to advanced calendar usage, date and datetime picker\n\n# Calendar column type\n\nThe example below shows how to use and customize special calendar column type.\n\nJspreadsheet uses the jSuites [Javascript Calendar](https://jsuites.net/docs/javascript-calendar) plugin\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Date column customization\n\nCustomize the format and the behavior of your column through the initialization options, as follow:\n\n{.ignore}\n```javascript\noptions : {\n // Date format\n format:'DD/MM/YYYY',\n // Allow keyboard date entry\n readonly:0,\n // Today is default\n today:0,\n // Show timepicker\n time:0,\n // Show the reset button\n resetButton:true,\n // Placeholder\n placeholder:'',\n // Translations can be done here\n months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],\n weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n // Value\n value:null,\n // Events\n onclose:null,\n onchange:null,\n // Fullscreen (this is automatic set for screensize < 800)\n fullscreen:false,\n};\n```\n\nMore information about the jSuites [Responsive date time picker](https://jsuites.net/docs/javascript-calendar)\n\n\nConsidering the example above, you can create a calendar including a time picker by simple send the option **time:1** as the following example.\n\n```html\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/dropdown-and-autocomplete.md", "content": "title: Advanced dropdown column type\nkeywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by\ndescription: Full examples on how to handle simple, advanced, multiple, autocomplete and conditional dropdowns. Create amazing javascript tables using categories and images in your dropdowns.\n\n# Dropdown and autocomplete column type\n\nJspreadsheet 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:\n\n * Create a simple dropdown from array\n * Value or key-value select is available\n * Populate a dropdown from a external JSON request\n * Dynamic autocomplete search based on another column value\n * Conditional dropdowns: options from a dropdown based on a method return\n * Multiple selection and internal dropdown search\n * Responsive data picker with multiple render types\n * Image icon and group items\n\n \n\n## Multiple and autocomplete options\n\nThe highlight features introduced in the most version of the vanilla javascript spreadsheet is definitely the autocomplete and multiple options.\n\nThe following example shows the column Product Origin with the autocomplete and multiple directives initiated as true.\n\n \n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Conditional dropdown\n\nThe example below shows the dependency of the second column in relation to the first.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Group, images, and advanced render options\n\nImprove the user experience with a responsive data picker.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\nMore options for the dropdowns, please refer to the [jSuites documentation](https://jsuites.net/v4).\n\n \n \n\n" }, { "path": "docs/jspreadsheet/v4/examples/events.md", "content": "title: Handling events on Jspreadsheet\nkeywords: Jexcel, javascript, excel-like, spreadsheet, table, grid, events\ndescription: Learn how to handle events on Jspreadsheet\n\n# Handling events\n\n## Various tracking javascript methods\n\nBinding events on your javascript spreadsheet.\n\n[See a list of all event handlers](/jspreadsheet/v4/docs/events)\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n## Global Super event\n\nOne method to handle all events on the online spreadsheet.\n\n**NOTE** : Open the console to see the events.\n\n" }, { "path": "docs/jspreadsheet/v4/examples/footers.md", "content": "title: Adding formulas fixed on the table footer\nkeywords: Jexcel, javascript, multiple spreadsheets, formulas, table footer\ndescription: Adding formulas fixed on the table footer.\n\n# Table footer\n\nAdding fixed custom calculations in the footer of an online spreadsheet.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n``` \n \n\n" }, { "path": "docs/jspreadsheet/v4/examples/freeze-columns.md", "content": "title: Freeze columns\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data, frezee columns\ndescription: Setup freeze columns in Jspreadsheet\n\n# Freeze columns\n\nDefine the number of freeze columns by using the freezeColumn directive with tableOverflow as follow\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/headers.md", "content": "title: Header updates & column dragging\nkeywords: Jexcel, spreadsheet, javascript, header updates, programmatically header updates, enable column dragging\ndescription: Header updates and column dragging\n\n# Header updates\n\nThere are three ways to change a header title.\n\n * The user clicks in a selected header and hold the mouse for 2 seconds, a prompt will request the new title;\n * Via contextMenu. the user right clicks in the column and select the option Rename column\n * Using the method setHeader(colNumber, title) as example below:\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n``` \n \n\n" }, { "path": "docs/jspreadsheet/v4/examples/image-upload.md", "content": "title: Embed images to your spreadsheet using base64\nkeywords: Jexcel, javascript, excel-like, spreadsheet, image upload, base64, embed images\ndescription: This examples shows how to embed and upload images to your spreadsheet\n\n# Embed images into your spreadsheet\n\nThe following examples shows how to embed images into your spreadsheet.\n\n \n\n## Load a local image to your table\n\nLoad images from your local machine into your javascript spreadsheet\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n \n\n## Embed remote images to your table\n\nAutomatic image rendering from a remote URL using updateTable method\n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/import-data.md", "content": "title: Load data from CSV or JSON or XLSX\nkeywords: Jexcel, javascript, excel-like, spreadsheet, loading data, csv, json, xlsx.\ndescription: How to import data from an external CSV, json file or XLSX.\n\n# Create a javascript spreadsheet\n\nThere are a few different ways to load data to your javascript spreadsheet shown in the next four examples below\n\n \n\n## Based on a external CSV file\n\nThe example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n``` \n \n\n## Based on an external JSON file\n\nIn a similar way, you can create a table based on an external JSON file format by using the _url: directive_ as below.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n \n \n\n## Based on an JSON object\n\nThe 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.\n\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n \n \n\n## Importing from a XLSX file\n\nThe following example imports the data from a XLSX file using a thirdy party library, slighly customized in order to improve the CSS parser.\n\nIMPORTANT: This is an experimental implementation and there is no garantee your spreadsheet will be correctly parsed.\n\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n**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.\n\n \n \n\n" }, { "path": "docs/jspreadsheet/v4/examples/jquery.md", "content": "title: Jspreadsheet with Jquery\nkeywords: Jexcel, javascript, using Jspreadsheet and Jquery\ndescription: A full example on how to integrate Jspreadsheet with Jquery\n\n# Jquery\n\nCreating a Jspreadsheet javascript instance using jQuery\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/lazy-loading.md", "content": "title: Dealing with big spreadsheets through lazy loading\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data\ndescription: This example brings a very nice feature to deal with large table datasets.\n\n# Lazy loading\n\nThe 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.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/merged-cells.md", "content": "title: How to merge the spreadsheet cells\nkeywords: Jexcel, spreadsheet, javascript, javascript table, merged cells\ndescription: Full example on how to handle merge cells in your javascript tables.\n\n# Merged cells\n\nYou can merge cells on your spreadsheet in the table initialization or programatically as follow:\n\nThe following methods are available for merge cells management: _setMerge, getMerge, removeMerge, destroyMerged_\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/meta-information.md", "content": "title: Meta information\nkeywords: Javascript spreadsheet, javascript, javascript table, meta information\ndescription: Keep hidden information about your cells using meta information methods\n\n# Meta information\n\nThis feature helps you keep import information about the cells hidden from users.\n\nYou can define any meta information during the initialization or programatically after that thought getMeta or setMeta methods.\n\nSet meta data for multiple columns Set a meta information for B2 Get the meta information for A1 Get all meta information \n\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/nested-headers.md", "content": "title: Nested headers and column header updates\nkeywords: Jexcel, spreadsheet, javascript, header updates, nested headers, javascript table\ndescription: Enabled nested headers in your spreadsheet and learn how to set or get header values\n\n# Headers\n\n## Nested headers\n\nThe online spreadsheet implements nested headers natively though the directive **nestedHeaders** , as example below:\n\n \n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/programmatically-changes.md", "content": "title: Programmatic Data Grid Updates in Jspreadsheet v4 \nkeywords: Jexcel, JavaScript, spreadsheet updates, programmatically modify data, JavaScript data grid, Excel-like functionality \ndescription: Learn how to programmatically update your spreadsheet and its data using JavaScript with Jspreadsheet v4. \ncanonical: https://bossanova.uk/jspreadsheet/v4/examples/programmatically-updates\n\n# Programmatically Data Grid Updates\n\n## Insert, remove and move columns and rows\n\nThe following example shows how to manage data programmatically in your javascript spreadsheet.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n
\n \n \n \n \n \n \n \n \n
\n\n\n\n\n\n\n\n``` \n \n\n## Updating column width and row height\n\nUpdate the table width and height properties.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/programmatically-updates.md", "content": "title: Programmatic Data Grid Updates in Jspreadsheet v4 \nkeywords: Jexcel, JavaScript, spreadsheet updates, programmatically modify data, JavaScript data grid, Excel-like functionality \ndescription: Learn how to programmatically update your spreadsheet and its data using JavaScript with Jspreadsheet v4. \ncanonical: https://bossanova.uk/jspreadsheet/v4/examples/programmatically-updates\n\n# Programmatically Data Grid Updates\n\n## Insert, remove and move columns and rows\n\nThe following example shows how to manage data programmatically in your javascript spreadsheet.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n
\n \n \n \n \n \n \n \n \n
\n\n\n\n\n\n\n\n``` \n \n\n## Updating column width and row height\n\nUpdate the table width and height properties.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/react.md", "content": "title: Jspreadsheet with React\nkeywords: Jexcel, javascript, using jspreadsheet and react\ndescription: A full example on how to integrate Jspreadsheet with React\n\n# The Javascript spreadsheet with React\n\n\n### 1\\. Integrating Jspreadsheet with React\n\n[React with Jspreadsheet sample project](https://codesandbox.io/s/jexcel-and-react-k7nf0)\n\n{.ignore}\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport jexcel from \"jexcel\";\n\nimport \"./styles.css\";\nimport \"../node_modules/jexcel/dist/jexcel.css\";\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.options = props.options;\n this.wrapper = React.createRef();\n }\n\n componentDidMount = function() {\n this.el = jexcel(this.wrapper.current, this.options);\n };\n\n addRow = function() {\n this.el.insertRow();\n };\n\n render() {\n return (\n
\n \n
\n this.addRow()}\n />\n
\n );\n }\n}\n\nlet options = {\n data: [[]],\n minDimensions: [10, 10]\n};\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n
\n
\n this.addRow()}>\n
\n );\n }\n}\n\nlet options = {\n data:[[]],\n minDimensions:[10,10],\n};\n\nReactDOM.render(\n this.addRow()}>\n
\n \n
\n \n
\n );\n}\n```\n\n"
},
{
"path": "docs/jspreadsheet/v4/examples/readonly.md",
"content": "title: Readonly Columns\nkeywords: Jexcel, spreadsheet, javascript, javascript table, readonly\ndescription: Example how to setup readonly cells\n\n# Readonly columns and cells\n\nSetting a readonly the whole column or a single specific cell.\n\n## Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n"
},
{
"path": "docs/jspreadsheet/v4/examples/richtext-html-editor.md",
"content": "title: HTML Editor with Jspreadsheet Version 4\nkeywords: Jexcel, javascript, excel-like, spreadsheet, html editor, rich text\ndescription: This examples shows how to create a rich text column\n\n# Rich text and HTML editor column type\n\nAdding a HTML Editor input in your spreadsheet\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n"
},
{
"path": "docs/jspreadsheet/v4/examples/sorting.md",
"content": "title: Sorting the spreadsheet columns\nkeywords: Jexcel, spreadsheet, javascript, javascript table, sorting\ndescription: Example how to sort the table by a column via javascript.\n\n# Sorting your table\n\n## Simple example\n\nYou can sort your javascript table by double a double click in the header, using the context menu or by javascript as follow:\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n \n
\n\n\n\n\n``` \n\n## Disable the table sorting\n\nThe ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization.\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/spreadsheet-formulas.md", "content": "title: Basic to advance use of formulas\nkeywords: Jexcel, javascript, excel-like, spreadsheet, formulas, currency, calculations\ndescription: Unleash the power of your tables bringing formulas and custom javascript methods on your Jspreadsheet spreadsheet.\n\n# Adding formulas on your online spreadsheet\n\n## Simple spreadsheet-like formula usage\n\nThe example below shows how to use spreadsheet like formulas on your javascript table spreadsheet.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n``` \n\n## Creating Custom formulas\n\nYou can declare custom javascript methods and use in your tables as the example below.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/spreadsheet-toolbars.md", "content": "title: Enable and customize the toolbar on your spreadsheet\nkeywords: Jexcel, javascript, vanilla javascript, excel-like, spreadsheet, datatables, data, table, toolbars\ndescription: Full example on how to enable nor customize your javascript spreadsheet toolbar.\n\n# Custom toolbars\n\nThe following example shows how to include and customize a toolbar in your javascript spreadsheet.\n\n\n## Instructions\n\nThe toolbar can be customized with a few parameters.\n| | | \n| ---|--- |\n| _**type**_| could be **i** for icon, **select** for a dropdown, **color** or a colorpicker. |\n| _**content**_| defines the icon (from material icons) when you use type:i; [click here for all possible keys](https://material.io/tools/icons/) |\n| _**k**_| means the style should be apply to the cell; |\n| _**v**_| means the value of the style should be apply to the cell; When type:select, you can define an array of possibles values; |\n| _**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. |\n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n**NOTE:** don't forget to include the material icons style sheet.\n\n" }, { "path": "docs/jspreadsheet/v4/examples/spreadsheet-webcomponent.md", "content": "title: Jspreadsheet Webcomponent\nkeywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data, webcomponent\ndescription: Use the Jspreadsheet datagrid as webcomponent\n\n# Javascript web component online spreadsheet\n\n## Create a online javascript spreadsheet using Jspreadsheet Ce.\n\n### Javascript\n\n{.ignore}\n```javascript\nclass Jspreadsheet extends HTMLElement {\n constructor() {\n super();\n }\n\n init(o) {\n // Shadow root\n const shadowRoot = this.attachShadow({mode: 'open'});\n\n // Style\n const css = document.createElement('link');\n css.rel = 'stylesheet';\n css.type = 'text/css'\n css.href = 'https://bossanova.uk/spreadsheet/v4/spreadsheet.css';\n shadowRoot.appendChild(css);\n\n const css2 = document.createElement('link');\n css2.rel = 'stylesheet';\n css2.type = 'text/css'\n css2.href = 'https://bossanova.uk/spreadsheet/v4/jsuites.css';\n shadowRoot.appendChild(css2);\n\n // Jspreadsheet container\n var container = document.createElement('div'); \n shadowRoot.appendChild(container);\n\n // Create element\n this.el = jspreadsheet(container, {\n root: shadowRoot,\n minDimensions: [10,10]\n });\n }\n\n connectedCallback() {\n this.init(this);\n }\n\n disconnectedCallback() {\n }\n\n attributeChangedCallback() {\n }\n}\n\nwindow.customElements.define('j-spreadsheet', Jspreadsheet);\n```\n\n### HTML\n\n```html\n\n\n\n\n\n
\n\n\n\n
\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/tabs.md", "content": "title: Grouping multiple spreadsheets in tabs\nkeywords: Jexcel, javascript, multiple spreadsheets, tabs\ndescription: Grouping multiple spreadsheets in tabs.\n\n# Tabs\n\nGrouping different spreadsheets in tabs\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/translations.md", "content": "title: How to translate the default messages from Jspreadsheet Version 4\nkeywords: Jexcel, spreadsheet, javascript, javascript table, translate, translations\ndescription: How to translate the default messages from Jspreadsheet\n\n# Jspreadsheet internationalization\n\nHow to update the default texts from the online spreadsheet.\n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples/vue.md", "content": "title: Jspreadsheet with Vue\nkeywords: Jexcel, javascript, using jspreadsheet and Vue\ndescription: A full example on how to integrate Jspreadsheet with Vue\n\n# The Javascript spreadsheet with Vue\n\nIntegrating Jspreadsheet with Vue\n\n[See a full example on codesandbox](https://codesandbox.io/embed/vue-default-template-p4hwn)\n\n[Get a source code of a sample Vue project](https://github.com/jspreadsheet/jexcel-with-vue) \n \n\n### Source code\n\n```html\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n```\n\n" }, { "path": "docs/jspreadsheet/v4/examples.md", "content": "title: Examples\nkeywords: Jexcel, javascript, examples\ndescription: Examples how to create web based spreadsheets using Jspreadsheet.\n\n# Jspreadsheet v4 Examples\n\nWe bring in this section various examples from basic to advance applications.\n\n* [Angular](/jspreadsheet/v4/examples/angular)\n* [Column Dragging](/jspreadsheet/v4/examples/column-dragging)\n* [Column Filters](/jspreadsheet/v4/examples/column-filters)\n* [Column Types](/jspreadsheet/v4/examples/column-types)\n* [Comments](/jspreadsheet/v4/examples/comments)\n* [Contextmenu](/jspreadsheet/v4/examples/contextmenu)\n* [Create From Table](/jspreadsheet/v4/examples/create-from-table)\n* [Custom Table Design](/jspreadsheet/v4/examples/custom-table-design)\n* [Datatables](/jspreadsheet/v4/examples/datatables)\n* [Date And Datetime Picker](/jspreadsheet/v4/examples/date-and-datetime-picker)\n* [Dropdown And Autocomplete](/jspreadsheet/v4/examples/dropdown-and-autocomplete)\n* [Events](/jspreadsheet/v4/examples/events)\n* [Footers](/jspreadsheet/v4/examples/footers)\n* [Freeze Columns](/jspreadsheet/v4/examples/freeze-columns)\n* [Headers](/jspreadsheet/v4/examples/headers)\n* [Image Upload](/jspreadsheet/v4/examples/image-upload)\n* [Import Data](/jspreadsheet/v4/examples/import-data)\n* [Jquery](/jspreadsheet/v4/examples/jquery)\n* [Lazy Loading](/jspreadsheet/v4/examples/lazy-loading)\n* [Merged Cells](/jspreadsheet/v4/examples/merged-cells)\n* [Meta Information](/jspreadsheet/v4/examples/meta-information)\n* [Nested Headers](/jspreadsheet/v4/examples/nested-headers)\n* [Programmatically Updates](/jspreadsheet/v4/examples/programmatically-updates)\n* [React](/jspreadsheet/v4/examples/react)\n* [Readonly](/jspreadsheet/v4/examples/readonly)\n* [Richtext Html Editor](/jspreadsheet/v4/examples/richtext-html-editor)\n* [Sorting](/jspreadsheet/v4/examples/sorting)\n* [Spreadsheet Formulas](/jspreadsheet/v4/examples/spreadsheet-formulas)\n* [Spreadsheet Toolbars](/jspreadsheet/v4/examples/spreadsheet-toolbars)\n* [Spreadsheet Webcomponent](/jspreadsheet/v4/examples/spreadsheet-webcomponent)\n* [Table Overflow](/jspreadsheet/v4/examples/table-overflow)\n* [Table Scripting](/jspreadsheet/v4/examples/table-scripting)\n* [Table Style](/jspreadsheet/v4/examples/table-style)\n* [Tabs](/jspreadsheet/v4/examples/tabs)\n* [Translations](/jspreadsheet/v4/examples/translations)\n* [Vue](/jspreadsheet/v4/examples/vue)\n" }, { "path": "docs/jspreadsheet/v4/getting-started.md", "content": "title: Getting Started with Jspreadsheet CE v4 \nkeywords: Jspreadsheet CE, Jexcel, JavaScript data grid, spreadsheets, JavaScript tables, Excel-like data grids, web-based spreadsheets, interactive data grid controls, spreadsheet features \ndescription: Learn how to create and manage data grids with powerful spreadsheet controls using Jspreadsheet CE v4.\ncanonical: https://bossanova.uk/jspreadsheet/v4/docs/getting-started\n\n# Getting started\n\nJspreadsheet 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.\n\n## Install\n\n### NPM\n\n```bash\nnpm install jspreadsheet-ce@4\n```\n\n### CDN\n\nUse jspreadsheet directly from JSDelivr CDN\n\n\n{.ignore}\n```html\n\n\n\n\n```\n\n\n### GitHub\n\nDownload from our GitHub page\n\n[https://github.com/jspreadsheet/ce](https://github.com/jspreadsheet/ce)\n\n\n\n## Initialization\n\nYou can initiate an online spreadsheet including data from a HTML table, a JS array, a CSV or a JSON file, following the examples below:\n\n### Loading from a javascript array\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n\n### Loading from a JSON file\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n\n\n### Loading from a CSV file\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n[See a working example](/jspreadsheet/v4/examples/import-data)\n\n\n### Headers from a CSV file\n\nIf 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.\n\n[See a working example](/jspreadsheet/v4/examples/import-data)\n\n\n\n### Programmatically header updates\n\nThe methods **setHeader()**, **getHeader()** and **getHeaders()** are available for the developer to interact programmatically with the spreadsheet.\n\n[Working example](/jspreadsheet/v4/examples/headers#Programmatically-header-updates)\n\n\n\n### Nested headers\n\nThe nested headers area available in the innitialization through the directive **nestedHeaders:[]**, and should be use follow:\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n[See this example in action](/jspreadsheet/v4/examples/headers)\n\n## Column width\n\nThe initial width can be defined in the width property in the column parameter.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n\n### Programmatically column width updates\n\nThe methods setWidth(), getWidth() are available for the developer to update the column width via javascript.\n\n[See this example in action](/jspreadsheet/v4/examples/programmatically-updates#setWidth)\n\n## Row height\n\nThe 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.\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n\n### Programmatically row height updates\n\nThe methods setHeight(), getHeight() are available for the developer to update the row height via javascript.\n\n[See this example in action](/jspreadsheet/v4/examples/programmatically-updates#setHeight)\n\n## Column types\n\nJspreadsheet 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.\n\nJspreadsheet is integrate with jSuites, so it brings some native columns, such as: **text, numeric, hidden, dropdown, autocomplete, checkbox, radio, calendar, image and color.**_\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### Calendar type\n\nWhen 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:\n\n{.ignore}\n```javascript\n{\n options : {\n // Date format\n format:'DD/MM/YYYY',\n // Allow keyboard date entry\n readonly:0,\n // Today is default\n today:0,\n // Show timepicker\n time:0,\n // Show the reset button\n resetButton:true,\n // Placeholder\n placeholder:'',\n // Translations can be done here\n months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],\n weekdays\\_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n // Value\n value:null,\n // Events\n onclose:null,\n onchange:null,\n // Fullscreen (this is automatic set for screensize < 800)\n fullscreen:false,\n }\n}\n```\n\n[See a working example](/jspreadsheet/v4/examples/date-and-datetime-picker)\n\n\n\n### Dropdown and autocomplete type\n\nThere 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.\n\nYou 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:\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n[See a working example](/jspreadsheet/v4/examples/dropdown-and-autocomplete)\n\n### Custom type\n\nJspreadsheet 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.\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n\n```\n\n[See a working example](/jspreadsheet/v4/examples/column-types#custom)\n\n\n\n\n## Define a minimum table dimension size.\n\nThe follow example will create a data table with a minimum number of ten columns and five rows:\n\n{.ignore}\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n\n### Clone our project\n\nhttp://github.com/jspreadsheet/ce\n\n\n\n## Create amazing online spreadsheets\n\nA example how to embed a simple javascript spreadsheet in your application. You can check out for more [examples](/jspreadsheet/v4/examples) here.\n\n```html\n\n\n\n\n\n\n\n\n\n\n```\n\n## Jspreadsheet History\n\n### Jspreadsheet 4.6.0\n- Jexcel is renamed to Jspreadsheet.\n- Integration with Jsuites v4.\n\n### Jspreadsheet 4.2.3\n- The spreadsheet plugin is now compatible with Jsuites v3.\n- New flags and security implementations.\n- New DOM element references are in the toolbar, and worksheet events are tabbed.\n\n### Jspreadsheet 4.0.0\nSpecial 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.\n\n- Workbook/tab support for spreadsheets.\n- Create dynamic spreadsheets from static HTML elements.\n- Highlight selected cells in the spreadsheet after CTRL+C.\n- Footer with formula support.\n- Multiple column resizing.\n- JSON update support (helpers to update a remote server).\n- Centralized event dispatch method for all spreadsheet events.\n- Custom helpers: `=PROGRESS` (progress bar), `=RATING` (5-star rating).\n- Custom formula helpers: `=COLUMN`, `=ROW`, `=CELL`, `=TABLE`, `=VALUE`.\n- Dynamic nested header updates.\n- New HTML editing column type.\n- New flags: `includeHeadersOnCopy`, `persistence`, `filters`, `autoCasting`, `freezeColumns`.\n- New events: `onevent`, `onchangepage`, `onbeforesave`, `onsave`.\n- More examples and documentation.\n\n### Jspreadsheet 3.9.0\n- New methods.\n- General fixes.\n\n### Jspreadsheet 3.6.0\n- Improved spreadsheet formula parsing.\n- New spreadsheet events.\n- New initialization options.\n- General fixes.\n\n### Jspreadsheet 3.2.3\n- `getMeta`, `setMeta` methods.\n- NPM package with jSuites.\n- General fixes.\n\n### Jspreadsheet 3.0.1\nJspreadsheet 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.\n\nNew features in Jspreadsheet v3:\n- Drag and drop columns.\n- Resizable rows.\n- Merge columns.\n- Search functionality.\n- Pagination.\n- Lazy loading.\n- Full-screen mode.\n- Image upload.\n- Native color picker.\n- Better mobile compatibility.\n- Enhanced nested headers support.\n- Advanced keyboard navigation.\n- Better hidden column management.\n- Data picker enhancements: dropdown, autocomplete, multiple selection, group options, and icons.\n- Import from XLSX (experimental).\n\nMajor improvements:\n- A new formula engine with faster results and no external dependencies.\n- No use of selectors, leading to faster performance.\n- New native column types.\n- No jQuery required.\n- Examples for React, Vue, and Angular.\n- XLSX support via a custom SheetJS integration (experimental).\n\n### Jspreadsheet 2.1.0\n- Mobile touch improvements.\n- Paste fixes and a new CSV parser.\n\n### Jspreadsheet 2.0.0\n- New radio column type.\n- There is a new dropdown with autocomplete and multiple selection options.\n- Header/body separation for better scroll and column resize behaviour.\n- Text-wrap improvements, including Excel-compatible `alt+enter`.\n- New `set/get` meta information.\n- New `set/get` configuration parameters.\n- Programmatic `set/get` cell styles.\n- `set/get` cell comments.\n- Custom toolbar for tables.\n- Responsive calendar picker.\n\n### Jspreadsheet 1.5.7\n- Improvements to checkbox column type.\n- Updates to table destruction in jQuery.\n\n### Jspreadsheet 1.5.1\n- Spreadsheet data overflow and fixed headers.\n- Navigation improvements.\n\n### Jspreadsheet 1.5.0\n- Relative `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`.\n- Redo and undo support for `insertRow`, `deleteRow`, `insertColumn`, `deleteColumn`, `moveRow`.\n- New formula column recursive chain.\n- There is a new alternative design option (Bootstrap-like).\n- `updateSettings` improvements.\n\n## Copyright and License\nJspreadsheet CE is released under the MIT license.\n\n## About Jspreadsheet\nJspreadsheet 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.\n\nThis free software was developed as a lightweight alternative to create amazing online JavaScript spreadsheets.\n\n" }, { "path": "docs/jspreadsheet.md", "content": "title: Jspreadsheet CE - The JavaScript Data Grid with Spreadsheet Controls \nkeywords: Jspreadsheet CE, JavaScript spreadsheet, data grid, Excel-like functionality, JavaScript plugins, web components, data table, interactive spreadsheets, customizable grid, spreadsheet integration \ndescription: 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.\ncanonical: https://bossanova.uk/jspreadsheet\n\n
\n\n
\n"
},
{
"path": "eslint.config.mjs",
"content": "import js from '@eslint/js';\nimport globals from 'globals';\n\nexport default [\n js.configs.recommended,\n {\n ignores: ['dist/**', 'node_modules/**'],\n },\n {\n files: ['**/*.{js,mjs,cjs}'],\n languageOptions: {\n ecmaVersion: 2022,\n sourceType: 'module',\n globals: {\n ...globals.browser,\n ...globals.node,\n ...globals.es2022,\n jspreadsheet: 'readonly',\n },\n },\n rules: {\n 'no-unused-vars': 'off',\n },\n },\n {\n files: ['test/**/*.js', 'mocha.config.js'],\n languageOptions: {\n globals: {\n ...globals.node,\n ...globals.mocha,\n describe: 'readonly',\n it: 'readonly',\n before: 'readonly',\n after: 'readonly',\n beforeEach: 'readonly',\n afterEach: 'readonly',\n root: 'readonly',\n },\n },\n },\n {\n files: ['webpack.config.js', 'build.cjs'],\n languageOptions: {\n globals: {\n ...globals.node,\n __dirname: 'readonly',\n __filename: 'readonly',\n module: 'readonly',\n require: 'readonly',\n exports: 'readonly',\n process: 'readonly',\n },\n },\n },\n];\n"
},
{
"path": "mocha.config.js",
"content": "#! /usr/bin/env node\n\nrequire('jsdom-global')(undefined, { url: 'https://localhost' });\n\nglobal.root = document.createElement('div');\nglobal.root.style.width = '100%';\nglobal.root.style.height = '100%';\nglobal.root.innerHTML = '';\ndocument.body.appendChild(global.root);\n\nexports.mochaHooks = {\n afterEach(done) {\n // destroy datagrid component\n global.root.innerHTML = '';\n done();\n },\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"jspreadsheet-ce\",\n \"title\": \"The Javascript Spreadsheet\",\n \"description\": \"Jspreadsheet is a lightweight, vanilla javascript plugin to create amazing web-based interactive data grids with spreadsheet like controls compatible with Excel, Google Spreadsheets and any other spreadsheet software.\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/jspreadsheet/ce.git\"\n },\n \"author\": {\n \"name\": \"Contact \n
\n\n\n\n\n
\n \n
\n JavaScript component to create web applications with spreadsheet UI
\nFree and open-source JavaScript component to create web applications with spreadsheet UI.
\n \n\n ![\"Worksheet\"](\"img/home/title-image.svg\")
\n
\n\n \n
\n\n\n\n\n ![\"NPM](\"img/home/npm-logo.svg\")
\n
\n \n \n
\n 23k+
\n Weekly downloads\n\n ![\"GitHub](\"img/home/github-logo.svg\")
\n
\n \n \n
\n 6700+
\n GitHub stars\n\n ![\"MIT](\"img/home/license-icon.svg\")
\n
\n\n \n
\n MIT License
\n Free and open-source\n\n
\n\n\n\n\n Compatible with
\n
\n![\"JavaScript\"](\"img/javascript.png\")
\n ![\"Angular\"](\"img/angular.png\")
\n ![\"ReactJS\"](\"img/react.png\")
\n ![\"VueJS\"](\"img/vuejs.png\")
\n ![\"LemonadeJS\"](\"img/lemonadejs.png\")
\n
\nCompatible with
React, Angular, and Vue.
\n Jspreadsheet CE provides compatibility across different environments, ensuring your spreadsheet solution fits perfectly into your chosen stack.
\n\n
\n \n \n \n \n \n
\n\n\n\n\n
\n \n
\n A complete solution to make rich and user-friendly web applications
\nFully customizable JavaScript spreadsheet library, offering various components to enhance web development projects.
\n\n
\n \n
\n Column Types
\nA variety of customisable column types
\n\n
\n Nested Headers
\nCreate multi-level column headers
\n\n
\n Cell Comments
\nAdd comments to your spreadsheet cells
\n\n
\n Custom Toolbar
\nPersonalize your spreadsheet toolbar
\n\n\n
\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Data\n const data = [\n ['Hello', 13123, '', 'Yes', true, '#AA4411'],\n ['World!', 8, '', 'No', false, '#99BE23']\n ];\n // Columns\n const columns = [\n { type: 'text', title: 'Text' },\n { type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },\n { type: 'calendar', title: 'Calendar' },\n { type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },\n { type: 'checkbox', title: 'Checkbox' },\n { type: 'color', title: 'Color', width: 50, render: 'square' }\n ];\n\n // Render component\n return (\n \n \n );\n}\n```\n```vue\n\n \n \n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\n\n// Create component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: ``,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n data: [\n ['Hello', 13123, '', 'Yes', true, '#AA4411'],\n ['World!', 8, '', 'No', false, '#99BE23']\n ],\n columns: [\n { type: 'text', title: 'Text' },\n { type: 'numeric', title: 'Numeric', mask:'$ #.##,00', decimal: ',' },\n { type: 'calendar', title: 'Calendar' },\n { type: 'dropdown', source: ['Yes', 'No', 'Maybe'] },\n { type: 'checkbox', title: 'Checkbox' },\n { type: 'color', title: 'Color', width: 50, render: 'square' }\n ]\n }],\n });\n }\n}\n```\n\n
\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n // Spreadsheet array of worksheets\n const spreadsheet = useRef();\n // Nested headers\n const nestedHeaders = [\n [\n {\n title: 'Supermarket information',\n colspan: '6',\n },\n ],\n [\n {\n title: 'Location',\n colspan: '1',\n },\n {\n title: ' Other Information',\n colspan: '2'\n },\n {\n title: ' Costs',\n colspan: '3'\n }\n ],\n ];\n // Render component\n return (\n <>\n \n \n \n );\n}\n```\n```vue\n\n \n \n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\nimport \"jsuites/dist/jsuites.css\"\n\n// Create component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: ``,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [{\n data: [[]],\n minDimensions: [5, 2],\n nestedHeaders:[\n [\n {\n title: 'Supermarket information',\n colspan: '6',\n },\n ],\n [\n {\n title: 'Location',\n colspan: '1',\n },\n {\n title: ' Other Information',\n colspan: '2'\n },\n {\n title: ' Costs',\n colspan: '3'\n }\n ],\n ]\n }]\n });\n }\n}\n```\n\n
\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\nconst spreadsheet = useRef();\n\n const data = [\n ['US', 'Cheese', '2019-02-12'],\n ['CA', 'Apples', '2019-03-01'],\n ];\n\n const columns = [\n { width: '170px' },\n { width: '170px' },\n { width: '170px' },\n ];\n\n const comments = {\n B1: 'Initial comments on B1',\n C1: 'Initial comments on C1'\n };\n\n return (\n <>\n \n \n \n );\n}\n```\n```vue\n\n \n \n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\n\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: ``\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n worksheets: jspreadsheet.worksheetInstance[];\n\n ngAfterViewInit() {\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n worksheets: [\n {\n data: [\n ['US', 'Cheese', '2019-02-12'],\n ['CA', 'Apples', '2019-03-01'],\n ['CA', 'Carrots', '2018-11-10'],\n ['BR', 'Oranges', '2019-01-12'],\n ],\n columns: [\n { width: '170px' },\n { width: '170px' },\n { width: '170px' },\n ],\n allowComments: true,\n comments: {\n B1: 'Initial comments on B1',\n C1: 'Initial comments on C1'\n },\n }\n ],\n });\n }\n}\n```\n\n
\n\n\n```html\n\n\n\n\n\n\n\n\n\n\n\n```\n```jsx\nimport React, { useRef } from \"react\";\nimport { Spreadsheet, Worksheet } from \"@jspreadsheet-ce/react\";\nimport \"jsuites/dist/jsuites.css\";\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\";\n\nexport default function App() {\n const spreadsheet = useRef();\n\n const toolbar = function(toolbar) {\n // Add a new custom item in the end of my toolbar\n toolbar.items.push({\n tooltip: 'My custom item',\n content: 'share',\n onclick: function() {\n alert('Custom click');\n }\n });\n\n return toolbar;\n }\n\n return (\n <>\n \n \n \n );\n}\n```\n```vue\n\n \n \n\n\n\n```\n```angularjs\nimport { Component, ViewChild, ElementRef } from \"@angular/core\";\nimport jspreadsheet from \"jspreadsheet-ce\";\n\nimport \"jspreadsheet-ce/dist/jspreadsheet.css\"\nimport \"jsuites/dist/jsuites.css\"\n\n// Create component\n@Component({\n standalone: true,\n selector: \"app-root\",\n template: ``,\n})\nexport class AppComponent {\n @ViewChild(\"spreadsheet\") spreadsheet: ElementRef;\n // Worksheets\n worksheets: jspreadsheet.worksheetInstance[];\n // Create a new data grid\n ngAfterViewInit() {\n // Create spreadsheet\n this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {\n toolbar: function(toolbar) {\n // Add a new custom item in the end of my toolbar\n toolbar.items.push({\n tooltip: 'My custom item',\n content: 'share',\n onclick: function() {\n alert('Custom click');\n }\n });\n \n return toolbar;\n },\n worksheets: [{\n minDimensions: [6, 2]\n }]\n });\n }\n}\n```\n\n
\n\n\n
\n\n\n\n\n
\n \n
\n Create an online spreadsheet from various data formats
\nWith 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.
\n\n \n
\n\n
\n
\n\nDeliver high-quality interfaces and applications to your end-user
\nJspreadsheet reduces customers development time.
Here are some of their experiences.
\n
\n
\n\n\n\n\n ![\"Rich](\"img/home/grid/rich-interfaces.svg\")
\n
\n \n Rich Interfaces
\nMake rich and user-friendly web interfaces and applications
\n\n ![\"User-Friendly](\"img/home/grid/user-friendly-inputs.svg\")
\n
\n \n User-Friendly Inputs
\nYou can easily handle complicated data inputs in a way users are used to
\n\n ![\"Enhanced](\"img/home/grid/enhanced-experience.svg\")
\n
\n \n Enhanced Experience
\nImprove your user software experience
\n\n ![\"Beautiful](\"img/home/grid/beautiful-cruds.svg\")
\n
\n \n Beautiful CRUDs
\nCreate rich CRUDS and beautiful UI
\n\n ![\"Compatibility](\"img/home/grid/compatibility-with-excel.svg\")
\n
\n \n Compatibility with excel spreadsheets
\nUsers can move data around with common copy and paste shortcuts
\n\n ![\"Easy](\"img/home/grid/easy-customization.svg\")
\n
\n \n Easy Customization
\nEasy customizations with easy third-party plugin integrations
\n\n ![\"Fast](\"img/home/grid/fast-and-simple.svg\")
\n
\n \n Fast and Simple
\nLean, fast and simple to use
\n\n ![\"Faster](\"img/home/grid/faster-data-entry.svg\")
\n
\n \n Faster Data Entry
\nSpeed up your work dealing with difficult data entry in a web-based software
\n\n ![\"Shareable](\"img/home/grid/shareable-spreadsheets.svg\")
\n
\n\n Shareable Spreadsheets
\nCreate and share amazing online spreadsheets
\n\n
\n
\n\nComponent Ecosystem
\nExplore the powerful and versatile components designed to elevate your productivity. From data management to collaboration, our ecosystem seamlessly integrates to meet your needs.
\n\n
\n
\n\n\n\n\n\n\n ![\"Jspreadsheet](\"img/logo/jspreadsheet-pro-logo.svg\")
\n
\n \n Jspreadsheet Pro
\nEnterprise JavaScript data grid component to integrate spreadsheet UI into your web-based application.
\n\n ![\"Intrasheets](\"img/logo/intrasheets-logo.svg\")
\n
\n \n Intrasheets
\nCollaborate with ease using Intrasheets, an intuitive tool for managing spreadsheets across teams, ensuring that everyone stays on the same page.
\n\n ![\"jSuites](\"img/logo/jsuites-logo.svg\")
\n
\n \n Jsuites
\nComprehensive JavaScript plugins and web components for diverse web-based applications and requirements.
\n\n ![\"LemonadeJS](\"img/logo/lemonadejs-logo.svg\")
\n
\n\n LemonadeJS
\nA light and easy-to-use solution for creating elegant UI elements, giving your web apps a refreshing boost in both style and functionality.
\n\n
\n\n\n\n\n\n\n
\n
\n\n
Subscribe to our newsletter
\nTech news, tips and technical advice
\n\n
\n \n \n
\n