ui.pivot

A datatable with advanced filtering capabilities.

Webix Pivot allows quickly processing huge complex datasets and creating clear reports on their basis. You can easily customize this component and proceed with comparing, filtering and sorting data - all within one table.

Check Pivot Table documentation for more information.

Constructor

var pivot = webix.ui({
    view:"pivot",
    structure: {
        rows: ["form", "name"],
        columns: ["year"],
        values: [
            { name: "gdp", operation: "sum"},
            { name: "oil", operation: "sum"}
        ],
        filters: []
    },
    data: pivot_data
});

Where to start

Based on: IdSpace, ui.layout, ui.baselayout, EventSystem, ui.baseview, Settings, Destruction, BaseBind, DataLoader, DataStore, AtomDataLoader

Methods

add	adds an item to the store
addOperation	adds a custom data operation into Pivot Table
addTotalOperation	adds a custom total operation
adjust	adjusts the component to the size of the parent HTML container
attachEvent	attaches the handler to an inner event of the component
bind	binds components
blockEvent	temporarily blocks triggering of ALL events of the calling object
callEvent	calls an inner event
clearAll	removes all items from the component
configure	opens the pivot configuration window
count	returns the number of currently visible items
define	redefines a single configuration property (or a object with properties)
destructor	destroy datastore
detachEvent	detaches a handler from an event (which was attached before by the attachEvent method)
disable	disables the calling view (makes it dimmed and unclickable)
enable	enables the calling view that was disabled by the 'disable' method
exists	checks whether an item with the specified ID exists
filter	filters the component
find	returns all rows that match the criterion, or only the first one
getChildViews	returns child views of the calling component
getConfigWindow	returns the object of the window with pivot configuration
getFields	returns an object with fields configurations
getFilterView	returns the object of the toolbar with filters
getFirstId	returns the ID of the first item
getFormView	returns master form for the input
getIdByIndex	returns the ID of the item with the specified index
getIndexById	returns the index of the item with the specified ID
getItem	gets the object of the data item with the specified ID
getLastId	returns the ID of the last item
getNextId	returns the ID of an item that is after the specified item, either directly after or after a number of items (defined by the step)
getNode	returns the main HTML container for the calling object
getParentView	returns the parent view of the component
getPrevId	returns the ID of an item that is before the specified item, either directly before or before a number of items (defined by the step)
getStructure	returns the current pivot configuration
getTopParentView	returns the top parent view
hasEvent	checks whether the component has the specified event handler
hide	hides the view
innerId	returns the inner ID of an item by its public (real) ID
isEnabled	checks whether the view is enabled
isVisible	checks whether the view is visible
load	loads data from an external data source
mapEvent	routes events from one object to another
parse	loads data to the component from an inline data source
queryView	returns inner element/elements of a widget that correspond(s) to the defined parameters
refresh	repaints the whole view or a certain item
remove	removes the specified item/items from datastore
render	renders a pivot on the page
resize	adjusts the view to a new size
setStructure	sets the pivot structure
show	makes the component visible
sort	sorts datastore
sync	allows syncing two copies of data (all or just a part of it) from one DataCollection to another
ui	allows creating a new UI, the ID of which will be locked in the parent ID space
unbind	breaks "bind" link
unblockEvent	cancels events blocking that was enabled by the 'blockEvent' command
updateItem	updates the data item with new properties
waitSave	allows to catch the moment when a data operation was saved to the server

Events

onAfterAdd	fires after adding an item to the datastore
onAfterDelete	fires after an item is removed
onAfterLoad	fires after data loading is complete
onAfterSort	fires after sorting dataset
onBeforeAdd	fires before adding an item to the datastore
onBeforeApply	fires on the "Apply" button click
onBeforeCancel	fires when the "Cancel" button is clicked in the filters popup
onBeforeDelete	fires before an item is removed
onBeforeLoad	fires immediately before data loading has started
onBeforeRender	fires just before the pivot is rendered
onBeforeSort	fires before sorting of the dataset
onBindRequest	fires when the component is ready to receive data from the master component
onCancel	fires when the action has been cancelled by clicking the "Cancel" button in the filters popup
onDataRequest	fires when data from the server is requested for linear data structures (List, DataTable, DataView etc.) to implement dynamic data loading
onDataUpdate	fires when a data item is being updated
onDestruct	occurs when component destroyed
onFilterChange	fires when value is changed in a filter field on the toolbar
onFilterCreate	fires each time a filter is created
onHeaderInit	fires when pivot header is initialized
onItemClick	fires when a data item is clicked
onLoadError	fires when an error occurs during data loading (invalid server side response)
onPopup	fires after a configuration window for Pivot is created
onViewInit	fires before inner view initialization
onViewShow	fires when any hidden view is shown
onWebWorkerEnd	fires when web worker has finished the task
onWebWorkerStart	fires when web worker starts working

Properties

animate	defines the type of animation, with which the view is shown, if it is a Multiview cell
borderless	used to hide the component borders
columnWidth	defines the default width for columns (in pixels)
container	an HTML container (or its ID) where the component should be initialized
css	the name of the CSS class that will be applied to the view container or the object with styles
data	JavaScript array containing data for the component
datatable	configuration of the inner Pivot grid
datatype	the type of loaded data
defaultOperation	defines the default data operation
disabled	indicates whether an item is enabled
externalProcessing	enables external data processing in Pivot
fieldMap	defines custom labels for fields
filterLabelAlign	sets the horizontal alignment of the filters' labels in Pivot Chart
filterLabelWidth	sets the width of the filters' labels
filterMap	specifies fields for filtering (see the details)
filterMinWidth	sets the minimal width of filters (both input and label) in the pivot header
filterPlaceholder	sets a placeholder for the filter input
filterWidth	sets the width of filters (both input and label) in the pivot header
footer	renders a footer with results of operations for columns
format	specifies the format function for displaying data in all columns
gravity	sets the view gravity
headerTemplate	sets the function that fires for each columns' header and returns header text
height	sets the height of the component
hidden	defines whether the view will be hidden initially
id	the ID of a widget
max	enables/disables GREEN highlighting of a cell(s) with the biggest value in a row
maxHeight	sets the maximum height for the view
maxWidth	sets the maximum width for the view
min	enables/disables RED highlighting of a cell(s) with the least value in a row
minHeight	sets the minimal height for the view
minWidth	sets the minimal width for the view
on	allows attaching custom handlers to inner events of the component
padding	defines the space between the element borders and content (applies the specified value to all sides).
paddingX	sets the right and left padding (applies the specified value to both sides)
paddingY	sets the top and bottom padding (applies the specified value to both sides)
ping	aborts long processes
popup	an object with the properties of the configuration popup
profile	enables profiling (for development stage)
readonly	disables the possibility to change pivot configuration settings
readonlyTitle	sets some text in the right top corner instead of the link that opens the popup for configuring pivot
ready	the event handler is called just after the component has been completely initialized
removeMissed	defines how to treat items in case of reloading
scheme	defines schemes for data processing
separateLabel	separates the label from the Pivot filter and removes limits on the label size
stableRowId	enables the mode in which rows and columns' ids are saved based on the specified grouping rule
structure	defines initial display and analysis pattern
totalColumn	renders a total column for rows according to the column values
type	defines the layout borders
url	the URL which the component will use to load data after its initialization
webWorker	sets the path to the web worker source file
width	sets the width of a widget
yScaleWidth	sets the width of the first column

Other

$$	locates sub-item by id
$divider	a string that is used in Pivot calculations
$getSize	returns the current size of the component
$height	the current height of the view
$setNode	defines HTML element for the component
$setSize	sets the component size
$skin	the method which will be called when skin is defined
$view	reference to the top HTML element of the view
$width	the current width of the view
config	all options from the initial component configuration
data	inner DataStore
name	indicates the name of the component (a read-only property)
operations	gets an object with possible mathematical operations in Pivot
waitData	eventual result of an asynchronous operation ('promise' object) for the loaded data

If you have not checked yet, be sure to visit site of our main product Webix html5 framework and page of pivot table web product.