mirror of https://github.com/VisActor/VTable synced 2024-11-22 10:03:28 +00:00

History

github-actions[bot] 7b97ca40ba build: prelease version 1.10.4		2024-11-07 13:37:20 +00:00
..
demo	fix: remove unnecessary elements in demo for cleaner code	2024-11-01 14:25:51 +08:00
src	fix: fix build problem in vue-vtable	2024-11-07 11:42:45 +08:00
.eslintrc.js	feat: initial commit	2024-09-04 17:48:22 +08:00
bundler.config.js	chore: add vue build method	2024-09-24 16:23:57 +08:00
package.json	build: prelease version 1.10.4	2024-11-07 13:37:20 +00:00
README.md	docs: update Vue-VTable README	2024-09-11 10:10:02 +08:00
setup-mock.js	feat: initial commit	2024-09-04 17:48:22 +08:00
tscofig.eslint.json	feat: initial commit	2024-09-04 17:48:22 +08:00
tsconfig.json	feat: initial commit	2024-09-04 17:48:22 +08:00

README.md

Vue-VTable

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>

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