XuanHun

VTable-not just a high-performance data analysis table

VTable-not just a high-performance data analysis table

XuanHun's photo
XuanHun
·

6 min read

Table of contents

Introduction

VTable: More than just a high-performance multidimensional data analysis table, it is an artist of creativity between rows and columns! VTable is one of the components of VisActor, an open-source visualization solution by ByteDance. In modern applications, table components are an essential part as they can quickly display large amounts of data while providing excellent visual effects and interactive experiences. VTable is a high-performance table component library based on the visual rendering engine, VRender. It offers users outstanding performance, powerful multidimensional analysis capabilities, as well as flexible and robust graphical capabilities.

Getting Started

Getting VTable

There are several ways to obtain VTable.

1. Using NPM Package

First, you need to install VTable in your project’s root directory using the following command:

# use npm install
npm install @visactor/vtable
# use yarn install
yarn add @visactor/vtable

2. Using CDN

You can also obtain the pre-built VTable files through CDN.

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>

Importing VTable

To include the pre-built VTable file directly in an HTML file, you can add a <script> tag to import it:

<script src="https://unpkg.com/@visactor/vtable/dist/vtable.min.js"></script>
<script>const tableInstance = new VTable.ListTable(option);</script>

Drawing a Simple Table

Before we can draw a table using VTable, we need to prepare a DOM container with specified width and height for VTable.

<body>  
<div id="tableContainer" style="width: 600px;height:400px;">
</div>
</body>

Next, let’s create a VTable.ListTable instance and pass in the table configuration:

const records = [
{      
"230517143221027": "CA-2018-156720",      
"230517143221030": "JM-15580",      
"230517143221032": "Bagged Rubber Bands",      
"230517143221023": "Office Supplies",      
"230517143221034": "Fasteners",      
"230517143221037": "West",      
"230517143221024": "Loveland",      
"230517143221029": "2018-12-30",      
"230517143221042": "3",      
"230517143221040": "3.024",      
"230517143221041": "-0.605"  },  
{      
"230517143221027": "CA-2018-115427",      
"230517143221030": "EB-13975",      
"230517143221032": "GBC Binding covers",
"230517143221023": "Office Supplies", 
"230517143221034": "Binders",
"230517143221037": "West",
"230517143221024": "Fairfield",      
"230517143221029": "2018-12-30",      
"230517143221042": "2",      
"230517143221040": "20.72",      
"230517143221041": "6.475"  },  
                       (...)];
const columns =[
                {
                   "field": "230517143221027",        
                   "title": "Order ID",        
                   "width": "auto"    
                   },
                   {
                    "field": "230517143221030",        
                    "title": "Customer ID",        
                    "width": "auto"
                    },   
                    (...)
                           ];
  const option = {  records,  columns,  widthMode:'standard'};
// create VTable instance
const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);

The effect is as follows:

Detailed code can be found on website: https://visactor.io/vtable/guide/Getting_Started/Getting_Started

Seamless Performance Experience

VTable is powered by the visual rendering engine VRender, which offers excellent performance and rendering effects. VTable supports millisecond-level rendering of millions of data points, enabling fast rendering of large datasets. Let’s take a look at an example to demonstrate VTable’s fast rendering capability. You can also visit the official website to experience it firsthand:

https://visactor.io/vtable/demo/performance/100W

Various Table Forms

VTable provides three main table forms: Basic Table, Multi-Dimensional Pivot Table, and Pivot Combination Chart. These forms cater to different user needs, helping them better showcase and analyze data while uncovering valuable insights.

  • Basic Table: The basic table is the simplest form of a table, consisting of rows and columns, where each cell contains a data item. It is suitable for simple data arrangement and presentation purposes.

  • Pivot Table: The pivot table is a table form used for multi-dimensional data analysis. It allows users to aggregate and summarize data across multiple dimensions, providing them with a multi-dimensional perspective for data analysis and exploration.

  • Pivot Chart: The pivot combination chart is a chart form that combines the multi-dimensional pivot table with other chart types such as bar charts, line charts, etc. It allows the transformation of data from the pivot table into more intuitive and understandable graphical representations. This form enables users to visualize and present data from the pivot table in a visually appealing and informative way.

At the same time, a basic table can be transformed into a transposed table.

Additionally, a hierarchical relationship can be displayed using a tree-like structure on the list table.

The row headers of a pivot table can also be displayed using a tree-like structure to represent hierarchical relationships between dimensions.

Rich cell rendering

VTable provides a rich variety of cell presentation formats to meet diverse data display needs, assisting users in effectively showcasing and analyzing their data.

The specific supported cell presentation formats in VTable include:

  1. ‘text’: Used for displaying text data. It supports various styles and formats such as font size, color, bold, italic, and text wrapping. Data can be formatted to meet different layout requirements.

  2. ‘link’: Converts data into hyperlinks. Clicking on the link can redirect to a specified webpage or file.

  3. ‘image’: Converts a valid URL into an image display, such as a photo or an icon.

  4. ‘video’: Converts a valid URL into a video display, such as YouTube videos or local video files.

  5. ‘sparkline’: Converts data into mini-charts, such as line charts or area charts, to show data trends and changes within the table.

  6. ‘progressbar’: Converts data into progress bars, allowing customization of color, size, and text. It is useful for displaying task progress and status within the table.

  7. ‘chart’: Converts data into VChart charts for display within the cells.

  8. Custom rendering: For more advanced and customized content or layout presentations, custom rendering can be implemented.

These cell presentation formats provide flexibility in displaying data in a variety of ways, enhancing the visual representation and analysis capabilities within VTable.

Full interaction capability

VTable provides a rich and comprehensive set of interactive capabilities.

Table interaction

Select cells

select cells: supports radio selection, frame selection, entire column selection, shortcut key multi-selection and all selection.

Select hover to highlight

hover highlight: supports hover cell highlighting or cross highlighting.

Drag header position

Sort

Frozen column or row

Resize column with

Welcome to visit for more cases: https://www.visactor.io/vtable。

Component-level interaction

Interaction types include: scroll bar scrolling, tooltip prompts, dropdown menu pop-up, etc.

tooltip tip

dropdown

If the above interaction does not meet your needs, you can combine event listening to customize the interaction behavior. Welcome to visit for more cases: https://www.visactor.io/vtable。

Flexible and diverse UI styles

VTable supports a variety of themes and styles and can be customized according to user needs to meet different visual effects.

Multiple themes

ARCO theme

LIGHT theme

SIMPLY theme

DARK theme

Custom

cell style

In addition to using themes to set styles, you can also set cell styles through configuring styles in the column or row dimensions, which can achieve the flexibility of customizing styles at the cell level.

User CASES

data analysis

Sales details

Trend analysis

Project schedule

Conclusion

VTable is a high-performance table component library based on the visual rendering engine VRender, which provides excellent performance and powerful multi-dimensional analysis capabilities, as well as flexible and powerful graphics capabilities. VTable supports fast calculation and rendering of millions of data, can automatically analyze and present multi-dimensional data, and seamlessly integrates VChart, providing users with powerful data analysis and visualization capabilities. VTable provides a wealth of functions, including multiple table types, cell content types, interactive functions, themes, styles, custom rendering, etc., to meet the various needs of users. If you are looking for an efficient and easy-to-use data table library, VTable is a good choice!

We are willing to have more in-depth discussions and exchanges with data product-related product managers, designers, and R&D students:

1. If you are interested in a specific solution and need further communication, please contact us.

2. If you are willing to share your products, scenarios and experiences, you can contact us.

3. If you have difficult problems during the visualization application process, you can contact us to discuss and study together.

Contact information:

1）VisActor Website：www.visactor.io/vtable

2）Welcome Star(GitHub) :https://github.com/VisActor

DataVisualizationtableHTML CanvasTypeScript