VTable is an MIT-licensed TypeScript data grid library that renders and analyses multidimensional data on canvas, built for front-end developers and data teams who need tables that stay fast at millions of rows.

What it is

VTable is a visualization library from the VisActor ecosystem that draws tables and pivot tables onto an HTML canvas rather than the DOM. It sits on top of the VRender rendering engine, and its core promise is fast computation and rendering across millions of data points. The repository is organised as a monorepo: packages/vtable holds the core, alongside vtable-gantt, vtable-editors, vtable-plugins, vtable-export, vtable-search, plus react-vtable and vue-vtable bindings for those two frameworks. Documentation, demos, APIs and options live in docs, published in English, Simplified Chinese and Japanese.

The concrete problem it solves is the performance ceiling of DOM-based grids when a dataset grows large and needs analytical views rather than simple listing. It replaces hand-rolled HTML table rendering and traditional DOM datagrids for analytical workloads, where millions of records and pivoted multidimensional summaries would otherwise stall the browser. Because it renders to canvas and shares an engine lineage with VChart, a pivot table and an adjacent chart can be composed in one surface rather than two disconnected widgets.

Key capabilities

• Canvas-based rendering of tables supporting fast computation and rendering across millions of data points.
• Pivot and multidimensional analysis, matching the pivot-chart topic, which automatically analyses and presents multidimensional data.
• Two table shapes drawn from the topic list: list-table for flat records and list-tree for hierarchical rows.
• Multiple table types in the API, including the VTable.ListTable constructor shown in the README quick start with a columns and records option object.
• Sibling packages for building on top of the grid: vtable-gantt for Gantt chart components, vtable-editors for cell editing, vtable-plugins for extensions, vtable-export for export tooling and vtable-search for search.
• Framework bindings as separate packages, react-vtable and vue-vtable, rather than adapters bolted onto the core.
• Chart interoperation with VChart and shared rendering through VRender, giving flexible graphic capabilities inside the grid surface.

Who uses it and how

• Front-end teams in React or Vue applications that need an analytical table without writing canvas rendering code, installing react-vtable or vue-vtable next to the core package.
• Analytics and BI interface builders who need pivot views over large datasets, where pivot-chart and data-analysis are the relevant capabilities.
• Product teams that need scheduling or timeline views, using the vtable-gantt component in the same repository.
• Teams embedding spreadsheet-like editing, indicated by the online-excel topic and the vtable-editors package, where users edit cells in place.
• Applications that must export or search grid contents, served by the dedicated vtable-export and vtable-search packages rather than ad hoc code.

Getting started

Install the core package from npm with npm install @visactor/vtable, or yarn add @visactor/vtable, then instantiate a table such as new VTable.ListTable(option) with container, columns and records in the option object. Contributors clone the repository and use @microsoft/rush, running rush update to install dependencies, rushx demo inside packages/vtable to start the demo, and rush docs to preview the documentation site locally.

How it compares

The facts provided do not name any paid products that VTable replaces, nor any competing table libraries, so no direct comparison can be drawn. It stands alone in this registry on the information available.

When to use it — and when not to

There is no installer, database, or server component to operate: it is an npm library that runs in the browser, so self-hosting costs are limited to bundling and the canvas rendering work the client performs. Teams that need a small, plain HTML table, or that must rely on accessible DOM semantics and native browser text selection, should look elsewhere, since canvas rendering changes that model. The registry entry also shows 536 open issues against 3,662 stars and 487 forks, which suggests an active but heavily loaded tracker; the README excerpt covers setup and repository layout in detail but leaves deployment and production guidance thin, so anyone adopting it should expect to work from the demo site and API docs rather than a long-form operations guide.

// npm
npm install @visactor/vtable

// yarn
yarn add @visactor/vtable

// this demo you can run on codesanbox https://codesandbox.io/s/vtable-simple-demo-g8q738
import * as VTable from '@visactor/vtable';

const columns = [
  {
    field: 'Order ID',
    caption: 'Order ID'
  },
  {
    field: 'Customer ID',
    caption: 'Customer ID'
  },
  {
    field: 'Product Name',
    caption: 'Product Name'
  },
  {
    field: 'Sales',
    caption: 'Sales'
  },
  {
    field: 'Profit',
    caption: 'Profit'
  }
];

const option = {
  container: document.getElementById(CONTAINER_ID),
  records: [
    {
      'Order ID': 'CA-2018-156720',
      'Customer ID': 'JM-15580',
      'Product Name': 'Bagged Rubber Bands',
      Sales: '3.024',
      Profit: '-0.605'
    },
    {
      'Order ID': 'CA-2018-115427',
      'Customer ID': 'EB-13975',
      'Product Name': 'GBC Binding covers',
      Sales: '20.72',
      Profit: '6.475'
    }
    // ...
  ],
  columns
};
const tableInstance = new VTable.ListTable(option);

$ npm i --global @microsoft/rush

# clone
$ git clone git@github.com:VisActor/VTable.git
$ cd VTable
# install dependencies
$ rush update
# start vtable demo
$ cd packages/vtable
# execute in file path: ./packages/vtable
$ rushx demo
# start site development server, execute in file path: ./
$ rush docs
# after execut git commit, please run the following command to update the change log. Please execute in file path: ./
$ rush change-all

# start vtable document server. execute in file path: ./
$ rush update
$ rush build
$ rush docs

$ rush purge
$ rush update