Master High‑Performance Data Tables with VTable: A Quick‑Start Guide

Overview

VTable is an open‑source, high‑performance table component from the VisActor suite, built on the VRender visualization engine. It provides millisecond‑level rendering of massive datasets, supports multi‑dimensional analysis, and can be combined with VChart for rich visualizations.

Installation

# npm install
npm install @visactor/vtable
# yarn install
yarn add @visactor/vtable

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>

Importing

import * as VTable from '@visactor/vtable';
// or
import { ListTable, PivotTable, TYPES, themes } from '@visactor/vtable';

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

Creating a Simple Table

Provide a DOM container with explicit width and height:

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

Define data records and column configuration, then instantiate VTable.ListTable :

const records = [
  {"230517143221027":"CA-2018-156720","230517143221030":"JM-15580"},
  {"230517143221027":"CA-2018-115427","230517143221030":"EB-13975"}
  // ...more rows
];
const columns = [
  {field: "230517143221027", title: "Order ID", width: "auto"},
  {field: "230517143221030", title: "Customer ID", width: "auto"}
  // ...more columns
];
const option = {records, columns, widthMode: 'standard'};
const tableInstance = new VTable.ListTable(document.getElementById('tableContainer'), option);

Performance

VTable leverages VRender to render millions of rows in a few milliseconds. A live demo demonstrates rendering 1 000 000 records instantly.

Demo URL: https://visactor.io/vtable/demo/performance/100W

Table Types

List Table – basic grid of rows and columns.

Pivot Table – multi‑dimensional aggregation for analytical scenarios.

Pivot Chart – combines pivot data with chart visualizations.

Cell Rendering Options

'text' – plain text with styling and formatting.

'link' – clickable hyperlinks.

'image' – display images from URLs.

'video' – embed video content.

'sparkline' – mini line or area charts.

'progressbar' – visual progress indicators.

'chart' – embed VChart visualizations.

Custom rendering – user‑defined cell content via render functions.

Interaction Capabilities

Select cells – single, range, column selection, keyboard shortcuts.

Hover highlight – cell or cross‑highlight.

Drag‑to‑reorder columns .

Sorting – click column headers to sort.

Freeze columns .

Resize columns .

Theming and Styling

Built‑in themes include ARCO, LIGHT, SIMPLY, DARK, and custom themes. Themes control overall appearance, while per‑cell style configurations enable fine‑grained styling based on row or column dimensions.

Resources

Documentation, examples, and source code are available at:

Website: https://www.visactor.io/vtable

GitHub: https://github.com/visactor/vtable