PivotTable.js

PivotTable.js supports several installation methods via UMD (Universal Module Definition):

• NPM: npm install pivottable
• Bower: bower install pivottable
• Direct Script Loading: Load files from a CDN like CDNJS or copy them from the dist directory of the repository.

Required Dependencies:

• jQuery: Required in all cases.
• jQueryUI: Required specifically for the interactive pivotUI() function.
• Charting Plugins: If using chart renderers, you must also load D3.js, C3.js, and/or Google Charts.

For developers contributing to or modifying the source code:

1. Install development dependencies: npm install
2. Compile/Minify CoffeeScript: Run node_modules/gulp/bin/gulp.js to compile files into the dist directory.
3. Run tests: Open tests/index.html in a browser to run the Jasmine test suite.
4. Development Workflow: Use node_modules/gulp/bin/gulp.js watch serve to automatically compile CoffeeScript on change and run a local web server for testing and examples.

The pivot() function is a jQuery plugin that generates a static summary table from a dataset. It appends the resulting table to the selected DOM element. By default, it populates table cells with counts.

// data is an array of objects
// rows and cols are arrays of attribute names
$("#output").pivot(
    [
        {color: "blue", shape: "circle"},
        {color: "red", shape: "triangle"}
    ],
    {
        rows: ["color"],
        cols: ["shape"]
    }
);

The pivotUI() function is a jQuery plugin that generates a summary table wrapped in an interactive drag'n'drop interface. This allows users to manipulate the table by dragging attributes into row/column areas and selecting rendering, aggregation, and filtering options.

Note: pivotUI() requires jQueryUI to be loaded. Also, note that pivot() and pivotUI() generally take different parameter structures.

// data is an array of objects
// rows and cols are arrays of attribute names
$("#output").pivotUI(
    [
        {color: "blue", shape: "circle"},
        {color: "red", shape: "triangle"}
    ],
    {
        rows: ["color"],
        cols: ["shape"]
    }
);