<div align="center">
<a href="https://github.com/VisActor#gh-light-mode-only" target="_blank">
<img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_light.svg"/>
</a>
<a href="https://github.com/VisActor#gh-dark-mode-only" target="_blank">
<img alt="VisActor Logo" width="200" src="https://github.com/VisActor/.github/blob/main/profile/logo_500_200_dark.svg"/>
</a>
</div>
<div align="center">
<h1>VTable</h1>
</div>
<div align="center">
VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
<p align="center">
<a href="https://visactor.io/vtable">Introduction</a> •
<a href="https://visactor.io/vtable/example">demo</a> •
<a href="https://visactor.io/vtable/guide/Getting_Started/Getting_Started">Tutorial</a> •
<a href="https://visactor.io/vtable/option/ListTable">API</a>•
</p>
[](https://www.npmjs.com/package/@visactor/vtable)
[](https://www.npmjs.com/package/@visactor/vtable)
[](https://github.com/visactor/vtable/blob/main/LICENSE)
</div>
<div align="center">
English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
</div>
<div align="center">
（video）
</div>
# 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. packages/vtable-gantt: Gantt chart component code
3. packages/vtable-editors: Table editor component code
4. packages/vtable-plugins: Table plugin code
5. packages/vtable-export: Table export tool code
6. packages/vtable-search: Table search tool code
7. packages/react-vtable: React version of the table component
8. packages/vue-vtable: Vue version of the table component
9. 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 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
After installation & clone & update, run docs to preview VTable documents locally.
```bash
# start vtable document server. execute in file path: ./
$ rush update
$ rush build
$ rush docs
```
# If you meet dependency problems
```bash
$ rush purge
$ rush update
```
## 🔗 Related Links
- [Official website](https://visactor.com/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
<a href="https://gitdata.xuanhun520.com/?repos=visactor/vtable&type=Date">
<picture >
<source media="(prefers-color-scheme: dark) and (max-width: 800px)" srcset="https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vtable&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light) and (max-width: 800px)" srcset="https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vtable&type=Date&theme=light" />
<img style="width: 800px; height: 533px;" alt="Star History Chart" src="https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vtable&type=Date&theme=dark" />
</picture>
</a>
# 🤝 Contribution
Before submitting a PR, read [PR checks and merge process](./CONTRIBUTING.md#pr-checks-and-merge-process) for local testing, automated CR, unit and visual checks, manual BugServer Photo verification, and maintainer approval and merge. See the guide for the activation status and scope of the new workflow.
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!
<a href="https://github.com/visactor/vtable/graphs/contributors"><img src="https://contrib.rocks/image?repo=visactor/vtable" /></a>
# License
[MIT License](./LICENSE)