svelte-pivottable

This is a Svelte component implementation of react-pivottable-grouping that is itself a fork of react-pivottable with added capacity of grouping and displaying subtotals.

svelte-pivottable

svelte-pivottable is a Svelte-based pivot table library with drag'n'drop functionality.

It is based on the original work of Nicolas Kruchten author of react-pivottable a React port of the jQuery-based PivotTable.js by the same author.

What does it do & where is the demo?

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

How can I use it in my project?

Drag'n'drop UI with Table output only

Installation is via NPM or Yarn:

npm install --save svelte-pivottable

yarn add svelte-pivottable

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

<script>
    import { PivotTableUI } from "svelte-pivottable/PivotTableUI";

    const options = {
        // see documenation for supported options
        };

    // see documentation for supported input formats
    const data = [
        ["attribute", "attribute2"],
        ["value1", "value2"],
    ];
</script>

<PivotTableUI {...options} {data}>

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

The Plotly plotly.js component can be passed in via dependency injection.

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 plotly.js

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

<script>
    import { PivotTableUI } from "svelte-pivottable/PivotTableUI";
    import TableRenderers from "svelte-pivottable/TableRenderers";
    import Plotly from "plotly.js";
    import PlotlyRenderers from "svelte-pivottable/PlotlyRenderers";

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

    // see documentation for supported input formats
    const data = [
        ["attribute", "attribute2"],
        ["value1", "value2"],
    ];
</script>

<PivotTableUI
    data={data}
    renderers={Object.assign({}, TableRenderers, plotlyRenderers)}
/>

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 handle the dependency injection like this:

<script>
    import { PivotTableUI } from "svelte-pivottable/PivotTableUI";
    import TableRenderers from "svelte-pivottable/TableRenderers";
    import PlotlyRenderers from "svelte-pivottable/PlotlyRenderers";

    // create Plotly renderers via dependency injection
    const plotlyRenderers = PlotlyRenderers(window.Plotly);

    // see documentation for supported input formats
    const data = [
        ["attribute", "attribute2"],
        ["value1", "value2"],
    ];
</script>

<PivotTableUI
    data={data}
    renderers={...TableRenderers, ...plotlyRenderers)}
/>

Properties and layered architecture

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

The interactive component provided by svelte-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 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:

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",
        //...
    };
    //...
};