VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns. Vue-VTable is the Vue wrapper of VTable.
// npm
npm install @visactor/vue-vtable
// yarn
yarn add @visactor/vue-vtable<template>
<vue-list-table :options="tableOptions"/>
</template>
<script>
export default {
data() {
const option = {
header: [
{
field: '0',
caption: '名称'
},
{
field: '1',
caption: '年龄'
},
{
field: '2',
caption: '性别'
},
{
field: '3',
caption: '爱好'
}
],
records: new Array(1000).fill(['Yelineee', 18, '男', '🏀'])
};
return {
tableOptions: option
};
}
};
</script><template>
<vue-pivot-chart :options="tableOptions" ref="pivotChartRef" @onLegendItemClick="handleLegendItemClick" :height="800">
<PivotRowDimension
v-for="row in rows"
:dimensionKey="row.dimensionKey"
:title="row.title"
:headerStyle="row.headerStyle"
:objectHandler="row"
/>
<PivotColumnDimension
v-for="column in columns"
:dimensionKey="column.dimensionKey"
:title="column.title"
:headerStyle="column.headerStyle"
:objectHandler="column"
/>
<PivotIndicator
v-for="indicator in indicators"
:indicatorKey="indicator.indicatorKey"
:title="indicator.title"
:cellType="indicator.cellType"
:chartModule="indicator.chartModule"
:chartSpec="indicator.chartSpec"
:style="indicator.style"
/>
<PivotCorner
:titleOnDimension="corner.titleOnDimension"
:headerStyle="corner.headerStyle"
/>
</vue-pivot-chart>
</template>More demos and detailed tutorials
| Project | Description |
|---|---|
| AI-generated Components | AI-generated table component. |
If you would like to contribute, please read the Code of Conduct 和 Guide first。
Small streams converge to make great rivers and seas!