Directory

← Back

PivotTable for Vaadin

PivotTable component for Flow

Author

Contributors

Rating

PivotTable is component based on pivottable.js. This component performs pivoting of the dataset in the browser. Thus it is suitable for small datasets which do not require lazy loading from the backend.

Sample code

        PivotData pivotData = new PivotData();
        pivotData.addColumn("color", String.class);
        pivotData.addColumn("shape", String.class);
        pivotData.addColumn("size", Integer.class);
        pivotData.addColumn("filled", Boolean.class);
        pivotData.addRow("blue", "circle", 2, true);
        pivotData.addRow("red", "triangle", 3, false);
        pivotData.addRow("orange", "square", 1, true);
        pivotData.addRow("yellow", "circle", 3, false);
        pivotData.addRow("brown", "circle", 2, true);

        PivotOptions pivotOptions = new PivotOptions();
        pivotOptions.setRows("color");
        pivotOptions.setCols("shape");

        PivotTable table = new PivotTable(pivotData, pivotOptions, PivotMode.INTERACTIVE);
        Shape shape1 = new Shape("circle","blue",2,true);
        Shape shape2 = new Shape("triangle","red",3,false);
        Shape shape3 = new Shape("square","orange",1,true);
        Shape shape4 = new Shape("circle","yellow",3,false);
        Shape shape5 = new Shape("circle","brown",2,true);

        List<Shape> list = Arrays.asList(shape1, shape2, shape3, shape4, shape5);
        
        BeanPivotData<Shape> pivotData = new BeanPivotData<>(Shape.class, list);
        
        PivotOptions pivotOptions = new PivotOptions();
        pivotOptions.setRows("color");
        pivotOptions.setCols("shape");
        pivotOptions.setCharts(true);

        PivotTable table = new PivotTable(pivotData, pivotOptions,
                PivotMode.INTERACTIVE);
        PivotOptions pivotOptions = new PivotOptions();
        pivotOptions.setRows("Party", "Gender");
        pivotOptions.setCols("Province");
        pivotOptions.setRenderer(Renderer.BAR_CHART);
        pivotOptions.setCharts(true);
        pivotOptions.setFieldsDisabled(true);

        pivotOptions.setDisabledRenderers(Renderer.HORIZONTAL_BAR_CHART,
                Renderer.HORIZONTAL_STACKED_BAR_CHART, Renderer.SCATTER_CHART,
                Renderer.AREA_CHART, Renderer.LINE_CHART);

        PivotTable table = new PivotTable(pivotData, pivotOptions,
                PivotMode.INTERACTIVE);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version 2.0.0

  • Compatible with Vaadin 23.3.0
Released
2022-12-16
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Vaadin 14 in 0.9.1
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge
Online