• Stars
    star
    907
  • Rank 50,358 (Top 1.0 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React-based drag'n'drop pivot table with Plotly.js charts

react-pivottable

react-pivottable is a React-based pivot table library with drag'n'drop functionality. It is a React port of the jQuery-based PivotTable.js by the same author.

react-pivottable is part of Plotly's React Component Suite for building data visualization Web apps and products.

What does it do & where is the demo?

react-pivottable's function is to enable data exploration and analysis by summarizing a data set into table or Plotly.js chart with a true 2-d drag'n'drop UI, very similar to the one found in older versions of Microsoft Excel.

A live demo can be found here.

screencap

How can I use it in my project?

Drag'n'drop UI with Table output only

Installation is via NPM and has a peer dependency on React:

npm install --save react-pivottable react react-dom

Basic usage is as follows. Note that PivotTableUI is a "dumb component" that maintains essentially no state of its own.

import React from 'react';
import ReactDOM from 'react-dom';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';

// see documentation for supported input formats
const data = [['attribute', 'attribute2'], ['value1', 'value2']];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = props;
    }

    render() {
        return (
            <PivotTableUI
                data={data}
                onChange={s => this.setState(s)}
                {...this.state}
            />
        );
    }
}

ReactDOM.render(<App />, document.body);

Drag'n'drop UI with Plotly charts as well as Table output

The Plotly react-plotly.js component can be passed in via dependency injection. It has a peer dependency on plotly.js.

Important: If you build your project using webpack, you'll have to follow these instructions in order to successfully bundle plotly.js. See below for how to avoid having to bundle plotly.js.

npm install --save react-pivottable react-plotly.js plotly.js react react-dom

To add the Plotly renderers to your app, you can use the following pattern:

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import Plot from 'react-plotly.js';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);

// see documentation for supported input formats
const data = [['attribute', 'attribute2'], ['value1', 'value2']];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = props;
    }

    render() {
        return (
            <PivotTableUI
                data={data}
                onChange={s => this.setState(s)}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state}
            />
        );
    }
}

ReactDOM.render(<App />, document.body);

With external plotly.js

If you would rather not install and bundle plotly.js but rather get it into your app via something like <script> tag, you can ignore react-plotly.js' peer-dependcy warning and handle the dependency injection like this:

import React from 'react';
import PivotTableUI from 'react-pivottable/PivotTableUI';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import createPlotlyComponent from 'react-plotly.js/factory';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';

// create Plotly React component via dependency injection
const Plot = createPlotlyComponent(window.Plotly);

// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);

// see documentation for supported input formats
const data = [['attribute', 'attribute2'], ['value1', 'value2']];

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = props;
    }

    render() {
        return (
            <PivotTableUI
                data={data}
                onChange={s => this.setState(s)}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state}
            />
        );
    }
}

ReactDOM.render(<App />, document.body);

Properties and layered architecture

  • <PivotTableUI {...props} />
    • <PivotTable {...props} />
      • <Renderer {...props} />
        • PivotData(props)

The interactive component provided by react-pivottable is PivotTableUI, but output rendering is delegated to the non-interactive PivotTable component, which accepts a subset of its properties. PivotTable can be invoked directly and is useful for outputting non-interactive saved snapshots of PivotTableUI configurations. PivotTable in turn delegates to a specific renderer component, such as the default TableRenderer, which accepts a subset of the same properties. Finally, most renderers will create non-React PivotData object to handle the actual computations, which also accepts a subset of the same props as the rest of the stack.

Here is a table of the properties accepted by this stack, including an indication of which layer consumes each, from the bottom up:

Layer Key & Type Default Value Description
PivotData data
see below for formats
(none, required) data to be summarized
PivotData rows
array of strings
[] attribute names to prepopulate in row area
PivotData cols
array of strings
[] attribute names to prepopulate in cols area
PivotData vals
array of strings
[] attribute names used as arguments to aggregator (gets passed to aggregator generating function)
PivotData aggregators
object of functions
aggregators from Utilites dictionary of generators for aggregation functions in dropdown (see original PivotTable.js documentation)
PivotData aggregatorName
string
first key in aggregators key to aggregators object specifying the aggregator to use for computations
PivotData valueFilter
object of arrays of strings
{} object whose keys are attribute names and values are objects of attribute value-boolean pairs which denote records to include or exclude from computation and rendering; used to prepopulate the filter menus that appear on double-click
PivotData sorters
object or function
{} accessed or called with an attribute name and can return a function which can be used as an argument to array.sort for output purposes. If no function is returned, the default sorting mechanism is a built-in "natural sort" implementation. Useful for sorting attributes like month names, see original PivotTable.js example 1 and original PivotTable.js example 2.
PivotData rowOrder
string
"key_a_to_z" the order in which row data is provided to the renderer, must be one of "key_a_to_z", "value_a_to_z", "value_z_to_a", ordering by value orders by row total
PivotData colOrder
string
"key_a_to_z" the order in which column data is provided to the renderer, must be one of "key_a_to_z", "value_a_to_z", "value_z_to_a", ordering by value orders by column total
PivotData derivedAttributes
object of functions
{} defines derived attributes (see original PivotTable.js documentation)
Renderer <any> (none, optional) Renderers may accept any additional properties
PivotTable renderers
object of functions
TableRenderers dictionary of renderer components
PivotTable rendererName
string
first key in renderers key to renderers object specifying the renderer to use
PivotTableUI onChange
function
(none, required) function called every time anything changes in the UI, with the new value of the properties needed to render the new state. This function must be hooked into a state-management system in order for the "dumb" PivotTableUI component to work.
PivotTableUI hiddenAttributes
array of strings
[] contains attribute names to omit from the UI
PivotTableUI hiddenFromAggregators
array of strings
[] contains attribute names to omit from the aggregator arguments dropdowns
PivotTableUI hiddenFromDragDrop
array of strings
[] contains attribute names to omit from the drag'n'drop portion of the UI
PivotTableUI menuLimit
integer
500 maximum number of values to list in the double-click menu
PivotTableUI unusedOrientationCutoff
integer
85 If the attributes' names' combined length in characters exceeds this value then the unused attributes area will be shown vertically to the left of the UI instead of horizontally above it. 0 therefore means 'always vertical', and Infinity means 'always horizontal'.

Accepted formats for data

Arrays of objects

One object per record, the object's keys are the attribute names.

Note: missing attributes or attributes with a value of null are treated as if the value was the string "null".

const data = [
    {
        attr1: 'value1_attr1',
        attr2: 'value1_attr2',
        //...
    },
    {
        attr1: 'value2_attr1',
        attr2: 'value2_attr2',
        //...
    },
    //...
];

Arrays of arrays

One sub-array per record, the first sub-array contains the attribute names. If subsequent sub-arrays are shorter than the first one, the trailing values are treated as if they contained the string value "null". If subsequent sub-arrays are longer than the first one, excess values are ignored. This format is compatible with the output of CSV parsing libraries like PapaParse.

const data = [
    ['attr1', 'attr2'],
    ['value1_attr1', 'value1_attr2'],
    ['value2_attr1', 'value2_attr2'],
    //...
];

Functions that call back

The function will be called with a callback that takes an object as a parameter.

Note: missing attributes or attributes with a value of null are treated as if the value was the string "null".

const data = function(callback) {
    callback({
        "attr1": "value1_attr1",
        "attr2": "value1_attr2",
        //...
    });
    callback({
        "attr1": "value2_attr1",
        "attr2": "value2_attr2",
        //...
    };
    //...
};

More Repositories

1

dash

Data Apps & Dashboards for Python. No JavaScript Required.
Python
19,422
star
2

plotly.js

Open-source JavaScript charting library behind Plotly and Dash
JavaScript
16,743
star
3

plotly.py

The interactive graphing library for Python ✨ This project now includes Plotly Express!
Python
15,980
star
4

falcon

Free, open-source SQL client for Windows and Mac 🦅
JavaScript
5,130
star
5

dash-sample-apps

Open-source demos hosted on Dash Gallery
Jupyter Notebook
3,133
star
6

plotly.R

An interactive graphing library for R
R
2,549
star
7

plotly.rs

Plotly for Rust
Rust
1,093
star
8

dash-recipes

A collection of scripts and examples created while answering questions from the greater Dash community
Python
989
star
9

react-plotly.js

A plotly.js React component from Plotly 📈
JavaScript
922
star
10

jupyter-dash

Develop Dash apps in the Jupyter Notebook and JupyterLab
Python
906
star
11

plotly_express

Plotly Express - Simple syntax for complex charts. Now integrated into plotly.py!
Python
685
star
12

Plotly.NET

interactive graphing library for .NET programming languages 📈
F#
654
star
13

datasets

Datasets used in Plotly examples and documentation
HTML
637
star
14

dash-cytoscape

Interactive network visualization in Python and Dash, powered by Cytoscape.js
Python
592
star
15

dash-bio

Open-source bioinformatics components for Dash
Python
528
star
16

Dash.jl

Dash for Julia - A Julia interface to the Dash ecosystem for creating analytic web applications in Julia. No JavaScript required.
Julia
486
star
17

react-cytoscapejs

React component for Cytoscape.js network visualisations
JavaScript
472
star
18

react-chart-editor

Customizable React-based editor panel for Plotly charts
JavaScript
460
star
19

spectacle-editor

Drag and drop Spectacle editor.
JavaScript
442
star
20

dash-table

OBSOLETE: now part of https://github.com/plotly/dash
Python
421
star
21

documentation

Issue tracker for Plotly's open-source documentation.
419
star
22

dashR

Create data science and AI web apps in R
JavaScript
382
star
23

plotly_matlab

Plotly Graphing Library for MATLAB®
MATLAB
375
star
24

dash-docs

📖 ISSUE TRACKER ONLY for The Official Dash Userguide & Documentation https://dash.plotly.com/
Python
371
star
25

Kaleido

Fast static image export for web-based visualization libraries with zero dependencies
PostScript
362
star
26

jupyterlab-dash

An Extension for the Interactive development of Dash apps in JupyterLab
Python
360
star
27

orca

Command line application for generating static images of interactive plotly charts
JavaScript
294
star
28

dash-core-components

OBSOLETE: now part of https://github.com/plotly/dash
Python
270
star
29

dash-component-boilerplate

Get started creating your own Dash components here.
Python
269
star
30

IPython-plotly

A collection of data science IPython notebooks with Plotly graphs
HTML
266
star
31

angular-plotly.js

TypeScript
229
star
32

jupyterlab-chart-editor

JupyterLab extension for Plotly's react-chart-editor
TypeScript
213
star
33

arduino-api

Arduino library for real-time logging and streaming data to online plotly graphs
Python
209
star
34

dash-pivottable

react-pivottable in Dash
Python
192
star
35

dash-oil-and-gas-demo

Dash Demo App - New York Oil and Gas
Python
182
star
36

plotlyjs-flask-example

A simple plotly.js example served with flask
Python
179
star
37

dashboards

Superseded by Dash!
179
star
38

dash-detr

A User Interface for DETR built with Dash. 100% Python.
Python
178
star
39

dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
JavaScript
175
star
40

dash-ag-grid

Dash AG Grid is a high-performance and highly customizable component that wraps AG Grid, designed for creating rich datagrids.
Python
170
star
41

plotly-nodejs

node.js wrapper for Plotly's Chart Studio Streaming and REST APIs
JavaScript
166
star
42

colorlover

Color scales in Python for humans
Python
158
star
43

dash-html-components

OBSOLETE - now part of https://github.com/plotly/dash
Python
154
star
44

dash-svm

Interactive SVM Explorer, using Dash and scikit-learn
Python
153
star
45

Streaming-Demos

Demos of Plotly's Real-time Streaming API
Jupyter Notebook
149
star
46

dash-labs

Work-in-progress technical previews of potential future Dash features.
Python
139
star
47

dash-daq

Control components for Dash
JavaScript
137
star
48

dash-technical-charting

Powerful technical charting app/interface in pure Python
Python
133
star
49

dash-stock-tickers-demo-app

Dash Demo App - Stock Tickers
CSS
131
star
50

dash-vtk

Bringing vtk.js into Dash and Python
Python
120
star
51

dash-salesforce-crm

118
star
52

python-user-guide

MOVED!
115
star
53

dashboards.ly

Superseded by Dash!
HTML
107
star
54

dash-renderer

OBSOLETE has been merged into dash
JavaScript
97
star
55

Plotly.jl

A Julia interface to the plot.ly plotting library and cloud services
Julia
93
star
56

raspberrypi

Realtime Streaming with the Raspberry Pi and Plot.ly Python Library
Python
91
star
57

dash-deck

Bringing deck.gl and pydeck into Dash
JavaScript
90
star
58

dash-canvas

An interactive image editing component for Dash
Python
84
star
59

dash-image-processing

Dash Demo App - Image Processing App
Python
82
star
60

dash-volatility-surface

Volatility surface explorer in pure Python
Python
79
star
61

dash-player

Dash Component wrapping React-Player
Python
77
star
62

dash-world-cell-towers

A Dash app for exploring the world cell tower dataset provided by OpenCellid
Python
72
star
63

dash-auth

Basic Auth and Plotly Authentication for Dash Apps
Python
72
star
64

Dash.NET

F# interface to Dash- the most downloaded framework for building ML & data science web apps
F#
68
star
65

dash-alternative-viz

Dash components & demos to create Altair, Matplotlib, Highcharts , and Bokeh graphs within Dash apps.
JavaScript
67
star
66

dash-heroku-template

Fool-proof template for deploying Dash apps on Heroku
Python
64
star
67

simple-example-chart-apps

Some very simple apps to demonstrate the chart types on the Plotly website.
CSS
54
star
68

postMessage-API

Bind custom interactivity to embedded Plotly graphs
HTML
52
star
69

graphing-library-docs

Plotly's graphing libraries documentation.
Jupyter Notebook
52
star
70

rasterly

Rapidly generate raster images from large datasets in R with Plotly.js
R
48
star
71

dash-opioid-epidemic-demo

US county data for poision-induced deaths, years 1999-2015
HTML
48
star
72

dash-redis-celery-periodic-updates

Demo apps now maintained in https://github.com/plotly/dash-enterprise-docs
Python
48
star
73

dash-dangerously-set-inner-html

Dash component to dangerously set inner raw HTML
Python
45
star
74

dash-px

Simple Dash app using Plotly Express
Python
43
star
75

dash-sunburst

Dash / React + D3 tutorial: Sunburst diagrams
Python
43
star
76

dash-network

A tutorial & demo on how to port the D3 force-layout network diagram to Dash
JavaScript
43
star
77

academy

CSS
42
star
78

public-health

âš• Tutorials for public health crossfilter dashboards
42
star
79

ruby-api

A Ruby wrapper to the plot.ly REST API.
Ruby
41
star
80

react-colorscales

A React UI component for picking and modifying colorscales
JavaScript
37
star
81

dash-yield-curve

Remake of the NYTimes yield curve demo
CSS
37
star
82

dash-app-stylesheets

Hosting Dash app stylesheets
CSS
36
star
83

plotly.github.io

Help pages for Chart Studio
CSS
35
star
84

dash-dbx-sql

Simple Dash app demonstrating connection to Databricks via the Python SQL connector
Python
35
star
85

plotly-notebook-js

A package for using plotly in Tonicdev and Jupyter notebooks.
JavaScript
34
star
86

canvas-portal

Gallery of examples for dash-canvas
CSS
34
star
87

dash-brain-surface-viewer

Dash app for viewing brain surfaces saved as MNI files. Data from https://github.com/aces/brainbrowser
Python
33
star
88

dash-components-archetype

Deprecated. A Builder archetype for Dash component suites. See the new version here: https://github.com/plotly/dash-component-boilerplate
JavaScript
32
star
89

R-User-Guide

The Official User-Guide to Plotly's R API and ggplotly
31
star
90

plotly.js-crossfilter.js

A simple example showing Plotly.js and Crossfilter.js working together.
JavaScript
31
star
91

all-in-ai-demo-app

Dash application presented by Nathan Drezner at the All in AI (https://allinevent.ai/) conference in Montreal on September 27, 2023
Python
31
star
92

plotly-webpack

Example repo for bundling plotly.js with webpack and browserify
JavaScript
30
star
93

spotfire

Create D3.js visualizations in spotfire with Plotly
29
star
94

dash-alternative-viz-demo

Components for using Dash with Matplotlib, Seaborn, Bokeh, Holoviews, and Altair.
Python
28
star
95

dashdub

Convert speech to text with Dash & Python
Jupyter Notebook
28
star
96

plotcon-2017-plotlyjs-workshop

Syllabus and materials for plotly.js workshop at PLOTCON 2017
28
star
97

workshop

Plotly API Hardware Use Cases
Arduino
27
star
98

react-ipython-notebook

React component for nbconvert.js
JavaScript
27
star
99

excel-plugin

Plotly Excel Plugin
C#
26
star
100

dash-datashader

A demo app for visualizing hundreds of millions of data points interactively with Dash and Datashader.
Python
25
star