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•
(video)
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.
This repository includes the following packages:
- packages/vtable: The core code repository of VTable
- packages/vtable-gantt: Gantt chart component code
- packages/vtable-editors: Table editor component code
- packages/vtable-export: Table export tool code
- packages/vtable-search: Table search tool code
- packages/react-vtable: React version of the table component
- packages/vue-vtable: Vue version of the table component
- docs: Include VTable site tutorials, demos,apis and options, and also contains all Chinese and English documents.
// 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);
More demos and detailed tutorials
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 # after execut git commit, please run the following command to update the change log. Please execute in file path: ./ $ rush change-all
After installation & clone & update, run docs to preview VTable documents locally.
# start vtable document server. execute in file path: ./
$ rush docs| Project | Description |
|---|---|
| React-VTable | VTable in React component |
If you would like to contribute, please read the Code of Conduct and Guide first。
Small streams converge to make great rivers and seas!