Directory

← Back

PivotTable for Vaadin

PivotTable component for Flow

Author

Rating

Popularity

100+

PivotTable is component based on pivottable.js library. 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.

There some improvements in this component that are not in the original pivottable.js.

  • Styles have been set to be compatible with Lumo. The colors and sizing are coming from Lumo CSS custom properties, so this component should be easy to adopt your theme without extra CSS tuning.
  • Popups are draggable
  • Keyboard navigation has been improved
  • There is API to localize Aggregator and Renderer texts

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

  • Bug fixes
Released
2024-01-27
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

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

PivotTable for Vaadin - Vaadin Add-on Directory

PivotTable component for Flow PivotTable for Vaadin - Vaadin Add-on Directory
PivotTable is component based on pivottable.js library. 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. There some improvements in this component that are not in the original pivottable.js. - Styles have been set to be compatible with Lumo. The colors and sizing are coming from Lumo CSS custom properties, so this component should be easy to adopt your theme without extra CSS tuning. - Popups are draggable - Keyboard navigation has been improved - There is API to localize Aggregator and Renderer texts
Online