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.

  /**
   * 修改数据 支持多条数据
   * @param records 修改数据条目
   * @param recordIndexs 对应修改数据的索引
   * 基本表格中显示在body中的索引，即要修改的是body部分的第几行数据；
   * 如果是树形结构的话 recordIndexs 为数组，数组中每个元素为data的原始数据索引；
   */
  updateRecords(records: any[], recordIndexs: (number | number[])[])

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

If you need data operations such as addRecord/addRecords/deleteRecords/updateRecords to also synchronize to the original records while the table is in filter/sort state, you can enable syncRecordOperationsToSourceRecords in the table options. This is useful when you expect newly added rows to still exist after clearing the filter, and when you want draft rows to stay visible in the current filter view until the next updateFilterRules is applied.

Tree structure data update

In the tree (group) structure, the data update is passed in recordIndex as an array, representing the index of the data in the table body. In addition, in the case of sorting, recordIndex is the original data structure, and it may not be consistent with the hierarchical order displayed in the table. Therefore, in the tree (group) structure table, please use the getRecordIndexByCell interface to get the correct recordIndex, and then use the updateRecords interface to update the data.

const recordIndex = tableInstance.getRecordIndexByCell(col, row);
tableInstance.updateRecords([newRecord], [recordIndex]);

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.