1. Project Overview

VTable

VTable is more than just a high-performance multidimensional data analysis table. It is also a grid artist that creates visual experiences across rows and columns.

2. Open Source License

Licensed under MIT

3. Screenshots

Table Theme - BIGTHT

Chart Types

Sales Heatmap

Custom Cell Layout

Pivot Table

QS Professional Rankings

4. Feature Overview

VTable is a table component library within the VisActor visualization ecosystem, built on top of the VRender visualization rendering engine. Its core capabilities include:

1. Exceptional Performance: Supports fast computation and rendering of millions of data records.

2. Multidimensional Analysis: Automatically analyzes and presents multidimensional data.

3. Powerful Visualization: Provides flexible and powerful graphics capabilities with seamless VChart integration.

VTable: More than just a high-performance multidimensional data analysis table. It is a grid artist creating visual experiences across rows and columns!

 

In modern applications, table components are an essential part of the user interface. They can quickly display large amounts of data while providing excellent visualization and interactive experiences. VTable is a high-performance table component library built on the VRender visualization rendering engine. It provides users with outstanding performance, powerful multidimensional analysis capabilities, and flexible, powerful graphics features.

5. Tech Stack

The repository contains the following packages:

1. packages/vtable: Table component source code

2. docs: Tutorial documentation

Usage

Installation

npm package

// npm
npm install @visactor/vtable

// yarn
yarn add @visactor/vtable

Quick start

// 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);