From 06917284e3dd26dd6c097e4bd251428106919533 Mon Sep 17 00:00:00 2001
From: fangsmile <892739385@qq.com>
Date: Mon, 13 May 2024 19:45:14 +0800
Subject: [PATCH] docs: modify caption to title #1676
---
.../demo-openinula/en/component/menu.md | 35 +-
.../demo-openinula/en/component/tooltip.md | 21 +-
.../en/custom-layout/custom-layout.md | 446 +++++++-------
docs/assets/demo-openinula/en/event/event.md | 19 +-
docs/assets/demo-openinula/en/event/ready.md | 17 +-
.../en/usage/grammatical-tag.md | 11 +-
.../demo-openinula/en/usage/option-record.md | 15 +-
docs/assets/demo-openinula/en/usage/option.md | 15 +-
.../demo-openinula/zh/component/menu.md | 37 +-
.../demo-openinula/zh/component/tooltip.md | 25 +-
.../zh/custom-layout/custom-layout.md | 448 +++++++-------
docs/assets/demo-openinula/zh/event/event.md | 21 +-
docs/assets/demo-openinula/zh/event/ready.md | 19 +-
.../zh/usage/grammatical-tag.md | 13 +-
.../demo-openinula/zh/usage/option-record.md | 19 +-
docs/assets/demo-openinula/zh/usage/option.md | 19 +-
.../en/component/custom-component.md | 17 +-
docs/assets/demo-react/en/component/menu.md | 35 +-
.../assets/demo-react/en/component/tooltip.md | 21 +-
.../en/custom-layout/custom-layout.md | 446 +++++++-------
docs/assets/demo-react/en/event/event.md | 19 +-
docs/assets/demo-react/en/event/ready.md | 17 +-
.../arco-select-editor.md | 10 +-
.../demo-react/en/usage/grammatical-tag.md | 11 +-
.../demo-react/en/usage/option-record.md | 15 +-
docs/assets/demo-react/en/usage/option.md | 15 +-
.../zh/component/custom-component.md | 19 +-
docs/assets/demo-react/zh/component/menu.md | 37 +-
.../assets/demo-react/zh/component/tooltip.md | 25 +-
.../zh/custom-layout/custom-layout.md | 448 +++++++-------
docs/assets/demo-react/zh/event/event.md | 21 +-
docs/assets/demo-react/zh/event/ready.md | 19 +-
.../arco-select-editor.md | 10 +-
.../demo-react/zh/usage/grammatical-tag.md | 13 +-
.../demo-react/zh/usage/option-record.md | 19 +-
docs/assets/demo-react/zh/usage/option.md | 19 +-
.../list-table-header-group.md | 72 ++-
.../custom-render/custom-cell-layout-jsx.md | 569 ++++++++---------
.../en/custom-render/custom-merge-layout.md | 453 +++++++-------
.../en/table-type/pivot-table-multi-tree.md | 4 +-
.../list-table-header-group.md | 74 ++-
.../custom-render/custom-cell-layout-jsx.md | 571 +++++++++---------
.../zh/custom-render/custom-merge-layout.md | 453 +++++++-------
.../zh/table-type/pivot-table-multi-tree.md | 4 +-
...nt multi-level headers in a basic table.md | 6 +-
... a table component based on the content.md | 6 +-
...nt multi-level headers in a basic table.md | 6 +-
...ort displaying mini-charts within cells.md | 2 +-
... a table component based on the content.md | 10 +-
.../guide/en/Developer_Ecology/openinula.md | 108 ++--
.../guide/en/Developer_Ecology/react.md | 120 ++--
.../guide/zh/Developer_Ecology/openinula.md | 156 ++---
.../guide/zh/Developer_Ecology/react.md | 165 ++---
docs/vite.config.js | 1 +
54 files changed, 2609 insertions(+), 2587 deletions(-)
diff --git a/docs/assets/demo-openinula/en/component/menu.md b/docs/assets/demo-openinula/en/component/menu.md
index c15d62360..d592ec91d 100644
--- a/docs/assets/demo-openinula/en/component/menu.md
+++ b/docs/assets/demo-openinula/en/component/menu.md
@@ -13,6 +13,7 @@ option: ListTable#menu
You can directly use `Menu` to configure the menu component, and the configuration is consistent with option.menu.
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,31 +21,21 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = document.getElementById(CONTAINER_ID);
Inula.render(
- {
- console.log('onDropdownMenuClick', args)
+ onDropdownMenuClick={args => {
+ console.log('onDropdownMenuClick', args);
}}
>
-
-
-
-
-
+
+
+
+
,
root
@@ -54,4 +45,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/component/tooltip.md b/docs/assets/demo-openinula/en/component/tooltip.md
index d2ddcef1a..5eee0b3f1 100644
--- a/docs/assets/demo-openinula/en/component/tooltip.md
+++ b/docs/assets/demo-openinula/en/component/tooltip.md
@@ -13,6 +13,7 @@ option: ListTable#tooltip
You can directly use `Tooltip` to configure the menu component, and the configuration is consistent with option.tooltip.
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,18 +21,12 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = document.getElementById(CONTAINER_ID);
Inula.render(
-
-
-
-
-
-
+
+
+
+
+
+
,
root
);
@@ -40,4 +35,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/custom-layout/custom-layout.md b/docs/assets/demo-openinula/en/custom-layout/custom-layout.md
index 999602456..2c3041b8c 100644
--- a/docs/assets/demo-openinula/en/custom-layout/custom-layout.md
+++ b/docs/assets/demo-openinula/en/custom-layout/custom-layout.md
@@ -13,6 +13,7 @@ option: ListTable-columns-text#customLayout
You can use jsx in customLayout to customize the layout. For details, please refer to [Custom Layout](../guide/custom_define/custom_layout)
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -21,268 +22,271 @@ const VText = InulaVTable.VTable.VText;
const VImage = InulaVTable.VTable.VImage;
const VTag = InulaVTable.VTable.VTag;
-const records = [{
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
+const records = [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
},
{
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
},
{
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
},
{
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
},
{
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
},
{
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
}
];
const root = document.getElementById(CONTAINER_ID);
Inula.render(
-
-
+
+
{
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const record = table.getRecordByRowCol(col, row);
- // const jsx = jsx;
- const container = (
+ customLayout={args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+
',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: '#ccc',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onMouseEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
}}
>
+
-
-
- ',
- boundsPadding: [0, 0, 0, 10],
- cursor: "pointer"
- }}
- stateProxy={(stateName) => {
- if (stateName === "hover") {
- return {
- background: {
- fill: "#ccc",
- cornerRadius: 5,
- expandX: 1,
- expandY: 1
- }
- };
- }
- }}
- onMouseEnter={(event) => {
- event.currentTarget.addState("hover", true, false);
- event.currentTarget.stage.renderNextFrame();
- }}
- onMouseLeave={(event) => {
- event.currentTarget.removeState("hover", false);
- event.currentTarget.stage.renderNextFrame();
- }}
- >
-
-
-
- {record.tags.length
- ? record.tags.map((str, i) => (
- //
-
- ))
- : null}
-
+ {record.tags.length
+ ? record.tags.map((str, i) => (
+ //
+
+ ))
+ : null}
- );
+
+ );
- // decode(container)
- return {
- rootContainer: container,
- renderDefault: false
- };
- }}
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }}
/>
-
-
-
+
+
+
,
root
);
@@ -291,4 +295,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/event/event.md b/docs/assets/demo-openinula/en/event/event.md
index 4ba705331..1f0af5d07 100644
--- a/docs/assets/demo-openinula/en/event/event.md
+++ b/docs/assets/demo-openinula/en/event/event.md
@@ -13,6 +13,7 @@ option: ListTable-columns-text#cellType
The events supported by VTable can be monitored through openinula props. For details, please refer to [Event List]([../api/event](https://www.visactor.io/vtable/guide/Developer_Ecology/openinula# %E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A)).
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = document.getElementById(CONTAINER_ID);
@@ -43,8 +44,8 @@ Inula.render(
{
- console.log('onMouseMoveCell', args)
+ onMouseMoveCell={args => {
+ console.log('onMouseMoveCell', args);
}}
/>,
root
@@ -54,4 +55,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/event/ready.md b/docs/assets/demo-openinula/en/event/ready.md
index 210f1f128..e1a7dde6f 100644
--- a/docs/assets/demo-openinula/en/event/ready.md
+++ b/docs/assets/demo-openinula/en/event/ready.md
@@ -13,6 +13,7 @@ option: ListTable-columns-text#cellType
The onReady callback is triggered after the table completes initialization or update. You can obtain the table instance and whether it is the first rendering.
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = document.getElementById(CONTAINER_ID);
@@ -44,7 +45,7 @@ Inula.render(
option={option}
height={'500px'}
onReady={(tableInstance, isFirst) => {
- console.log(tableInstance, isFirst)
+ console.log(tableInstance, isFirst);
}}
/>,
root
@@ -54,4 +55,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/usage/grammatical-tag.md b/docs/assets/demo-openinula/en/usage/grammatical-tag.md
index 1afda0e5b..4f14205f3 100644
--- a/docs/assets/demo-openinula/en/usage/grammatical-tag.md
+++ b/docs/assets/demo-openinula/en/usage/grammatical-tag.md
@@ -14,6 +14,7 @@ Use syntax tags to assemble a complete table configuration and generate tables i
- ListColumn: List column, consistent with the definition of columns in option [api](../../option/ListTable-columns-text#cellType)
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -21,10 +22,10 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = document.getElementById(CONTAINER_ID);
Inula.render(
-
-
-
-
+
+
+
+
,
root
);
@@ -33,4 +34,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/usage/option-record.md b/docs/assets/demo-openinula/en/usage/option-record.md
index ef82641fa..b8e7dec84 100644
--- a/docs/assets/demo-openinula/en/usage/option-record.md
+++ b/docs/assets/demo-openinula/en/usage/option-record.md
@@ -12,27 +12,28 @@ link: '../guide/Developer_Ecology/openinula'
Records can be separated from options and passed into the table component as a separate prop.
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
- ],
+ title: 'hobby'
+ }
+ ]
};
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -43,4 +44,4 @@ Inula.render( {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/en/usage/option.md b/docs/assets/demo-openinula/en/usage/option.md
index b27a1c003..f9d38d09f 100644
--- a/docs/assets/demo-openinula/en/usage/option.md
+++ b/docs/assets/demo-openinula/en/usage/option.md
@@ -12,28 +12,29 @@ link: '../guide/Developer_Ecology/openinula'
You can use the complete option of VTable directly and pass the option into the table component as a prop.
## code demo
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = document.getElementById(CONTAINER_ID);
@@ -43,4 +44,4 @@ Inula.render(, root);
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/component/menu.md b/docs/assets/demo-openinula/zh/component/menu.md
index 7db345b7b..6c1b5a1bd 100644
--- a/docs/assets/demo-openinula/zh/component/menu.md
+++ b/docs/assets/demo-openinula/zh/component/menu.md
@@ -10,9 +10,10 @@ option: ListTable#menu
# 菜单组件
-可以直接使用`Menu`配置菜单组件，配置与option.menu一致。
+可以直接使用`Menu`配置菜单组件，配置与 option.menu 一致。
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,31 +21,21 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = document.getElementById(CONTAINER_ID);
Inula.render(
- {
- console.log('onDropdownMenuClick', args)
+ onDropdownMenuClick={args => {
+ console.log('onDropdownMenuClick', args);
}}
>
-
-
-
-
-
+
+
+
+
,
root
@@ -54,4 +45,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/component/tooltip.md b/docs/assets/demo-openinula/zh/component/tooltip.md
index ea829a367..bf9a5afb5 100644
--- a/docs/assets/demo-openinula/zh/component/tooltip.md
+++ b/docs/assets/demo-openinula/zh/component/tooltip.md
@@ -8,11 +8,12 @@ link: '../guide/table_type/List_table/list_table_define_and_generate'
option: ListTable#tooltip
---
-# tooltip组件
+# tooltip 组件
-可以直接使用`Tooltip`配置菜单组件，配置与option.tooltip一致。
+可以直接使用`Tooltip`配置菜单组件，配置与 option.tooltip 一致。
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,18 +21,12 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = document.getElementById(CONTAINER_ID);
Inula.render(
-
-
-
-
-
-
+
+
+
+
+
+
,
root
);
@@ -40,4 +35,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/custom-layout/custom-layout.md b/docs/assets/demo-openinula/zh/custom-layout/custom-layout.md
index 49378bbf8..7574f9591 100644
--- a/docs/assets/demo-openinula/zh/custom-layout/custom-layout.md
+++ b/docs/assets/demo-openinula/zh/custom-layout/custom-layout.md
@@ -10,9 +10,10 @@ option: ListTable-columns-text#customLayout
# custom layout
-可以在customLayout中使用jsx进行自定义布局，具体可以参考[自定义布局](../guide/custom_define/custom_layout)
+可以在 customLayout 中使用 jsx 进行自定义布局，具体可以参考[自定义布局](../guide/custom_define/custom_layout)
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -21,268 +22,271 @@ const VText = InulaVTable.VTable.VText;
const VImage = InulaVTable.VTable.VImage;
const VTag = InulaVTable.VTable.VTag;
-const records = [{
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
+const records = [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
},
{
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
},
{
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
},
{
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
},
{
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
},
{
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
}
];
const root = document.getElementById(CONTAINER_ID);
Inula.render(
-
-
+
+
{
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const record = table.getRecordByRowCol(col, row);
- // const jsx = jsx;
- const container = (
+ customLayout={args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+
',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: '#ccc',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onMouseEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
}}
>
+
-
-
- ',
- boundsPadding: [0, 0, 0, 10],
- cursor: "pointer"
- }}
- stateProxy={(stateName) => {
- if (stateName === "hover") {
- return {
- background: {
- fill: "#ccc",
- cornerRadius: 5,
- expandX: 1,
- expandY: 1
- }
- };
- }
- }}
- onMouseEnter={(event) => {
- event.currentTarget.addState("hover", true, false);
- event.currentTarget.stage.renderNextFrame();
- }}
- onMouseLeave={(event) => {
- event.currentTarget.removeState("hover", false);
- event.currentTarget.stage.renderNextFrame();
- }}
- >
-
-
-
- {record.tags.length
- ? record.tags.map((str, i) => (
- //
-
- ))
- : null}
-
+ {record.tags.length
+ ? record.tags.map((str, i) => (
+ //
+
+ ))
+ : null}
- );
+
+ );
- // decode(container)
- return {
- rootContainer: container,
- renderDefault: false
- };
- }}
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }}
/>
-
-
-
+
+
+
,
root
);
@@ -291,4 +295,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/event/event.md b/docs/assets/demo-openinula/zh/event/event.md
index 66b9a9edd..d72b955c1 100644
--- a/docs/assets/demo-openinula/zh/event/event.md
+++ b/docs/assets/demo-openinula/zh/event/event.md
@@ -10,9 +10,10 @@ option: ListTable-columns-text#cellType
# 事件监听
-VTable支持的事件都可以通过openinula的props传入进行监听，具体可以参考[事件列表]([../api/event](https://www.visactor.io/vtable/guide/Developer_Ecology/openinula#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A))。
+VTable 支持的事件都可以通过 openinula 的 props 传入进行监听，具体可以参考[事件列表](<[../api/event](https://www.visactor.io/vtable/guide/Developer_Ecology/openinula#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A)>)。
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = document.getElementById(CONTAINER_ID);
@@ -43,8 +44,8 @@ Inula.render(
{
- console.log('onMouseMoveCell', args)
+ onMouseMoveCell={args => {
+ console.log('onMouseMoveCell', args);
}}
/>,
root
@@ -54,4 +55,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/event/ready.md b/docs/assets/demo-openinula/zh/event/ready.md
index 697b3bc21..cc02aa00e 100644
--- a/docs/assets/demo-openinula/zh/event/ready.md
+++ b/docs/assets/demo-openinula/zh/event/ready.md
@@ -10,9 +10,10 @@ option: ListTable-columns-text#cellType
# onReady
-onReady回调再表格完成初始化或更新后触发，可以获取表格实例和是否是首次渲染。
+onReady 回调再表格完成初始化或更新后触发，可以获取表格实例和是否是首次渲染。
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = document.getElementById(CONTAINER_ID);
@@ -44,7 +45,7 @@ Inula.render(
option={option}
height={'500px'}
onReady={(tableInstance, isFirst) => {
- console.log(tableInstance, isFirst)
+ console.log(tableInstance, isFirst);
}}
/>,
root
@@ -54,4 +55,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/usage/grammatical-tag.md b/docs/assets/demo-openinula/zh/usage/grammatical-tag.md
index 443478c57..0e5fb182e 100644
--- a/docs/assets/demo-openinula/zh/usage/grammatical-tag.md
+++ b/docs/assets/demo-openinula/zh/usage/grammatical-tag.md
@@ -11,9 +11,10 @@ link: '../guide/Developer_Ecology/openinula'
使用语法化标签，组合出一个完整的表格配置，以子组件的形式生成表格。
-- ListColumn: 列表列，同option中的columns的定义一致 [api](../../option/ListTable-columns-text#cellType)
+- ListColumn: 列表列，同 option 中的 columns 的定义一致 [api](../../option/ListTable-columns-text#cellType)
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -21,10 +22,10 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = document.getElementById(CONTAINER_ID);
Inula.render(
-
-
-
-
+
+
+
+
,
root
);
@@ -33,4 +34,4 @@ Inula.render(
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/usage/option-record.md b/docs/assets/demo-openinula/zh/usage/option-record.md
index e58170c22..ad0d3c92a 100644
--- a/docs/assets/demo-openinula/zh/usage/option-record.md
+++ b/docs/assets/demo-openinula/zh/usage/option-record.md
@@ -7,32 +7,33 @@ order: 1-1
link: '../guide/Developer_Ecology/openinula'
---
-# 使用option+record
+# 使用 option+record
-可以将records从option中分离出来，单独作为一个prop传入表格组件。
+可以将 records 从 option 中分离出来，单独作为一个 prop 传入表格组件。
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
- ],
+ title: 'hobby'
+ }
+ ]
};
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -43,4 +44,4 @@ Inula.render( {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-openinula/zh/usage/option.md b/docs/assets/demo-openinula/zh/usage/option.md
index 33edc08a9..6bab13a38 100644
--- a/docs/assets/demo-openinula/zh/usage/option.md
+++ b/docs/assets/demo-openinula/zh/usage/option.md
@@ -7,33 +7,34 @@ order: 1-1
link: '../guide/Developer_Ecology/openinula'
---
-# 使用完整option
+# 使用完整 option
-可以直接使用可以直接使用VTable的完整option，将option作为一个prop传入表格组件。
+可以直接使用可以直接使用 VTable 的完整 option，将 option 作为一个 prop 传入表格组件。
## 代码演示
+
```javascript livedemo template=vtable-openinula
// import * as InulaVTable from '@visactor/openinula-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = document.getElementById(CONTAINER_ID);
@@ -43,4 +44,4 @@ Inula.render(, root);
window.customRelease = () => {
Inula.unmountComponentAtNode(root);
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/component/custom-component.md b/docs/assets/demo-react/en/component/custom-component.md
index 3eefc2dd5..eea369764 100644
--- a/docs/assets/demo-react/en/component/custom-component.md
+++ b/docs/assets/demo-react/en/component/custom-component.md
@@ -12,6 +12,7 @@ link: '../guide/Developer_Ecology/react'
The `CustomComponent` component facilitates overlaying external components on React-VTable components.
## Code Example
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -40,25 +41,25 @@ function App() {
columns: [
{
field: '0',
- caption: 'name'
+ title: 'name'
},
{
field: '1',
- caption: 'age'
+ title: 'age'
},
{
field: '2',
- caption: 'gender'
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby'
+ title: 'hobby'
}
],
records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
- const updateHoverPos = useCallback((args) => {
+ const updateHoverPos = useCallback(args => {
if (visible.current) {
return;
}
@@ -72,7 +73,7 @@ function App() {
setHoverRow(-1);
}, []);
- const updateClickPos = useCallback((args) => {
+ const updateClickPos = useCallback(args => {
setClickCol(args.col);
setClickRow(args.row);
}, []);
@@ -121,7 +122,7 @@ function App() {
setClickCol(-1);
setClickRow(-1);
}}
- onVisibleChange={(popVisible) => {
+ onVisibleChange={popVisible => {
visible.current = popVisible;
}}
>
@@ -139,4 +140,4 @@ root.render();
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/component/menu.md b/docs/assets/demo-react/en/component/menu.md
index 4c93d0e3d..ad7f5043c 100644
--- a/docs/assets/demo-react/en/component/menu.md
+++ b/docs/assets/demo-react/en/component/menu.md
@@ -13,6 +13,7 @@ option: ListTable#menu
You can directly use `Menu` to configure the menu component, and the configuration is consistent with option.menu.
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,31 +21,21 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
- {
- console.log('onDropdownMenuClick', args)
+ onDropdownMenuClick={args => {
+ console.log('onDropdownMenuClick', args);
}}
>
-
-
-
-
-
+
+
+
+
);
@@ -53,4 +44,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/component/tooltip.md b/docs/assets/demo-react/en/component/tooltip.md
index 279645a44..c6ebd6f68 100644
--- a/docs/assets/demo-react/en/component/tooltip.md
+++ b/docs/assets/demo-react/en/component/tooltip.md
@@ -13,6 +13,7 @@ option: ListTable#tooltip
You can directly use `Tooltip` to configure the menu component, and the configuration is consistent with option.tooltip.
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,18 +21,12 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
-
-
-
-
-
-
+
+
+
+
+
+
);
@@ -39,4 +34,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/custom-layout/custom-layout.md b/docs/assets/demo-react/en/custom-layout/custom-layout.md
index a78cc1f86..706e3749f 100644
--- a/docs/assets/demo-react/en/custom-layout/custom-layout.md
+++ b/docs/assets/demo-react/en/custom-layout/custom-layout.md
@@ -13,6 +13,7 @@ option: ListTable-columns-text#customLayout
You can use jsx in customLayout to customize the layout. For details, please refer to [Custom Layout](../guide/custom_define/custom_layout)
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -21,268 +22,271 @@ const VText = ReactVTable.VTable.VText;
const VImage = ReactVTable.VTable.VImage;
const VTag = ReactVTable.VTable.VTag;
-const records = [{
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
+const records = [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
},
{
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
},
{
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
},
{
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
},
{
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
},
{
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
}
];
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
-
-
+
+
{
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const record = table.getRecordByRowCol(col, row);
- // const jsx = jsx;
- const container = (
+ customLayout={args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+
',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: '#ccc',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onMouseEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
}}
>
+
-
-
- ',
- boundsPadding: [0, 0, 0, 10],
- cursor: "pointer"
- }}
- stateProxy={(stateName) => {
- if (stateName === "hover") {
- return {
- background: {
- fill: "#ccc",
- cornerRadius: 5,
- expandX: 1,
- expandY: 1
- }
- };
- }
- }}
- onMouseEnter={(event) => {
- event.currentTarget.addState("hover", true, false);
- event.currentTarget.stage.renderNextFrame();
- }}
- onMouseLeave={(event) => {
- event.currentTarget.removeState("hover", false);
- event.currentTarget.stage.renderNextFrame();
- }}
- >
-
-
-
- {record.tags.length
- ? record.tags.map((str, i) => (
- //
-
- ))
- : null}
-
+ {record.tags.length
+ ? record.tags.map((str, i) => (
+ //
+
+ ))
+ : null}
- );
+
+ );
- // decode(container)
- return {
- rootContainer: container,
- renderDefault: false
- };
- }}
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }}
/>
-
-
-
+
+
+
);
@@ -290,4 +294,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/event/event.md b/docs/assets/demo-react/en/event/event.md
index 910e7ea08..f0e0750d5 100644
--- a/docs/assets/demo-react/en/event/event.md
+++ b/docs/assets/demo-react/en/event/event.md
@@ -13,6 +13,7 @@ option: ListTable-columns-text#cellType
The events supported by VTable can be monitored through react props. For details, please refer to [Event List]([../api/event](https://www.visactor.io/vtable/guide/Developer_Ecology/react# %E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A)).
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
@@ -43,8 +44,8 @@ root.render(
{
- console.log('onMouseMoveCell', args)
+ onMouseMoveCell={args => {
+ console.log('onMouseMoveCell', args);
}}
/>
);
@@ -53,4 +54,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/event/ready.md b/docs/assets/demo-react/en/event/ready.md
index 7bdd91eff..04f0795a7 100644
--- a/docs/assets/demo-react/en/event/ready.md
+++ b/docs/assets/demo-react/en/event/ready.md
@@ -13,6 +13,7 @@ option: ListTable-columns-text#cellType
The onReady callback is triggered after the table completes initialization or update. You can obtain the table instance and whether it is the first rendering.
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
@@ -44,7 +45,7 @@ root.render(
option={option}
height={'500px'}
onReady={(tableInstance, isFirst) => {
- console.log(tableInstance, isFirst)
+ console.log(tableInstance, isFirst);
}}
/>
);
@@ -53,4 +54,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/functional-components/arco-select-editor.md b/docs/assets/demo-react/en/functional-components/arco-select-editor.md
index 6290704c7..513213829 100644
--- a/docs/assets/demo-react/en/functional-components/arco-select-editor.md
+++ b/docs/assets/demo-react/en/functional-components/arco-select-editor.md
@@ -110,23 +110,23 @@ const option = {
columns: [
{
field: '0',
- caption: 'name'
+ title: 'name'
},
{
field: '1',
- caption: 'age'
+ title: 'age'
},
{
field: '2',
- caption: 'gender'
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby'
+ title: 'hobby'
},
{
field: '4',
- caption: 'city',
+ title: 'city',
width: 150,
editor: 'list-editor'
}
diff --git a/docs/assets/demo-react/en/usage/grammatical-tag.md b/docs/assets/demo-react/en/usage/grammatical-tag.md
index db5da3940..26f76a7e7 100644
--- a/docs/assets/demo-react/en/usage/grammatical-tag.md
+++ b/docs/assets/demo-react/en/usage/grammatical-tag.md
@@ -14,6 +14,7 @@ Use syntax tags to assemble a complete table configuration and generate tables i
- ListColumn: List column, consistent with the definition of columns in option [api](../../option/ListTable-columns-text#cellType)
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -21,10 +22,10 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
-
-
-
-
+
+
+
+
);
@@ -32,4 +33,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/usage/option-record.md b/docs/assets/demo-react/en/usage/option-record.md
index 2e41f1c28..b493d460c 100644
--- a/docs/assets/demo-react/en/usage/option-record.md
+++ b/docs/assets/demo-react/en/usage/option-record.md
@@ -12,27 +12,28 @@ link: '../guide/Developer_Ecology/react'
Records can be separated from options and passed into the table component as a separate prop.
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
- ],
+ title: 'hobby'
+ }
+ ]
};
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -43,4 +44,4 @@ root.render( {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/en/usage/option.md b/docs/assets/demo-react/en/usage/option.md
index 9b73772dd..f983e1ec1 100644
--- a/docs/assets/demo-react/en/usage/option.md
+++ b/docs/assets/demo-react/en/usage/option.md
@@ -12,28 +12,29 @@ link: '../guide/Developer_Ecology/react'
You can use the complete option of VTable directly and pass the option into the table component as a prop.
## code demo
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
@@ -43,4 +44,4 @@ root.render();
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/component/custom-component.md b/docs/assets/demo-react/zh/component/custom-component.md
index 425d858b3..87c562fbf 100644
--- a/docs/assets/demo-react/zh/component/custom-component.md
+++ b/docs/assets/demo-react/zh/component/custom-component.md
@@ -9,9 +9,10 @@ link: '../guide/Developer_Ecology/react'
# 自定义组件
-自定义组件`CustomComponent`组件方便在React-VTable组件上叠加外部组件。
+自定义组件`CustomComponent`组件方便在 React-VTable 组件上叠加外部组件。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -40,25 +41,25 @@ function App() {
columns: [
{
field: '0',
- caption: '名称'
+ title: '名称'
},
{
field: '1',
- caption: '年龄'
+ title: '年龄'
},
{
field: '2',
- caption: '性别'
+ title: '性别'
},
{
field: '3',
- caption: '爱好'
+ title: '爱好'
}
],
records: new Array(1000).fill(['张三', 18, '男', '🏀'])
};
- const updateHoverPos = useCallback((args) => {
+ const updateHoverPos = useCallback(args => {
if (visible.current) {
return;
}
@@ -72,7 +73,7 @@ function App() {
setHoverRow(-1);
}, []);
- const updateClickPos = useCallback((args) => {
+ const updateClickPos = useCallback(args => {
setClickCol(args.col);
setClickRow(args.row);
}, []);
@@ -121,7 +122,7 @@ function App() {
setClickCol(-1);
setClickRow(-1);
}}
- onVisibleChange={(popVisible) => {
+ onVisibleChange={popVisible => {
visible.current = popVisible;
}}
>
@@ -139,4 +140,4 @@ root.render();
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/component/menu.md b/docs/assets/demo-react/zh/component/menu.md
index afb313c99..f7f83bcff 100644
--- a/docs/assets/demo-react/zh/component/menu.md
+++ b/docs/assets/demo-react/zh/component/menu.md
@@ -10,9 +10,10 @@ option: ListTable#menu
# 菜单组件
-可以直接使用`Menu`配置菜单组件，配置与option.menu一致。
+可以直接使用`Menu`配置菜单组件，配置与 option.menu 一致。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,31 +21,21 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
- {
- console.log('onDropdownMenuClick', args)
+ onDropdownMenuClick={args => {
+ console.log('onDropdownMenuClick', args);
}}
>
-
-
-
-
-
+
+
+
+
);
@@ -53,4 +44,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/component/tooltip.md b/docs/assets/demo-react/zh/component/tooltip.md
index 8a04ced28..519686e84 100644
--- a/docs/assets/demo-react/zh/component/tooltip.md
+++ b/docs/assets/demo-react/zh/component/tooltip.md
@@ -8,11 +8,12 @@ link: '../guide/table_type/List_table/list_table_define_and_generate'
option: ListTable#tooltip
---
-# tooltip组件
+# tooltip 组件
-可以直接使用`Tooltip`配置菜单组件，配置与option.tooltip一致。
+可以直接使用`Tooltip`配置菜单组件，配置与 option.tooltip 一致。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,18 +21,12 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
-
-
-
-
-
-
+
+
+
+
+
+
);
@@ -39,4 +34,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/custom-layout/custom-layout.md b/docs/assets/demo-react/zh/custom-layout/custom-layout.md
index f55260283..3f44dc1d8 100644
--- a/docs/assets/demo-react/zh/custom-layout/custom-layout.md
+++ b/docs/assets/demo-react/zh/custom-layout/custom-layout.md
@@ -10,9 +10,10 @@ option: ListTable-columns-text#customLayout
# custom layout
-可以在customLayout中使用jsx进行自定义布局，具体可以参考[自定义布局](../guide/custom_define/custom_layout)
+可以在 customLayout 中使用 jsx 进行自定义布局，具体可以参考[自定义布局](../guide/custom_define/custom_layout)
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -21,268 +22,271 @@ const VText = ReactVTable.VTable.VText;
const VImage = ReactVTable.VTable.VImage;
const VTag = ReactVTable.VTable.VTag;
-const records = [{
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
+const records = [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
},
{
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
},
{
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
},
{
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
},
{
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
},
{
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
}
];
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
-
-
+
+
{
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const record = table.getRecordByRowCol(col, row);
- // const jsx = jsx;
- const container = (
+ customLayout={args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+
',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: '#ccc',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onMouseEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
}}
>
+
-
-
- ',
- boundsPadding: [0, 0, 0, 10],
- cursor: "pointer"
- }}
- stateProxy={(stateName) => {
- if (stateName === "hover") {
- return {
- background: {
- fill: "#ccc",
- cornerRadius: 5,
- expandX: 1,
- expandY: 1
- }
- };
- }
- }}
- onMouseEnter={(event) => {
- event.currentTarget.addState("hover", true, false);
- event.currentTarget.stage.renderNextFrame();
- }}
- onMouseLeave={(event) => {
- event.currentTarget.removeState("hover", false);
- event.currentTarget.stage.renderNextFrame();
- }}
- >
-
-
-
- {record.tags.length
- ? record.tags.map((str, i) => (
- //
-
- ))
- : null}
-
+ {record.tags.length
+ ? record.tags.map((str, i) => (
+ //
+
+ ))
+ : null}
- );
+
+ );
- // decode(container)
- return {
- rootContainer: container,
- renderDefault: false
- };
- }}
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }}
/>
-
-
-
+
+
+
);
@@ -290,4 +294,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/event/event.md b/docs/assets/demo-react/zh/event/event.md
index c667e3146..5f7c50b66 100644
--- a/docs/assets/demo-react/zh/event/event.md
+++ b/docs/assets/demo-react/zh/event/event.md
@@ -10,9 +10,10 @@ option: ListTable-columns-text#cellType
# 事件监听
-VTable支持的事件都可以通过react的props传入进行监听，具体可以参考[事件列表]([../api/event](https://www.visactor.io/vtable/guide/Developer_Ecology/react#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A))。
+VTable 支持的事件都可以通过 react 的 props 传入进行监听，具体可以参考[事件列表](<[../api/event](https://www.visactor.io/vtable/guide/Developer_Ecology/react#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A)>)。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
@@ -43,8 +44,8 @@ root.render(
{
- console.log('onMouseMoveCell', args)
+ onMouseMoveCell={args => {
+ console.log('onMouseMoveCell', args);
}}
/>
);
@@ -53,4 +54,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/event/ready.md b/docs/assets/demo-react/zh/event/ready.md
index a0c362c23..802146e6a 100644
--- a/docs/assets/demo-react/zh/event/ready.md
+++ b/docs/assets/demo-react/zh/event/ready.md
@@ -10,9 +10,10 @@ option: ListTable-columns-text#cellType
# onReady
-onReady回调再表格完成初始化或更新后触发，可以获取表格实例和是否是首次渲染。
+onReady 回调再表格完成初始化或更新后触发，可以获取表格实例和是否是首次渲染。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
@@ -20,22 +21,22 @@ const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
@@ -44,7 +45,7 @@ root.render(
option={option}
height={'500px'}
onReady={(tableInstance, isFirst) => {
- console.log(tableInstance, isFirst)
+ console.log(tableInstance, isFirst);
}}
/>
);
@@ -53,4 +54,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/functional-components/arco-select-editor.md b/docs/assets/demo-react/zh/functional-components/arco-select-editor.md
index d4b4b4ae4..1cc52f9b7 100644
--- a/docs/assets/demo-react/zh/functional-components/arco-select-editor.md
+++ b/docs/assets/demo-react/zh/functional-components/arco-select-editor.md
@@ -110,23 +110,23 @@ const option = {
columns: [
{
field: '0',
- caption: 'name'
+ title: 'name'
},
{
field: '1',
- caption: 'age'
+ title: 'age'
},
{
field: '2',
- caption: 'gender'
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby'
+ title: 'hobby'
},
{
field: '4',
- caption: 'city',
+ title: 'city',
width: 150,
editor: 'list-editor'
}
diff --git a/docs/assets/demo-react/zh/usage/grammatical-tag.md b/docs/assets/demo-react/zh/usage/grammatical-tag.md
index 01ff9a9a6..cd6948f67 100644
--- a/docs/assets/demo-react/zh/usage/grammatical-tag.md
+++ b/docs/assets/demo-react/zh/usage/grammatical-tag.md
@@ -11,9 +11,10 @@ link: '../guide/Developer_Ecology/react'
使用语法化标签，组合出一个完整的表格配置，以子组件的形式生成表格。
-- ListColumn: 列表列，同option中的columns的定义一致 [api](../../option/ListTable-columns-text#cellType)
+- ListColumn: 列表列，同 option 中的 columns 的定义一致 [api](../../option/ListTable-columns-text#cellType)
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -21,10 +22,10 @@ const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render(
-
-
-
-
+
+
+
+
);
@@ -32,4 +33,4 @@ root.render(
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/usage/option-record.md b/docs/assets/demo-react/zh/usage/option-record.md
index 43c8169d6..60bc2aa4f 100644
--- a/docs/assets/demo-react/zh/usage/option-record.md
+++ b/docs/assets/demo-react/zh/usage/option-record.md
@@ -7,32 +7,33 @@ order: 1-1
link: '../guide/Developer_Ecology/react'
---
-# 使用option+record
+# 使用 option+record
-可以将records从option中分离出来，单独作为一个prop传入表格组件。
+可以将 records 从 option 中分离出来，单独作为一个 prop 传入表格组件。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
- ],
+ title: 'hobby'
+ }
+ ]
};
const records = new Array(1000).fill(['John', 18, 'male', '🏀']);
@@ -43,4 +44,4 @@ root.render( {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo-react/zh/usage/option.md b/docs/assets/demo-react/zh/usage/option.md
index b8f749204..24e05321e 100644
--- a/docs/assets/demo-react/zh/usage/option.md
+++ b/docs/assets/demo-react/zh/usage/option.md
@@ -7,33 +7,34 @@ order: 1-1
link: '../guide/Developer_Ecology/react'
---
-# 使用完整option
+# 使用完整 option
-可以直接使用可以直接使用VTable的完整option，将option作为一个prop传入表格组件。
+可以直接使用可以直接使用 VTable 的完整 option，将 option 作为一个 prop 传入表格组件。
## 代码演示
+
```javascript livedemo template=vtable-react
// import * as ReactVTable from '@visactor/react-vtable';
const option = {
columns: [
{
field: '0',
- caption: 'name',
+ title: 'name'
},
{
field: '1',
- caption: 'age',
+ title: 'age'
},
{
field: '2',
- caption: 'gender',
+ title: 'gender'
},
{
field: '3',
- caption: 'hobby',
- },
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(['John', 18, 'male', '🏀']),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
@@ -43,4 +44,4 @@ root.render();
window.customRelease = () => {
root.unmount();
};
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo/en/basic-functionality/list-table-header-group.md b/docs/assets/demo/en/basic-functionality/list-table-header-group.md
index a3d7794f0..6f2de5aaa 100644
--- a/docs/assets/demo/en/basic-functionality/list-table-header-group.md
+++ b/docs/assets/demo/en/basic-functionality/list-table-header-group.md
@@ -13,13 +13,13 @@ Configure columns as a nested multi-layer structure to achieve multi-layer heade
## Key Configurations
-* columns
+- columns
## Code demo
```javascript livedemo template=vtable
let tableInstance;
-const records= [
+const records = [
{
id: 1,
name1: 'a1',
@@ -50,52 +50,50 @@ const records= [
name2: 'e2',
name3: 'e3'
}
- ];
+];
-const columns =[
- {
- field: 'id',
- caption: 'ID',
- width: 100
- },
- {
- caption: 'Name',
- columns:[
+const columns = [
+ {
+ field: 'id',
+ title: 'ID',
+ width: 100
+ },
+ {
+ title: 'Name',
+ columns: [
+ {
+ field: 'name1',
+ title: 'name1',
+ width: 100
+ },
+ {
+ title: 'name-level-2',
+ width: 150,
+ columns: [
{
- field: 'name1',
- caption: 'name1',
+ field: 'name2',
+ title: 'name2',
width: 100
},
{
- caption: 'name-level-2',
- width: 150,
- columns:[
- {
- field: 'name2',
- caption: 'name2',
- width: 100
- },
- {
- caption: 'name3',
- field: 'name3',
- width: 150,
-
- }
- ]
+ title: 'name3',
+ field: 'name3',
+ width: 150
}
- ]
- }
+ ]
+ }
+ ]
+ }
];
const option = {
records,
columns,
- widthMode:'standard',
- autoWrapText:true,
- autoRowHeight:true,
- defaultColWidth:150,
+ widthMode: 'standard',
+ autoWrapText: true,
+ autoRowHeight: true,
+ defaultColWidth: 150
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window['tableInstance'] = tableInstance;
-
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo/en/custom-render/custom-cell-layout-jsx.md b/docs/assets/demo/en/custom-render/custom-cell-layout-jsx.md
index 999230e3d..6f14fb6fb 100644
--- a/docs/assets/demo/en/custom-render/custom-cell-layout-jsx.md
+++ b/docs/assets/demo/en/custom-render/custom-cell-layout-jsx.md
@@ -13,7 +13,7 @@ Using JSX to describe custom cell content can more clearly express the hierarchi
## Key Configurations
-* `customLayout` Configure the API to return what needs to be rendered
+- `customLayout` Configure the API to return what needs to be rendered
## Code demo
@@ -23,324 +23,329 @@ const VText = VTable.VText;
const VImage = VTable.VImage;
const VTag = VTable.VTag;
- const option = {
- container: document.getElementById("container"),
- columns: [
- {
- field: "bloggerId",
- caption: "order number"
- },
- {
- field: "bloggerName",
- caption: "anchor nickname",
- width: 330,
- customLayout: (args) => {
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const record = table.getRecordByRowCol(col, row);
- // const jsx = jsx;
- const container = (
+const option = {
+ container: document.getElementById('container'),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'order number'
+ },
+ {
+ field: 'bloggerName',
+ title: 'anchor nickname',
+ width: 330,
+ customLayout: args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+
',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: '#ccc',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onMouseEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
}}
>
+
-
-
- ',
- boundsPadding: [0, 0, 0, 10],
- cursor: "pointer"
- }}
- stateProxy={(stateName) => {
- if (stateName === "hover") {
- return {
- background: {
- fill: "#ccc",
- cornerRadius: 5,
- expandX: 1,
- expandY: 1
- }
- };
- }
- }}
- onMouseEnter={(event) => {
- event.currentTarget.addState("hover", true, false);
- event.currentTarget.stage.renderNextFrame();
- }}
- onMouseLeave={(event) => {
- event.currentTarget.removeState("hover", false);
- event.currentTarget.stage.renderNextFrame();
- }}
- >
-
-
-
- {record.tags.length
- ? record.tags.map((str, i) => (
- //
-
- ))
- : null}
-
+ {record.tags.length
+ ? record.tags.map((str, i) => (
+ //
+
+ ))
+ : null}
- );
+
+ );
- // decode(container)
- return {
- rootContainer: container,
- renderDefault: false
- };
- }
- },
- {
- field: "fansCount",
- caption: "fansCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "worksCount",
- caption: "worksCount",
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "",
- caption: "operation",
- width: 100,
- icon: ["favorite", "message"]
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
}
- ],
- records:[
- {
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
},
{
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
+ field: '',
+ title: 'operation',
+ width: 100,
+ icon: ['favorite', 'message']
+ }
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
},
{
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
},
{
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
},
{
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
},
{
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
+ },
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
}
- ],
- defaultRowHeight: 80
- };
+ ],
+ defaultRowHeight: 80
+};
- const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
- // bindDebugTool(instance.scenegraph.stage, {
- // customGrapicKeys: ["role"]
- // });
- // 只为了方便控制太调试用，不要拷贝
- window.tableInstance = instance;
+const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+// bindDebugTool(instance.scenegraph.stage, {
+// customGrapicKeys: ["role"]
+// });
+// 只为了方便控制太调试用，不要拷贝
+window.tableInstance = instance;
```
-
diff --git a/docs/assets/demo/en/custom-render/custom-merge-layout.md b/docs/assets/demo/en/custom-render/custom-merge-layout.md
index dc389e452..a532f250a 100644
--- a/docs/assets/demo/en/custom-render/custom-merge-layout.md
+++ b/docs/assets/demo/en/custom-render/custom-merge-layout.md
@@ -19,242 +19,247 @@ const VText = VTable.VText;
const VImage = VTable.VImage;
const VTag = VTable.VTag;
- const option = {
- container: document.getElementById("container"),
- columns: [
- {
- field: "bloggerId",
- caption: "bloggerId"
+const option = {
+ container: document.getElementById('container'),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'bloggerId'
+ },
+ {
+ field: 'bloggerName',
+ title: 'bloggerName',
+ width: 330
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "bloggerName",
- caption: "bloggerName",
- width: 330,
- },
- {
- field: "fansCount",
- caption: "fansCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "worksCount",
- caption: "worksCount",
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "",
- caption: "operation",
- width: 100,
- icon: ["favorite", "message"]
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
}
- ],
- records: [
- {
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
- },
- {
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
- },
- {
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
- },
- {
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
- },
- {
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {},
- {}
- ],
- defaultRowHeight: 40,
- customMergeCell: (col, row, table) => {
- if (col >= 0 && col < table.colCount && row === table.rowCount - 2) {
- return {
- range: {
- start: {
- col: 0,
- row: table.rowCount - 2
- },
- end: {
- col: table.colCount - 1,
- row: table.rowCount - 2
- }
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: '',
+ title: 'operation',
+ width: 100,
+ icon: ['favorite', 'message']
+ }
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
+ },
+ {
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
+ },
+ {
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
+ },
+ {
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
+ },
+ {
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
+ },
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
+ },
+ {},
+ {}
+ ],
+ defaultRowHeight: 40,
+ customMergeCell: (col, row, table) => {
+ if (col >= 0 && col < table.colCount && row === table.rowCount - 2) {
+ return {
+ range: {
+ start: {
+ col: 0,
+ row: table.rowCount - 2
},
- customLayout: (args) => {
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const container = (
- {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const container = (
+
+
-
+
-
-
- )
- return {
- rootContainer: container,
- renderDefault: false
- };
- }
+ fontFamily: 'sans-serif',
+ fill: 'rgb(51, 101, 238)'
+ },
+ panel: {
+ visible: true,
+ fill: '#e6fffb',
+ lineWidth: 1,
+ cornerRadius: 4
+ }
+ }}
+ >
+
+ );
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
}
- } else if (col >= 0 && col < table.colCount && row === table.rowCount - 1) {
- return {
- text: 'a',
- range: {
- start: {
- col: 0,
- row: table.rowCount - 1
- },
- end: {
- col: table.colCount - 1,
- row: table.rowCount - 1
- }
+ };
+ } else if (col >= 0 && col < table.colCount && row === table.rowCount - 1) {
+ return {
+ text: 'a',
+ range: {
+ start: {
+ col: 0,
+ row: table.rowCount - 1
},
- customRender: (args) => {
- const { width, height}= args.rect;
- const {dataValue,table,row } =args;
- const elements=[];
- elements.push({
- type: 'text',
- fill: '#000',
- fontSize: 12,
- fontWeight: 500,
- textBaseline: 'top',
- text: '© 2024 VisActor',
- x: width / 2 - 50,
- y: 14,
- });
- return {
- elements
- }
+ end: {
+ col: table.colCount - 1,
+ row: table.rowCount - 1
}
+ },
+ customRender: args => {
+ const { width, height } = args.rect;
+ const { dataValue, table, row } = args;
+ const elements = [];
+ elements.push({
+ type: 'text',
+ fill: '#000',
+ fontSize: 12,
+ fontWeight: 500,
+ textBaseline: 'top',
+ text: '© 2024 VisActor',
+ x: width / 2 - 50,
+ y: 14
+ });
+ return {
+ elements
+ };
}
- }
+ };
}
- };
+ }
+};
- const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
- window.tableInstance = instance;
+const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+window.tableInstance = instance;
```
-
diff --git a/docs/assets/demo/en/table-type/pivot-table-multi-tree.md b/docs/assets/demo/en/table-type/pivot-table-multi-tree.md
index 1553845d4..3151c8c13 100644
--- a/docs/assets/demo/en/table-type/pivot-table-multi-tree.md
+++ b/docs/assets/demo/en/table-type/pivot-table-multi-tree.md
@@ -378,7 +378,7 @@ fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American
indicators: [
{
indicatorKey: 'Sales',
- caption: 'Sales',
+ title: 'Sales',
width: 'auto',
showSort: false,
headerStyle: {
@@ -402,7 +402,7 @@ fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American
},
{
indicatorKey: 'Profit',
- caption: 'Profit',
+ title: 'Profit',
width: 'auto',
showSort: false,
headerStyle: {
diff --git a/docs/assets/demo/zh/basic-functionality/list-table-header-group.md b/docs/assets/demo/zh/basic-functionality/list-table-header-group.md
index 4a68f5324..fcec0aaf5 100644
--- a/docs/assets/demo/zh/basic-functionality/list-table-header-group.md
+++ b/docs/assets/demo/zh/basic-functionality/list-table-header-group.md
@@ -9,17 +9,17 @@ option: ListTable-columns-text#columns
# 基本表格表头分组
-将columns配置为嵌套多层结构来实现多层表头分组效果
+将 columns 配置为嵌套多层结构来实现多层表头分组效果
## 关键配置
-* columns
+- columns
## Code demo
```javascript livedemo template=vtable
let tableInstance;
-const records= [
+const records = [
{
id: 1,
name1: 'a1',
@@ -50,52 +50,50 @@ const records= [
name2: 'e2',
name3: 'e3'
}
- ];
+];
-const columns =[
- {
- field: 'id',
- caption: 'ID',
- width: 100
- },
- {
- caption: 'Name',
- columns:[
+const columns = [
+ {
+ field: 'id',
+ title: 'ID',
+ width: 100
+ },
+ {
+ title: 'Name',
+ columns: [
+ {
+ field: 'name1',
+ title: 'name1',
+ width: 100
+ },
+ {
+ title: 'name-level-2',
+ width: 150,
+ columns: [
{
- field: 'name1',
- caption: 'name1',
+ field: 'name2',
+ title: 'name2',
width: 100
},
{
- caption: 'name-level-2',
- width: 150,
- columns:[
- {
- field: 'name2',
- caption: 'name2',
- width: 100
- },
- {
- caption: 'name3',
- field: 'name3',
- width: 150,
-
- }
- ]
+ title: 'name3',
+ field: 'name3',
+ width: 150
}
- ]
- }
+ ]
+ }
+ ]
+ }
];
const option = {
records,
columns,
- widthMode:'standard',
- autoWrapText:true,
- autoRowHeight:true,
- defaultColWidth:150,
+ widthMode: 'standard',
+ autoWrapText: true,
+ autoRowHeight: true,
+ defaultColWidth: 150
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window['tableInstance'] = tableInstance;
-
-```
\ No newline at end of file
+```
diff --git a/docs/assets/demo/zh/custom-render/custom-cell-layout-jsx.md b/docs/assets/demo/zh/custom-render/custom-cell-layout-jsx.md
index 86e58a176..474ca2f98 100644
--- a/docs/assets/demo/zh/custom-render/custom-cell-layout-jsx.md
+++ b/docs/assets/demo/zh/custom-render/custom-cell-layout-jsx.md
@@ -9,11 +9,11 @@ option: ListTable-columns-text#customLayout
# 单元格自定义布局（JSX）
-使用JSX描述自定义单元格内容，可以更加清楚的表述图元之间的层级关系，增加可维护性。
+使用 JSX 描述自定义单元格内容，可以更加清楚的表述图元之间的层级关系，增加可维护性。
## 关键配置
-- `customLayout` 配置该API 返回需要渲染的内容
+- `customLayout` 配置该 API 返回需要渲染的内容
## 代码演示
@@ -23,324 +23,329 @@ const VText = VTable.VText;
const VImage = VTable.VImage;
const VTag = VTable.VTag;
- const option = {
- container: document.getElementById("container"),
- columns: [
- {
- field: "bloggerId",
- caption: "bloggerId"
- },
- {
- field: "bloggerName",
- caption: "bloggerName",
- width: 330,
- customLayout: (args) => {
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const record = table.getRecordByRowCol(col, row);
- // const jsx = jsx;
- const container = (
+const option = {
+ container: document.getElementById('container'),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'bloggerId'
+ },
+ {
+ field: 'bloggerName',
+ title: 'bloggerName',
+ width: 330,
+ customLayout: args => {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const record = table.getRecordByRowCol(col, row);
+ // const jsx = jsx;
+ const container = (
+
+
+
+
+
',
+ boundsPadding: [0, 0, 0, 10],
+ cursor: 'pointer'
+ }}
+ stateProxy={stateName => {
+ if (stateName === 'hover') {
+ return {
+ background: {
+ fill: '#ccc',
+ cornerRadius: 5,
+ expandX: 1,
+ expandY: 1
+ }
+ };
+ }
+ }}
+ onMouseEnter={event => {
+ event.currentTarget.addState('hover', true, false);
+ event.currentTarget.stage.renderNextFrame();
+ }}
+ onMouseLeave={event => {
+ event.currentTarget.removeState('hover', false);
+ event.currentTarget.stage.renderNextFrame();
}}
>
+
-
-
- ',
- boundsPadding: [0, 0, 0, 10],
- cursor: "pointer"
- }}
- stateProxy={(stateName) => {
- if (stateName === "hover") {
- return {
- background: {
- fill: "#ccc",
- cornerRadius: 5,
- expandX: 1,
- expandY: 1
- }
- };
- }
- }}
- onMouseEnter={(event) => {
- event.currentTarget.addState("hover", true, false);
- event.currentTarget.stage.renderNextFrame();
- }}
- onMouseLeave={(event) => {
- event.currentTarget.removeState("hover", false);
- event.currentTarget.stage.renderNextFrame();
- }}
- >
-
-
-
- {record.tags.length
- ? record.tags.map((str, i) => (
- //
-
- ))
- : null}
-
+ {record.tags.length
+ ? record.tags.map((str, i) => (
+ //
+
+ ))
+ : null}
- );
+
+ );
- // decode(container)
- return {
- rootContainer: container,
- renderDefault: false
- };
- }
- },
- {
- field: "fansCount",
- caption: "fansCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "worksCount",
- caption: "worksCount",
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
+ // decode(container)
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
+ }
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "",
- caption: "operation",
- width: 100,
- icon: ["favorite", "message"]
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
}
- ],
- records:[
- {
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
},
{
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
+ field: '',
+ title: 'operation',
+ width: 100,
+ icon: ['favorite', 'message']
+ }
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
},
{
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
},
{
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
},
{
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
},
{
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
+ },
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
}
- ],
- defaultRowHeight: 80
- };
+ ],
+ defaultRowHeight: 80
+};
- const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
- // bindDebugTool(instance.scenegraph.stage, {
- // customGrapicKeys: ["role"]
- // });
- // 只为了方便控制太调试用，不要拷贝
- window.tableInstance = instance;
+const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+// bindDebugTool(instance.scenegraph.stage, {
+// customGrapicKeys: ["role"]
+// });
+// 只为了方便控制太调试用，不要拷贝
+window.tableInstance = instance;
```
-
diff --git a/docs/assets/demo/zh/custom-render/custom-merge-layout.md b/docs/assets/demo/zh/custom-render/custom-merge-layout.md
index cff719c0d..b79d91066 100644
--- a/docs/assets/demo/zh/custom-render/custom-merge-layout.md
+++ b/docs/assets/demo/zh/custom-render/custom-merge-layout.md
@@ -19,242 +19,247 @@ const VText = VTable.VText;
const VImage = VTable.VImage;
const VTag = VTable.VTag;
- const option = {
- container: document.getElementById("container"),
- columns: [
- {
- field: "bloggerId",
- caption: "bloggerId"
+const option = {
+ container: document.getElementById('container'),
+ columns: [
+ {
+ field: 'bloggerId',
+ title: 'bloggerId'
+ },
+ {
+ field: 'bloggerName',
+ title: 'bloggerName',
+ width: 330
+ },
+ {
+ field: 'fansCount',
+ title: 'fansCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- field: "bloggerName",
- caption: "bloggerName",
- width: 330,
- },
- {
- field: "fansCount",
- caption: "fansCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "worksCount",
- caption: "worksCount",
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "viewCount",
- caption: "viewCount",
- fieldFormat(rec) {
- return rec.fansCount + "w";
- },
- style: {
- fontFamily: "Arial",
- fontSize: 12,
- fontWeight: "bold"
- }
- },
- {
- field: "",
- caption: "operation",
- width: 100,
- icon: ["favorite", "message"]
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
}
- ],
- records: [
- {
- 'bloggerId': 1,
- "bloggerName": "Virtual Anchor Xiaohua",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg",
- "introduction": "Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.",
- "fansCount": 400,
- "worksCount": 10,
- "viewCount": 5,
- "city": "Dream City",
- "tags": ["game", "anime", "food"]
- },
- {
- 'bloggerId': 2,
- "bloggerName": "Virtual anchor little wolf",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.",
- "fansCount": 800,
- "worksCount": 20,
- "viewCount": 15,
- "city": "City of Music",
- "tags": ["music", "travel", "photography"]
- },
- {
- 'bloggerId': 3,
- "bloggerName": "Virtual anchor bunny",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.",
- "fansCount": 600,
- "worksCount": 15,
- "viewCount": 10,
- "city": "City of Art",
- "tags": ["painting", "handmade", "beauty makeup"]
- },
- {
- 'bloggerId': 4,
- "bloggerName": "Virtual anchor kitten",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg",
- "introduction": "Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.",
- "fansCount": 1000,
- "worksCount": 30,
- "viewCount": 20,
- "city": "Health City",
- "tags": ["dance", "fitness", "cooking"]
- },
- {
- 'bloggerId': 5,
- "bloggerName": "Virtual anchor Bear",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg",
- "introduction": "Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.",
- "fansCount": 1200,
- "worksCount": 25,
- "viewCount": 18,
- "city": "City of Wisdom",
- "tags": ["Movie", "Literature"]
+ },
+ {
+ field: 'worksCount',
+ title: 'worksCount',
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {
- 'bloggerId': 6,
- "bloggerName": "Virtual anchor bird",
- "bloggerAvatar": "https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg",
- "introduction": "Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.",
- "fansCount": 900,
- "worksCount": 12,
- "viewCount": 8,
- "city": "Happy City",
- "tags": ["music", "performance", "variety"]
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: 'viewCount',
+ title: 'viewCount',
+ fieldFormat(rec) {
+ return rec.fansCount + 'w';
},
- {},
- {}
- ],
- defaultRowHeight: 40,
- customMergeCell: (col, row, table) => {
- if (col >= 0 && col < table.colCount && row === table.rowCount - 2) {
- return {
- range: {
- start: {
- col: 0,
- row: table.rowCount - 2
- },
- end: {
- col: table.colCount - 1,
- row: table.rowCount - 2
- }
+ style: {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold'
+ }
+ },
+ {
+ field: '',
+ title: 'operation',
+ width: 100,
+ icon: ['favorite', 'message']
+ }
+ ],
+ records: [
+ {
+ bloggerId: 1,
+ bloggerName: 'Virtual Anchor Xiaohua',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/flower.jpg',
+ introduction:
+ 'Hi everyone, I am Xiaohua, the virtual host. I am a little fairy who likes games, animation and food. I hope to share happy moments with you through live broadcast.',
+ fansCount: 400,
+ worksCount: 10,
+ viewCount: 5,
+ city: 'Dream City',
+ tags: ['game', 'anime', 'food']
+ },
+ {
+ bloggerId: 2,
+ bloggerName: 'Virtual anchor little wolf',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/wolf.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Little Wolf. I like music, travel and photography, and I hope to explore the beauty of the world with you through live broadcast.',
+ fansCount: 800,
+ worksCount: 20,
+ viewCount: 15,
+ city: 'City of Music',
+ tags: ['music', 'travel', 'photography']
+ },
+ {
+ bloggerId: 3,
+ bloggerName: 'Virtual anchor bunny',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/rabbit.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaotu. I like painting, handicrafts and beauty makeup. I hope to share creativity and fashion with you through live broadcast.',
+ fansCount: 600,
+ worksCount: 15,
+ viewCount: 10,
+ city: 'City of Art',
+ tags: ['painting', 'handmade', 'beauty makeup']
+ },
+ {
+ bloggerId: 4,
+ bloggerName: 'Virtual anchor kitten',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/cat.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Kitty. I am a lazy cat who likes dancing, fitness and cooking. I hope to live a healthy and happy life with everyone through the live broadcast.',
+ fansCount: 1000,
+ worksCount: 30,
+ viewCount: 20,
+ city: 'Health City',
+ tags: ['dance', 'fitness', 'cooking']
+ },
+ {
+ bloggerId: 5,
+ bloggerName: 'Virtual anchor Bear',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bear.jpg',
+ introduction:
+ 'Hello everyone, I am the virtual host Xiaoxiong. A little wise man who likes movies, reading and philosophy, I hope to explore the meaning of life with you through live broadcast.',
+ fansCount: 1200,
+ worksCount: 25,
+ viewCount: 18,
+ city: 'City of Wisdom',
+ tags: ['Movie', 'Literature']
+ },
+ {
+ bloggerId: 6,
+ bloggerName: 'Virtual anchor bird',
+ bloggerAvatar: 'https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/custom-render/bird.jpeg',
+ introduction:
+ 'Hello everyone, I am the virtual anchor Xiaoniao. I like singing, acting and variety shows. I hope to be happy with everyone through the live broadcast.',
+ fansCount: 900,
+ worksCount: 12,
+ viewCount: 8,
+ city: 'Happy City',
+ tags: ['music', 'performance', 'variety']
+ },
+ {},
+ {}
+ ],
+ defaultRowHeight: 40,
+ customMergeCell: (col, row, table) => {
+ if (col >= 0 && col < table.colCount && row === table.rowCount - 2) {
+ return {
+ range: {
+ start: {
+ col: 0,
+ row: table.rowCount - 2
},
- customLayout: (args) => {
- const { table, row, col, rect } = args;
- const { height, width } = rect || table.getCellRect(col, row);
- const container = (
- {
+ const { table, row, col, rect } = args;
+ const { height, width } = rect || table.getCellRect(col, row);
+ const container = (
+
+
-
+
-
-
- )
- return {
- rootContainer: container,
- renderDefault: false
- };
- }
+ fontFamily: 'sans-serif',
+ fill: 'rgb(51, 101, 238)'
+ },
+ panel: {
+ visible: true,
+ fill: '#e6fffb',
+ lineWidth: 1,
+ cornerRadius: 4
+ }
+ }}
+ >
+
+ );
+ return {
+ rootContainer: container,
+ renderDefault: false
+ };
}
- } else if (col >= 0 && col < table.colCount && row === table.rowCount - 1) {
- return {
- text: 'a',
- range: {
- start: {
- col: 0,
- row: table.rowCount - 1
- },
- end: {
- col: table.colCount - 1,
- row: table.rowCount - 1
- }
+ };
+ } else if (col >= 0 && col < table.colCount && row === table.rowCount - 1) {
+ return {
+ text: 'a',
+ range: {
+ start: {
+ col: 0,
+ row: table.rowCount - 1
},
- customRender: (args) => {
- const { width, height}= args.rect;
- const {dataValue,table,row } =args;
- const elements=[];
- elements.push({
- type: 'text',
- fill: '#000',
- fontSize: 12,
- fontWeight: 500,
- textBaseline: 'top',
- text: '© 2024 VisActor',
- x: width / 2 - 50,
- y: 14,
- });
- return {
- elements
- }
+ end: {
+ col: table.colCount - 1,
+ row: table.rowCount - 1
}
+ },
+ customRender: args => {
+ const { width, height } = args.rect;
+ const { dataValue, table, row } = args;
+ const elements = [];
+ elements.push({
+ type: 'text',
+ fill: '#000',
+ fontSize: 12,
+ fontWeight: 500,
+ textBaseline: 'top',
+ text: '© 2024 VisActor',
+ x: width / 2 - 50,
+ y: 14
+ });
+ return {
+ elements
+ };
}
- }
+ };
}
- };
+ }
+};
- const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
- window.tableInstance = instance;
+const instance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
+window.tableInstance = instance;
```
-
diff --git a/docs/assets/demo/zh/table-type/pivot-table-multi-tree.md b/docs/assets/demo/zh/table-type/pivot-table-multi-tree.md
index a97c3246f..b4588ee1d 100644
--- a/docs/assets/demo/zh/table-type/pivot-table-multi-tree.md
+++ b/docs/assets/demo/zh/table-type/pivot-table-multi-tree.md
@@ -378,7 +378,7 @@ fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American
indicators: [
{
indicatorKey: 'Sales',
- caption: 'Sales',
+ title: 'Sales',
width: 'auto',
showSort: false,
headerStyle: {
@@ -402,7 +402,7 @@ fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American
},
{
indicatorKey: 'Profit',
- caption: 'Profit',
+ title: 'Profit',
width: 'auto',
showSort: false,
headerStyle: {
diff --git a/docs/assets/faq/en/1-How to implement multi-level headers in a basic table.md b/docs/assets/faq/en/1-How to implement multi-level headers in a basic table.md
index 2155b2c0f..56c2905bb 100644
--- a/docs/assets/faq/en/1-How to implement multi-level headers in a basic table.md
+++ b/docs/assets/faq/en/1-How to implement multi-level headers in a basic table.md
@@ -15,16 +15,16 @@ In VTable, the configuration option "columns" can be used to configure sub-items
```javascript
{
field: 'full name',
- caption: 'Full name',
+ title: 'Full name',
columns: [
{
field: 'name',
- caption: 'First Name',
+ title: 'First Name',
width: 120
},
{
field: 'lastName',
- caption: 'Last Name',
+ title: 'Last Name',
width: 100
}
]
diff --git a/docs/assets/faq/en/3-How to automatically calculate the width and height of cells in a table component based on the content.md b/docs/assets/faq/en/3-How to automatically calculate the width and height of cells in a table component based on the content.md
index 34f9bb22f..a3f6fed21 100644
--- a/docs/assets/faq/en/3-How to automatically calculate the width and height of cells in a table component based on the content.md
+++ b/docs/assets/faq/en/3-How to automatically calculate the width and height of cells in a table component based on the content.md
@@ -43,15 +43,15 @@ const records = [
const columns = [
{
field: "230517143221027",
- caption: "Order ID"
+ title: "Order ID"
},
{
field: "230517143221030",
- caption: "Customer ID"
+ title: "Customer ID"
},
{
field: "230517143221032",
- caption: "Product Name",
+ title: "Product Name",
style: {
fontSize(args: any) {
if (args.row % 2 === 1) return 20;
diff --git a/docs/assets/faq/zh/1-How to implement multi-level headers in a basic table.md b/docs/assets/faq/zh/1-How to implement multi-level headers in a basic table.md
index 29eba7e5a..7e1372da6 100644
--- a/docs/assets/faq/zh/1-How to implement multi-level headers in a basic table.md
+++ b/docs/assets/faq/zh/1-How to implement multi-level headers in a basic table.md
@@ -15,16 +15,16 @@
```javascript
{
field: 'full name',
- caption: 'Full name',
+ title: 'Full name',
columns: [
{
field: 'name',
- caption: 'First Name',
+ title: 'First Name',
width: 120
},
{
field: 'lastName',
- caption: 'Last Name',
+ title: 'Last Name',
width: 100
}
]
diff --git a/docs/assets/faq/zh/11-What table components support displaying mini-charts within cells.md b/docs/assets/faq/zh/11-What table components support displaying mini-charts within cells.md
index a4f03f986..6a355a9b8 100644
--- a/docs/assets/faq/zh/11-What table components support displaying mini-charts within cells.md
+++ b/docs/assets/faq/zh/11-What table components support displaying mini-charts within cells.md
@@ -16,7 +16,7 @@ VTable 组件中配置 columnType: "sparkline"，将单元格类型显示成迷
const columns: VTable.ColumnsDefine = [
{
field: "trend",
- caption: "bird count",
+ title: "bird count",
columnType: "sparkline",
width: 300,
sparklineSpec: {
diff --git a/docs/assets/faq/zh/3-How to automatically calculate the width and height of cells in a table component based on the content.md b/docs/assets/faq/zh/3-How to automatically calculate the width and height of cells in a table component based on the content.md
index e9e899b00..e3582148e 100644
--- a/docs/assets/faq/zh/3-How to automatically calculate the width and height of cells in a table component based on the content.md
+++ b/docs/assets/faq/zh/3-How to automatically calculate the width and height of cells in a table component based on the content.md
@@ -2,11 +2,11 @@
## 问题描述
-我有个需求场景是：单元格内容可能会出现换行符，并且同列的单元格内容长度不一样，同行的单元格的样式可能不一样，但是想要内容展示完整，所以要求表格组件可以实现根据内容的宽高来自动撑开单元格，如何在VTable中实现这个效果？
+我有个需求场景是：单元格内容可能会出现换行符，并且同列的单元格内容长度不一样，同行的单元格的样式可能不一样，但是想要内容展示完整，所以要求表格组件可以实现根据内容的宽高来自动撑开单元格，如何在 VTable 中实现这个效果？
## 解决方案
-VTable中可以配置宽度高度的自动计算模式：
+VTable 中可以配置宽度高度的自动计算模式：
## 代码示例
@@ -43,15 +43,15 @@ const records = [
const columns = [
{
field: "230517143221027",
- caption: "Order ID"
+ title: "Order ID"
},
{
field: "230517143221030",
- caption: "Customer ID"
+ title: "Customer ID"
},
{
field: "230517143221032",
- caption: "Product Name",
+ title: "Product Name",
style: {
fontSize(args: any) {
if (args.row % 2 === 1) return 20;
diff --git a/docs/assets/guide/en/Developer_Ecology/openinula.md b/docs/assets/guide/en/Developer_Ecology/openinula.md
index 1ffd1e0ad..72e3614f2 100644
--- a/docs/assets/guide/en/Developer_Ecology/openinula.md
+++ b/docs/assets/guide/en/Developer_Ecology/openinula.md
@@ -29,7 +29,7 @@ yarn add @visactor/openinula-vtable
It is recommended to use npm package to import
```js
-import { ListTable } from "@visactor/openinula-vtable";
+import { ListTable } from '@visactor/openinula-vtable';
```
## Draw a simple list
@@ -41,34 +41,31 @@ Here is a simple list example code:
```typescript
import Openinula from 'openinula';
import OpeninulaDOM from 'openinula-dom/client';
-import { ListTable } from "@visactor/openinula-vtable";
+import { ListTable } from '@visactor/openinula-vtable';
const option = {
columns: [
{
- field: "0",
- caption: "name",
+ field: '0',
+ title: 'name'
},
{
- field: "1",
- caption: "age",
+ field: '1',
+ title: 'age'
},
{
- field: "2",
- caption: "gender",
+ field: '2',
+ title: 'gender'
},
{
- field: "3",
- caption: "hobby",
- },
+ field: '3',
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
-Inula.render(
- ,
- document.getElementById('root')
-);
+Inula.render(, document.getElementById('root'));
```
Refer to [demo](../../demo-openinula/usage/option)
@@ -123,10 +120,10 @@ function App() {
// ......
return (
-
-
-
-
+
+
+
+
);
}
@@ -146,38 +143,38 @@ The props attributes accepted by PivotTable&PivotChart are the same as options.
- PivotCorner: Corner configuration, consistent with the definition of corner in option [api](../../option/PivotTable#corner)
```jsx
- return (
-
-
-
-
-
-
-
-
-
-
- );
-
+return (
+
+
+
+
+
+
+
+
+
+
+);
```
+
Grammatical label demo: [PivotTable demo](../../demo-openinula/grammatical-tag/pivot-table) [PivotChart demo](../../demo-openinula/grammatical-tag/pivot-chart)
#### Components outside the table
@@ -191,10 +188,10 @@ External components currently support:
// ......
```
@@ -204,6 +201,7 @@ External components currently support:
The Props of the outermost table component of the unified label or the syntactic table label inherit the event processing callback EventsProps of the table.
EventsProps are defined as follows:
+
```ts
interface EventsProps {
onClickCell?: EventCallback;
@@ -247,7 +245,8 @@ interface EventsProps {
onMouseLeaveAxis?: EventCallback;
onCheckboxStateChange?: EventCallback;
- onRadioStateChange?: EventCallback; onAfterRender?: EventCallback;
+ onRadioStateChange?: EventCallback;
+ onAfterRender?: EventCallback;
onInitialized?: EventCallback;
// pivot table only
@@ -260,6 +259,7 @@ interface EventsProps {
```
Event usage example:
+
```jsx
function App() {
const option = {
diff --git a/docs/assets/guide/en/Developer_Ecology/react.md b/docs/assets/guide/en/Developer_Ecology/react.md
index cefe51f64..604ae2906 100644
--- a/docs/assets/guide/en/Developer_Ecology/react.md
+++ b/docs/assets/guide/en/Developer_Ecology/react.md
@@ -29,7 +29,7 @@ yarn add @visactor/react-vtable
It is recommended to use npm package to import
```js
-import { ListTable } from "@visactor/react-vtable";
+import { ListTable } from '@visactor/react-vtable';
```
## Draw a simple list
@@ -41,32 +41,32 @@ Here is a simple list example code:
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
-import { ListTable } from "@visactor/react-vtable";
+import { ListTable } from '@visactor/react-vtable';
const option = {
columns: [
{
- field: "0",
- caption: "name",
+ field: '0',
+ title: 'name'
},
{
- field: "1",
- caption: "age",
+ field: '1',
+ title: 'age'
},
{
- field: "2",
- caption: "gender",
+ field: '2',
+ title: 'gender'
},
{
- field: "3",
- caption: "hobby",
- },
+ field: '3',
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
);
```
@@ -122,10 +122,10 @@ function App() {
// ......
return (
-
-
-
-
+
+
+
+
);
}
@@ -145,38 +145,38 @@ The props attributes accepted by PivotTable&PivotChart are the same as options.
- PivotCorner: Corner configuration, consistent with the definition of corner in option [api](../../option/PivotTable#corner)
```jsx
- return (
-
-
-
-
-
-
-
-
-
-
- );
-
+return (
+
+
+
+
+
+
+
+
+
+
+);
```
+
Grammatical label demo: [PivotTable demo](../../demo-react/grammatical-tag/pivot-table) [PivotChart demo](../../demo-react/grammatical-tag/pivot-chart)
#### Components outside the table
@@ -190,10 +190,10 @@ External components currently support:
// ......
```
@@ -203,6 +203,7 @@ External components currently support:
The Props of the outermost table component of the unified label or the syntactic table label inherit the event processing callback EventsProps of the table.
EventsProps are defined as follows:
+
```ts
interface EventsProps {
onClickCell?: EventCallback;
@@ -246,7 +247,8 @@ interface EventsProps {
onMouseLeaveAxis?: EventCallback;
onCheckboxStateChange?: EventCallback;
- onRadioStateChange?: EventCallback; onAfterRender?: EventCallback;
+ onRadioStateChange?: EventCallback;
+ onAfterRender?: EventCallback;
onInitialized?: EventCallback;
// pivot table only
@@ -259,6 +261,7 @@ interface EventsProps {
```
Event usage example:
+
```jsx
function App() {
const option = {
@@ -293,11 +296,11 @@ Among them, `CustomComponent` is used as a container for positioning in the tabl
1. Absolute positioning
- For absolute positioning, you need to specify `displayMode` as `position`, `x` and `y` attributes, which are used to position the container to the specified pixel position in the table (based on the upper left corner), `width` and `height `property specifies the pixel dimensions of the container.
+ For absolute positioning, you need to specify `displayMode` as `position`, `x` and `y` attributes, which are used to position the container to the specified pixel position in the table (based on the upper left corner), `width` and `height `property specifies the pixel dimensions of the container.
2. Relative positioning
- For relative positioning, you need to specify `displayMode` as `cell`, the container is positioned relative to the cell, the `col` and `row` attributes are used to specify the anchored cell coordinates, and the `anchor` attribute specifies the container relative to the cell. The anchor position, `dx` and `dy` attributes specify the offset of the container relative to the anchor cell, and the `width` and `height` properties specify the size of the container, where `dx` `dy` `width` and The `height` attribute supports units of pixels or percentages. When it is a percentage, it is calculated relative to the size of the cell.
+ For relative positioning, you need to specify `displayMode` as `cell`, the container is positioned relative to the cell, the `col` and `row` attributes are used to specify the anchored cell coordinates, and the `anchor` attribute specifies the container relative to the cell. The anchor position, `dx` and `dy` attributes specify the offset of the container relative to the anchor cell, and the `width` and `height` properties specify the size of the container, where `dx` `dy` `width` and The `height` attribute supports units of pixels or percentages. When it is a percentage, it is calculated relative to the size of the cell.
### API
@@ -307,7 +310,16 @@ interface CustomComponentProps {
displayMode: 'position' | 'cell'; // positioning method
col?: number; // anchored column coordinates
row?: number; // anchored row coordinates
- anchor?: 'top-left' | 'top-center' | 'top-right' |'middle-left' |'middle-center' |'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; // anchored position
+ anchor?:
+ | 'top-left'
+ | 'top-center'
+ | 'top-right'
+ | 'middle-left'
+ | 'middle-center'
+ | 'middle-right'
+ | 'bottom-left'
+ | 'bottom-center'
+ | 'bottom-right'; // anchored position
dx?: number | string; // offset in x direction
dy?: number | string; // offset in y direction
width?: number | string; // container width
diff --git a/docs/assets/guide/zh/Developer_Ecology/openinula.md b/docs/assets/guide/zh/Developer_Ecology/openinula.md
index f693daa58..27dea1d88 100644
--- a/docs/assets/guide/zh/Developer_Ecology/openinula.md
+++ b/docs/assets/guide/zh/Developer_Ecology/openinula.md
@@ -29,7 +29,7 @@ yarn add @visactor/openinula-vtable
推荐使用 npm 包引入
```js
-import { ListTable } from "@visactor/openinula-vtable";
+import { ListTable } from '@visactor/openinula-vtable';
```
## 绘制一个简单的列表
@@ -41,53 +41,50 @@ import { ListTable } from "@visactor/openinula-vtable";
```typescript
import Openinula from 'openinula';
import OpeninulaDOM from 'openinula-dom/client';
-import { ListTable } from "@visactor/openinula-vtable";
+import { ListTable } from '@visactor/openinula-vtable';
const option = {
columns: [
{
- field: "0",
- caption: "name",
+ field: '0',
+ title: 'name'
},
{
- field: "1",
- caption: "age",
+ field: '1',
+ title: 'age'
},
{
- field: "2",
- caption: "gender",
+ field: '2',
+ title: 'gender'
},
{
- field: "3",
- caption: "hobby",
- },
+ field: '3',
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
-Inula.render(
- ,
- document.getElementById('root')
-);
+Inula.render(, document.getElementById('root'));
```
参考[demo](../../demo-openinula/usage/option)
## 使用方式
-Openinula-VTable提供两种风格的组件供开发者使用，分别是统一标签与语法化标签。
+Openinula-VTable 提供两种风格的组件供开发者使用，分别是统一标签与语法化标签。
### 统一标签
-统一标签是指是使用一个 Table 标签，接收一个完整的`option`配置，如果项目中已经使用了 VTable ，这种方式可以快速使用Openinula-VTable。上面的例子就是一个使用统一标签的[demo](../../demo-openinula/usage/grammatical-tag)。
+统一标签是指是使用一个 Table 标签，接收一个完整的`option`配置，如果项目中已经使用了 VTable ，这种方式可以快速使用 Openinula-VTable。上面的例子就是一个使用统一标签的[demo](../../demo-openinula/usage/grammatical-tag)。
-与VTable相同Openinula-VTable提供三种表格类型：
+与 VTable 相同 Openinula-VTable 提供三种表格类型：
- ListTable: 列表表格，用于展示列表数据 [demo](../../demo-openinula/usage/grammatical-tag)
- PivotTable: 透视表格，用于展示交叉透视数据 [demo](../../demo-openinula/grammatical-tag/pivot-table)
- PivotChart: 透视图，用于展示交叉透视数据并以图表方式展示 [demo](../../demo-openinula/grammatical-tag/pivot-chart)
-这三种Openinula组件，其props定义如下：
+这三种 Openinula 组件，其 props 定义如下：
```ts
interface VTableProps extends EventsProps {
@@ -99,23 +96,23 @@ interface VTableProps extends EventsProps {
}
```
-EventsProps的定义参考事件绑定章节
+EventsProps 的定义参考事件绑定章节
-onReady是一个内置的回调事件，会在表格渲染或更新时触发，其入参分别代表表格实例对象，以及是否初次渲染。
+onReady 是一个内置的回调事件，会在表格渲染或更新时触发，其入参分别代表表格实例对象，以及是否初次渲染。
-Openinula-VTable统一标签几乎是VTable的对等功能，可以方便开发者进行Openinula版本的迁移，并且从社区或示例中心获得的option可以直接通过这种方式使用，开发者几乎没有额外的学习成本。
+Openinula-VTable 统一标签几乎是 VTable 的对等功能，可以方便开发者进行 Openinula 版本的迁移，并且从社区或示例中心获得的 option 可以直接通过这种方式使用，开发者几乎没有额外的学习成本。
### 语法化标签
-语法化标签是指Openinula-VTable将表格中的部分组件封装为Openinula组件导出给开发者，开发者可以通过更加语义化、更接近原生Openinula声明的方式来定义表格。需要说明的是语法化标签的定义内容，在多数场景下都是可以和表格描述`option`进行相互转化的。
+语法化标签是指 Openinula-VTable 将表格中的部分组件封装为 Openinula 组件导出给开发者，开发者可以通过更加语义化、更接近原生 Openinula 声明的方式来定义表格。需要说明的是语法化标签的定义内容，在多数场景下都是可以和表格描述`option`进行相互转化的。
-需要注意的是：虽然图表在定义上是通过Openinula组件的形式进行声明的，但实际实现中并不是将其解析为DOM进行渲染，因此假如使用审查元素时并不能看到各个图表组件对应的DOM。
+需要注意的是：虽然图表在定义上是通过 Openinula 组件的形式进行声明的，但实际实现中并不是将其解析为 DOM 进行渲染，因此假如使用审查元素时并不能看到各个图表组件对应的 DOM。
#### ListTable
-ListTable接受的props属性与option一致，ListTable中的子组件如下
+ListTable 接受的 props 属性与 option 一致，ListTable 中的子组件如下
-- ListColumn: 列表列，同option中的columns的定义一致 [api](../../option/ListTable-columns-text#cellType)
+- ListColumn: 列表列，同 option 中的 columns 的定义一致 [api](../../option/ListTable-columns-text#cellType)
```jsx
import { ListTable, ListColumn } from '../../../src';
@@ -123,87 +120,88 @@ function App() {
// ......
return (
-
-
-
-
+
+
+
+
);
}
```
-语法化标签demo：[demo](../../demo-openinula/usage/grammatical-tag)
+语法化标签 demo：[demo](../../demo-openinula/usage/grammatical-tag)
#### PivotTable&PivotChart
-PivotTable&PivotChart接受的props属性与option一致，子组件如下：
+PivotTable&PivotChart 接受的 props 属性与 option 一致，子组件如下：
-- PivotColumnDimension: 列上的维度配置，同option中的columns的定义一致 [api](../../option/PivotTable-columns-text#headerType)
-- PivotRowDimension: 行上的维度配置，同option中的rows的定义一致 [api](../../option/PivotTable-rows-text#headerType)
-- PivotIndicator: 指标配置，同option中的indicators的定义一致 [api](../../option/PivotTable-indicators-text#cellType)
-- PivotColumnHeaderTitle: 列表头标题配置，同option中的columnHeaderTitle的定义一致 [api](../../option/PivotTable#rowHeaderTitle)
-- PivotRowHeaderTitle: 行头标题配置，同option中的rowHeaderTitle的定义一致 [api](../../option/PivotTable#columnHeaderTitle)
-- PivotCorner: 角头配置，同option中的corner的定义一致 [api](../../option/PivotTable#corner)
+- PivotColumnDimension: 列上的维度配置，同 option 中的 columns 的定义一致 [api](../../option/PivotTable-columns-text#headerType)
+- PivotRowDimension: 行上的维度配置，同 option 中的 rows 的定义一致 [api](../../option/PivotTable-rows-text#headerType)
+- PivotIndicator: 指标配置，同 option 中的 indicators 的定义一致 [api](../../option/PivotTable-indicators-text#cellType)
+- PivotColumnHeaderTitle: 列表头标题配置，同 option 中的 columnHeaderTitle 的定义一致 [api](../../option/PivotTable#rowHeaderTitle)
+- PivotRowHeaderTitle: 行头标题配置，同 option 中的 rowHeaderTitle 的定义一致 [api](../../option/PivotTable#columnHeaderTitle)
+- PivotCorner: 角头配置，同 option 中的 corner 的定义一致 [api](../../option/PivotTable#corner)
```jsx
- return (
-
-
-
-
-
-
-
-
-
-
- );
-
+return (
+
+
+
+
+
+
+
+
+
+
+);
```
-语法化标签demo：[PivotTable demo](../../demo-openinula/grammatical-tag/pivot-table) [PivotChart demo](../../demo-openinula/grammatical-tag/pivot-chart)
+
+语法化标签 demo：[PivotTable demo](../../demo-openinula/grammatical-tag/pivot-table) [PivotChart demo](../../demo-openinula/grammatical-tag/pivot-chart)
#### 表格外组件
表格外组件目前支持：
-- Menu: 下拉菜单组件，同option中的menu的定义一致 [api](../../option/ListTable#menu)
-- Tooltip: tooltip组件，同option中的tooltip的定义一致 [api](../../option/ListTable#tooltip)
+- Menu: 下拉菜单组件，同 option 中的 menu 的定义一致 [api](../../option/ListTable#menu)
+- Tooltip: tooltip 组件，同 option 中的 tooltip 的定义一致 [api](../../option/ListTable#tooltip)
```jsx
// ......
```
### 事件绑定
-统一标签或是语法化表格标签最外层表格组件，其Props上都继承了表格的事件处理回调EventsProps。
+统一标签或是语法化表格标签最外层表格组件，其 Props 上都继承了表格的事件处理回调 EventsProps。
+
+EventsProps 的定义如下：
-EventsProps的定义如下：
```ts
interface EventsProps {
onClickCell?: EventCallback;
@@ -247,7 +245,8 @@ interface EventsProps {
onMouseLeaveAxis?: EventCallback;
onCheckboxStateChange?: EventCallback;
- onRadioStateChange?: EventCallback; onAfterRender?: EventCallback;
+ onRadioStateChange?: EventCallback;
+ onAfterRender?: EventCallback;
onInitialized?: EventCallback;
// pivot table only
@@ -260,6 +259,7 @@ interface EventsProps {
```
事件使用示例：
+
```jsx
function App() {
const option = {
diff --git a/docs/assets/guide/zh/Developer_Ecology/react.md b/docs/assets/guide/zh/Developer_Ecology/react.md
index 82c73e997..7d7311ed2 100644
--- a/docs/assets/guide/zh/Developer_Ecology/react.md
+++ b/docs/assets/guide/zh/Developer_Ecology/react.md
@@ -29,7 +29,7 @@ yarn add @visactor/react-vtable
推荐使用 npm 包引入
```js
-import { ListTable } from "@visactor/react-vtable";
+import { ListTable } from '@visactor/react-vtable';
```
## 绘制一个简单的列表
@@ -41,32 +41,32 @@ import { ListTable } from "@visactor/react-vtable";
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
-import { ListTable } from "@visactor/react-vtable";
+import { ListTable } from '@visactor/react-vtable';
const option = {
columns: [
{
- field: "0",
- caption: "name",
+ field: '0',
+ title: 'name'
},
{
- field: "1",
- caption: "age",
+ field: '1',
+ title: 'age'
},
{
- field: "2",
- caption: "gender",
+ field: '2',
+ title: 'gender'
},
{
- field: "3",
- caption: "hobby",
- },
+ field: '3',
+ title: 'hobby'
+ }
],
- records: new Array(1000).fill(["John", 18, "male", "🏀"]),
+ records: new Array(1000).fill(['John', 18, 'male', '🏀'])
};
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+
);
```
@@ -74,19 +74,19 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
## 使用方式
-React-VTable提供两种风格的组件供开发者使用，分别是统一标签与语法化标签。
+React-VTable 提供两种风格的组件供开发者使用，分别是统一标签与语法化标签。
### 统一标签
-统一标签是指是使用一个 Table 标签，接收一个完整的`option`配置，如果项目中已经使用了 VTable ，这种方式可以快速使用React-VTable。上面的例子就是一个使用统一标签的[demo](../../demo-react/usage/option)。
+统一标签是指是使用一个 Table 标签，接收一个完整的`option`配置，如果项目中已经使用了 VTable ，这种方式可以快速使用 React-VTable。上面的例子就是一个使用统一标签的[demo](../../demo-react/usage/option)。
-与VTable相同React-VTable提供三种表格类型：
+与 VTable 相同 React-VTable 提供三种表格类型：
- ListTable: 列表表格，用于展示列表数据 [demo](../../demo-react/usage/option)
- PivotTable: 透视表格，用于展示交叉透视数据 [demo](../../demo-react/grammatical-tag/pivot-table)
- PivotChart: 透视图，用于展示交叉透视数据并以图表方式展示 [demo](../../demo-react/grammatical-tag/pivot-chart)
-这三种React组件，其props定义如下：
+这三种 React 组件，其 props 定义如下：
```ts
interface VTableProps extends EventsProps {
@@ -98,23 +98,23 @@ interface VTableProps extends EventsProps {
}
```
-EventsProps的定义参考事件绑定章节
+EventsProps 的定义参考事件绑定章节
-onReady是一个内置的回调事件，会在表格渲染或更新时触发，其入参分别代表表格实例对象，以及是否初次渲染。
+onReady 是一个内置的回调事件，会在表格渲染或更新时触发，其入参分别代表表格实例对象，以及是否初次渲染。
-React-VTable统一标签几乎是VTable的对等功能，可以方便开发者进行React版本的迁移，并且从社区或示例中心获得的option可以直接通过这种方式使用，开发者几乎没有额外的学习成本。
+React-VTable 统一标签几乎是 VTable 的对等功能，可以方便开发者进行 React 版本的迁移，并且从社区或示例中心获得的 option 可以直接通过这种方式使用，开发者几乎没有额外的学习成本。
### 语法化标签
-语法化标签是指React-VTable将表格中的部分组件封装为React组件导出给开发者，开发者可以通过更加语义化、更接近原生React声明的方式来定义表格。需要说明的是语法化标签的定义内容，在多数场景下都是可以和表格描述`option`进行相互转化的。
+语法化标签是指 React-VTable 将表格中的部分组件封装为 React 组件导出给开发者，开发者可以通过更加语义化、更接近原生 React 声明的方式来定义表格。需要说明的是语法化标签的定义内容，在多数场景下都是可以和表格描述`option`进行相互转化的。
-需要注意的是：虽然图表在定义上是通过React组件的形式进行声明的，但实际实现中并不是将其解析为DOM进行渲染，因此假如使用审查元素时并不能看到各个图表组件对应的DOM。
+需要注意的是：虽然图表在定义上是通过 React 组件的形式进行声明的，但实际实现中并不是将其解析为 DOM 进行渲染，因此假如使用审查元素时并不能看到各个图表组件对应的 DOM。
#### ListTable
-ListTable接受的props属性与option一致，ListTable中的子组件如下
+ListTable 接受的 props 属性与 option 一致，ListTable 中的子组件如下
-- ListColumn: 列表列，同option中的columns的定义一致 [api](../../option/ListTable-columns-text#cellType)
+- ListColumn: 列表列，同 option 中的 columns 的定义一致 [api](../../option/ListTable-columns-text#cellType)
```jsx
import { ListTable, ListColumn } from '../../../src';
@@ -122,87 +122,88 @@ function App() {
// ......
return (
-
-
-
-
+
+
+
+
);
}
```
-语法化标签demo：[demo](../../demo-react/usage/grammatical-tag)
+语法化标签 demo：[demo](../../demo-react/usage/grammatical-tag)
#### PivotTable&PivotChart
-PivotTable&PivotChart接受的props属性与option一致，子组件如下：
+PivotTable&PivotChart 接受的 props 属性与 option 一致，子组件如下：
-- PivotColumnDimension: 列上的维度配置，同option中的columns的定义一致 [api](../../option/PivotTable-columns-text#headerType)
-- PivotRowDimension: 行上的维度配置，同option中的rows的定义一致 [api](../../option/PivotTable-rows-text#headerType)
-- PivotIndicator: 指标配置，同option中的indicators的定义一致 [api](../../option/PivotTable-indicators-text#cellType)
-- PivotColumnHeaderTitle: 列表头标题配置，同option中的columnHeaderTitle的定义一致 [api](../../option/PivotTable#rowHeaderTitle)
-- PivotRowHeaderTitle: 行头标题配置，同option中的rowHeaderTitle的定义一致 [api](../../option/PivotTable#columnHeaderTitle)
-- PivotCorner: 角头配置，同option中的corner的定义一致 [api](../../option/PivotTable#corner)
+- PivotColumnDimension: 列上的维度配置，同 option 中的 columns 的定义一致 [api](../../option/PivotTable-columns-text#headerType)
+- PivotRowDimension: 行上的维度配置，同 option 中的 rows 的定义一致 [api](../../option/PivotTable-rows-text#headerType)
+- PivotIndicator: 指标配置，同 option 中的 indicators 的定义一致 [api](../../option/PivotTable-indicators-text#cellType)
+- PivotColumnHeaderTitle: 列表头标题配置，同 option 中的 columnHeaderTitle 的定义一致 [api](../../option/PivotTable#rowHeaderTitle)
+- PivotRowHeaderTitle: 行头标题配置，同 option 中的 rowHeaderTitle 的定义一致 [api](../../option/PivotTable#columnHeaderTitle)
+- PivotCorner: 角头配置，同 option 中的 corner 的定义一致 [api](../../option/PivotTable#corner)
```jsx
- return (
-
-
-
-
-
-
-
-
-
-
- );
-
+return (
+
+
+
+
+
+
+
+
+
+
+);
```
-语法化标签demo：[PivotTable demo](../../demo-react/grammatical-tag/pivot-table) [PivotChart demo](../../demo-react/grammatical-tag/pivot-chart)
+
+语法化标签 demo：[PivotTable demo](../../demo-react/grammatical-tag/pivot-table) [PivotChart demo](../../demo-react/grammatical-tag/pivot-chart)
#### 表格外组件
表格外组件目前支持：
-- Menu: 下拉菜单组件，同option中的menu的定义一致 [api](../../option/ListTable#menu)
-- Tooltip: tooltip组件，同option中的tooltip的定义一致 [api](../../option/ListTable#tooltip)
+- Menu: 下拉菜单组件，同 option 中的 menu 的定义一致 [api](../../option/ListTable#menu)
+- Tooltip: tooltip 组件，同 option 中的 tooltip 的定义一致 [api](../../option/ListTable#tooltip)
```jsx
// ......
```
### 事件绑定
-统一标签或是语法化表格标签最外层表格组件，其Props上都继承了表格的事件处理回调EventsProps。
+统一标签或是语法化表格标签最外层表格组件，其 Props 上都继承了表格的事件处理回调 EventsProps。
+
+EventsProps 的定义如下：
-EventsProps的定义如下：
```ts
interface EventsProps {
onClickCell?: EventCallback;
@@ -260,6 +261,7 @@ interface EventsProps {
```
事件使用示例：
+
```jsx
function App() {
const option = {
@@ -280,7 +282,7 @@ function App() {
## 自定义外部组件
-为了方便在React-VTable组件上叠加外部组件，React-VTable提供了`CustomComponent`工具组件，方便快速将外部组件定位到表格当中。
+为了方便在 React-VTable 组件上叠加外部组件，React-VTable 提供了`CustomComponent`工具组件，方便快速将外部组件定位到表格当中。
```jsx
@@ -308,7 +310,16 @@ interface CustomComponentProps {
displayMode: 'position' | 'cell'; // 定位方式
col?: number; // 锚定的列坐标
row?: number; // 锚定的行坐标
- anchor?: 'top-left' | 'top-center' | 'top-right' |'middle-left' |'middle-center' |'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; // 锚定的位置
+ anchor?:
+ | 'top-left'
+ | 'top-center'
+ | 'top-right'
+ | 'middle-left'
+ | 'middle-center'
+ | 'middle-right'
+ | 'bottom-left'
+ | 'bottom-center'
+ | 'bottom-right'; // 锚定的位置
dx?: number | string; // x方向的偏移
dy?: number | string; // y方向的偏移
width?: number | string; // 容器的宽度
@@ -316,4 +327,4 @@ interface CustomComponentProps {
}
```
-自定义外部组件demo：[custom component demo](../../demo-react/component/custom-component)
+自定义外部组件 demo：[custom component demo](../../demo-react/component/custom-component)
diff --git a/docs/vite.config.js b/docs/vite.config.js
index a400b3d03..396f4d2ec 100644
--- a/docs/vite.config.js
+++ b/docs/vite.config.js
@@ -22,6 +22,7 @@ export default {
'@visactor/vtable-search': path.resolve('../packages/vtable-search/src/index.ts'),
'@visactor/react-vtable': path.resolve('../packages/react-vtable/src/index.ts'),
'@visactor/openinula-vtable': path.resolve('../packages/openinula-vtable/src/index.ts'),
+ '@vutils-extension': path.resolve(__dirname, '../packages/vtable/src/vutil-extension-temp'),
'@src': path.resolve(__dirname, '../packages/vtable/src/'),
// react: 'openinula', // 新增