JSPM

@visactor/vtable

1.17.1-alpha.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3238
  • Score
    100M100P100Q129220F
  • License MIT

canvas table width high performance

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@visactor/vtable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    VTable

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

    IntroductiondemoTutorialAPI

    npm Version npm Download license

    English| 简体中文

    (video)

    Introduction

    VTable is a canvas table library based on visual rendering engine VRender.

    The core capabilities are as follows:

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

    Repo Intro

    This repository includes the following packages:

    1. vtable: VTable components
    2. vtable-docs: VTable documentation

    Usage

    Installation

    npm package

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

    Quick Start

    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 = {
      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,
      widthMode:'standard'
    };
    const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
    
    
    
    

    More demos and detailed tutorials

    Related Links

    Ecosystem

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

    Contribution

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

    Small streams converge to make great rivers and seas!

    License

    MIT License