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, UIExtension, DataLoader, DataStore, AtomDataLoader

Methods

add	adds an item to the store
addOperation	adds a custom data operation
addView	adds a new view to a layout-like component
adjust	adjusts the component to the size of the parent HTML container
attachEvent	attaches the handler to an inner event of the component (allows behavior customizations)
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 hash of 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 rows that match the criterion
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
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 which is positioned the specified step after the specified item
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 which is positioned the specified step before the specified item
getStructure	returns the current pivot configuration
getTopParentView	returns top parent view
hasEvent	checks whether the component has the specified event
hide	hides the view
index	returns the cell index in the layout collection
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
reconstruct	rebuilds the layout
refresh	repaints the whole view or a certain item
remove	removes the specified item/items from datastore
removeView	removes the specified view of a layout-like component
render	renders a pivot on the page
resize	adjusts the view to a new size
resizeChildren	resizes all children of the called component
serialize	serializes data to a JSON object
setStructure	sets the pivot structure
show	makes the component visible
showBatch	makes visible those elements which parameter 'batch' is set to the specified name
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 new ui, the id of which will be locked in the parent id space
unbind	breaks "bind" link
unblockEvent	cancels blocking events that was enabled by the 'blockEvent' command
updateItem	updates the data item with new properties

Events

onAfterAdd	fires after adding item to datastore
onAfterDelete	fires after item deleting
onAfterLoad	fires after data loading is complete
onAfterSort	fires after sorting dataset
onApply	fires when the action has been applied by clicking the "Apply" button
onBeforeAdd	fires before adding item to datastore
onBeforeApply	fires on the "Apply" button click
onBeforeCancel	fires when the "Cancel" button is clicked in the filters popup
onBeforeDelete	fires before item deleting
onBeforeLoad	occurs immediately before data loading has been started
onBeforeRender	fires just before the pivot is rendered
onBeforeSort	fires before sorting 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 data item is in update process
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
onWebWorkerEnd	fires when web worker has finished the task
onWebWorkerStart	fires when web worker starts working

Properties

animate	defines or disables view change animation.
borderless	used to hide the component borders
cols	array of views objects arranged horizontally
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 a css class that will be applied to the view container
data	JavaScript array containing data for the component
datatype	the type of loaded data
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	calculates the total sum per column
format	specifies the format function for displaying data in all columns
gravity	sets the view gravity (1 by default)
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 component ID
margin	defines the space around elements (applies the specified value to all elements)
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	event handler called just after the component has been completely initialized
removeMissed	defines how to treat items in case of reloading
responsive	enables responsive mode for horizontal layout
rows	array of views objects arranged vertically
scheme	defines schemes for data processing
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	calculates the total sum for each row
type	defines the layout borders
url	the URL which the component will use to load data after its initialization
visibleBatch	sets the batch that will be shown initially
webWorker	sets the path to the web worker source file
width	sets the width of the component
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	current height of the view
$setSize	sets the component size
$skin	the method which will be called when skin is defined
$view	reference to top html element of the view
$width	current width of the view
config	all options from initial component configuration
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 easy javascript framework and page of javascript pivot table product.