Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Seungwoo321/vue-pivottable

It is a Vue port of the jQuery-based PivotTable.js
https://github.com/Seungwoo321/vue-pivottable

hacktoberfest javascript pivottable vue vue-pivottable vue-plotly

Last synced: about 1 month ago
JSON representation

It is a Vue port of the jQuery-based PivotTable.js

Host: GitHub
URL: https://github.com/Seungwoo321/vue-pivottable
Owner: Seungwoo321
License: mit
Created: 2019-08-22T12:07:13.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2024-04-01T09:06:38.000Z (about 2 months ago)
Last Synced: 2024-04-02T09:58:42.478Z (about 2 months ago)
Topics: hacktoberfest, javascript, pivottable, vue, vue-pivottable, vue-plotly
Language: JavaScript
Homepage:
Size: 14.4 MB
Stars: 128
Watchers: 10
Forks: 66
Open Issues: 17
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)
awesome-vue - Vue Pivottable - Vue port of the jQuery-based PivotTable.js (Projects Using Vue.js / Open Source)

README

        
# Vue Pivottable

It is a Vue port of the jQuery-based [PivotTable.js](https://pivottable.js.org/)

[![npm](https://flat.badgen.net/npm/v/vue-pivottable)](https://npmjs.com/package/vue-pivottable)

[![npm](https://flat.badgen.net/npm/dt/vue-pivottable)](https://npmjs.com/package/vue-pivottable)

[![npm](https://flat.badgen.net/npm/license/vue-pivottable)](https://flat.badgen.net/npm/license/vue-pivottable)

[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-pivottable/badge)](https://www.jsdelivr.com/package/npm/vue-pivottable)

[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)

## Documentation

You can view the documentation at . 

It's also lighter by removing `vue-plotly` from the dependencies.

## Live Demo

[link](https://jsfiddle.net/seungwoo321/repqmz3f/)

## Example Code

```bash

# Clone the project

git clone https://github.com/Seungwoo321/vue-pivottable.git

# Go into the cloned directory

cd vue-pivottable/example/

# npm install

npm install

# npm run serve

npm run serve

```

Open browser to 

![vue-pivottable-demo.gif](https://seungwoo321.github.io/vue-pivottable-demo.gif)

## Installation

```shall

npm i vue-pivottable

```

## Usage

* Vue Pivottable

```html

  

  

import { VuePivottable } from 'vue-pivottable'

import 'vue-pivottable/dist/vue-pivottable.css'

export default {

  components: {

    VuePivottable

  }

}

```

* Vue Pivottable Ui

```html

  

  

import { VuePivottableUi } from 'vue-pivottable'

import 'vue-pivottable/dist/vue-pivottable.css'

export default {

  components: {

    VuePivottableUi

  }

}

```

* Plotly renderer

  [See docs](https://seungwoo321.github.io/vue-pivottable/guide/renderer.html#plotly-renderer-v0-4-6)

```html

  

  

import { VuePivottableUi } from 'vue-pivottable'

import PlotlyRenderer from '@vue-pivottable/plotly-renderer'

import 'vue-pivottable/dist/vue-pivottable.css'

export default {

  components: {

    VuePivottableUi

  },

  computed: {

    renderers () {

      return (() => ({

        'Grouped Column Chart': PlotlyRenderer['Grouped Column Chart'],

        'Stacked Column Chart': PlotlyRenderer['Stacked Column Chart'],

        'Grouped Bar Chart': PlotlyRenderer['Grouped Bar Chart'],

        'Stacked Bar Chart': PlotlyRenderer['Stacked Bar Chart'],

        'Line Chart': PlotlyRenderer['Line Chart'],

        'Dot Chart': PlotlyRenderer['Dot Chart'],

        'Area Chart': PlotlyRenderer['Area Chart'],

        'Scatter Chart': PlotlyRenderer['Scatter Chart'],

        'Multiple Pie Chart': PlotlyRenderer['Multiple Pie Chart']

      }))()

    }

  }

}

```

## Contributors

  

    

      
_Seungwoo321
💻

      
_rkota
🚧

      
_{Jayraj Rathwa}
🐛

      
_cbbdev
🚧

    

  

## Inspired

* [plotly/react-pivottable](https://github.com/plotly/react-pivottable) - React-based pivot table library

* [David-Desmaisons/vue-plotly](https://github.com/David-Desmaisons/vue-plotly) - vue wrapper for plotly.js

## License

MIT