mirrors/VTable

Fork 0

mirror of https://github.com/VisActor/VTable synced 2024-11-22 01:52:03 +00:00

cwtuan 67b4926de4

add usage trend of the package

2023-10-28 17:35:27 +08:00

5.2 KiB

Raw Blame History

VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.

Introduction • demo • Tutorial • API•

English| 简体中文

（video）

Introduction

VTable is based on visual rendering engine VRender.

The core capabilities are as follows:

Extreme performance: Supports fast computation and rendering of millions of data points.
Multidimensional analysis: Automatically analyzes and presents multidimensional data.
Strong expressiveness: Provides flexible and powerful graphic capabilities, seamlessly integrating with charts of VChart.

Repository Introduction

This repository includes the following packages:

packages/vtable: The core code repository of VTable
docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.

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

⌨️ Development

First of all, please install @microsoft/rush

$ npm i --global @microsoft/rush

Then clone locally:

# 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

📖 Documents

After installation & clone & update, run docs to preview VTable documents locally.

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

💫 Ecosystem

Project	Description
AI-generated Components	AI-generated table component.

🤝 Contribution

If you would like to contribute, please read the Code of Conduct and Guide first。

Small streams converge to make great rivers and seas!

License

MIT License

5.2 KiB Raw Blame History Unescape Escape