Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/VisActor/VTable

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

canvas-table data-analysis data-visualization database datagrid grid javascript-table javescript list-table list-tree online-excel pivot-chart pivot-grid pivot-tables sparklines spreadsheet table tree-chart tree-table visualization

Last synced: about 1 month ago
JSON representation

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

Host: GitHub
URL: https://github.com/VisActor/VTable
Owner: VisActor
License: mit
Created: 2023-06-05T08:51:38.000Z (over 1 year ago)
Default Branch: develop
Last Pushed: 2024-04-28T06:21:19.000Z (5 months ago)
Last Synced: 2024-04-28T06:24:00.490Z (5 months ago)
Topics: canvas-table, data-analysis, data-visualization, database, datagrid, grid, javascript-table, javescript, list-table, list-tree, online-excel, pivot-chart, pivot-grid, pivot-tables, sparklines, spreadsheet, table, tree-chart, tree-table, visualization
Language: TypeScript
Homepage: https://visactor.io/vtable
Size: 139 MB
Stars: 1,209
Watchers: 18
Forks: 78
Open Issues: 162
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

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.



  Introduction •

  demo •

  Tutorial •

  API•



![](https://github.com/visactor/vtable/actions/workflows/bug-server.yml/badge.svg)

![](https://github.com/visactor/vtable/actions/workflows/unit-test.yml/badge.svg)

[![npm Version](https://img.shields.io/npm/v/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable)

[![npm Download](https://img.shields.io/npm/dm/@visactor/vtable.svg)](https://www.npmjs.com/package/@visactor/vtable)

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/visactor/vtable/blob/main/LICENSE)





English| [简体中文](./README.zh-CN.md)





（video）



# Introduction

VTable is based on visual rendering engine [VRender](https://github.com/VisActor/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](https://github.com/VisActor/VChart).

# Repository Introduction

This repository includes the following packages:

1. packages/vtable: The core code repository of VTable

2. docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.

# Usage

## Installation

[npm package](https://www.npmjs.com/package/@visactor/vtable)

```bash

// npm

npm install @visactor/vtable

// yarn

yarn add @visactor/vtable

```

## Quick Start

```javascript

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

```

##

[More demos and detailed tutorials](https://visactor.io/vtable)

# ⌨️ Development

First of all, please install [@microsoft/rush](https://rushjs.io/pages/intro/get_started/)

```bash

$ npm i --global @microsoft/rush

```

Then clone locally:

```bash

# clone

$ git clone [email protected]: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

```

# 📖 Documents

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

```bash

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

$ rush docs

```

## 🔗 Related Links

- [Official website](https://visactor.io/vtable)

- [Usage Trend](https://npm-compare.com/@visactor/vtable)

# 💫 Ecosystem

| Project                                                                      | Description               |

| ---------------------------------------------------------------------------- | ------------------------- |

| [React-VTable](https://www.visactor.io/vtable/guide/Developer_Ecology/react) | VTable in React component |

# ⭐️ Star History

[![Star History Chart](https://api.star-history.com/svg?repos=visactor/vtable&type=Date)](https://star-history.com/#visactor/vtable&Date)

# 🤝 Contribution

If you would like to contribute, please read the [Code of Conduct ](./CODE_OF_CONDUCT.md) and [ Guide](./CONTRIBUTING.md) first。

Small streams converge to make great rivers and seas!



# License

[MIT License](./LICENSE)