Input Formats

The input data is a set of records with attributes which can be passed in in a number of ways... Note: attributes are assumed to be scalar values (i.e. strings or numbers) and not objects!

CSV Files

PivotTable.js can consume the output of jquery-csv or PapaParse

<script>
    var input = $.csv.toArrays(csvString);
</script>

<script>
    Papa.parse("file.csv", { 
        download: true, 
        complete: function(parsed){ $("#output").pivotUI(parsed.data) } 
    });
</script>

Two demos of this can be found here: loading a CSV file from a server and loading a CSV file from your local machine without uploading to a server

Arrays of objects

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

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

<script>
    var input = [
        {
            "attr1": "value1_attr1",
            "attr2": "value1_attr2",
            //...
        },
        {
            "attr1": "value2_attr1",
            "attr2": "value2_attr2",
            //...
        },
        //...
    ];
</script>

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.

<script>
    var input = [
        ["attr1", "attr2"],
        ["value1_attr1", "value1_attr2"],
        ["value2_attr1", "value2_attr2"],
        //...
    ];
</script>

Functions that call back

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

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

<script>
    var input = function(callback) {
        callback({
            "attr1": "value1_attr1",
            "attr2": "value1_attr2",
            //...
        });
        callback({
            "attr1": "value2_attr1",
            "attr2": "value2_attr2",
            //...
        };
        //...
    };
</script>

jQuery References to Simple Tables

If there exists in the DOM a table with a thead and tbody then a jQuery reference to that table will be accepted as input. Attribute names are assumed to be in th elements in thead and values are assumed to be in td elements in tbody. See example.

<script>
    var input = $("#input");
</script>

<table id="input">
    <thead>
        <tr>
            <th>attr1</th>
            <th>attr2</th>
            <!-- etc... -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value1_attr1</td>
            <td>value1_attr2</td>
        </tr>
        <tr>
            <td>value2_attr1</td>
            <td>value2_attr2</td>
        </tr>
            <!-- etc... -->
    </tbody>
</table>