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.

Usage

Installation

npm package

// npm
npm install @visactor/vue-vtable

// yarn
yarn add @visactor/vue-vtable

Quick Start

unified tag

<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>

gramatical tag

<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

Related Links

• Official website

Ecosystem

| Project | Description | | -------------------------------------------------------- | ----------------------------- | | AI-generated Components | AI-generated table component. |

Contribution

If you would like to contribute, please read the Code of Conduct 和 Guide first。

Small streams converge to make great rivers and seas!

License

MIT License