3 Star 13 Fork 6

VisActor / VTable

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

VTable

VTable,不只是一款高性能的多维数据分析表格,更是一个在行列间创作的方格艺术家。

简介demo教程API

npm Version npm Download license

English | 简体中文

(video)

简介

VTable 是 VisActor 可视化体系中的表格组件库,基于可视化渲染引擎 VRender 进行封装。 核心能力如下:

  1. 性能极致:支持百万级数据快速运算与渲染
  2. 多维分析:多维数据自动分析与呈现
  3. 表现力强:提供灵活强大的图形能力,无缝融合VChart

仓库简介

本仓库包含如下 package

  1. packages/vtable:表格组件代码
  2. docs: 教程文档

Usage 使用

安装

npm package

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

更多 demo 和详细教程

⌨️ 开发

首先,全局安装 @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
# after execut git commit, please run the following command to update the change log. Please execute in file path: ./
$ rush change-all

📖 Documents

安装并且更新依赖后,可以执行 docs 命令,开启 VTable 的本地文档预览

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

🔗 相关链接

💫 Ecosystem

Project Description
React-VTable VTable React 组件

⭐️ Star History

Star History Chart

🤝 参与贡献

如想参与贡献,请先阅读 行为准则贡献指南

细流成河,终成大海!

许可证

MIT 协议

MIT License Copyright (c) 2023 Bytedance, Inc. and its affiliates. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns. 展开 收起
TypeScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
TypeScript
1
https://gitee.com/VisActor/VTable.git
git@gitee.com:VisActor/VTable.git
VisActor
VTable
VTable
develop

搜索帮助