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

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
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
bind binds components
blockEvent temporarily blocks triggering of ALL events of the calling object
callEvent calls an inner event
changeDecimals increases/decreases decimal places
clearRange clears a range of cells (either selected cells or specified in the parameter)
clearSheet clears the content of the currently active sheet
combineCells merges several adjacent cells
compactStyles removes unused styles for the current sheet
confirm creates a confirm box
define redefines a single configuration property (or a object with properties)
deleteColumn deletes a column by its id
deleteRow deletes a row by its 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 at runtime, starting from one on the rear left side
freezeRows fixes the specified amount of rows at runtime, starting from the first one
getActiveSheet returns the name of the currently active sheet
getCellEditor returns the editor set in a cell
getCellFilter returns the filter 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
getRangeValue returns values from the range
getRow returns the row data by its id
getSelectedId returns the first cell in the selected area
getSelectedRange returns the range of selected cells
getSheetData allows accessing data and ranges of any sheet
getSheetState returns the state of visibility of a sheet
getStyle returns the style set for the cell
getTopParentView returns the top parent view
groupUndo marks several actions so that they will be undone together
hasEvent checks whether the component has the specified event handler
hide hides the view
hideColumn hides or shows the column
hideGridlines hides or shows the gridlines of the sheet
hideHeaders hides all headers of rows and columns on the sheet
hideRow hides or shows the row
ignoreUndo excludes actions from the history of changes
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 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 protects a cell or a range of cells from editing
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
recalculate recalculates all formulas in the current sheet
redo repeats the action that was reverted by the undo action
refresh repaints spreadsheet
registerMathMethod adds a custom function that will be used in formulas
removeFilters removes filters from the sheet
removeSheet removes a sheet by name
renameSheet renames the sheet
reset resets the SpreadSheet settings to the initial state
resetUndo clears the Undo history
resize adjusts the view to a new size
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
setColumnWidth sets the width of spreadsheet columns
setFormat sets a custom format for a cell
setPlaceholder fills placeholders in a table with data
setRangeStyle sets a style for a range of cells
setRangeValue sets a value for the range
setRowHeight sets the height of the spreadsheet row
setSheetState sets the visibility of a sheet
setStyle sets a style for a cell
show makes the component visible
showCell shifts the focus to the specified cell
showFormulas hides or shows formulas inside cells
showPrintBorders hides or shows printing borders
showSheet shows a sheet by its name
sortRange sorts a range of cells
splitCell splits merged cells
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
undo reverts the last operation in SpreadSheet
zoom zooms the sheet in
onAfterConditionSet fires after a new condition for cells was set
onAfterLoad fires after data loading is complete
onAfterRangeSet fires after a range of cells is set
onAfterSelect fires after a cell has been selected
onAfterSheetShow fires after a sheet has opened
onAfterSpan fires after cells are merged
onAfterSplit fires after a span was removed
onBeforeCommentShow fires before a comment for a cell is shown
onBeforeConditionSet fires before a new condition for cells was set
onBeforeFormatChange fires before cell format is changed
onBeforeLoad fires immediately before data loading has started
onBeforeSheetMenu fires before the bottom bar menu is shown
onBeforeSheetShow fires before a sheet is opened
onBeforeSpan fires before cells are merged
onBeforeSplit fires before merged cells are split
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
onChange fires when any change occurs
onColumnOperation fires after the user performed an operation on columns
onCommand fires when selecting an option in a context menu, opening an external UI or dialog, updating a toolbar, or performing some action on a table
onCommentHide fires after a comment is hidden
onComponentInit fires when spreadsheet is initialized
onContextMenuConfig fires every time before opening the context menu
onDataParse fires when data parsing is started
onDataSerialize fires when serialization of data is started
onDestruct occurs when component destroyed
onFormatChange fires when cell format is changed
onLoadError fires when an error occurs during data loading (invalid server side response)
onMathRefresh fires when recalculation of formulas in the sheet is complete
onReset fires when the settings of SpreadSheet are reset to the initial state
onRowOperation fires after the user performed an operation on rows
onSheetAdd fires when a new sheet is added
onSheetRemove fires when a sheet is removed
onSheetRename fires when a sheet is renamed
onStyleSet fires when a new style is set for a cell
onUIEditStart fires when editing form is opened
onUIEditStop fires when editing form is closed
onUndo fires when undo/redo operations are performed
onViewInit fires before an inner view of spreadsheet is initialized
onViewShow fires when any hidden view is shown
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
bottombar enables a bottombar for switching between sheets
buttons contains the names of blocks that contain lists of button names
clipboard enables/disables clipboard support on desktop devices
clipboardDecimalDelimiter sets a decimal delimiter for correct copy/paste of numbers between SpreadSheet and Excel
clipboardNumberFormat sets a format for correct copy/paste of numbers between SpreadSheet and Excel
columnCount the number of columns in the SpreadSheet
columnWidth defines the default width for columns (in pixels)
conditionStyle specifies a set of conditional styles
container an HTML container (or its ID) where the component should be initialized
css the name of the CSS class or the object with styles 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
gravity sets the view gravity
height sets the height of the component
hidden defines whether the view will be hidden initially
id the ID of a widget
liveEditor toggles the formula editor in 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)
prepareData prepares data before parsing
readonly makes SpreadSheet readonly
resizeCell defines whether cells of spreadsheet can be resized
rowCount the number of rows in the SpreadSheet
rowHeight sets the default height for rows
save defines a path to the server to save cell changes to
sheetStubs takes into account styles in empty cells when loading Excel files
sheetTabWidth sets the width of a sheet tab
strict defines whether math calculations should behave similarly to Excel
subbar adds a view between the toolbar and the datatable
toolbar sets toolbar mode and configuration
type defines the layout borders
url the URL which the component will use to load data after its initialization
width sets the width of a widget
$$ locates sub-item by id
$getSize returns the current size of the component
$handleSelection defines component behaviour upon selection
$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
comments a module for working with comments in cells
conditions a module for working with conditions
config all options from the initial component configuration
name indicates the name of the component (a read-only property)
ranges a module to work with named ranges in formulas
views a module for working with 'above-cell' content
Back to top
If you have not checked yet, be sure to visit site of our main product Webix popular javascript framework and page of spreadsheet product.