├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── WEBCOMPONENT.md ├── build.cjs ├── contributing.md ├── dist ├── index.d.ts ├── index.js ├── jspreadsheet.css └── jspreadsheet.themes.css ├── docs ├── jspreadsheet.md ├── jspreadsheet │ ├── contact.md │ ├── demo.md │ ├── docs.md │ ├── docs │ │ ├── angular.md │ │ ├── cells.md │ │ ├── clipboard.md │ │ ├── columns.md │ │ ├── comments.md │ │ ├── comparison.md │ │ ├── config.md │ │ ├── contextmenu.md │ │ ├── custom-formulas.md │ │ ├── data.md │ │ ├── editors.md │ │ ├── events.md │ │ ├── examples.md │ │ ├── examples │ │ │ ├── column-dragging.md │ │ │ ├── create-from-table.md │ │ │ ├── jquery.md │ │ │ ├── richtext-html-editor.md │ │ │ ├── table-overflow.md │ │ │ ├── translations.md │ │ │ └── web-component.md │ │ ├── filters.md │ │ ├── footers.md │ │ ├── format.md │ │ ├── formulas.md │ │ ├── freeze-columns.md │ │ ├── getting-started.md │ │ ├── headers.md │ │ ├── helpers.md │ │ ├── history.md │ │ ├── images.md │ │ ├── javascript-calendar.md │ │ ├── javascript-dropdown.md │ │ ├── merged-cells.md │ │ ├── meta-information.md │ │ ├── nested-headers.md │ │ ├── pagination.md │ │ ├── plugins.md │ │ ├── react.md │ │ ├── react │ │ │ └── tests.md │ │ ├── readonly.md │ │ ├── rows.md │ │ ├── search.md │ │ ├── selection.md │ │ ├── sorting.md │ │ ├── style.md │ │ ├── tests.md │ │ ├── themes.md │ │ ├── toolbars.md │ │ ├── upgrade-from-v4-to-v5.md │ │ ├── vue.md │ │ ├── vue │ │ │ └── tests.md │ │ └── worksheets.md │ ├── download.md │ ├── sponsors.md │ ├── v2 │ │ ├── docs.md │ │ ├── docs │ │ │ ├── events.md │ │ │ ├── programmatically-changes.md │ │ │ └── quick-reference.md │ │ ├── examples.md │ │ ├── examples │ │ │ ├── a-custom-table-design.md │ │ │ ├── autocomplete.md │ │ │ ├── comments.md │ │ │ ├── create-from-a-existing-html-table.md │ │ │ ├── creating-a-table-from-an-external-csv-file.md │ │ │ ├── currency-and-masking-numbers.md │ │ │ ├── getting-data-from-table.md │ │ │ ├── headers.md │ │ │ ├── images.md │ │ │ ├── including-formulas-on-your-spreadsheet.md │ │ │ ├── integrating-a-third-party-plugin-into-your-spreadsheet.md │ │ │ ├── jquery-table-with-toolbars.md │ │ │ ├── meta-information.md │ │ │ ├── mobile.md │ │ │ ├── multiple-spreadsheets-in-the-same-page.md │ │ │ ├── readonly-options.md │ │ │ ├── responsive-columns.md │ │ │ ├── sorting-data.md │ │ │ ├── table-styling.md │ │ │ ├── table-with-fixed-headers.md │ │ │ ├── text-wrapping.md │ │ │ ├── tracking-changes-on-the-spreadsheet.md │ │ │ ├── using-a-calendar-column-type.md │ │ │ ├── working-with-dropdowns.md │ │ │ └── working-with-the-data.md │ │ └── getting-started.md │ ├── v3 │ │ ├── docs.md │ │ ├── docs │ │ │ ├── events.md │ │ │ ├── programmatically-changes.md │ │ │ └── quick-reference.md │ │ ├── examples.md │ │ ├── examples │ │ │ ├── angular.md │ │ │ ├── column-types.md │ │ │ ├── comments.md │ │ │ ├── contextmenu.md │ │ │ ├── custom-table-design.md │ │ │ ├── datatables.md │ │ │ ├── date-and-datetime-picker.md │ │ │ ├── dropdown-and-autocomplete.md │ │ │ ├── events.md │ │ │ ├── headers.md │ │ │ ├── image-upload.md │ │ │ ├── import-data.md │ │ │ ├── jquery.md │ │ │ ├── lazy-loading.md │ │ │ ├── merged-cells.md │ │ │ ├── meta-information.md │ │ │ ├── programmatically-updates.md │ │ │ ├── react.md │ │ │ ├── readonly.md │ │ │ ├── sorting.md │ │ │ ├── spreadsheet-formulas.md │ │ │ ├── spreadsheet-toolbars.md │ │ │ ├── table-overflow.md │ │ │ ├── table-scripting.md │ │ │ ├── table-style.md │ │ │ ├── translations.md │ │ │ └── vue.md │ │ └── getting-started.md │ ├── v4.md │ └── v4 │ │ ├── cases.md │ │ ├── cases │ │ ├── data-persistence.md │ │ ├── food-store.md │ │ ├── highcharts.md │ │ └── project-management.md │ │ ├── docs.md │ │ ├── docs │ │ ├── events.md │ │ ├── examples.md │ │ ├── getting-started.md │ │ ├── most-common-questions-and-answers.md │ │ ├── programmatically-changes.md │ │ ├── quick-reference.md │ │ └── special-formulas.md │ │ ├── events.md │ │ ├── examples.md │ │ ├── examples │ │ ├── angular.md │ │ ├── column-dragging.md │ │ ├── column-filters.md │ │ ├── column-types.md │ │ ├── comments.md │ │ ├── contextmenu.md │ │ ├── create-from-table.md │ │ ├── custom-table-design.md │ │ ├── datatables.md │ │ ├── date-and-datetime-picker.md │ │ ├── dropdown-and-autocomplete.md │ │ ├── events.md │ │ ├── footers.md │ │ ├── freeze-columns.md │ │ ├── headers.md │ │ ├── image-upload.md │ │ ├── import-data.md │ │ ├── jquery.md │ │ ├── lazy-loading.md │ │ ├── merged-cells.md │ │ ├── meta-information.md │ │ ├── nested-headers.md │ │ ├── programmatically-changes.md │ │ ├── programmatically-updates.md │ │ ├── react.md │ │ ├── readonly.md │ │ ├── richtext-html-editor.md │ │ ├── sorting.md │ │ ├── spreadsheet-formulas.md │ │ ├── spreadsheet-toolbars.md │ │ ├── spreadsheet-webcomponent.md │ │ ├── table-overflow.md │ │ ├── table-scripting.md │ │ ├── table-style.md │ │ ├── tabs.md │ │ ├── translations.md │ │ └── vue.md │ │ ├── getting-started.md │ │ ├── most-common-questions-and-answers.md │ │ ├── programmatically-changes.md │ │ ├── quick-reference.md │ │ └── special-formulas.md └── sampleTable.png ├── mocha.config.js ├── package.json ├── packages └── vue │ ├── README.md │ ├── dist │ ├── index.d.ts │ └── index.js │ └── package.json ├── public └── index.html ├── resources └── lang │ ├── de_DE.json │ ├── dk_DA.json │ ├── en_GB.json │ ├── fr_FR.json │ ├── it_IT.json │ ├── pl_PL.json │ ├── pt_BR.json │ ├── vi_VN.json │ └── zh_CN.json ├── src ├── index.js ├── jspreadsheet.css ├── jspreadsheet.themes.css ├── test.js ├── utils │ ├── cells.js │ ├── columns.js │ ├── comments.js │ ├── config.js │ ├── copyPaste.js │ ├── data.js │ ├── dispatch.js │ ├── download.js │ ├── editor.js │ ├── events.js │ ├── factory.js │ ├── filter.js │ ├── footer.js │ ├── freeze.js │ ├── headers.js │ ├── helpers.js │ ├── history.js │ ├── internal.js │ ├── internalHelpers.js │ ├── keys.js │ ├── lazyLoading.js │ ├── libraryBase.js │ ├── merges.js │ ├── meta.js │ ├── orderBy.js │ ├── pagination.js │ ├── rows.js │ ├── search.js │ ├── selection.js │ ├── style.js │ ├── toolbar.js │ ├── version.js │ └── worksheets.js └── webcomponent.js ├── test ├── calculations.js ├── columns.js ├── comments.js ├── data.js ├── footer.js ├── headers.js ├── instance.js ├── merges.js ├── meta.js ├── orderBy.js ├── pagination.js ├── paste.js ├── redo.js ├── rows.js └── search.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | /package-lock.json 3 | node_modules 4 | /vue/package-lock.json 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .gitignore 3 | .gitattributes 4 | docs 5 | public 6 | /react/ 7 | src 8 | test 9 | /vue/ 10 | /wrappers/ 11 | build.cjs 12 | mocha.config.cjs 13 | webpack.config.cjs -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Jspreadsheet Ltd 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /WEBCOMPONENT.md: -------------------------------------------------------------------------------- 1 | #Jspreadsheet as a webcomponent 2 | 3 | Jspreadsheet v4+ can run as a javascript webcomponent. 4 | 5 | ``` 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | { 15 | "minDimensions": [10,10], 16 | "columns": [ 17 | { 18 | "width": "200px", 19 | "title": "Name" 20 | } 21 | ] 22 | } 23 | 24 | 25 | 26 | 27 | ``` -------------------------------------------------------------------------------- /build.cjs: -------------------------------------------------------------------------------- 1 | module.exports = function(source) { 2 | let result = source.replace(/import\s+jSuites\s+from\s+(?:'|")jsuites(?:'|");?/gm, ''); 3 | 4 | result = result.replace(/import\s+formula\s+from\s+(?:'|")@jspreadsheet\/formula(?:'|");?/gm, ''); 5 | 6 | return result; 7 | }; -------------------------------------------------------------------------------- /docs/jspreadsheet/contact.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet - Contact Us 2 | keywords: Contact Jspreadsheet, Get in Touch, Technical Support, Sales Inquiries 3 | description: Reach out to us for any technical support or sales inquiries related to Jspreadsheet. We're here to help with your questions and needs. 4 | canonical: https://bossanova.uk/jspreadsheet/contact 5 | 6 |
7 | 8 | 9 | {data-text="Jspreadsheet" .center} 10 | # Contact Us 11 | 12 |

13 | 14 |
15 |
16 | 17 | #### Upgrades 18 | 19 | Looking for more information? 20 | 21 | Email: [contact@jspreadsheet.com](mailto:contact@jspreadsheet.com) 22 | 23 | [Contact Us](mailto:contact@jspreadsheet.com){.button .dark target="_blank"} 24 | 25 |
26 | 27 | #### Technical Support 28 | 29 | Professional Technical Support 30 | 31 | Email: [support@jspreadsheet.com](mailto:support@jspreadsheet.com) 32 | 33 | [Talk to us](mailto:support@jspreadsheet.com){.button .dark target="_blank"} 34 | 35 |
36 | 37 | #### Github 38 | 39 | GitHub repository: 40 | 41 | [https://github.com/jspreadsheet/ce](https://github.com/jspreadsheet/ce) 42 | 43 | [![GitHub](img/github-logo.svg)](https://github.com/jspreadsheet/ce){target="_blank"} 44 | 45 |
46 |
47 | 48 |
49 | 50 |
51 | -------------------------------------------------------------------------------- /docs/jspreadsheet/demo.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet Demo Page 2 | keywords: Jspreadsheet, JavaScript data grid, spreadsheet controls, interactive data grid, web-based applications, lightweight, responsive controls, agnostic platform, Angular, React, Vue, spreadsheet-like plugin, documentation, examples, license 3 | description: Explore working examples of Jspreadsheet in action. See how it delivers interactive, customizable data grid solutions for web-based applications. 4 | canonical: https://bossanova.uk/jspreadsheet/demo 5 | 6 |
7 | 8 | {data-text="Demo"} 9 | # Data Grid Demo 10 | 11 | Explore the Jspreadsheet data grid through these interactive demos. Learn how its versatile spreadsheet controls integrate seamlessly with Angular, React, Vue, and other platforms. See practical use cases for building responsive, lightweight, and powerful web-based applications. 12 | 13 | 14 | 15 |
16 | 17 |
18 | -------------------------------------------------------------------------------- /docs/jspreadsheet/docs/examples.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet Examples 2 | keywords: Jspreadsheet examples, JavaScript spreadsheet, interactive data grid, spreadsheet columns, spreadsheet integrations, rich text editor, HTML table, internationalization 3 | description: Explore Jspreadsheet examples, including creating spreadsheets from HTML, rich text editors, column dragging, and integration with web components and jQuery. 4 | 5 | # Examples 6 | 7 | Explore practical examples of Jspreadsheet in action. This page showcases how to create and customize spreadsheets, implement advanced column features, and integrate with popular web technologies like web components and jQuery. 8 | 9 | ## Spreadsheet 10 | - [Create a new Spreadsheet from HTML](https://jspreadsheet.com/docs/examples/create-from-table) 11 | - [Data Grid Translations](https://jspreadsheet.com/docs/examples/translations) 12 | - [Data Grid Table Ooverflow](https://jspreadsheet.com/docs/examples/table-overflow) 13 | 14 | ## Columns 15 | - [Rich Text Cell Editor](https://jspreadsheet.com/docs/examples/richtext-html-editor) 16 | - [Data Grid Column Dragging](https://jspreadsheet.com/docs/examples/column-dragging) 17 | 18 | ## Integrations 19 | - [Spreadsheet Web Component](https://jspreadsheet.com/docs/examples/web-component) 20 | - [Jquery Spreadsheet](https://jspreadsheet.com/docs/examples/jquery) 21 | -------------------------------------------------------------------------------- /docs/jspreadsheet/docs/examples/jquery.md: -------------------------------------------------------------------------------- 1 | title: jQuery Spreadsheet 2 | keywords: Jexcel, JavaScript, Jspreadsheet, jQuery integration, JavaScript spreadsheet, interactive table 3 | description: Learn how to integrate Jspreadsheet with jQuery through a complete example. 4 | 5 | # jQuery Spreadsheet 6 | 7 | Create fantastic data grids with spreadsheet controls integrating Jspreadsheet with jQuery. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 | 40 | 41 | ``` 42 | 43 | -------------------------------------------------------------------------------- /docs/jspreadsheet/docs/examples/web-component.md: -------------------------------------------------------------------------------- 1 | title: Spreadsheet Web Component with Jspreadsheet 2 | keywords: Jexcel, JavaScript, JavaScript plugin, web component, spreadsheet, data grid, table, Excel-like grid, data tables, data visualization 3 | description: Learn how to use Jspreadsheet CE to create a fully functional spreadsheet as a web component for your applications. 4 | 5 | # Spreadsheet Web Component 6 | 7 | Easily create a spreadsheet web component using Jspreadsheet CE for seamless integration into your web applications. 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | 16 | 77 | 78 | ``` -------------------------------------------------------------------------------- /docs/jspreadsheet/docs/tests.md: -------------------------------------------------------------------------------- 1 | title: Unit Tests for Jspreadsheet 2 | keywords: Jspreadsheet, Jexcel, JavaScript, Web-based Applications, Web-based Spreadsheet, Unit Tests 3 | description: Enhance your application quality by creating unit tests for Jspreadsheet. 4 | 5 | # Testing 6 | 7 | ## Introduction 8 | 9 | Unit testing ensures robust Jspreadsheet integrations by validating functionality and catching regressions early. This guide uses Mocha, Chai, and JSDOM to test data grid behaviour in a simulated browser environment. 10 | 11 | ## Environment Setup 12 | 13 | Set up a basic environment to implement Jspreadsheet testing. Follow these steps or clone our GitHub example project. 14 | 15 | ### Step 1: Clone the Project 16 | 17 | Clone a setup with Jspreadsheet pre-installed and a test file: 18 | 19 | ```bash 20 | git clone https://github.com/jspreadsheet/tests.git 21 | cd tests 22 | ``` 23 | 24 | ### Step 2: Install the Dependencies 25 | 26 | Install required libraries using npm: 27 | 28 | ```bash 29 | npm install jspreadsheet-ce@5.0.0-beta.3 30 | ``` 31 | 32 | ### Step 3: Configure Mocha 33 | 34 | Create or edit the `mocha.config.js` file in the project root to configure Mocha and emulate the browser environment using JSDOM. 35 | 36 | {.ignore} 37 | ```javascript 38 | #! /usr/bin/env node 39 | 40 | require('jsdom-global')(undefined, { url: 'https://localhost' }); 41 | const jspreadsheet = require('jspreadsheet'); 42 | 43 | global.jspreadsheet = jspreadsheet; 44 | 45 | global.root = document.createElement('div'); 46 | global.root.style.width = '100%'; 47 | global.root.style.height = '100%'; 48 | document.body.appendChild(global.root); 49 | 50 | exports.mochaHooks = { 51 | afterEach(done) { 52 | jspreadsheet.destroyAll(); 53 | done(); 54 | }, 55 | }; 56 | ``` 57 | 58 | ### Step 4: Create your first test 59 | 60 | Inside the `test` folder, create a file named `data.js`: 61 | 62 | {.ignore} 63 | ```javascript 64 | const { expect } = require('chai'); 65 | 66 | describe("Data", () => { 67 | it("Testing data", () => { 68 | let test = jspreadsheet(root, { 69 | worksheets: [ 70 | { 71 | data: [ 72 | ["Mazda", 2001, 2000], 73 | ["Peugeot", 2010, 5000], 74 | ["Honda Fit", 2009, 3000], 75 | ["Honda CRV", 2010, 6000], 76 | ], 77 | minDimensions: [4, 4] 78 | }, 79 | ], 80 | }); 81 | 82 | expect(test[0].getValue("A1", true)).to.equal("Mazda"); 83 | expect(test[0].getValue("A2", true)).to.equal("Peugeot"); 84 | expect(test[0].getValue("B1", true)).to.equal("2001"); 85 | }); 86 | }); 87 | ``` 88 | 89 | ### Step 5: Running the Tests 90 | 91 | After writing your tests, you can run them with the following command: 92 | 93 | ```bash 94 | npm run test 95 | ``` 96 | 97 | -------------------------------------------------------------------------------- /docs/jspreadsheet/download.md: -------------------------------------------------------------------------------- 1 | title: Download Jspreadsheet 2 | keywords: Download Jspreadsheet 3 | description: Download Jspreadsheet for your projects. 4 | canonical: https://bossanova.uk/jspreadsheet/download 5 | 6 | # Jspreadsheet Download 7 | 8 | Jspreadsheet is available through multiple distribution channels, making it easy to integrate into your project regardless of your preferred setup. 9 | 10 | ## Download Options 11 | 12 | ### Direct Download 13 | 14 | [Click here to download](https://bossanova.uk/jspreadsheet/v5/jspreadsheet.zip) 15 | 16 | ### CDN 17 | 18 | You can include Jspreadsheet directly via CDN for quick setup: 19 | 20 | {.ignore} 21 | ```html 22 | 23 | 24 | ``` 25 | 26 | ### NPM 27 | 28 | For modern web development, install Jspreadsheet via NPM: 29 | 30 | ```bash 31 | npm install jspreadsheet-ce 32 | ``` 33 | 34 | ### GitHub Repository 35 | 36 | Access the source code and contribute to the development of Jspreadsheet on [GitHub](https://github.com/jspreadsheet/jspreadsheet). 37 | 38 | ## Documentation 39 | 40 | For more information on integrating Jspreadsheet into your project, visit the [official documentation](https://bossanova.uk/jspreadsheet/docs). 41 | -------------------------------------------------------------------------------- /docs/jspreadsheet/sponsors.md: -------------------------------------------------------------------------------- 1 | title: Sponsors 2 | keywords: Jspreadsheet sponsors, open-source sponsorship, FDL sponsors, ETH Scientific IT Services, Initiative Tree, Market Control 3 | description: Learn about the most recent sponsors supporting Jspreadsheet, including FDL - Libre Endowment Fund, ETH Scientific IT Services, Initiative Tree, and Market Control. 4 | canonical: https://bossanova.uk/jspreadsheet/sponsors 5 | 6 | # Sponsors 7 | 8 | The most recent sponsors: 9 | 10 | ![](https://www.fdl-lef.org/FDL-Logo.Colorised.Forest?format=png) 11 | 12 | **FDL - Fonds de Dotation du Libre - Libre Endowment Fund** 13 | 14 | FDL - Libre Endowment Fund is a French endowment fund that supports developers and publishers of Free and Open Source software projects. FDL accepts tax-deductible donations to fund specific feature developments for software deemed of general interest. 15 | 16 | FDL works in synergy with its sister non-profit organization, "AWL" (Action pour un Web Libre). FDL focuses on long-term projects, while AWL sponsors short-term initiatives. Both maintain a repository of Free and Open Source software publishers at [afs.one](https://afs.one). Learn more about FDL and AWL at [www.fdl-lef.org](https://www.fdl-lef.org). 17 | 18 | **ETH Scientific IT Services** 19 | 20 | **Initiative Tree** 21 | 22 | **Market Control** -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/docs.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Documentation 2 | keywords: Jspreadsheet, grid, data, table, datatable, json, excel, excel-like, jquery, javascript, spreadsheet 3 | description: Introduction, basic methods, event handles and all information you need about this jquery plugin. 4 | 5 | ## Column types 6 | 7 | Jspreadsheet brings some native columns in addition to the default input text. It means you can get alternative ways to entry data in your spreadsheet. From advanced numeric inputs, dropdowns to calendar picks and a very easy way to have your custom integrations, makes the jExcel plugin a very flexible tool to enhance the user experience when using your applications. 8 | 9 | In the example below, you will have text, numeric inputs and a calendar picker. But, other native options will be available such as: _text, numeric, calendar, checkbox, dropdown, autocomplete._ 10 | 11 | ```javascript 12 | $('#my').jexcel({ 13 | data:data, 14 | colHeaders: ['Model', 'Date', 'Price', 'Date'], 15 | colWidths: [ 300, 80, 100, 100 ], 16 | columns: [ 17 | { type: 'text' }, 18 | { type: 'numeric' }, 19 | { type: 'numeric' }, 20 | { type: 'calendar', options: { format:'DD/MM/YYYY' } }, 21 | ] 22 | }); 23 | ``` 24 | 25 | ### Custom columns 26 | 27 | To make a flexible tools, it is possible to extend the plugin to create your custom entries. The following example will show you how to integrate a third party plugin to create your custom columns. 28 | 29 | [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) 30 | 31 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/a-custom-table-design.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Bootstrap and custom table design 2 | keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid 3 | description: Create a custom table design. For example a bootstrap-like spreadsheet table. 4 | canonical: https://bossanova.uk/jspreadsheet/v2/examples/a-custom-table-design 5 | 6 | [Back to Examples](/jspreadsheet/v2/examples) 7 | 8 | # Create custom CSS for your javascript spreadsheet 9 | 10 | The following example shows a CSS addon to change the core layout of your jquery tables. 11 | 12 | 13 | 14 | ## Green borders and corners jquery spreadsheet 15 | 16 | [Bootstrap-like jquery spreadsheet example](/jspreadsheet/v2/examples/a-custom-table-design) 17 | 18 | ## Bootstrap-like jquery spreadsheet. 19 | 20 | [Green borders and corners jquery spreadsheet example](/jspreadsheet/v2/examples/a-custom-table-design?layout=green) 21 | 22 | Your jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us. 23 | 24 | ### Source code 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 65 | 66 | ``` 67 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/autocomplete.md: -------------------------------------------------------------------------------- 1 | title: Autocomplete Column 2 | keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column 3 | description: Customize your column type to autocomplete 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Autocomplete column 8 | 9 | It is natively presented as single dropdown with text filter enabled and it is based on a pre-defined options defined in the instance declaration or in a dynamic remote JSON source. 10 | 11 | [Json source demo](/jspreadsheet/countries) 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 41 | 42 | ``` 43 | 44 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/comments.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Add comments in your jquery table 2 | keywords: Jexcel, jquery, javascript, cell comments, jquery table 3 | description: Manage a table cell comments 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Manage cell comments in your jquery table 8 | 9 | The most recent version the spreadsheet plugin brings the possibility to manage custom comments for each individual cells. By allowComments in the initialization, the user will be able to add comments in the rigth click contextMenu. 10 | 11 | It is also possible to manage your cell comments programmatically by the use of commands such as setComments or getComments, for example: 12 | 13 | | Method | Description | 14 | |-------------------------------------------------------------------------|--------------------| 15 | | $('#my1').jexcel('setComments', 'A1', 'This is the comments from A1'); | Set A1 comments | 16 | | $('#my1').jexcel('getComments', 'A1'); | Get A1 comments | 17 | | $('#my1').jexcel('setComments', 'A1', ''); | Reset A1 comments | 18 | 19 | 20 | ### Source code 21 | 22 | ```html 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 55 | 56 | ``` 57 | 58 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/creating-a-table-from-an-external-csv-file.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Creating a web spreadsheet based on an external CSV 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, CSV, table, grid 3 | description: How to load the data from an external CSV file into a Jspreadsheet grid or table. 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Creating a javascript spreadsheet based on an external CSV 8 | 9 | The example below helps you to create a javascript spreadsheet table based on a remote CSV file, including the headers. The examples also requires a third party jquery CSV parser plugin (100% IETF RFC 4180). 10 | 11 | Original file: [/jspreadsheet/demo.csv](/jspreadsheet/demo.csv). 12 | 13 | ## Source code 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 |

26 | 27 | 43 | 44 | ``` 45 | 46 | ## Online demo on jsFiddle 47 | 48 | 49 | 50 | 51 | 52 | # Creating a javascript spreadsheet based on an external JSON file 53 | 54 | In a similar way, you can create a jquery table based on an external JSON file format by using the _url: directive_ as below. 55 | 56 | ## Source code 57 | 58 | ```html 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 | 74 | 75 | ``` 76 | 77 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/getting-data-from-table.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Extract Data from Spreadsheet 2 | keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, extract, get, data 3 | description: Get data from inside the datagrid to javascript 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Extract the data from your Jspreadsheet jquery plugin 8 | 9 | The following example shows how to extract the data from your jquery table in CSV or JSON formats. 10 | 11 | ## Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |

24 | 25 | 26 |

27 | 28 | 29 | 30 | 47 | 48 | ``` 49 | 50 | ## Online demo on jsFiddle 51 | 52 | [How to extract data example from your jquery table on jsFiddle](https://jsfiddle.net/spreadsheet/tzy1h6rg/) 53 | 54 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/headers.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Nested Headers 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, nested headers 3 | description: Creating a Jspreadsheet table with nested headers. 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Nested Headers 8 | 9 | The most recent version of the jquery plugin Jspreadsheet implements nested headers natively. A few examples on how to add nested headers your jquery table: 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 49 | 50 | ``` 51 | 52 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/images.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Images on your images 2 | keywords: Jexcel, jquery, javascript, spreadsheet, table, jquery plugin, images 3 | description: Add images on your spreadsheet cells 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Embed images on your cells 8 | 9 | The following example shows how to render images inside your spreadsheet cells 10 | 11 | ## Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 |
19 | 20 | 39 | 40 | ``` 41 | 42 | [Edit this example on jsFiddle](https://jsfiddle.net/spreadsheet/9296zmpf/) 43 | 44 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/integrating-a-third-party-plugin-into-your-spreadsheet.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Custom column and integrating plugins on your table 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by 3 | description: How to create custom column types based on a third party jquery plugin 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Create a custom column based on a third party jquery plugin 8 | 9 | This particular example shows how to create a custom color picker column type using the [Spectrum Jquery Plugin](https://bgrins.github.io/spectrum/). This example illustrates how to create your own custom columns based on any third party jquery plugin. 10 | 11 | [See this example on jsFiddle](https://jsfiddle.net/spreadsheet/rp0876b1/) 12 | 13 | ## Source code 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 88 | 89 | ``` 90 | 91 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/meta-information.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Add meta information in your cells 2 | keywords: Jexcel, jquery, javascript, jquery table, meta information 3 | description: Manage the table meta information 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Add meta information in your spreadsheet spreadsheet plugin 8 | 9 | You can keep meta information bind to cells but not visible to users. This can be useful for integrating Jspreadsheet with third party software. 10 | 11 | But, after the initialization is still possible to manage the cell meta information programmatically using the method getMeta and setMeta, as follow. 12 | 13 | | | | 14 | | ---|--- | 15 | | $('#my1').jexcel('setMeta', [{ A1: { newInfo:'newInfo' } }, { B1: { info1:'test1', info2:'test2'} }, { C2: { metaTest:'test3' } }]); | Set meta data for the table in a batch | 16 | | $('#my1').jexcel('setMeta', 'A2', 'myKeyMeta', 'myValueMeta'); | Set a meta information for A2 | 17 | | $('#my1').jexcel('getMeta', 'A1'); | Get the meta information for A1 | 18 | | $('#my1').jexcel('getMeta'); | Get all meta information | 19 | 20 | 21 | 22 | ## Source code 23 | 24 | ```html 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 56 | 57 | ``` 58 | 59 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/mobile.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Mobile Layout 2 | keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, mobile 3 | description: Responsive Layout 4 | 5 | {.ignore} 6 | ```html 7 |
8 | 9 | 30 | ``` 31 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/multiple-spreadsheets-in-the-same-page.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Create multiple instances in the same page 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by 3 | description: How to create multiple table instances in the same page 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Multiple spreadsheets in the same page 8 | 9 | How to embed multiple spreadsheets in the same page. 10 | 11 | ## Source code 12 | 13 | {.ignore} 14 | ```html 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 |
23 | 24 | 35 | 36 | ``` 37 | 38 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/readonly-options.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Handling readonly column and cells on your spreadsheet 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, events 3 | description: Understanding how to set a readonly column or multiple custom cells 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Readonly columns and cells. 8 | 9 | ## Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 50 | 51 | ``` 52 | 53 | ## Online demo on jsFiddle 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/responsive-columns.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Responsive Layout 2 | keywords: Jexcel, jquery, javascript, bootstrap, table design, spreadsheet, CSV, table, grid, autocomplete, customization, column 3 | description: Creating a more responsive layout on jexcel 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Responsive columns 8 | 9 | The Jspreadsheet jquery plugin brings a more responsive column types. 10 | 11 | ![](img/iphone.png) 12 | 13 | [Open this table only in a new window](/jspreadsheet/v2/examples/mobile) 14 | 15 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/sorting-data.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Sorting your grid 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, sorting, table, grid, order by 3 | description: Sorting your Jspreadsheet spreadsheet 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Sorting your table 8 | 9 | You can reorder your jquery table by double clicking in the header or by selecting the desired option in the context menu. The example shows how to change the order of your jquery table programmatically. 10 | 11 | ## Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 42 | 43 |

44 | 45 | 51 |

52 | 53 | 54 | ``` 55 | 56 | ### Programmatically sorting 57 | 58 | {.ignore} 59 | ```html 60 | 63 | ``` 64 | 65 | ### Disable the table sorting 66 | 67 | The ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization. 68 | 69 | {.ignore} 70 | ```html 71 | 92 | ``` 93 | 94 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/table-with-fixed-headers.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Data table with fixed headers and scrolling 2 | keywords: Jexcel, jquery, javascript, fixed headers, scrolling, data tables 3 | description: Overflow table and scrolling 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Spreadsheet with fixed headers and scrolling 8 | 9 | Create an instance of your jquery plugin to allow a table overflow and scrolling. 10 | 11 | ## Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 31 | 32 | ``` 33 | 34 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/text-wrapping.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Text wrap 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, text wrapping 3 | description: How to change the text wrap behavior in a Jspreadsheet column 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Text wrapping 8 | 9 | The javascript spreadsheet default configuration does not wrap the text. But, you can change this behavior by using the wordWrap option in the jquery plugin initialization. In the most recent version of Jspreadsheet, alt+enter will allow the user to add a new line when editing the text when the wrap is enabled 10 | 11 | ## Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 40 | 41 | ``` 42 | 43 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v2/examples/using-a-calendar-column-type.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet | Examples | Calendar column type with date and datetime picker 2 | keywords: Jexcel, jquery, javascript, excel-like, spreadsheet, jquery plugin, date, datetime picker 3 | description: How to handle a calendar with date and datetime picker. 4 | 5 | [Back to Examples](/jspreadsheet/v2/examples) 6 | 7 | # Calendar column type 8 | 9 | The example below shows how to use and customize special calendar column type. 10 | 11 | See a live example of calendar usage on [jsfiddle](https://jsfiddle.net/spreadsheet/ajv413cb/). 12 | 13 | ## Source code 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 47 | 48 | ``` 49 | 50 | ## Date column customization 51 | 52 | Customize the format and the behavior of your column through the initialization options, as follow: 53 | 54 | ### Calendar initialization options 55 | 56 | {.ignore} 57 | ```javascript 58 | { 59 | options: { 60 | format:'DD/MM/YYYY', // Date format 61 | readonly:0, // Input as readonly (true or false) 62 | today:0, // Input with at today as default (true or false) 63 | time:0, // Show time picker 64 | clear:1, // Show clear button 65 | mask:1, // Mask the input 66 | months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // Translations can be done here 67 | weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], // Translations can be done here 68 | weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'] // Translations can be done here 69 | }; 70 | } 71 | ``` 72 | 73 | Considering the example above, you can create a calendar including a time picker by simple send the option **time:1** as the following example. 74 | 75 | {.ignore} 76 | ```html 77 |
78 | 79 | 92 | ``` 93 | 94 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/docs.md: -------------------------------------------------------------------------------- 1 | title: The javascript spreadsheet documentation 2 | keywords: Jexcel, javascript, excel-like, spreadsheet, table, grid 3 | description: Jspreadsheet CE official documentation, the javascript spreadsheet 4 | 5 | Jspreadsheet v3 Documentation 6 | ============================= 7 | 8 | The Jspreadsheet is a lightweight javascript spreadsheet component to help with data management in web applications. 9 | 10 | * [Getting started](/jspreadsheet/v3/docs/getting-started "Getting started with Jspreadsheet") 11 | Getting started with Jspreadsheet - the online spreadsheet. Learning the basics, create instances, and more about the general spreadsheet configuration. 12 | 13 | * [Programmatically changes](/jspreadsheet/v3/docs/programmatically-changes "Programmatically changes") 14 | How to interact with your Jspreadsheet - the online spreadsheet and tables through javascript. 15 | 16 | * [Handling events](/jspreadsheet/v3/docs/events "Handling events on Jspreadsheet") 17 | How to handle events on your javascript spreadsheet. 18 | 19 | * [Quick reference](/jspreadsheet/v3/docs/quick-reference "Jspreadsheet method and events") 20 | Quick reference of all methods, configuration variables, events and language. -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/docs/events.md: -------------------------------------------------------------------------------- 1 | title: Spreadsheet Events: Integration and Customization 2 | keywords: Jspreadsheet, data grid, JavaScript, Excel-like features, spreadsheet events, event handling, customized actions, JavaScript integration, interactive spreadsheets, feature customization, event-driven programming, data grid events 3 | description: Learn more about Jspreadsheet’s comprehensive event system for advanced customization and integration. 4 | 5 | [Back to Documentation](/jspreadsheet/v3/docs) 6 | 7 | # Events on the online spreadsheet 8 | 9 | ## Custom table scripting after changes 10 | 11 | Jspreadsheet offers a native feature to customize your table on the fly. You can define the method updateTable to create rules to customize the data should be shown to the user, as the example below. 12 | 13 | [See an example in action](/jspreadsheet/v3/examples/table-scripting) 14 | 15 | ## Events 16 | 17 | Jspreadsheet available events in this version. 18 | 19 | [Example on handling events on your spreasheet](/jspreadsheet/v3/examples/events) 20 | 21 | | Event | description | 22 | | ---|--- | 23 | | **onload** | This method is called when the method setData | 24 | | **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+ | 25 | | **onchange** | After a column value is changed. | 26 | | **onafterchanges** | After all changes are applied in the table. | 27 | | **onpaste** | After a paste action is performed in the javascript table. | 28 | | **onbeforepaste** | Before the paste action is performed. Used to parse any input data, should return the data. | 29 | | **oninsertrow** | After a new row is inserted. | 30 | | **onbeforeinsertrow** | Before a new row is inserted. You can cancel the insert event by returning false. | 31 | | **ondeleterow** | After a row is excluded. | 32 | | **onbeforedeleterow** | Before a row is deleted. You can cancel the delete event by returning false. | 33 | | **oninsertcolumn** | After a new column is inserted. | 34 | | **onbeforeinsertcolumn** | Before a new column is inserted. You can cancel the insert event by returning false. | 35 | | **ondeletecolumn** | After a column is excluded. | 36 | | **onbeforedeletecolumn** | Before a column is excluded. You can cancel the insert event by returning false. | 37 | | **onmoverow** | After a row is moved to a new position. | 38 | | **onmovecolumn** | After a column is moved to a new position. | 39 | | **onresizerow** | After a change in row height. | 40 | | **onresizecolumn** | After a change in column width. | 41 | | **onselection** | On the selection is changed. | 42 | | **onsort** | After a colum is sorted. | 43 | | **onfocus** | On table focus | 44 | | **onblur** | On table blur | 45 | | **onmerge** | On column merge | 46 | | **onchangeheader** | On header change | 47 | | **onundo** | On undo is applied | 48 | | **onredo** | On redo is applied | 49 | | **oneditionstart** | When a openEditor is called. | 50 | | **oneditionend** | When a closeEditor is called. | 51 | | **onchangestyle** | When a setStyle is called. | 52 | | **onchangemeta** | When a setMeta is called. | 53 | 54 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/angular.md: -------------------------------------------------------------------------------- 1 | title: Jexcel with Angular 2 | keywords: Jexcel, javascript, using jspreadsheet and angular 3 | description: A full example on how to integrate Jspreadsheet with Angular 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # The Javascript spreadsheet with Angular 8 | 9 | [Click here to see the project running on codesandbox.](https://codesandbox.io/s/jexcel-and-angular-ej4u2) 10 | 11 | ### Source code 12 | 13 | {.ignore} 14 | ```javascript 15 | import { Component } from "@angular/core"; 16 | import * as jexcel from "jexcel"; 17 | 18 | require("jexcel/dist/jexcel.css"); 19 | 20 | @Component({ 21 | selector: "app-root", 22 | templateUrl: "./app.component.html", 23 | styleUrls: ["./app.component.css"] 24 | }) 25 | export class AppComponent { 26 | title = "CodeSandbox"; 27 | 28 | ngAfterViewInit() { 29 | jexcel(document.getElementById("spreadsheet"), { 30 | data: [[]], 31 | columns: [ 32 | { type: "dropdown", width: "100px", source: ["Y", "N"] }, 33 | { type: "color", width: "100px", render: "square" } 34 | ], 35 | minDimensions: [10, 10] 36 | }); 37 | } 38 | } 39 | ``` 40 | 41 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/comments.md: -------------------------------------------------------------------------------- 1 | title: Allow comments in your javascript table 2 | keywords: Jexcel, spreadsheet, javascript, cell comments, javascript table 3 | description: Allow comments in your table spreadsheet. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Comments on your javascript spreadsheet 8 | 9 | The javascript vanilla spreadsheet plugin allows the user to set custom comments for each individual cells. By allowComments in the initialization, the user will be able to add comments in the rigth click contextMenu. 10 | 11 | ## Manage cell comments programmatically 12 | 13 | To apply comments via javascript, you can use the methods setComments or getComments, as follow: 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 | 25 | 26 | 27 | 28 | 58 | 59 | ``` 60 | 61 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/custom-table-design.md: -------------------------------------------------------------------------------- 1 | title: Custom Table Design 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data 3 | description: Customized CSS for your datagrid 4 | 5 | [Back to Examples](jspreadsheet/v3/examples) 6 | 7 | # Create custom CSS for your javascript spreadsheet 8 | 9 | The following example shows a CSS addon to change the core layout of your jquery tables. 10 | 11 | 12 | 13 | ## Green borders and corners jquery spreadsheet 14 | 15 | Your jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us. 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 54 | 55 | ``` 56 | 57 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/datatables.md: -------------------------------------------------------------------------------- 1 | title: Searchable Datatables 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data 3 | description: Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Javascript spreadsheet with search and pagination 8 | 9 | The following example shows how to create a javascript spreadsheet instance with a design similar to datatables jquery plugin. 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 39 | 40 | ``` 41 | 42 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/date-and-datetime-picker.md: -------------------------------------------------------------------------------- 1 | title: Calendar with date and datetime picker 2 | keywords: Jexcel, javascript, excel-like, spreadsheet, date, datetime, calendar 3 | description: Example from basic to advanced calendar usage, date and datetime picker 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Calendar column type 8 | 9 | The example below shows how to use and customize special calendar column type. 10 | 11 | Jspreadsheet uses the jSuites [Javascript Calendar](https://jsuites.net/docs/javascript-calendar) plugin 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 53 | 54 | ``` 55 | 56 | ## Date column customization 57 | 58 | Customize the format and the behavior of your column through the initialization options, as follow: 59 | 60 | ```javascript 61 | { 62 | options : { 63 | // Date format 64 | format:'DD/MM/YYYY', 65 | // Allow keyboard date entry 66 | readonly:0, 67 | // Today is default 68 | today:0, 69 | // Show timepicker 70 | time:0, 71 | // Show the reset button 72 | resetButton:true, 73 | // Placeholder 74 | placeholder:'', 75 | // Translations can be done here 76 | months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 77 | weekdays:['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], 78 | weekdays_short:['S', 'M', 'T', 'W', 'T', 'F', 'S'], 79 | // Value 80 | value:null, 81 | // Events 82 | onclose:null, 83 | onchange:null, 84 | // Fullscreen (this is automatic set for screensize < 800) 85 | fullscreen:false, 86 | }; 87 | } 88 | ``` 89 | 90 | ## JavaScript Calendar Picker 91 | 92 | More information about the jSuites responsive [JavaScript calendar](https://jsuites.net/docs/javascript-calendar) plugin. 93 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/headers.md: -------------------------------------------------------------------------------- 1 | title: Nested headers and column header updates 2 | keywords: Jexcel, spreadsheet, javascript, header updates, nested headers, javascript table 3 | description: Enabled nested headers in your spreadsheet and learn how to set or get header values 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Headers 8 | 9 | ## Nested headers 10 | 11 | The online spreadsheet implements nested headers natively though the directive **nestedHeaders** 12 | 13 | ## Programmatically header updates 14 | 15 | There are a few options to allow the user to interact with the header titles. Using the contextMenu over the desired header, by pressing an selected header and holding the click for 500ms, or via javascript. 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |
27 | 32 | 33 | 34 | 35 | 36 | 86 | 87 | ``` 88 | 89 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/jquery.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet with Jquery 2 | keywords: Jexcel, javascript, using jspreadsheet and Jquery 3 | description: A full example on how to integrate Jspreadsheet with Jquery 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Jquery 8 | 9 | Creating a jspreadsheet javascript instance using jQuery 10 | 11 | ### Source code 12 | 13 | {.ignore} 14 | ```html 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 35 | 36 | ``` 37 | 38 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/lazy-loading.md: -------------------------------------------------------------------------------- 1 | title: Dealing with big spreadsheets through lazy loading 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data 3 | description: This example brings a very nice feature to deal with large table datasets. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples) 6 | 7 | # Lazy loading 8 | 9 | The following table is dealing with 60.000 columns. The lazy loading method allows render up to 130 rows at the same time and will render other rows based on the scrolling. 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 54 | 55 | ``` 56 | 57 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/merged-cells.md: -------------------------------------------------------------------------------- 1 | title: How to merge the spreadsheet cells 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, merged cells 3 | description: Full example on how to handle merge cells in your javascript tables. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Merged cells 8 | 9 | You can merge cells on your spreadsheet in the table initialization or programmatically as follows: 10 | 11 | The following methods are available for merge cells management: `setMerge`, `getMerge`, `removeMerge`, `destroyMerged`_ 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |

21 | 22 | 23 | 24 | 25 | 26 | 53 | 54 | ``` 55 | 56 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/meta-information.md: -------------------------------------------------------------------------------- 1 | title: Meta information 2 | keywords: Javascript spreadsheet, javascript, javascript table, meta information 3 | description: Keep hidden information about your data grid cells using the Jspreadsheet meta information methods 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples#more) 6 | 7 | # Meta information 8 | 9 | This feature helps you keep import information about the cells hidden from users. 10 | 11 | You can define any meta information during the initialization or programmatically after that thought getMeta or setMeta methods. 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | ``` 55 | 56 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/react.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet with React 2 | keywords: Jexcel, javascript, using Jspreadsheet and react 3 | description: A full example on how to integrate Jspreadsheet with React 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # The Javascript spreadsheet with React 8 | 9 | Integrating Jspreadsheet with React 10 | 11 | [React with jspreadsheet sample project](https://codesandbox.io/s/jexcel-and-react-hmx0k) 12 | 13 | ### Source code 14 | 15 | {.ignore} 16 | ```javascript 17 | class Jspreadsheet extends React.Component { 18 | constructor(props) { 19 | super(props); 20 | this.options = props.options; 21 | } 22 | 23 | componentDidMount = function() { 24 | this.el = jexcel(ReactDOM.findDOMNode(this).children[0], this.options); 25 | } 26 | 27 | addRow = function() { 28 | this.el.insertRow(); 29 | } 30 | 31 | render() { 32 | return ( 33 |
34 |


35 | this.addRow()}> 36 |
37 | ); 38 | } 39 | } 40 | 41 | var options = { 42 | data:[[]], 43 | minDimensions:[10,10], 44 | }; 45 | 46 | ReactDOM.render(, document.getElementById('spreadsheet')) 47 | ``` 48 | 49 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/readonly.md: -------------------------------------------------------------------------------- 1 | title: Readonly Columns 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, readonly 3 | description: Example how to set up readonly cells on your spreadsheets. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples) 6 | 7 | # Readonly columns and cells 8 | 9 | Setting a readonly the whole column or a single specific cell. 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 59 | 60 | ``` 61 | 62 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/sorting.md: -------------------------------------------------------------------------------- 1 | title: Sorting the spreadsheet columns 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, sorting 3 | description: Example how to sort the table by a column via javascript. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Sorting your table 8 | 9 | ## Simple example 10 | 11 | You can sort your javascript table by double a double click in the header, using the context menu or by javascript as follow: 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 39 | 40 |
41 | 47 | 48 | 49 | 50 | ``` 51 | 52 | ## Disable the table sorting 53 | 54 | The ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization. 55 | 56 | ```html 57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 | 65 | 82 | 83 | ``` 84 | 85 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/table-overflow.md: -------------------------------------------------------------------------------- 1 | title: Table overflow with Jspreadshee Version 3 2 | keywords: Jexcel, javascript, javascript vanilla, javascript, table, table overflow 3 | description: How define a fixed width and height for the Jspreadsheet grids. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Table overflow 8 | 9 | Define width and height for your Jspreadsheet table 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 50 | 51 | ``` 52 | 53 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/table-scripting.md: -------------------------------------------------------------------------------- 1 | title: Customize the spreadsheet via javascript 2 | keywords: Jexcel, javascript, excel-like, spreadsheet, table scripting 3 | description: Customize the table behavior using javascript 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Table scripting and customizations 8 | 9 | Customize the table behavior though javascript. 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 94 | 95 | ``` 96 | 97 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/table-style.md: -------------------------------------------------------------------------------- 1 | title: Customize the spreadsheet style CSS 2 | keywords: Jexcel, javascript, excel-like, spreadsheet, table style, css 3 | description: Bring a very special touch to your applications customizing your javascript spreadsheet. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Custom javascript spreadsheet style 8 | 9 | ## How to apply style to your table 10 | 11 | You can define the CSS for specific columns during the initialization, or through programmatically javascript calls. 12 | 13 | But, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle. 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 |

25 | 26 | 27 | 28 | 29 | 30 | 31 | 76 | 77 | ``` 78 | 79 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/translations.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet Translations 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, translate, translations 3 | description: How to translate the default Jspreadsheet text and controls. 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # Internationalization 8 | 9 | How to update the default texts from Jspreadsheet. 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 66 | 67 | ``` 68 | 69 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v3/examples/vue.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet with Vue 2 | keywords: Jexcel, javascript, using Jspreadsheet and Vue 3 | description: A full example on how to integrate Jspreadsheet with Vue 4 | 5 | [Back to Examples](/jspreadsheet/v3/examples "Back to the examples section") 6 | 7 | # The Javascript spreadsheet with Vue 8 | 9 | Integrating jspreadsheet with Vue 10 | 11 | [See a full example on codesandbox](https://codesandbox.io/embed/vue-default-template-p4hwn) 12 | 13 | [Get a source code of a sample Vue project](https://github.com/jspreadsheet/jexcel-with-vue) 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 | 26 | 27 | 28 | 44 | 45 | ``` 46 | 47 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/cases.md: -------------------------------------------------------------------------------- 1 | title: Real-Life Applications and Integrations with Jspreadsheet 2 | keywords: Jspreadsheet, Jexcel, JavaScript integrations, real-world applications, data grid use cases, spreadsheet integrations, project management, data visualization 3 | description: Explore real-life applications and integrations using Jspreadsheet. Discover practical examples of how Jspreadsheet enhances various projects and workflows. 4 | canonical: https://bossanova.uk/jspreadsheet/v4/cases 5 | 6 | # Jspreadsheet v4 Use Cases 7 | 8 | Explore practical use cases and integrations with Jspreadsheet v4: 9 | 10 | - [Data Persistence](/jspreadsheet/v4/cases/data-persistence) 11 | - [Food Store Management](/jspreadsheet/v4/cases/food-store) 12 | - [Highcharts Integration](/jspreadsheet/v4/cases/highcharts) 13 | - [Project Management Tools](/jspreadsheet/v4/cases/project-management) 14 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/cases/data-persistence.md: -------------------------------------------------------------------------------- 1 | title: Data persistence 2 | keywords: Jexcel, javascript, cases, data persistence, database synchronization 3 | description: A backend data persistence example using Jspreadsheet. 4 | 5 | [Back to Use Cases](/jspreadsheet/v4/cases "Back to the use cases section") 6 | 7 | # Data persistence 8 | 9 | With the persistence directive, each change in the data will be sent to a remote URL. 10 | 11 | ### Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 91 | 92 | ``` 93 | 94 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/cases/project-management.md: -------------------------------------------------------------------------------- 1 | title: Project Management Spreadsheet with Jspreadsheet 2 | keywords: Jexcel, javascript, cases, food store 3 | description: How to create a grocery store inventory using Jspreadsheet. 4 | 5 | # Project Management Spreadsheet 6 | 7 | A simple example including table scripting to perform a photo update and a progress bar added to any new task. 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 67 | 68 | ``` 69 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/docs.md: -------------------------------------------------------------------------------- 1 | title: The JavaScript Spreadsheet Documentation 2 | keywords: Jspreadsheet, Jexcel, JavaScript spreadsheet, Excel-like table, data grid, interactive spreadsheets, data management tool 3 | description: Official Jspreadsheet CE documentation. Learn how to use the JavaScript spreadsheet for efficient data management and explore its features, examples, and FAQs. 4 | canonical: https://bossanova.uk/jspreadsheet/v4/docs 5 | 6 | # Jspreadsheet v4 Documentation 7 | 8 | Jspreadsheet CE is one of the best tools for data management on the Internet. Explore the official documentation to learn about its powerful features, integrations, and best practices. 9 | 10 | - [Quick Reference](/jspreadsheet/v4/docs/quick-reference) 11 | - [Programmatically Changes](/jspreadsheet/v4/docs/programmatically-changes) 12 | - [Special Formulas](/jspreadsheet/v4/docs/special-formulas) 13 | - [Events](/jspreadsheet/v4/docs/events) 14 | - [Most Common Questions and Answers](/jspreadsheet/v4/docs/most-common-questions-and-answers) 15 | - [Use Cases](/jspreadsheet/v4/cases) 16 | - [Examples](/jspreadsheet/v4/examples) -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/docs/examples.md: -------------------------------------------------------------------------------- 1 | title: Examples 2 | keywords: Jexcel, javascript, examples 3 | description: Examples how to create web based spreadsheets using Jspreadsheet. 4 | 5 | # Jspreadsheet v4 Examples 6 | 7 | We bring in this section various examples from basic to advance applications. 8 | 9 | * [Angular](/jspreadsheet/v4/examples/angular) 10 | * [Column Dragging](/jspreadsheet/v4/examples/column-dragging) 11 | * [Column Filters](/jspreadsheet/v4/examples/column-filters) 12 | * [Column Types](/jspreadsheet/v4/examples/column-types) 13 | * [Comments](/jspreadsheet/v4/examples/comments) 14 | * [Contextmenu](/jspreadsheet/v4/examples/contextmenu) 15 | * [Create From Table](/jspreadsheet/v4/examples/create-from-table) 16 | * [Custom Table Design](/jspreadsheet/v4/examples/custom-table-design) 17 | * [Datatables](/jspreadsheet/v4/examples/datatables) 18 | * [Date And Datetime Picker](/jspreadsheet/v4/examples/date-and-datetime-picker) 19 | * [Dropdown And Autocomplete](/jspreadsheet/v4/examples/dropdown-and-autocomplete) 20 | * [Events](/jspreadsheet/v4/examples/events) 21 | * [Footers](/jspreadsheet/v4/examples/footers) 22 | * [Freeze Columns](/jspreadsheet/v4/examples/freeze-columns) 23 | * [Headers](/jspreadsheet/v4/examples/headers) 24 | * [Image Upload](/jspreadsheet/v4/examples/image-upload) 25 | * [Import Data](/jspreadsheet/v4/examples/import-data) 26 | * [Jquery](/jspreadsheet/v4/examples/jquery) 27 | * [Lazy Loading](/jspreadsheet/v4/examples/lazy-loading) 28 | * [Merged Cells](/jspreadsheet/v4/examples/merged-cells) 29 | * [Meta Information](/jspreadsheet/v4/examples/meta-information) 30 | * [Nested Headers](/jspreadsheet/v4/examples/nested-headers) 31 | * [Programmatically Updates](/jspreadsheet/v4/examples/programmatically-updates) 32 | * [React](/jspreadsheet/v4/examples/react) 33 | * [Readonly](/jspreadsheet/v4/examples/readonly) 34 | * [Richtext Html Editor](/jspreadsheet/v4/examples/richtext-html-editor) 35 | * [Sorting](/jspreadsheet/v4/examples/sorting) 36 | * [Spreadsheet Formulas](/jspreadsheet/v4/examples/spreadsheet-formulas) 37 | * [Spreadsheet Toolbars](/jspreadsheet/v4/examples/spreadsheet-toolbars) 38 | * [Spreadsheet Webcomponent](/jspreadsheet/v4/examples/spreadsheet-webcomponent) 39 | * [Table Overflow](/jspreadsheet/v4/examples/table-overflow) 40 | * [Table Scripting](/jspreadsheet/v4/examples/table-scripting) 41 | * [Table Style](/jspreadsheet/v4/examples/table-style) 42 | * [Tabs](/jspreadsheet/v4/examples/tabs) 43 | * [Translations](/jspreadsheet/v4/examples/translations) 44 | * [Vue](/jspreadsheet/v4/examples/vue) 45 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/docs/most-common-questions-and-answers.md: -------------------------------------------------------------------------------- 1 | title: Common Questions 2 | keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features, questions, QA 3 | description: Questions and Answers about Jspreadsheet V4 4 | canonical: https://bossanova.uk/jspreadsheet/v4/docs/most-common-questions-and-answers 5 | 6 | # Most common questions 7 | 8 | 9 | 10 | 1. #### What is the best way to create odd/even rows on a Jspreadsheet spreadsheet and tables? 11 | 12 | Solution: Adding the following CSS code on your project. 13 | 14 | {.ignore} 15 | ```css 16 | .jexcel tbody tr:nth-child(even) { 17 | background-color: #EEE9F1 !important; 18 | } 19 | ``` 20 | 21 | 22 | 23 | 2. #### How to transform multiple HTML static tables in dynamic Jspreadsheet tables? 24 | 25 | {.ignore} 26 | ```javascript 27 | let tables = document.querySelectorAll('table'); 28 | 29 | for (var i = 0; i < tables.length; i++) { 30 | jspreadsheet(tables[i]); 31 | } 32 | ``` 33 | 34 | 35 | 36 | 3. #### How to disable paste over a Jspreadsheet spreadsheet? 37 | 38 | {.ignore} 39 | ```javascript 40 | jspreadsheet(document.getElementById('spreadsheet'), { 41 | onbeforepaste: function(instance, data, x, y) { 42 | return false; 43 | } 44 | }); 45 | ``` 46 | 47 | 48 | 49 | 4. #### How to intercept and change a pasted string over a Jspreadsheet table? 50 | 51 | {.ignore} 52 | ```javascript 53 | jspreadsheet(document.getElementById('spreadsheet'), { 54 | onbeforepaste: function(instance, data, x, y) { 55 | data = data.replace(',', '.', data); 56 | return data; 57 | } 58 | }); 59 | ``` 60 | 61 | 62 | 63 | 5. #### How to overwrite a type of a cell over a column type? 64 | 65 | {.ignore} 66 | ```javascript 67 | jspreadsheet(document.getElementById('spreadsheet'), { 68 | columns: [ 69 | { type: 'text' }, 70 | { type: 'text' }, 71 | ], 72 | cells: { 73 | B2: { type:'number', mask:'$ #,##.00', decimal:'.' }, 74 | B3: { type:'percent' }, 75 | } 76 | }); 77 | ``` 78 | 79 | **NOTE:** Only available on the [Pro 80 | distribution](https://jspreadsheet.com/). 81 | 82 | 83 | 84 | 6. #### How to disabled the javascript contextmenu of my spreadsheet? 85 | 86 | {.ignore} 87 | ```javascript 88 | jspreadsheet(document.getElementById('spreadsheet'), { 89 | columns: [ 90 | { type: 'text' }, 91 | { type: 'text' }, 92 | ], 93 | contextMenu: function() { 94 | return false; 95 | } 96 | }); 97 | ``` 98 | 99 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/docs/special-formulas.md: -------------------------------------------------------------------------------- 1 | title: Special Formulas in Jspreadsheet 2 | keywords: Jspreadsheet, spreadsheet formulas, custom methods, JavaScript spreadsheets, special formulas, progress bar, star rating, spreadsheet custom features 3 | description: Explore Jspreadsheet's special formulas and custom methods to enhance spreadsheet functionality. 4 | canonical: https://bossanova.uk/jspreadsheet/v4/docs/special-formulas 5 | 6 | # Special formulas 7 | 8 | Jspreadsheet supports spreadsheet-like formulas, along with special formulas designed to enhance usability and functionality. 9 | 10 | ## Custom Jspreadsheet Methods 11 | 12 | | Method | Example | 13 | |-------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------| 14 | | **=PROGRESS(int, string)** Create a progress bar.
**Parameters:**
`int` percent (0-100)
`string` color (Hex value) | [Example](/jspreadsheet/v4/cases/project-management) | 15 | | **=RATING(int)** Create a star rating based on an integer.
**Parameters:**
`int` value (0-5) | [Example](/jspreadsheet/v4/cases/food-store) | 16 | | **=TABLE()** Return the Jspreadsheet table instance. | | 17 | | **=COLUMN()** Return the column number where the formula is executed. | | 18 | | **=ROW()** Return the row number where the formula is executed. | | 19 | | **=CELL()** Return the cell string identification. | | 20 | | **=VALUE(int, int)** Return the cell value based on the column and row numbers.
**Parameters:**
`int` colNumber
`int` rowNumber | | 21 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples.md: -------------------------------------------------------------------------------- 1 | title: Examples 2 | keywords: Jexcel, javascript, examples 3 | description: Examples how to create web based spreadsheets using Jspreadsheet. 4 | 5 | # Jspreadsheet v4 Examples 6 | 7 | We bring in this section various examples from basic to advance applications. 8 | 9 | * [Angular](/jspreadsheet/v4/examples/angular) 10 | * [Column Dragging](/jspreadsheet/v4/examples/column-dragging) 11 | * [Column Filters](/jspreadsheet/v4/examples/column-filters) 12 | * [Column Types](/jspreadsheet/v4/examples/column-types) 13 | * [Comments](/jspreadsheet/v4/examples/comments) 14 | * [Contextmenu](/jspreadsheet/v4/examples/contextmenu) 15 | * [Create From Table](/jspreadsheet/v4/examples/create-from-table) 16 | * [Custom Table Design](/jspreadsheet/v4/examples/custom-table-design) 17 | * [Datatables](/jspreadsheet/v4/examples/datatables) 18 | * [Date And Datetime Picker](/jspreadsheet/v4/examples/date-and-datetime-picker) 19 | * [Dropdown And Autocomplete](/jspreadsheet/v4/examples/dropdown-and-autocomplete) 20 | * [Events](/jspreadsheet/v4/examples/events) 21 | * [Footers](/jspreadsheet/v4/examples/footers) 22 | * [Freeze Columns](/jspreadsheet/v4/examples/freeze-columns) 23 | * [Headers](/jspreadsheet/v4/examples/headers) 24 | * [Image Upload](/jspreadsheet/v4/examples/image-upload) 25 | * [Import Data](/jspreadsheet/v4/examples/import-data) 26 | * [Jquery](/jspreadsheet/v4/examples/jquery) 27 | * [Lazy Loading](/jspreadsheet/v4/examples/lazy-loading) 28 | * [Merged Cells](/jspreadsheet/v4/examples/merged-cells) 29 | * [Meta Information](/jspreadsheet/v4/examples/meta-information) 30 | * [Nested Headers](/jspreadsheet/v4/examples/nested-headers) 31 | * [Programmatically Updates](/jspreadsheet/v4/examples/programmatically-updates) 32 | * [React](/jspreadsheet/v4/examples/react) 33 | * [Readonly](/jspreadsheet/v4/examples/readonly) 34 | * [Richtext Html Editor](/jspreadsheet/v4/examples/richtext-html-editor) 35 | * [Sorting](/jspreadsheet/v4/examples/sorting) 36 | * [Spreadsheet Formulas](/jspreadsheet/v4/examples/spreadsheet-formulas) 37 | * [Spreadsheet Toolbars](/jspreadsheet/v4/examples/spreadsheet-toolbars) 38 | * [Spreadsheet Webcomponent](/jspreadsheet/v4/examples/spreadsheet-webcomponent) 39 | * [Table Overflow](/jspreadsheet/v4/examples/table-overflow) 40 | * [Table Scripting](/jspreadsheet/v4/examples/table-scripting) 41 | * [Table Style](/jspreadsheet/v4/examples/table-style) 42 | * [Tabs](/jspreadsheet/v4/examples/tabs) 43 | * [Translations](/jspreadsheet/v4/examples/translations) 44 | * [Vue](/jspreadsheet/v4/examples/vue) 45 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/angular.md: -------------------------------------------------------------------------------- 1 | title: Angular Spreadsheet with Jspreadsheet CE 2 | keywords: Jexcel, javascript, using Jspreadsheet and angular 3 | description: Integrating Jspreadsheet with Angular working example. 4 | 5 | # Angular Spreadsheet with Jspreadsheet CE 6 | 7 | This example demonstrates how to use the Jspreadsheet library into an Angular application. 8 | 9 | [View the live project on CodeSandbox](https://codesandbox.io/s/jexcel-and-angular-cexs1) 10 | 11 | ## Example 12 | 13 | ### Template HTML 14 | 15 | Add the following template to your app.component.html: 16 | 17 | {.ignore} 18 | ```html 19 |
20 | ``` 21 | 22 | ### JavaScript 23 | 24 | Here is the complete implementation for integrating Jspreadsheet with Angular: 25 | 26 | {.ignore} 27 | ```javascript 28 | import { Component, ViewChild, ElementRef } from "@angular/core"; 29 | import jspreadsheet from "jspreadsheet-ce"; 30 | 31 | @Component({ 32 | selector: "app-root", 33 | templateUrl: "./app.component.html", 34 | styleUrls: ["./app.component.css"] 35 | }) 36 | export class AppComponent { 37 | @ViewChild("spreadsheet") spreadsheet: ElementRef; 38 | title = "CodeSandbox"; 39 | 40 | ngAfterViewInit() { 41 | jspreadsheet(this.spreadsheet.nativeElement, { 42 | data: [[]], 43 | columns: [ 44 | { type: "dropdown", width: "100px", source: ["Y", "N"] }, 45 | { type: "color", width: "100px", render: "square" } 46 | ], 47 | minDimensions: [10, 10] 48 | }); 49 | } 50 | } 51 | ``` 52 | 53 | ### Angular Styles Configuration 54 | 55 | To ensure the styles for Jspreadsheet are applied correctly, update the angular.json file to include the Jspreadsheet CSS: 56 | 57 | ```json 58 | "styles": ["styles.css","./node_modules/jspreadsheet-ce/dist/jspreadsheet.css"], 59 | ``` 60 | 61 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/column-dragging.md: -------------------------------------------------------------------------------- 1 | title: Enable Column Dragging 2 | keywords: Jexcel, spreadsheet, JavaScript, JavaScript table, column dragging 3 | description: Learn how to enable column dragging in Jspreadsheet CE. 4 | 5 | # Column Dragging 6 | 7 | By default, column dragging is disabled in Jspreadsheet. To enable it, use the `columnDrag: true` option during initialization, as shown below: 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 50 | 51 | ``` 52 | 53 | 54 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/column-filters.md: -------------------------------------------------------------------------------- 1 | title: Applying Filters on Columns 2 | keywords: Jexcel, JavaScript, column filters, filters, dynamic tables, online spreadsheet 3 | description: Learn how to enable column filters in Jspreadsheet to enhance functionality in your online spreadsheets. 4 | 5 | # Column Filters 6 | 7 | Enable column filters on your JavaScript dynamic tables to enhance data interaction and usability. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 52 | 53 | ``` 54 | 55 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/comments.md: -------------------------------------------------------------------------------- 1 | title: Allow comments in your javascript table 2 | keywords: Jexcel, spreadsheet, javascript, cell comments, javascript table 3 | description: Allow comments in your table spreadsheet. 4 | 5 | # Spreadsheet comments 6 | 7 | The javascript 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. 8 | 9 | ## Manage cell comments programmatically 10 | 11 | To apply comments via javascript, you can use the methods setComments or getComments, as follow: 12 | 13 | ### Source code 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 55 | 56 |
57 | 58 | 59 | 60 | 61 | ``` 62 | 63 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/custom-table-design.md: -------------------------------------------------------------------------------- 1 | title: Custom Table Design 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data 3 | description: Customized CSS for your datagrid 4 | 5 | # Create custom CSS for your javascript spreadsheet 6 | 7 | The following example shows a CSS addon to change the core layout of your jquery tables. 8 | 9 | ## Green borders and corners jquery spreadsheet 10 | 11 | [Bootstrap-like jquery spreadsheet example](/jspreadsheet/examples/a-custom- table-design) 12 | 13 | ## Bootstrap-like jquery spreadsheet. 14 | 15 | Your jquery table can be customized by including an additional addon CSS. If you have created a nice design, please share with us. 16 | 17 | ### Source code 18 | 19 | ```html 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 | 35 | 56 | 57 | ``` 58 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/datatables.md: -------------------------------------------------------------------------------- 1 | title: Searchable datatable 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data 3 | description: Full spreadsheet example with search and pagination to bring great compatibility for those who love datatables. 4 | 5 | # Spreadsheet Search and Pagination 6 | 7 | The following example shows how to create a javascript spreadsheet instance with a design similar to datatables jquery plugin. 8 | 9 | ### Source code 10 | 11 | {.ignore} 12 | ```html 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 40 | 41 | ``` 42 | 43 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/footers.md: -------------------------------------------------------------------------------- 1 | title: Adding formulas fixed on the table footer 2 | keywords: Jexcel, javascript, multiple spreadsheets, formulas, table footer 3 | description: Adding formulas fixed on the table footer. 4 | 5 | # Table footer 6 | 7 | Adding fixed custom calculations in the footer of an online spreadsheet. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 52 | 53 | ``` 54 | 55 | 56 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/freeze-columns.md: -------------------------------------------------------------------------------- 1 | title: Freeze columns 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data, frezee columns 3 | description: Setup freeze columns in Jspreadsheet 4 | 5 | # Freeze columns 6 | 7 | Define the number of freeze columns by using the freezeColumn directive with tableOverflow as follow 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 30 | 31 | ``` 32 | 33 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/headers.md: -------------------------------------------------------------------------------- 1 | title: Header updates & column dragging 2 | keywords: Jexcel, spreadsheet, javascript, header updates, programmatically header updates, enable column dragging 3 | description: Header updates and column dragging 4 | 5 | # Header updates 6 | 7 | There are three ways to change a header title. 8 | 9 | * The user clicks in a selected header and hold the mouse for 2 seconds, a prompt will request the new title; 10 | * Via contextMenu. the user right clicks in the column and select the option Rename column 11 | * Using the method setHeader(colNumber, title) as example below: 12 | 13 | ### Source code 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 56 | 57 |
58 | 63 | 64 | 65 | 66 | 67 | ``` 68 | 69 | 70 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/jquery.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet with Jquery 2 | keywords: Jexcel, javascript, using Jspreadsheet and Jquery 3 | description: A full example on how to integrate Jspreadsheet with Jquery 4 | 5 | # Jquery 6 | 7 | Creating a Jspreadsheet javascript instance using jQuery 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 | 35 | 36 | ``` 37 | 38 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/lazy-loading.md: -------------------------------------------------------------------------------- 1 | title: Dealing with big spreadsheets through lazy loading 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data 3 | description: This example brings a very nice feature to deal with large table datasets. 4 | 5 | # Lazy loading 6 | 7 | The following table is dealing with 60.000 columns. The lazyloading method allows render up to 130 rows at the same time and will render other rows based on the scrolling. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 54 | 55 | ``` 56 | 57 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/merged-cells.md: -------------------------------------------------------------------------------- 1 | title: How to merge the spreadsheet cells 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, merged cells 3 | description: Full example on how to handle merge cells in your javascript tables. 4 | 5 | # Merged cells 6 | 7 | You can merge cells on your spreadsheet in the table initialization or programatically as follow: 8 | 9 | The following methods are available for merge cells management: _setMerge, getMerge, removeMerge, destroyMerged_ 10 | 11 | ### Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/meta-information.md: -------------------------------------------------------------------------------- 1 | title: Meta information 2 | keywords: Javascript spreadsheet, javascript, javascript table, meta information 3 | description: Keep hidden information about your cells using meta information methods 4 | 5 | # Meta information 6 | 7 | This feature helps you keep import information about the cells hidden from users. 8 | 9 | You can define any meta information during the initialization or programatically after that thought getMeta or setMeta methods. 10 | 11 | Set meta data for multiple columns Set a meta information for B2 Get the meta information for A1 Get all meta information 12 | 13 | 14 | ### Source code 15 | 16 | ```html 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/nested-headers.md: -------------------------------------------------------------------------------- 1 | title: Nested headers and column header updates 2 | keywords: Jexcel, spreadsheet, javascript, header updates, nested headers, javascript table 3 | description: Enabled nested headers in your spreadsheet and learn how to set or get header values 4 | 5 | # Headers 6 | 7 | ## Nested headers 8 | 9 | The online spreadsheet implements nested headers natively though the directive **nestedHeaders** , as example below: 10 | 11 | 12 | 13 | 14 | ### Source code 15 | 16 | ```html 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 74 | 75 | ``` 76 | 77 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/readonly.md: -------------------------------------------------------------------------------- 1 | title: Readonly Columns 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, readonly 3 | description: Example how to setup readonly cells 4 | 5 | # Readonly columns and cells 6 | 7 | Setting a readonly the whole column or a single specific cell. 8 | 9 | ## Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 59 | 60 | ``` 61 | 62 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/sorting.md: -------------------------------------------------------------------------------- 1 | title: Sorting the spreadsheet columns 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, sorting 3 | description: Example how to sort the table by a column via javascript. 4 | 5 | # Sorting your table 6 | 7 | ## Simple example 8 | 9 | You can sort your javascript table by double a double click in the header, using the context menu or by javascript as follow: 10 | 11 | ### Source code 12 | 13 | ```html 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 40 | 41 |
42 | 48 | 49 | 50 | 51 | ``` 52 | 53 | ## Disable the table sorting 54 | 55 | The ordering is a native enabled feature. To disable that feature please use the columnSorting:false, directive in the initialization. 56 | 57 | ```html 58 | 59 | 60 | 61 | 62 | 63 | 64 |
65 | 66 | 83 | 84 | ``` 85 | 86 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/spreadsheet-webcomponent.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet Webcomponent 2 | keywords: Jexcel, javascript, javascript vanilla, javascript plugin, plugin, excel-like, spreadsheet, table, tables, grid, datatables, data, webcomponent 3 | description: Use the Jspreadsheet datagrid as webcomponent 4 | 5 | # Javascript web component online spreadsheet 6 | 7 | ## Create a online javascript spreadsheet using Jspreadsheet Ce. 8 | 9 | ### Javascript 10 | 11 | {.ignore} 12 | ```javascript 13 | class Jspreadsheet extends HTMLElement { 14 | constructor() { 15 | super(); 16 | } 17 | 18 | init(o) { 19 | // Shadow root 20 | const shadowRoot = this.attachShadow({mode: 'open'}); 21 | 22 | // Style 23 | const css = document.createElement('link'); 24 | css.rel = 'stylesheet'; 25 | css.type = 'text/css' 26 | css.href = 'https://bossanova.uk/spreadsheet/v4/spreadsheet.css'; 27 | shadowRoot.appendChild(css); 28 | 29 | const css2 = document.createElement('link'); 30 | css2.rel = 'stylesheet'; 31 | css2.type = 'text/css' 32 | css2.href = 'https://bossanova.uk/spreadsheet/v4/jsuites.css'; 33 | shadowRoot.appendChild(css2); 34 | 35 | // Jspreadsheet container 36 | var container = document.createElement('div'); 37 | shadowRoot.appendChild(container); 38 | 39 | // Create element 40 | this.el = jspreadsheet(container, { 41 | root: shadowRoot, 42 | minDimensions: [10,10] 43 | }); 44 | } 45 | 46 | connectedCallback() { 47 | this.init(this); 48 | } 49 | 50 | disconnectedCallback() { 51 | } 52 | 53 | attributeChangedCallback() { 54 | } 55 | } 56 | 57 | window.customElements.define('j-spreadsheet', Jspreadsheet); 58 | ``` 59 | 60 | ### HTML 61 | 62 | ```html 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | ``` 72 | 73 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/table-overflow.md: -------------------------------------------------------------------------------- 1 | title: Table Overflow with Jspreadsheet Version 4 2 | keywords: Jexcel, javascript, javascript vanilla, javascript, table, table overflow 3 | description: How define a fixed width and height for the jspreadsheet tables. 4 | 5 | # Table overflow 6 | 7 | Define width and height for your online javascript spreadsheet. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 52 | 53 | ``` 54 | 55 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/table-scripting.md: -------------------------------------------------------------------------------- 1 | title: Customize the spreadsheet via javascript 2 | keywords: Jexcel, javascript, excel-like, spreadsheet, table scripting 3 | description: Customize the table behavior using javascript 4 | 5 | # Table scripting and customizations 6 | 7 | Customize the table behavior though javascript. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 89 | 90 | 95 | 96 | ``` 97 | 98 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/table-style.md: -------------------------------------------------------------------------------- 1 | title: Customize the spreadsheet style CSS 2 | keywords: Jexcel, javascript, excel-like, spreadsheet, table style, css 3 | description: Bring a very special touch to your applications customizing your javascript spreadsheet. 4 | 5 | # Custom javascript spreasheet style 6 | 7 | ## How to apply style to your table 8 | 9 | You can define the CSS for specific columns during the initialization, or through programmatically javascript calls. 10 | 11 | But, after the initialization is still possible to manage the cell style programmatically using the method getStyle or setStyle. 12 | 13 | ### Source code 14 | 15 | ```html 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 69 | 70 |
71 | 72 |

73 | 74 |
75 | 76 | 77 | 78 | 79 | 80 | ``` 81 | 82 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/tabs.md: -------------------------------------------------------------------------------- 1 | title: Grouping multiple spreadsheets in tabs 2 | keywords: Jexcel, javascript, multiple spreadsheets, tabs 3 | description: Grouping multiple spreadsheets in tabs. 4 | 5 | # Tabs 6 | 7 | Grouping different spreadsheets in tabs 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 | 71 | 72 | ``` 73 | 74 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/translations.md: -------------------------------------------------------------------------------- 1 | title: How to translate the default messages from Jspreadsheet Version 4 2 | keywords: Jexcel, spreadsheet, javascript, javascript table, translate, translations 3 | description: How to translate the default messages from Jspreadsheet 4 | 5 | # Jspreadsheet internationalization 6 | 7 | How to update the default texts from the online spreadsheet. 8 | 9 | ### Source code 10 | 11 | ```html 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 66 | 67 | ``` 68 | 69 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/examples/vue.md: -------------------------------------------------------------------------------- 1 | title: Jspreadsheet with Vue 2 | keywords: Jexcel, javascript, using jspreadsheet and Vue 3 | description: A full example on how to integrate Jspreadsheet with Vue 4 | 5 | # The Javascript spreadsheet with Vue 6 | 7 | Integrating Jspreadsheet with Vue 8 | 9 | [See a full example on codesandbox](https://codesandbox.io/embed/vue-default-template-p4hwn) 10 | 11 | [Get a source code of a sample Vue project](https://github.com/jspreadsheet/jexcel-with-vue) 12 | 13 | 14 | ### Source code 15 | 16 | ```html 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 |
28 | 29 | 30 | 46 | 47 | ``` 48 | 49 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/most-common-questions-and-answers.md: -------------------------------------------------------------------------------- 1 | title: Common Questions 2 | keywords: Jspreadsheet CE, Jexcel, JavaScript Data Grid, Spreadsheets, JavaScript tables, Excel-like data grid, web-based spreadsheets, data grid controls, data grid features, questions, QA 3 | description: Questions and Answers about Jspreadsheet V4 4 | canonical: https://bossanova.uk/jspreadsheet/v4/docs/most-common-questions-and-answers 5 | 6 | # Most common questions 7 | 8 | 9 | 10 | 1. #### What is the best way to create odd/even rows on a Jspreadsheet spreadsheet and tables? 11 | 12 | Solution: Adding the following CSS code on your project. 13 | 14 | {.ignore} 15 | ```css 16 | .jexcel tbody tr:nth-child(even) { 17 | background-color: #EEE9F1 !important; 18 | } 19 | ``` 20 | 21 | 22 | 23 | 2. #### How to transform multiple HTML static tables in dynamic Jspreadsheet tables? 24 | 25 | {.ignore} 26 | ```javascript 27 | let tables = document.querySelectorAll('table'); 28 | 29 | for (var i = 0; i < tables.length; i++) { 30 | jspreadsheet(tables[i]); 31 | } 32 | ``` 33 | 34 | 35 | 36 | 3. #### How to disable paste over a Jspreadsheet spreadsheet? 37 | 38 | {.ignore} 39 | ```javascript 40 | jspreadsheet(document.getElementById('spreadsheet'), { 41 | onbeforepaste: function(instance, data, x, y) { 42 | return false; 43 | } 44 | }); 45 | ``` 46 | 47 | 48 | 49 | 4. #### How to intercept and change a pasted string over a Jspreadsheet table? 50 | 51 | {.ignore} 52 | ```javascript 53 | jspreadsheet(document.getElementById('spreadsheet'), { 54 | onbeforepaste: function(instance, data, x, y) { 55 | data = data.replace(',', '.', data); 56 | return data; 57 | } 58 | }); 59 | ``` 60 | 61 | 62 | 63 | 5. #### How to overwrite a type of a cell over a column type? 64 | 65 | {.ignore} 66 | ```javascript 67 | jspreadsheet(document.getElementById('spreadsheet'), { 68 | columns: [ 69 | { type: 'text' }, 70 | { type: 'text' }, 71 | ], 72 | cells: { 73 | B2: { type:'number', mask:'$ #,##.00', decimal:'.' }, 74 | B3: { type:'percent' }, 75 | } 76 | }); 77 | ``` 78 | 79 | **NOTE:** Only available on the [Pro 80 | distribution](https://jspreadsheet.com/). 81 | 82 | 83 | 84 | 6. #### How to disabled the javascript contextmenu of my spreadsheet? 85 | 86 | {.ignore} 87 | ```javascript 88 | jspreadsheet(document.getElementById('spreadsheet'), { 89 | columns: [ 90 | { type: 'text' }, 91 | { type: 'text' }, 92 | ], 93 | contextMenu: function() { 94 | return false; 95 | } 96 | }); 97 | ``` 98 | 99 | -------------------------------------------------------------------------------- /docs/jspreadsheet/v4/special-formulas.md: -------------------------------------------------------------------------------- 1 | title: Special Formulas in Jspreadsheet 2 | keywords: Jspreadsheet, spreadsheet formulas, custom methods, JavaScript spreadsheets, special formulas, progress bar, star rating, spreadsheet custom features 3 | description: Explore Jspreadsheet's special formulas and custom methods to enhance spreadsheet functionality. 4 | canonical: https://bossanova.uk/jspreadsheet/v4/docs/special-formulas 5 | 6 | # Special formulas 7 | 8 | Jspreadsheet supports spreadsheet-like formulas, along with special formulas designed to enhance usability and functionality. 9 | 10 | ## Custom Jspreadsheet Methods 11 | 12 | | Method | Example | 13 | |-------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------| 14 | | **=PROGRESS(int, string)** Create a progress bar.
**Parameters:**
`int` percent (0-100)
`string` color (Hex value) | [Example](/jspreadsheet/v4/cases/project-management) | 15 | | **=RATING(int)** Create a star rating based on an integer.
**Parameters:**
`int` value (0-5) | [Example](/jspreadsheet/v4/cases/food-store) | 16 | | **=TABLE()** Return the Jspreadsheet table instance. | | 17 | | **=COLUMN()** Return the column number where the formula is executed. | | 18 | | **=ROW()** Return the row number where the formula is executed. | | 19 | | **=CELL()** Return the cell string identification. | | 20 | | **=VALUE(int, int)** Return the cell value based on the column and row numbers.
**Parameters:**
`int` colNumber
`int` rowNumber | | 21 | -------------------------------------------------------------------------------- /docs/sampleTable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jspreadsheet/ce/c6189891287801459beb578442d9e68d08ae1a31/docs/sampleTable.png -------------------------------------------------------------------------------- /mocha.config.js: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 3 | require('jsdom-global')(undefined, { url: 'https://localhost' }); 4 | 5 | global.root = document.createElement('div'); 6 | global.root.style.width = '100%'; 7 | global.root.style.height = '100%'; 8 | global.root.innerHTML = '' 9 | document.body.appendChild(global.root); 10 | 11 | exports.mochaHooks = { 12 | afterEach(done) { 13 | // destroy datagrid component 14 | global.root.innerHTML = '' 15 | done(); 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /packages/vue/README.md: -------------------------------------------------------------------------------- 1 | # Jspreasheet CE 2 | 3 | [Jspreadsheet CE](https://bossanova.uk/jspreadsheet/) -------------------------------------------------------------------------------- /packages/vue/dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { DefineComponent } from 'vue'; 2 | import type JSpreadsheetCore from 'jspreadsheet-ce'; 3 | 4 | // Get all the static types from the core library 5 | type JSpreadsheetBase = typeof JSpreadsheetCore; 6 | 7 | // Create interface that extends the base type and adds call signature 8 | interface JSpreadsheetInterface extends JSpreadsheetBase { 9 | (element: HTMLElement | HTMLDivElement | null, options: JSpreadsheetCore.Spreadsheet): Array; 10 | } 11 | 12 | export declare const Worksheet: DefineComponent; 13 | export declare const Spreadsheet: DefineComponent; 14 | 15 | export declare const jspreadsheet: JSpreadsheetInterface; 16 | 17 | declare const _default: { 18 | Worksheet: DefineComponent; 19 | Spreadsheet: DefineComponent; 20 | jspreadsheet: JSpreadsheetInterface; 21 | }; 22 | 23 | export default _default; -------------------------------------------------------------------------------- /packages/vue/dist/index.js: -------------------------------------------------------------------------------- 1 | import { h, getCurrentInstance, camelize } from 'vue'; 2 | import jss from "jspreadsheet-ce"; 3 | 4 | export const Worksheet = { 5 | name: 'Worksheet', 6 | } 7 | 8 | export const Spreadsheet = { 9 | inheritAttrs: false, 10 | mounted() { 11 | const { attrs, slots } = getCurrentInstance(); 12 | 13 | let options = {}; 14 | for (const key in attrs) { 15 | options[camelize(key)] = attrs[key]; 16 | } 17 | 18 | if (slots && typeof(slots.default) === 'function') { 19 | options.worksheets = slots.default().reduce((acc, vnode) => { 20 | if (vnode.type.name === "Worksheet") { 21 | let worksheetProps = {}; 22 | 23 | for (const key in vnode.props) { 24 | worksheetProps[camelize(key)] = vnode.props[key]; 25 | } 26 | 27 | acc.push({ 28 | minDimensions: [4, 4], 29 | ...worksheetProps 30 | }); 31 | } 32 | return acc; 33 | }, []); 34 | } else { 35 | if (attrs.worksheets) { 36 | options.worksheets = attrs.worksheets; 37 | } 38 | } 39 | 40 | if (attrs.id) { 41 | this.$refs.container.id = attrs.id; 42 | } 43 | 44 | this.el = this.$refs.container; 45 | 46 | this.current = jss(this.$refs.container, options); 47 | }, 48 | setup() { 49 | let containerProps = { 50 | ref: 'container' 51 | }; 52 | return () => h('div', containerProps); 53 | } 54 | } 55 | 56 | export let jspreadsheet = jss; 57 | 58 | export default { Worksheet, Spreadsheet, jspreadsheet: jss }; 59 | -------------------------------------------------------------------------------- /packages/vue/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@jspreadsheet-ce/vue", 3 | "title": "Jspreadsheet CE Vue Wrapper", 4 | "description": "Jspreadsheet CE is a lightweight, vanilla JavaScript plugin for creating powerful, web-based interactive tables and spreadsheets that are compatible with other spreadsheet software.", 5 | "author": { 6 | "name": "Contact ", 7 | "url": "https://bossanova.uk/jspreadsheet/" 8 | }, 9 | "keywords": [ 10 | "spreadsheet", 11 | "spreadsheets", 12 | "tables", 13 | "table", 14 | "excel", 15 | "grid", 16 | "grid-editor", 17 | "data-table", 18 | "data-grid", 19 | "data-spreadsheet", 20 | "vue" 21 | ], 22 | "dependencies": { 23 | "jspreadsheet-ce": "^5.0.1" 24 | }, 25 | "main": "dist/index.js", 26 | "types": "dist/index.d.ts", 27 | "version": "5.0.1" 28 | } 29 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | CE 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /resources/lang/de_DE.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "Keine Einträge vorhanden.", 3 | "showingPage": "Seite {0} von {1}", 4 | "show": "Zeige ", 5 | "search": "Suchen", 6 | "entries": "Einträge", 7 | "columnName": "Spaltenname", 8 | "insertANewColumnBefore": "Eine neue Spalte davor einfügen", 9 | "insertANewColumnAfter": "Eine neue Spalte danach einfügen", 10 | "deleteSelectedColumns": "Ausgewählte Spalten löschen", 11 | "renameThisColumn": "Diese Spalte umbenennen", 12 | "orderAscending": "Aufsteigend sortieren", 13 | "orderDescending": "Absteigend sortieren", 14 | "insertANewRowBefore": "Eine neue Zeile davor einfügen", 15 | "insertANewRowAfter": "Eine neue Zeile danach einfügen", 16 | "deleteSelectedRows": "Ausgewählte Zeilen löschen", 17 | "editComments": "Kommentare bearbeiten", 18 | "addComments": "Einen Kommentar ", 19 | "comments": "Kommentare", 20 | "clearComments": "Kommentare entfernen", 21 | "copy": "Kopieren...", 22 | "paste": "Einfügen...", 23 | "saveAs": "Speichern als...", 24 | "about": "Über", 25 | "areYouSureToDeleteTheSelectedRows": "Möchten Sie die ausgewählten Zeilen wirklich löschen?", 26 | "areYouSureToDeleteTheSelectedColumns": "Möchten Sie die ausgewählten Spalten wirklich löschen?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "Diese Aktion zerstört alle verbundenen Zellen. Möchten Sie fortfahren?", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "Dieser Vorgang wird Ihre Suchergebnisse entfernen. Möchten Sie fortfahren?", 29 | "thereIsAConflictWithAnotherMergedCell": "Es liegt ein Konflikt mit einer anderen verbundenen Zelle vor", 30 | "invalidMergeProperties": "Eigenschaften zum Verbinden ungültig", 31 | "cellAlreadyMerged": "Zelle bereits verbunden", 32 | "noCellsSelected": "Keine Zellen ausgewählt" 33 | } 34 | -------------------------------------------------------------------------------- /resources/lang/dk_DA.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "Ingen felter fundet", 3 | "showingPage": "Viser side {0} af {1}", 4 | "show": "Vis ", 5 | "search": "Søg", 6 | "entries": "indgange", 7 | "columnName": "Søjlenavn", 8 | "insertANewColumnBefore": "Indsæt ny søjle før", 9 | "insertANewColumnAfter": "Indsæt ny søjle efter", 10 | "deleteSelectedColumns": "Slet valgte søjler", 11 | "renameThisColumn": "Omdøb denne søjle", 12 | "orderAscending": "Sorter voksende", 13 | "orderDescending": "Sorter aftagende", 14 | "insertANewRowBefore": "Indsæt ny række før", 15 | "insertANewRowAfter": "Indsæt ny række efter", 16 | "deleteSelectedRows": "Slet valgte rækker", 17 | "editComments": "Rediger kommentarer", 18 | "addComments": "Tilføj kommentarer", 19 | "comments": "Kommentarer", 20 | "clearComments": "Ryd kommentarer", 21 | "copy": "Kopier...", 22 | "paste": "Indsæt...", 23 | "saveAs": "Gem som...", 24 | "about": "Om", 25 | "areYouSureToDeleteTheSelectedRows": "Sikker på at slette de valgte rækker?", 26 | "areYouSureToDeleteTheSelectedColumns": "Sikker på at slette de valgte søjler?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "Dette sletter eksisterende forbundne celler. Sikker?", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "Dette rydder dine søgeresultater. Sikker?", 29 | "thereIsAConflictWithAnotherMergedCell": "Der er en konflikt med en anden forbundet celle.", 30 | "invalidMergeProperties": "Ugyldige forbundne egenskaber", 31 | "cellAlreadyMerged": "Celle allerede forbundet", 32 | "noCellsSelected": "Ingen celler valgt" 33 | } 34 | -------------------------------------------------------------------------------- /resources/lang/en_GB.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "No records found", 3 | "showingPage": "Showing page {0} of {1} entries", 4 | "show": "Show ", 5 | "search": "Search", 6 | "entries": " entries", 7 | "columnName": "Column name", 8 | "insertANewColumnBefore": "Insert a new column before", 9 | "insertANewColumnAfter": "Insert a new column after", 10 | "deleteSelectedColumns": "Delete selected columns", 11 | "renameThisColumn": "Rename this column", 12 | "orderAscending": "Order ascending", 13 | "orderDescending": "Order descending", 14 | "insertANewRowBefore": "Insert a new row before", 15 | "insertANewRowAfter": "Insert a new row after", 16 | "deleteSelectedRows": "Delete selected rows", 17 | "editComments": "Edit comments", 18 | "addComments": "Add comments", 19 | "comments": "Comments", 20 | "clearComments": "Clear comments", 21 | "copy": "Copy...", 22 | "paste": "Paste...", 23 | "saveAs": "Save as...", 24 | "about": "About", 25 | "areYouSureToDeleteTheSelectedRows": "Are you sure to delete the selected rows?", 26 | "areYouSureToDeleteTheSelectedColumns": "Are you sure to delete the selected columns?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "This action will destroy any existing merged cells. Are you sure?", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "This action will clear your search results. Are you sure?", 29 | "thereIsAConflictWithAnotherMergedCell": "There is a conflict with another merged cell", 30 | "invalidMergeProperties": "Invalid merged properties", 31 | "cellAlreadyMerged": "Cell already merged", 32 | "noCellsSelected": "No cells selected" 33 | } -------------------------------------------------------------------------------- /resources/lang/fr_FR.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound":"Aucune donnée trouvée", 3 | "showingPage":"Afficher la page {0} sur {1}", 4 | "show":"Afficher ", 5 | "entries":"lignes", 6 | "insertANewColumnBefore":"Insérer une nouvelle colonne avant", 7 | "insertANewColumnAfter":"Insérer une nouvelle colonne après", 8 | "deleteSelectedColumns":"Supprimer les colonnes sélectionnées", 9 | "renameThisColumn":"Renommer la colonne", 10 | "orderAscending":"Trier par ordre croissant", 11 | "orderDescending":"Trier par ordre décroissant", 12 | "insertANewRowBefore":"Insérer une nouvelle ligne avant", 13 | "insertANewRowAfter":"Insérer une nouvelle ligne après", 14 | "deleteSelectedRows":"Supprimer les lignes sélectionnées", 15 | "editComments":"Modifier le commentaire", 16 | "addComments":"Ajouter un commentaire", 17 | "comments":"Commentaire", 18 | "clearComments":"Supprimer le commentaire", 19 | "copy":"Copier ...", 20 | "paste":"Coller ...", 21 | "saveAs":"Enregistrer sous ...", 22 | "about": "A propos", 23 | "search": "Rechercher", 24 | "areYouSureToDeleteTheSelectedRows":"Etes vous sur de vouloir supprimer les lignes sélectionnées ?", 25 | "areYouSureToDeleteTheSelectedColumns":"Etes vous sur de vouloir supprimer les colonnes sélectionnées ?", 26 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure":"Cette action détruira toutes les cellules fusionnées existantes. Voulez vous continuer ?", 27 | "thisActionWillClearYourSearchResultsAreYouSure":"Cette action effacera votre recherche. Voulez-vous continuer ?", 28 | "thereIsAConflictWithAnotherMergedCell":"Il y a un conflit avec une autre cellule fusionnée", 29 | "invalidMergeProperties":"Propriétés de fusion invalides", 30 | "cellAlreadyMerged":"Cellule déjà fusionnée", 31 | "noCellsSelected":"Aucune cellule sélectionnée" 32 | } 33 | -------------------------------------------------------------------------------- /resources/lang/it_IT.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jspreadsheet/ce/c6189891287801459beb578442d9e68d08ae1a31/resources/lang/it_IT.json -------------------------------------------------------------------------------- /resources/lang/pl_PL.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "Nic nie znaleziono", 3 | "showingPage": "Strona {0} z {1}", 4 | "show": "Pokaż ", 5 | "search": "Szukaj/filtruj listę", 6 | "entries": " rekordów", 7 | "columnName": "Nazwa kolumny", 8 | "insertANewColumnBefore": "Wstaw nową kolumnę przed", 9 | "insertANewColumnAfter": "Wstaw nową kolumnę po", 10 | "deleteSelectedColumns": "Usuń wybrane kolumny", 11 | "renameThisColumn": "Zmień nazwę kolumny", 12 | "orderAscending": "Sortuj rosnąco A-Z", 13 | "orderDescending": "Sortuj malejąco Z-A", 14 | "insertANewRowBefore": "Wstaw nowy wiersz przed", 15 | "insertANewRowAfter": "Wstaw nowy wiersz po", 16 | "deleteSelectedRows": "Usuń wybrane wiersze", 17 | "editComments": "Edytuj komentarz", 18 | "addComments": "Dodaj komentarz", 19 | "comments": "Komentarze", 20 | "clearComments": "Wyczyść komentarze", 21 | "copy": "Kopiuj...", 22 | "paste": "Wklej...", 23 | "saveAs": "Zapisz jako...", 24 | "about": "Informacja o Jspreadsheet CE ", 25 | "areYouSureToDeleteTheSelectedRows": "Czy na pewno chcesz usuńąć wybrane wiersze?", 26 | "areYouSureToDeleteTheSelectedColumns": "Czy na pewno chcesz usuńąć wybrane kolumny?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "Ta operacja zniszczy istniejące komórki scalone. Czy na pewno?", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "Ta operacja wyczyści wyniki wyszukiwania. Czy na pewno?", 29 | "thereIsAConflictWithAnotherMergedCell": "Istnieje konflikt z inną scaloną komórką", 30 | "invalidMergeProperties": "Nieprawidłowe właściwości scalenia", 31 | "cellAlreadyMerged": "Komórka już scalona", 32 | "noCellsSelected": "Nie wybrano żadnych komórek" 33 | } -------------------------------------------------------------------------------- /resources/lang/pt_BR.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "Nenhum registro encontrado", 3 | "showingPage": "Exibindo {0} de {1} páginas", 4 | "show": "Exibir ", 5 | "search": "Buscar", 6 | "entries": " Entradas", 7 | "columnName": "Nome da coluna", 8 | "insertANewColumnBefore": "Inserir uma nova coluna antes", 9 | "insertANewColumnAfter": "Inserir uma nova coluna depois", 10 | "deleteSelectedColumns": "Deletar as colunas selecionadas", 11 | "renameThisColumn": "Renomar essa coluna", 12 | "orderAscending": "Ordenar ascedente", 13 | "orderDescending": "Ordenar descedente", 14 | "insertANewRowBefore": "Inserir um novo registro antes", 15 | "insertANewRowAfter": "Inserir um novo registro depois", 16 | "deleteSelectedRows": "Deletar as linhas selecionadas", 17 | "editComments": "Editar comentários", 18 | "addComments": "Adicionar comentários", 19 | "comments": "Comentários", 20 | "clearComments": "Limpar comentários", 21 | "copy": "Copiar...", 22 | "paste": "Colar...", 23 | "saveAs": "Salvar como...", 24 | "about": "Sobre", 25 | "areYouSureToDeleteTheSelectedRows": "Tem certeza que deseja apagar as linhas selecionadas?", 26 | "areYouSureToDeleteTheSelectedColumns": "Tem certeza que deseja apagar as colunas selecionadas?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "Essa ação vai destroir qualquer celular mesclada. Tem certeza?", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "Essa ação vai limpar o filtro de pesquisa. Tem certeza?", 29 | "thereIsAConflictWithAnotherMergedCell": "Existe um conflito com outra celula mesclada", 30 | "invalidMergeProperties": "Propriedas de mesclagem inválidas", 31 | "cellAlreadyMerged": "A celula já está mesclada", 32 | "noCellsSelected": "Nenhuma celula selecionada" 33 | } -------------------------------------------------------------------------------- /resources/lang/vi_VN.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "Khôn có dữ liệu", 3 | "showingPage": "Hiển thị trang {0} trên tổng số {1} trang", 4 | "show": "Hiện ", 5 | "search": "Tìm kiếm", 6 | "entries": "dòng", 7 | "columnName": "Tên cột", 8 | "insertANewColumnBefore": "Thêm một cột bên trái", 9 | "insertANewColumnAfter": "Thêm một cột bên phải", 10 | "deleteSelectedColumns": "Xoá các cột đã chọn", 11 | "renameThisColumn": "Đổi tên cột", 12 | "orderAscending": "Sắp xếp A-Z", 13 | "orderDescending": "Sắp xếp Z-A", 14 | "insertANewRowBefore": "Thêm một dòng bên trên", 15 | "insertANewRowAfter": "Thêm một dòng bên dưới", 16 | "deleteSelectedRows": "Xoá các dòng đã chọn", 17 | "editComments": "Chỉnh sửa bình luận", 18 | "addComments": "Thêm bình luận", 19 | "comments": "Bình luận", 20 | "clearComments": "Xoá bình luận", 21 | "copy": "Copy...", 22 | "paste": "Paste...", 23 | "saveAs": "Lưu...", 24 | "about": "Thông tin", 25 | "areYouSureToDeleteTheSelectedRows": "Bạn chắc chắn rằng mình muốn xoá dòng?", 26 | "areYouSureToDeleteTheSelectedColumns": "Bạn chắc chắn rằng mình muốn xoá cột?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "Bạn chắc chắn rằng mình muốn xoá tất cả các ô đã được merge?", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "Bạn chắc chắn rằng mình muốn xoá dữ liệu tìm kiếm?", 29 | "thereIsAConflictWithAnotherMergedCell": "Có sự khác nhau giữa 2 ô được merge", 30 | "invalidMergeProperties": "Thông tin merge không chính xác", 31 | "cellAlreadyMerged": "Ô này đã được merge", 32 | "noCellsSelected": "Không có ô nào được chọn" 33 | } -------------------------------------------------------------------------------- /resources/lang/zh_CN.json: -------------------------------------------------------------------------------- 1 | { 2 | "noRecordsFound": "未找到", 3 | "showingPage": "显示 {1} 条中的第 {0} 条", 4 | "show": "显示 ", 5 | "search": "搜索", 6 | "entries": " 条目", 7 | "columnName": "列标题", 8 | "insertANewColumnBefore": "在此前插入列", 9 | "insertANewColumnAfter": "在此后插入列", 10 | "deleteSelectedColumns": "删除选定列", 11 | "renameThisColumn": "重命名列", 12 | "orderAscending": "升序", 13 | "orderDescending": "降序", 14 | "insertANewRowBefore": "在此前插入行", 15 | "insertANewRowAfter": "在此后插入行", 16 | "deleteSelectedRows": "删除选定行", 17 | "editComments": "编辑批注", 18 | "addComments": "插入批注", 19 | "comments": "批注", 20 | "clearComments": "删除批注", 21 | "copy": "复制...", 22 | "paste": "粘贴...", 23 | "saveAs": "保存为...", 24 | "about": "关于", 25 | "areYouSureToDeleteTheSelectedRows": "确定删除选定行?", 26 | "areYouSureToDeleteTheSelectedColumns": "确定删除选定列?", 27 | "thisActionWillDestroyAnyExistingMergedCellsAreYouSure": "这一操作会破坏所有现存的合并单元格，确认操作？", 28 | "thisActionWillClearYourSearchResultsAreYouSure": "这一操作会清空搜索结果，确认操作？", 29 | "thereIsAConflictWithAnotherMergedCell": "与其他合并单元格有冲突", 30 | "invalidMergeProperties": "无效的合并属性", 31 | "cellAlreadyMerged": "单元格已合并", 32 | "noCellsSelected": "未选定单元格" 33 | } 34 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import jSuites from "jsuites"; 2 | 3 | import libraryBase from './utils/libraryBase.js'; 4 | 5 | import Factory from "./utils/factory.js"; 6 | import { destroyEvents } from './utils/events.js'; 7 | 8 | import * as helpers from "./utils/helpers.js"; 9 | import dispatch from "./utils/dispatch.js"; 10 | import version from "./utils/version.js"; 11 | 12 | libraryBase.jspreadsheet = function(el, options) { 13 | try { 14 | let worksheets = []; 15 | 16 | // Create spreadsheet 17 | Factory.spreadsheet(el, options, worksheets) 18 | .then((spreadsheet) => { 19 | libraryBase.jspreadsheet.spreadsheet.push(spreadsheet); 20 | 21 | // Global onload event 22 | dispatch.call(spreadsheet, 'onload', spreadsheet); 23 | }); 24 | 25 | return worksheets; 26 | } catch (e) { 27 | console.error(e); 28 | } 29 | } 30 | 31 | libraryBase.jspreadsheet.getWorksheetInstanceByName = function(worksheetName, namespace) { 32 | const targetSpreadsheet = libraryBase.jspreadsheet.spreadsheet.find((spreadsheet) => { 33 | return spreadsheet.config.namespace === namespace; 34 | }); 35 | 36 | if (targetSpreadsheet) { 37 | return {}; 38 | } 39 | 40 | if (typeof worksheetName === 'undefined' || worksheetName === null) { 41 | const namespaceEntries = targetSpreadsheet.worksheets.map((worksheet) => { 42 | return [worksheet.options.worksheetName, worksheet]; 43 | }) 44 | 45 | return Object.fromEntries(namespaceEntries); 46 | } 47 | 48 | return targetSpreadsheet.worksheets.find((worksheet) => { 49 | return worksheet.options.worksheetName === worksheetName; 50 | }); 51 | } 52 | 53 | // Define dictionary 54 | libraryBase.jspreadsheet.setDictionary = function(o) { 55 | jSuites.setDictionary(o); 56 | } 57 | 58 | libraryBase.jspreadsheet.destroy = function(element, destroyEventHandlers) { 59 | if (element.spreadsheet) { 60 | const spreadsheetIndex = libraryBase.jspreadsheet.spreadsheet.indexOf(element.spreadsheet); 61 | libraryBase.jspreadsheet.spreadsheet.splice(spreadsheetIndex, 1); 62 | 63 | const root = element.spreadsheet.config.root || document; 64 | 65 | element.spreadsheet = null; 66 | element.innerHTML = ''; 67 | 68 | if (destroyEventHandlers) { 69 | destroyEvents(root); 70 | } 71 | } 72 | } 73 | 74 | libraryBase.jspreadsheet.destroyAll = function() { 75 | for (let spreadsheetIndex = 0; spreadsheetIndex < libraryBase.jspreadsheet.spreadsheet.length; spreadsheetIndex++) { 76 | const spreadsheet = libraryBase.jspreadsheet.spreadsheet[spreadsheetIndex]; 77 | 78 | libraryBase.jspreadsheet.destroy(spreadsheet.element); 79 | } 80 | } 81 | 82 | libraryBase.jspreadsheet.current = null; 83 | 84 | libraryBase.jspreadsheet.spreadsheet = []; 85 | 86 | libraryBase.jspreadsheet.helpers = {}; 87 | 88 | libraryBase.jspreadsheet.version = function() { 89 | return version; 90 | }; 91 | 92 | Object.entries(helpers).forEach(([key, value]) => { 93 | libraryBase.jspreadsheet.helpers[key] = value; 94 | }) 95 | 96 | export default libraryBase.jspreadsheet; -------------------------------------------------------------------------------- /src/test.js: -------------------------------------------------------------------------------- 1 | import jspreadsheet from './index.js'; 2 | 3 | import './jspreadsheet.css'; 4 | import 'jsuites/dist/jsuites.css'; 5 | 6 | window.jss = jspreadsheet; 7 | 8 | window.instance = jspreadsheet(root, { 9 | tabs: true, 10 | toolbar: true, 11 | worksheets: [{ 12 | minDimensions: [6,6], 13 | }], 14 | }) 15 | 16 | -------------------------------------------------------------------------------- /src/utils/cells.js: -------------------------------------------------------------------------------- 1 | import { getCoordsFromCellName } from "./helpers.js"; 2 | 3 | export const setReadOnly = function(cell, state) { 4 | const obj = this; 5 | 6 | let record; 7 | 8 | if (typeof cell === 'string') { 9 | const coords = getCoordsFromCellName(cell); 10 | 11 | record = obj.records[coords[1]][coords[0]]; 12 | } else { 13 | const x = parseInt(cell.getAttribute('data-x')); 14 | const y = parseInt(cell.getAttribute('data-y')); 15 | 16 | record = obj.records[y][x]; 17 | } 18 | 19 | if (state) { 20 | record.element.classList.add('readonly'); 21 | } else { 22 | record.element.classList.remove('readonly'); 23 | } 24 | } 25 | 26 | export const isReadOnly = function(x, y) { 27 | const obj = this; 28 | 29 | if (typeof x === 'string' && typeof y === 'undefined') { 30 | const coords = getCoordsFromCellName(x); 31 | 32 | [x, y] = coords; 33 | } 34 | 35 | return obj.records[y][x].element.classList.contains('readonly'); 36 | } -------------------------------------------------------------------------------- /src/utils/comments.js: -------------------------------------------------------------------------------- 1 | import dispatch from "./dispatch.js"; 2 | import { getCoordsFromCellName } from "./helpers.js"; 3 | import { setHistory } from "./history.js"; 4 | import { getColumnNameFromId, getIdFromColumnName } from "./internalHelpers.js"; 5 | 6 | /** 7 | * Get cell comments, null cell for all 8 | */ 9 | export const getComments = function(cell) { 10 | const obj = this; 11 | 12 | if (cell) { 13 | if (typeof(cell) !== 'string') { 14 | return getComments.call(obj); 15 | } 16 | 17 | cell = getIdFromColumnName(cell, true); 18 | 19 | return obj.records[cell[1]][cell[0]].element.getAttribute('title') || ''; 20 | } else { 21 | const data = {}; 22 | for (let j = 0; j < obj.options.data.length; j++) { 23 | for (let i = 0; i < obj.options.columns.length; i++) { 24 | const comments = obj.records[j][i].element.getAttribute('title'); 25 | if (comments) { 26 | const cell = getColumnNameFromId([i, j]); 27 | data[cell] = comments; 28 | } 29 | } 30 | } 31 | return data; 32 | } 33 | } 34 | 35 | /** 36 | * Set cell comments 37 | */ 38 | export const setComments = function(cellId, comments) { 39 | const obj = this; 40 | 41 | let commentsObj; 42 | 43 | if (typeof cellId == 'string') { 44 | commentsObj = { [cellId]: comments }; 45 | } else { 46 | commentsObj = cellId; 47 | } 48 | 49 | const oldValue = {}; 50 | 51 | Object.entries(commentsObj).forEach(function([cellName, comment]) { 52 | const cellCoords = getCoordsFromCellName(cellName); 53 | 54 | // Keep old value 55 | oldValue[cellName] = obj.records[cellCoords[1]][cellCoords[0]].element.getAttribute('title'); 56 | 57 | // Set new values 58 | obj.records[cellCoords[1]][cellCoords[0]].element.setAttribute('title', comment ? comment : ''); 59 | 60 | // Remove class if there is no comment 61 | if (comment) { 62 | obj.records[cellCoords[1]][cellCoords[0]].element.classList.add('jss_comments'); 63 | 64 | if (!obj.options.comments) { 65 | obj.options.comments = {}; 66 | } 67 | 68 | obj.options.comments[cellName] = comment; 69 | } else { 70 | obj.records[cellCoords[1]][cellCoords[0]].element.classList.remove('jss_comments'); 71 | 72 | if (obj.options.comments && obj.options.comments[cellName]) { 73 | delete obj.options.comments[cellName]; 74 | } 75 | } 76 | }); 77 | 78 | // Save history 79 | setHistory.call(obj, { 80 | action:'setComments', 81 | newValue: commentsObj, 82 | oldValue: oldValue, 83 | }); 84 | 85 | // Set comments 86 | dispatch.call(obj, 'oncomments', obj, commentsObj, oldValue); 87 | } -------------------------------------------------------------------------------- /src/utils/config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Get table config information 3 | */ 4 | export const getWorksheetConfig = function() { 5 | const obj = this; 6 | 7 | return obj.options; 8 | } 9 | 10 | export const getSpreadsheetConfig = function() { 11 | const spreadsheet = this; 12 | 13 | return spreadsheet.config; 14 | } 15 | 16 | export const setConfig = function(config, spreadsheetLevel) { 17 | const obj = this; 18 | 19 | const keys = Object.keys(config); 20 | 21 | let spreadsheet; 22 | 23 | if (!obj.parent) { 24 | spreadsheetLevel = true; 25 | 26 | spreadsheet = obj; 27 | } else { 28 | spreadsheet = obj.parent; 29 | } 30 | 31 | keys.forEach(function(key) { 32 | if (spreadsheetLevel) { 33 | spreadsheet.config[key] = config[key]; 34 | 35 | if (key === 'toolbar') { 36 | if (config[key] === true) { 37 | spreadsheet.showToolbar(); 38 | } else if (config[key] === false) { 39 | spreadsheet.hideToolbar(); 40 | } 41 | } 42 | } else { 43 | obj.options[key] = config[key]; 44 | } 45 | }); 46 | } -------------------------------------------------------------------------------- /src/utils/download.js: -------------------------------------------------------------------------------- 1 | import { copy } from "./copyPaste.js"; 2 | 3 | /** 4 | * Download CSV table 5 | * 6 | * @return null 7 | */ 8 | export const download = function(includeHeaders, processed) { 9 | const obj = this; 10 | 11 | if (obj.parent.config.allowExport == false) { 12 | console.error('Export not allowed'); 13 | } else { 14 | // Data 15 | let data = ''; 16 | 17 | // Get data 18 | data += copy.call(obj, false, obj.options.csvDelimiter, true, includeHeaders, true, undefined, processed); 19 | 20 | // Download element 21 | const blob = new Blob(["\uFEFF"+data], {type: 'text/csv;charset=utf-8;'}); 22 | 23 | // IE Compatibility 24 | if (window.navigator && window.navigator.msSaveOrOpenBlob) { 25 | window.navigator.msSaveOrOpenBlob(blob, (obj.options.csvFileName || obj.options.worksheetName) + '.csv'); 26 | } else { 27 | // Download element 28 | const pom = document.createElement('a'); 29 | pom.setAttribute('target', '_top'); 30 | const url = URL.createObjectURL(blob); 31 | pom.href = url; 32 | pom.setAttribute('download', (obj.options.csvFileName || obj.options.worksheetName) + '.csv'); 33 | document.body.appendChild(pom); 34 | pom.click(); 35 | pom.parentNode.removeChild(pom); 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/utils/footer.js: -------------------------------------------------------------------------------- 1 | import { parseValue } from "./internal.js"; 2 | 3 | export const setFooter = function(data) { 4 | const obj = this; 5 | 6 | if (data) { 7 | obj.options.footers = data; 8 | } 9 | 10 | if (obj.options.footers) { 11 | if (! obj.tfoot) { 12 | obj.tfoot = document.createElement('tfoot'); 13 | obj.table.appendChild(obj.tfoot); 14 | } 15 | 16 | for (let j = 0; j < obj.options.footers.length; j++) { 17 | let tr; 18 | 19 | if (obj.tfoot.children[j]) { 20 | tr = obj.tfoot.children[j]; 21 | } else { 22 | tr = document.createElement('tr'); 23 | const td = document.createElement('td'); 24 | tr.appendChild(td); 25 | obj.tfoot.appendChild(tr); 26 | } 27 | for (let i = 0; i < obj.headers.length; i++) { 28 | if (! obj.options.footers[j][i]) { 29 | obj.options.footers[j][i] = ''; 30 | } 31 | 32 | let td; 33 | 34 | if (obj.tfoot.children[j].children[i+1]) { 35 | td = obj.tfoot.children[j].children[i+1]; 36 | } else { 37 | td = document.createElement('td'); 38 | tr.appendChild(td); 39 | 40 | // Text align 41 | const colAlign = obj.options.columns[i].align || obj.options.defaultColAlign || 'center'; 42 | td.style.textAlign = colAlign; 43 | } 44 | td.textContent = parseValue.call(obj, +obj.records.length + i, j, obj.options.footers[j][i]); 45 | 46 | // Hide/Show with hideColumn()/showColumn() 47 | td.style.display = obj.cols[i].colElement.style.display; 48 | } 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /src/utils/freeze.js: -------------------------------------------------------------------------------- 1 | // Get width of all freezed cells together 2 | export const getFreezeWidth = function() { 3 | const obj = this; 4 | 5 | let width = 0; 6 | if (obj.options.freezeColumns > 0) { 7 | for (let i = 0; i < obj.options.freezeColumns; i++) { 8 | let columnWidth; 9 | if (obj.options.columns && obj.options.columns[i] && obj.options.columns[i].width !== undefined) { 10 | columnWidth = parseInt(obj.options.columns[i].width); 11 | } else { 12 | columnWidth = obj.options.defaultColWidth !== undefined ? parseInt(obj.options.defaultColWidth) : 100; 13 | } 14 | 15 | width += columnWidth; 16 | } 17 | } 18 | return width; 19 | } -------------------------------------------------------------------------------- /src/utils/headers.js: -------------------------------------------------------------------------------- 1 | import { setHistory } from "./history.js"; 2 | import dispatch from "./dispatch.js"; 3 | import { getColumnName } from "./helpers.js"; 4 | 5 | /** 6 | * Get the column title 7 | * 8 | * @param column - column number (first column is: 0) 9 | * @param title - new column title 10 | */ 11 | export const getHeader = function(column) { 12 | const obj = this; 13 | 14 | return obj.headers[column].textContent; 15 | } 16 | 17 | /** 18 | * Get the headers 19 | * 20 | * @param asArray 21 | * @return mixed 22 | */ 23 | export const getHeaders = function (asArray) { 24 | const obj = this; 25 | 26 | const title = []; 27 | 28 | for (let i = 0; i < obj.headers.length; i++) { 29 | title.push(obj.getHeader(i)); 30 | } 31 | 32 | return asArray ? title : title.join(obj.options.csvDelimiter); 33 | } 34 | 35 | /** 36 | * Set the column title 37 | * 38 | * @param column - column number (first column is: 0) 39 | * @param title - new column title 40 | */ 41 | export const setHeader = function(column, newValue) { 42 | const obj = this; 43 | 44 | if (obj.headers[column]) { 45 | const oldValue = obj.headers[column].textContent; 46 | const onchangeheaderOldValue = (obj.options.columns && obj.options.columns[column] && obj.options.columns[column].title) || ''; 47 | 48 | if (! newValue) { 49 | newValue = getColumnName(column); 50 | } 51 | 52 | obj.headers[column].textContent = newValue; 53 | // Keep the title property 54 | obj.headers[column].setAttribute('title', newValue); 55 | // Update title 56 | if (!obj.options.columns) { 57 | obj.options.columns = []; 58 | } 59 | if (!obj.options.columns[column]) { 60 | obj.options.columns[column] = {}; 61 | } 62 | obj.options.columns[column].title = newValue; 63 | 64 | setHistory.call(obj, { 65 | action: 'setHeader', 66 | column: column, 67 | oldValue: oldValue, 68 | newValue: newValue 69 | }); 70 | 71 | // On onchange header 72 | dispatch.call(obj, 'onchangeheader', obj, parseInt(column), newValue, onchangeheaderOldValue); 73 | } 74 | } -------------------------------------------------------------------------------- /src/utils/internalHelpers.js: -------------------------------------------------------------------------------- 1 | import { getColumnName } from "./helpers.js"; 2 | 3 | /** 4 | * Helper injectArray 5 | */ 6 | export const injectArray = function(o, idx, arr) { 7 | if (idx <= o.length) { 8 | return o.slice(0, idx).concat(arr).concat(o.slice(idx)); 9 | } 10 | 11 | const array = o.slice(0, o.length); 12 | 13 | while (idx > array.length) { 14 | array.push(undefined); 15 | } 16 | 17 | return array.concat(arr) 18 | } 19 | 20 | /** 21 | * Convert excel like column to jss id 22 | * 23 | * @param string id 24 | * @return string id 25 | */ 26 | export const getIdFromColumnName = function (id, arr) { 27 | // Get the letters 28 | const t = /^[a-zA-Z]+/.exec(id); 29 | 30 | if (t) { 31 | // Base 26 calculation 32 | let code = 0; 33 | for (let i = 0; i < t[0].length; i++) { 34 | code += parseInt(t[0].charCodeAt(i) - 64) * Math.pow(26, (t[0].length - 1 - i)); 35 | } 36 | code--; 37 | // Make sure jss starts on zero 38 | if (code < 0) { 39 | code = 0; 40 | } 41 | 42 | // Number 43 | let number = parseInt(/[0-9]+$/.exec(id)); 44 | if (number > 0) { 45 | number--; 46 | } 47 | 48 | if (arr == true) { 49 | id = [ code, number ]; 50 | } else { 51 | id = code + '-' + number; 52 | } 53 | } 54 | 55 | return id; 56 | } 57 | 58 | /** 59 | * Convert jss id to excel like column name 60 | * 61 | * @param string id 62 | * @return string id 63 | */ 64 | export const getColumnNameFromId = function (cellId) { 65 | if (! Array.isArray(cellId)) { 66 | cellId = cellId.split('-'); 67 | } 68 | 69 | return getColumnName(parseInt(cellId[0])) + (parseInt(cellId[1]) + 1); 70 | } -------------------------------------------------------------------------------- /src/utils/libraryBase.js: -------------------------------------------------------------------------------- 1 | const lib = { 2 | jspreadsheet: {} 3 | }; 4 | 5 | export default lib; -------------------------------------------------------------------------------- /src/utils/meta.js: -------------------------------------------------------------------------------- 1 | import dispatch from "./dispatch.js"; 2 | 3 | /** 4 | * Get meta information from cell(s) 5 | * 6 | * @return integer 7 | */ 8 | export const getMeta = function(cell, key) { 9 | const obj = this; 10 | 11 | if (! cell) { 12 | return obj.options.meta; 13 | } else { 14 | if (key) { 15 | return obj.options.meta && obj.options.meta[cell] && obj.options.meta[cell][key] ? obj.options.meta[cell][key] : null; 16 | } else { 17 | return obj.options.meta && obj.options.meta[cell] ? obj.options.meta[cell] : null; 18 | } 19 | } 20 | } 21 | 22 | /** 23 | * Update meta information 24 | * 25 | * @return integer 26 | */ 27 | export const updateMeta = function(affectedCells) { 28 | const obj = this; 29 | 30 | if (obj.options.meta) { 31 | const newMeta = {}; 32 | const keys = Object.keys(obj.options.meta); 33 | for (let i = 0; i < keys.length; i++) { 34 | if (affectedCells[keys[i]]) { 35 | newMeta[affectedCells[keys[i]]] = obj.options.meta[keys[i]]; 36 | } else { 37 | newMeta[keys[i]] = obj.options.meta[keys[i]]; 38 | } 39 | } 40 | // Update meta information 41 | obj.options.meta = newMeta; 42 | } 43 | } 44 | 45 | /** 46 | * Set meta information to cell(s) 47 | * 48 | * @return integer 49 | */ 50 | export const setMeta = function(o, k, v) { 51 | const obj = this; 52 | 53 | if (! obj.options.meta) { 54 | obj.options.meta = {} 55 | } 56 | 57 | if (k && v) { 58 | // Set data value 59 | if (! obj.options.meta[o]) { 60 | obj.options.meta[o] = {}; 61 | } 62 | obj.options.meta[o][k] = v; 63 | 64 | dispatch.call(obj, 'onchangemeta', obj, { [o]: { [k]: v } }); 65 | } else { 66 | // Apply that for all cells 67 | const keys = Object.keys(o); 68 | for (let i = 0; i < keys.length; i++) { 69 | if (! obj.options.meta[keys[i]]) { 70 | obj.options.meta[keys[i]] = {}; 71 | } 72 | 73 | const prop = Object.keys(o[keys[i]]); 74 | for (let j = 0; j < prop.length; j++) { 75 | obj.options.meta[keys[i]][prop[j]] = o[keys[i]][prop[j]]; 76 | } 77 | } 78 | 79 | dispatch.call(obj, 'onchangemeta', obj, o); 80 | } 81 | } -------------------------------------------------------------------------------- /src/utils/search.js: -------------------------------------------------------------------------------- 1 | import { resetFilters } from "./filter.js"; 2 | import { getIdFromColumnName } from "./internalHelpers.js"; 3 | import { updateResult } from "./internal.js"; 4 | import { isRowMerged } from "./merges.js"; 5 | 6 | /** 7 | * Search 8 | */ 9 | export const search = function(query) { 10 | const obj = this; 11 | 12 | // Reset any filter 13 | if (obj.options.filters) { 14 | resetFilters.call(obj); 15 | } 16 | 17 | // Reset selection 18 | obj.resetSelection(); 19 | 20 | // Total of results 21 | obj.pageNumber = 0; 22 | obj.results = []; 23 | 24 | if (query) { 25 | if (obj.searchInput.value !== query) { 26 | obj.searchInput.value = query; 27 | } 28 | 29 | // Search filter 30 | const search = function(item, query, index) { 31 | for (let i = 0; i < item.length; i++) { 32 | if ((''+item[i]).toLowerCase().search(query) >= 0 || 33 | (''+obj.records[index][i].element.innerHTML).toLowerCase().search(query) >= 0) { 34 | return true; 35 | } 36 | } 37 | return false; 38 | } 39 | 40 | // Result 41 | const addToResult = function(k) { 42 | if (obj.results.indexOf(k) == -1) { 43 | obj.results.push(k); 44 | } 45 | } 46 | 47 | let parsedQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 48 | parsedQuery = new RegExp(parsedQuery, "i"); 49 | 50 | // Filter 51 | obj.options.data.forEach(function(v, k) { 52 | if (search(v, parsedQuery, k)) { 53 | // Merged rows found 54 | const rows = isRowMerged.call(obj, k); 55 | if (rows.length) { 56 | for (let i = 0; i < rows.length; i++) { 57 | const row = getIdFromColumnName(rows[i], true); 58 | for (let j = 0; j < obj.options.mergeCells[rows[i]][1]; j++) { 59 | addToResult(row[1]+j); 60 | } 61 | } 62 | } else { 63 | // Normal row found 64 | addToResult(k); 65 | } 66 | } 67 | }); 68 | } else { 69 | obj.results = null; 70 | } 71 | 72 | updateResult.call(obj); 73 | } 74 | 75 | /** 76 | * Reset search 77 | */ 78 | export const resetSearch = function() { 79 | const obj = this; 80 | 81 | obj.searchInput.value = ''; 82 | obj.search(''); 83 | obj.results = null; 84 | } -------------------------------------------------------------------------------- /src/utils/version.js: -------------------------------------------------------------------------------- 1 | // Basic version information 2 | export default { 3 | version: '5.0.0', 4 | host: 'https://bossanova.uk/jspreadsheet', 5 | license: 'MIT', 6 | print: function() { 7 | return [[ 'Jspreadsheet CE', this.version, this.host, this.license ].join('\r\n')]; 8 | } 9 | }; -------------------------------------------------------------------------------- /src/webcomponent.js: -------------------------------------------------------------------------------- 1 | class Jspreadsheet extends HTMLElement { 2 | constructor() { 3 | super(); 4 | } 5 | 6 | init(o) { 7 | // Shadow root 8 | const shadowRoot = this.attachShadow({mode: 'open'}); 9 | 10 | // Style 11 | const css = document.createElement('link'); 12 | css.rel = 'stylesheet'; 13 | css.type = 'text/css' 14 | css.href = 'https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css'; 15 | shadowRoot.appendChild(css); 16 | 17 | const cssJsuites = document.createElement('link'); 18 | cssJsuites.rel = 'stylesheet'; 19 | cssJsuites.type = 'text/css' 20 | cssJsuites.href = 'https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css'; 21 | shadowRoot.appendChild(cssJsuites); 22 | 23 | const cssMaterial = document.createElement('link'); 24 | cssMaterial.rel = 'stylesheet'; 25 | cssMaterial.type = 'text/css' 26 | cssMaterial.href = 'https://fonts.googleapis.com/css?family=Material+Icons'; 27 | shadowRoot.appendChild(cssMaterial); 28 | 29 | // JSS container 30 | var container = document.createElement('div'); 31 | shadowRoot.appendChild(container); 32 | 33 | // Properties 34 | var toolbar = this.getAttribute('toolbar') == "true" ? true : false; 35 | 36 | // Create jexcel element 37 | this.el = jspreadsheet(container, { 38 | tabs: true, 39 | toolbar: toolbar, 40 | root: shadowRoot, 41 | worksheets: [{ 42 | filters: true, 43 | minDimensions: [6,6], 44 | }], 45 | }); 46 | } 47 | 48 | connectedCallback() { 49 | this.init(this); 50 | } 51 | 52 | disconnectedCallback() { 53 | } 54 | 55 | attributeChangedCallback() { 56 | } 57 | } 58 | 59 | window.customElements.define('j-spreadsheet-ce', Jspreadsheet); -------------------------------------------------------------------------------- /test/footer.js: -------------------------------------------------------------------------------- 1 | const { expect } = require('chai'); 2 | 3 | const jspreadsheet = require('../dist/index.js'); 4 | 5 | describe('Use footers', () => { 6 | it('Start the worksheet with a footer', () => { 7 | const instance = jspreadsheet(root, { 8 | tabs: true, 9 | worksheets: [ 10 | { 11 | minDimensions: [7,7], 12 | freezeColumns: 2, 13 | data: [ 14 | ['Hello', 'World'], 15 | ['Testing', 'CE'] 16 | ], 17 | footers: [ 18 | ['a', 'b', 'c'], 19 | [1, 2, 3], 20 | ] 21 | }, 22 | ] 23 | }) 24 | 25 | const footerTag = root.querySelector('tfoot'); 26 | 27 | const firstRow = footerTag.children[0]; 28 | 29 | expect(firstRow.children[1].innerHTML).to.equal('a'); 30 | expect(firstRow.children[2].innerHTML).to.equal('b'); 31 | expect(firstRow.children[3].innerHTML).to.equal('c'); 32 | 33 | const secondRow = footerTag.children[1]; 34 | 35 | expect(secondRow.children[1].innerHTML).to.equal('1'); 36 | expect(secondRow.children[2].innerHTML).to.equal('2'); 37 | expect(secondRow.children[3].innerHTML).to.equal('3'); 38 | }); 39 | }); -------------------------------------------------------------------------------- /test/pagination.js: -------------------------------------------------------------------------------- 1 | const { expect } = require('chai'); 2 | 3 | const jspreadsheet = require('../dist/index.js'); 4 | 5 | describe('Use pagination', () => { 6 | it('Start the worksheet with pagination', () => { 7 | const instance = jspreadsheet(root, { 8 | worksheets: [ 9 | { 10 | minDimensions: [7,7], 11 | data: [ 12 | [1, 2, 3, 4, 5], 13 | [6, 7, 8, 9, 10], 14 | [11, 12, 13, 14, 15], 15 | [16, 17, 18, 19, 20], 16 | [21, 22, 23, 24, 25], 17 | [26, 27, 28, 29, 30], 18 | [31, 32, 33, 34, 35], 19 | [36, 37, 38, 39, 40], 20 | [41, 42, 43, 44, 45], 21 | [46, 47, 48, 49, 50], 22 | ], 23 | pagination: 3 24 | }, 25 | ] 26 | }) 27 | 28 | expect(instance[0].quantiyOfPages()).to.equal(4) 29 | 30 | const bodyTag = root.querySelector('tbody') 31 | 32 | expect(bodyTag.children.length).to.equal(3) 33 | 34 | expect(bodyTag.children[0].getAttribute('data-y')).to.equal('0') 35 | expect(bodyTag.children[1].getAttribute('data-y')).to.equal('1') 36 | expect(bodyTag.children[2].getAttribute('data-y')).to.equal('2') 37 | }); 38 | 39 | it('page method', () => { 40 | const instance = jspreadsheet(root, { 41 | worksheets: [ 42 | { 43 | minDimensions: [7,7], 44 | data: [ 45 | [1, 2, 3, 4, 5], 46 | [6, 7, 8, 9, 10], 47 | [11, 12, 13, 14, 15], 48 | [16, 17, 18, 19, 20], 49 | [21, 22, 23, 24, 25], 50 | [26, 27, 28, 29, 30], 51 | [31, 32, 33, 34, 35], 52 | [36, 37, 38, 39, 40], 53 | [41, 42, 43, 44, 45], 54 | [46, 47, 48, 49, 50], 55 | ], 56 | pagination: 3 57 | }, 58 | ] 59 | }) 60 | 61 | instance[0].page(2) 62 | 63 | expect(instance[0].quantiyOfPages()).to.equal(4) 64 | 65 | const bodyTag = root.querySelector('tbody') 66 | 67 | expect(bodyTag.children.length).to.equal(3) 68 | 69 | expect(bodyTag.children[0].getAttribute('data-y')).to.equal('6') 70 | expect(bodyTag.children[1].getAttribute('data-y')).to.equal('7') 71 | expect(bodyTag.children[2].getAttribute('data-y')).to.equal('8') 72 | }); 73 | }); -------------------------------------------------------------------------------- /test/search.js: -------------------------------------------------------------------------------- 1 | const { expect } = require('chai'); 2 | 3 | const jspreadsheet = require('../dist/index.js'); 4 | 5 | describe('Use search', () => { 6 | it('search and resetSearch methods', () => { 7 | const instance = jspreadsheet(root, { 8 | tabs: true, 9 | worksheets: [ 10 | { 11 | search: true, 12 | minDimensions: [7,7], 13 | data: [ 14 | ['Mazda', 2001, 2000, '2006-01-01 12:00:00'], 15 | ['Peugeot', 2010, 5000, '2005-01-01 13:00:00'], 16 | ['Honda Fit', 2009, 3000, '2004-01-01 14:01:00'], 17 | ['Honda CRV', 2010, 6000, '2003-01-01 23:30:00'], 18 | ], 19 | }, 20 | ] 21 | }) 22 | 23 | instance[0].search('Honda') 24 | 25 | expect(instance[0].searchInput.value).to.equal('Honda') 26 | 27 | const bodyTag = root.querySelector('tbody') 28 | 29 | expect(bodyTag.children.length).to.equal(2) 30 | 31 | expect(bodyTag.children[0].getAttribute('data-y')).to.equal('2') 32 | expect(bodyTag.children[1].getAttribute('data-y')).to.equal('3') 33 | 34 | instance[0].resetSearch() 35 | 36 | expect(instance[0].searchInput.value).to.equal('') 37 | 38 | expect(bodyTag.children[0].getAttribute('data-y')).to.equal('0') 39 | expect(bodyTag.children[1].getAttribute('data-y')).to.equal('1') 40 | }); 41 | }); --------------------------------------------------------------------------------