Introduction

::: tip Documents at here are applied to the latest released version of WPT component. If you are using an old released version, please check the documents under "doc" directory in your downloaded package. You can also check Release notes for changes of all versions. :::

::: warning Version 5 is totally redesigned and re-written following new web component standard. It is not compatible with Version 4.x. For documents of Version 4.x, please reference Version 4

Version 4.x is on a maintenance mode now, no any new features will be added. Please upgrade to Version 5 for better user experience and more features. :::

Installation

WPT component is a pure javascript component and the installation is just like as any other javascript library. When you get the packaged zip file, unzip it to any directory and you will see list below structure:

wpt
 ├─-- public
 |       ├─-- dist
 |       |      ├─-- vendor.js
 |       |      └─-- wpt.js
 |       |--- lang  
 |       |      ├─-- de.json
 |       |      ├─-- en.json
 |       |      ├─-- ...
 |       |      └─-- zh.json
 |       ├─-- index.html
 |       ├─-- jquery.html
 |       ├─-- ...
 |       └─-- react.html
 └─-- server
         ├─-- pachage.json
         ├─-- server.js
         └─-- wpt.json

  • "public" sub-directory is all you need to integrate WPT component into your web page or web application. Copy this whole sub-directory into root public directory of your web server, then include wpt.js and vendor.js under dist into your html page just like those sample html files under public sub-directory

  • "server" sub-directory is optional, it includes a NodeJs server to support cross domain access. Please follow README.md inside this sub-directory to start a proxy server if you have cross domain access requirement.

Integrate into web page

To integrate WPT component, we only need import two javascript files into web page like below:

<script type="text/javascript" src="./dist/vendor.js"></script>
<script type="text/javascript" src="./dist/wpt.js"></script>

Then, we can put a "wpt-pivot-table" tag into page:

<body>
  <div id="wpt-container">
    <web-pivot-table />
  </div>
</body>

That's all. Simple enough. Now we have a full functional WebPivotTable on web page.

List below is a sample html file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <title>WebPivotTable Component</title>

  <style type="text/css">
    html, body, #wpt-container {width:100%;height:100%; padding:0; margin:0;}
  </style>

  <script type="text/javascript" src="./dist/vendor.js"></script>
  <script type="text/javascript" src="./dist/wpt.js"></script>

</head>

<body>
  <div id="wpt-container">
    <web-pivot-table />
  </div>
</body>

</html>

And here is the demo of this html page: Demo without any framework

Please reference more integration examples with various javascript frameworks.

Customization

WPT component provides lots of customize options for developer to customize every details of WPT component inside web page.

There are two methods for developers to set customize options:

  • Pass customize options as attribute of web-pivot-table tag when initialize WPT component

    <web-pivot-table
  options='{"localeFilePath": "./lang/", "locale":"en", "leavePageWarning": 0}'>
</web-pivot-table>

  • Call setOptions API after WPT component initialized 

    var wpt = document.getElementsByTagName('web-pivot-table')[0];

wpt.$event.$emit('setOptions', {
  localeFilePath: "./lang/",
  locale: "en",
  leavePageWarning: 0
});

Please reference Customize Options for all possible options.

Application Program Interface

WPT component provides lots of APIs for developer to communicate between web page and WPT component.

Please reference Application Program Interfaces for all APIs.

import Vue from 'vue';