SpreadSheet in vue

#1

How to use spreadsheet in the vue project, only vue-webix has been found so far

#2

Hello @changxy ,

There is a demo of VueJS adapter for Webix UI that has been recently updated. Now it includes Vue 3.

The Spreadsheet can be included the same way with the help of this function (or you could create a custom component ).

Here is a little demo based on the VueJS adapter demo: https://files.webix.com/30d/6d5a9c0d42232c01571e66f9a15e70d6/webix-vue3.rar .
The examples can be found in the samples/webix_spreadsheet or samples/custom_component.

Please, note that to work the sources for Webix Pro and Spreadsheet shoud be included. In the demo they are included from node_modules in the samples/html files via the script tag. Instead, the sources from a trial version can be included there as well.

#3

In general, the common requirements for complex widgets to work is:

the webix variable should be available in the global context (it should be available before the complex widget’s sources are included or imported).

This means that if you are planning on using imports, you will need to define that variable in some way.

The Webix libriary/complex widgets can be included either 1) via the script tag on some page (e.g., index.html ):

<script src="../node_modules/@xbs/webix-pro/webix.js" type="text/javascript"></script>

or 2) via importing the required dependencies. The second approach requires for the webix variable to be defined in the global scope.

Using imports, it is possible to manually assign webix to a global variable and then use webix.ui() to init the necessary complex widget.
For example:

import * as webix from "@xbs/webix-pro";
window.webix = webix;
...
webix.ready(() => {
require("@xbs/spreadsheet");
webix.ui({
view: "spreadsheet",
    ...
  });
});

or another option is to use ProvidePlugin (works for Webpack-based projects), which makes webix available in all modules (including Spreadsheet). For example, you can add the next section in webpack config file:

plugins: [
    new webpack.ProvidePlugin({
      // path to webix
      webix: "@xbs/webix-pro",
    }),
  ],

Or, 3) you can include just the core library as a global script (as it is fairly large) and import only the complex widgets.

#4

Here is a demo of Spreadsheet in a Vue project bootstrapped with Vue CLI:
https://files.webix.com/30d/98580f068da4d227b0c79e90fe3a1347/vue-cli-spreadsheet1.rar .

By default, Webix and Spreadsheet are fetched from npm, so make sure you have signed in to our private @xbs scope.
Note : NPM always provides access to the latest versions of packages, so credentials are valid only while the license is active.
Alternatively, you can remove these dependencies, include the “codebase” of Webix/Complex widget to your project, and import files using custom path. This can be done for Trial package as well.
The demo uses Webpack ProvidePlugin.
Using ProvidePlugin with ESLint with the no-undef rule, you’ll also need to extend ESLint settings with the following statement, as ProvidePlugin allows to refer to a global value without importing/defining Webix in a module.

"globals": {
   "webix": "readonly"
}