Structure and Usage

Webix Pivot consists of two functional parts:

  • Webix datatable with configurable columns, rows and filters

Pay attention to the [click to configure] area of the datatable upper left corner. It is highlighted each time you hover the mouse pointer over it, while clicking this area will make a configuration window show up.

  • Configuration window

The window reflects current Pivot structure and contains five sections. The elements inside sections are based on the data item properties from the dataset and can be dragged to change Pivot structure:

Sample data

[
  {"name": "China", "year": 2005, "continent": "Asia", "form": "Republic", 
  "gdp": 2256.919, "oil": 59.615, "balance": 134.098},
  ...
]
  • Fields contain all data properties (such as name, year, continent, form, etc. from the sample dataset) EXCEPT for those in Rows, Columns or Filters.
  • Fields dragged or initially set to Columns area define the x-scale of Pivot, namely the upper headers of the datatable;
  • Fields dragged or initially set to Rows define the y-scale of Pivot, namely the treetable to the left;
  • Fields dragged or initially set to Values define which data will be loaded as well as set the lowest row of datatable headers;
  • Fields dragged or initially set to Filters define data properties that will be used as filters for the datatable.

Data Operations

Current data operations come together with values they are assigned to in the Values section. Right there they can be changed with a couple of clicks.

  • Sum - sums all values of this property and shows the sum;
  • Max - picks and shows the max value of this property;
  • Min - picks and shows the min value of this property;
  • Count - counts the number of occurrences of this property and shows it.

In addition to the above-mentioned prebuilt operation types, you can as well create a custom one.

Filtering Options

Webix Pivot uses two filters:

  • text - filtering is performed by symbols you type in the text field. It supports base math comparison operators, so you can type something like "< 100", "> 2.5" or "= 12".
    If there is no operator, a filter will use text match for filtering;
  • select - filtering is performed by options that are automatically gathered from the dataset (all unique values of this property). For instance, if you choose Continents, all unique continent names from the dataset become options.
Back to top
If you have not checked yet, be sure to visit site of our main product Webix easy javascript framework and page of pivot table web product.