mirror of
https://github.com/VisActor/VTable
synced 2024-11-21 17:40:10 +00:00
4.7 KiB
4.7 KiB
VTable
English | 简体中文
(video)
简介
VTable 是 VisActor 可视化体系中的表格组件库,基于可视化渲染引擎 VRender 进行封装。 核心能力如下:
- 性能极致:支持百万级数据快速运算与渲染
- 多维分析:多维数据自动分析与呈现
- 表现力强:提供灵活强大的图形能力,无缝融合VChart
仓库简介
本仓库包含如下 package
- packages/vtable:表格组件代码
- docs: 教程文档
Usage使用
安装
// 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);
⌨️ 开发
首先,全局安装 @microsoft/rush
$ npm i --global @microsoft/rush
接着将代码 clone 至本地:
# 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
安装并且更新依赖后,可以执行 docs 命令,开启 VTable 的本地文档预览
# start vtable document server. execute in file path: ./
$ rush docs
🔗 相关链接
💫 生态
项目 | 介绍 |
---|---|
智能生成组件 | 基于 AI 的智能表格生成组件 |
🤝 参与贡献
细流成河,终成大海!