Data sources and formats

In order to better display and analyze data, we need to understand the format and meaning of tabular data in VTable. Next we will discuss the data forms of two table types in VTable: the basic table (ListTable) data source, and the pivottable (PivotTable) data source.

Data format form

In VTable, the main data format we need to deal with is a JSON array. For example, the following is JSON data taking human information as an example:

[
  { "name": "zhang_san", "age": 20, "sex": "", "phone": "123456789", "address": "beijing haidian" },
  { "name": "li_si", "age": 30, "sex": "female", "phone": "23456789", "address": "beijing chaoyang" },
  { "name": "wang_wu", "age": 40, "sex": "male", "phone": "3456789", "address": "beijing fengtai" }
]

At the same time: the data structure of two-dimensional array can also support setting.

Next we will describe how to apply this data to basic tables and pivot tables, respectively.

Basic tabular data

JSON data

In a basic table, data is presented in units of behavior, and each row contains multiple fields (columns). For example: name, age, gender, and address. Each object in the data item will correspond to a row.

Creating a basic table based on the above JSON data should configure the corresponding ListTableConstructorOptions Assign, and will records Configure as a data source.

Example:

Two-dimensional array structure

If you use a two-dimensional array as the data source, you can run it as follows:

Special usage of multi-level data

A data source with a multi-level data structure can be implemented by setting records to [{}]. like:

records:
[
  {
    id: "7981",
    details:
    productName:'fff'
  }
]

details is an object in the data entry. In the data source, the corresponding value can be obtained through details.name.

You need to configure the above multi-level objects in columns like this:

const columns = [
  {
    "field": ['details','productName'],
    "title": "Order productName",
    "width": "auto"
  },
]

The effect is as follows:

Pivot Table Data

The main purpose of pivot tables is to display and analyze data in multiple Dimensions. When configuring pivot tables, we need to specify grouping (row and column) Dimensions and Metirc Dimensions. For example, we can group data by gender and calculate the number of people and average age for each.

Its configuration item is PivotTableConstructorOptionsSimilar to the basic table, we first use JSON data as the data source for the pivot tableNote: This data is the result dataset after aggregated analysis

[
  { "age": 30, "sex": "male", "city": "北京", "income": 430 },
  { "age": 30, "sex": "female", "city": "上海", "income": 440 },
  { "age": 30, "sex ": "male", "city": "深圳", "income": 420 },
  { "age": 25, "sex": "male", "city": "北京", "income": 400 },
  { "age": 25, "sex": "female", "city": "上海", "income": 400 },
  { "age": 25, "sex ": "male", "city": "深圳", "income": 380 }
]

Example:

At the same time, the records data format also supports cell-by-cell corresponding configuration:

records:[
    [430,650,657,325,456,500],
    [300,550,557,425,406,510],
    [430,450,607,455,560,400]
]

Example of setting up records with a two-dimensional array:

Data interface

Reset data

You can use setRecords to change table data. Please check the api documentation for details.

adding data

You can use addRecords or addRecord to add table data. Please check the api documentation for details.

delete data

Table data can be deleted using deleteRecords. Please check the api documentation for details.

change the data

Table data can be modified using updateRecords. Please check the api documentation for details.

Or you can modify a certain data field using the changeCellValue or changeCellValues interface.

Empty data prompt

If the data source is not passed, or an empty array is passed, you can configure emptyTip to display an empty data prompt.

Both the prompt message and the icon are configurable.

Configuration reference: https://visactor.io/vtable/option/ListTable#emptyTip

Example reference: https://visactor.io/vtable/demo/component/emptyTip

summarize

In this tutorial, we learned how to use tabular data in VTable. We first learned what data means in tables, and the data formats of two tables in VTable (basic table and pivot table). In order to help you better understand the correspondence between data formats and tables, we discussed the correspondence between basic tables and pivot tables respectively.