A component for organizing, working with and storing data in tabular form.

Webix SpreadSheet allows creating tables online, while keeping data locally. It's possible to import a ready table into an Excel document or export a table from Excel. The tables' appearance can be easily changed: you can customize the styles of colors, fonts and borders, set the necessary vertical and horizontal aligns, merge cells, rows and columns.

The component provides a built-in functionality for mathematical expressions and supports resizing and localization of tables.

Check SpreadSheet documentation for more information.


var spreadsheet = webix.ui({
    data: base_data

Where to start

addFilter adds a filter into a cell
addImage adds an image into a cell
addSheet adds a new sheet into a SpreadSheet
addSparkline adds a sparkline into a cell
addStyle creates a new style
addView add new view to layout-like component
adjust adjusts the component to the size of the parent HTML container
alert creates an alert box
attachEvent attaches the handler to an inner event of the component (allows behaviour customizations)
bind binds components
blockEvent temporarily blocks triggering of ALL events of the calling object
callEvent calls an inner event
clearRange clears the range
clearSheet clears the content of the currently active sheet
combineCells merges several adjacent cells
confirm creates a confirm box
define redefines a single configuration property (or a hash of properties)
deleteColumn deletes a column by id
deleteRow deletes a row by id
destructor destructs the calling object
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)
eachSelectedCell iterates over all selected cells in the table
editSheet selects the sheet name for editing
enable enables the calling view that was disabled by the 'disable' method
filterSpreadSheet invokes SpreadSheet filtering by all existing filters
freezeColumns fixes the specified amount of columns "on the fly", starting from the very left one
freezeRows fixes the specified amount of rows "on the fly", starting from the very top one
getActiveSheet returns the name of the currently active sheet
getCellEditor returns the editor set in a cell
getCellValue returns the value of the cell
getChildViews returns child views of the calling component
getColumn returns the configuration object of the specified SpreadSheet column
getFormView returns master form for the input
getNode returns the main HTML container for the calling object
getParentView returns the parent view of the component
getRow returns the row data by its id
getSelectedId returns the ids of all cells in the select area
getSelectedRange returns the range of selected cells
getStyle returns the style set for the cell
getTopParentView returns top parent view
hasEvent checks whether the component has the specified event
hide hides the view
hideColumn hides a specified column in the sheet
hideGridlines hides the grid lines of the sheet
hideHeaders hides all headers of rows and columns on the sheet
hideRow hides a specified row in the sheet
index returns the cell index in the layout collection
innerId returns the inner ID of an item by its public (real) ID
insertColumn inserts an empty column to the left of the specified one
insertRow inserts an empty row above the specified one
isCellLocked checks whether the cell under question is locked
isColumnVisible checks whether the specified column is visible
isEnabled checks whether the view is enabled
isRowVisible checks whether the specified row is visible
isVisible checks whether the view is visible
load loads data from an external data source.
lockCell forbids editing a cell
mapEvent routes events from one object to another
parse loads data to the component from an inline data source
reconstruct rebuilds the layout
redo remakes the action that was reverted by the undo action
refresh repaints spreadsheet
removeFilter removes filters from the sheet
removeSheet removes a sheet by name
removeView removes view from layout-like component
renameSheet replaces the sheet name with the a new one
reset resets the SpreadSheet settings to the initial state
resetUndo resets the Undo history
resize adjusts the view to a new size
resizeChildren resizes all children of the calling component
saveCell saves changes made in the cell
serialize serializes SpreadSheet data to a JSON object
setCellEditor creates an editor in a cell
setCellFilter creates a select filter
setCellValue sets a value for the cell
setFormat sets a custom format for a cell
setRangeStyle sets a style for a range of cells
setRangeValue sets a value for the range
setStyle sets a style for a cell
show makes the component visible
showBatch makes visible those elements which parameter 'batch' is set to the specified name
showSheet shows a sheet by name
sortRange sorts a range of cells
splitCell splits the cells' span that was made by merging several cells
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
undo undo operation in SpreadSheet
onAfterLoad fires after data loading is complete
onAfterSelect fires after a cell has been selected
onBeforeLoad occurs immediately before data loading has been started
onBeforeSpan fires before cells' are merged
onBeforeSplit fires before merged cells are splitted
onBeforeValueChange fires before the value of a cell is changed
onBindRequest fires when the component is ready to receive data from the master component
onCellChange fires when a cell is changed
onComponentInit fires when spreadsheet is initialized
onDataParse fires when data parsing is started
onDataSerialize fires when serialization of data is started
onDestruct occurs when component destroyed
onLoadError fires when an error occurs during data loading ( invalid server side response )
onReset fires when the settings of SpreadSheet are reset to the initial state
onStyleSet fires when a new style is set for a cell
animate defines or disables view change animation.
borderless used to hide the component borders
bottombar enables a bottombar for additional sheets
buttons contains the names of buttons blocks with arrays of buttons' names
cols array of views objects arranged horizontally
columnCount the number of columns in the SpreadSheet
conditionStyle specifies a set of conditional styles
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 or not
gravity sets the view gravity (1 by default)
height sets the height of the component
hidden defines whether the view will be hidden initially
id the component ID
isolate masks IDs of all inner elements
liveEditor enables the formula editor in spreadsheet
margin defines the space around elements (applies the specified value to all elements)
math enables the math functionality in the spreadsheet
maxHeight sets the maximum height for the view
maxWidth sets the maximum width for the view
menu adds a dropdown menu at the top of SpreadSheet
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)
readonly sets readonly mode for SpreadSheet
resizeCell defines whether cells of spreadsheet will be resized
responsive enables responsive mode for horizontal layout
rowCount the number of rows in the SpreadSheet
rows array of views objects arranged vertically
sheetTabWidth sets the width of a sheet tab
subbar adds a view between the toolbar and the datatable
toolbar enables the "full" toolbar mode (all available buttons are shown)
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
width sets the width of the component
$$ locates sub-item by id
$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)
Back to top