Get started quickly

In this tutorial, we will introduce how to draw a simple basic table using VTable. VTable is an easy-to-use, high-performance, rich visualization type front-end visualization table library.

Get VTable

You can get VTable in several ways.

Use the NPM package

First, you need to install VTable in the project root directory with the following command:

# 使用 npm 安装
npm install @visactor/vtable

# 使用 yarn 安装
yarn add @visactor/vtable

Use CDN

You can also get the built VTable file through the CDN.

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>
  const tableInstance = new VTable.ListTable(option);
</script>

Introducing VTable

Imported via NPM package

Use at the top of a JavaScript file import Introducing VTable:

import * as VTable from '@visactor/vtable';

or;

import { ListTable, PivotTable, TYPES, themes } from '@visactor/vtable';

Import using script tags

By adding directly in the HTML file <script> Tag, import the built vtable file:

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>
  const tableInstance = new VTable.ListTable(option);
</script>

Draw a simple table

Before drawing we need to prepare a DOM container with height and width for VTable.

Please make sure that the width and height of the container are integers. The offsetWidth, offsetHeight, clientWidth, and clientHeight properties of the container will be used in the internal logic of VTable. If the width and height of the container are decimals, the values will be inaccurate, which may cause table jitter problems.

<body>
  <div id="tableContainer" style="position: absolute; width: 600px;height:400px;"></div>
</body>

Next, we create a Vtable.ListTable Example, pass in the table configuration item:

At this point, you have successfully drawn a simple table!

Hope this tutorial helps you learn how to use VTable. Next, you can learn more about the various configuration options of VTable and customize more rich and varied table effects.