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 export a ready table into an Excel document or import 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({
view:"spreadsheet",
data: base_data
});
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 |
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 either selected or specified range of cells |
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 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 |
getSheetData | alllows accessing data and ranges of any sheet |
getStyle | returns the style set for the cell |
getTopParentView | returns top parent view |
groupUndo | marks several actions so that they will be undone as one |
hasEvent | checks whether the component has the specified event |
hide | hides the view |
hideColumn | hides a specified column in the sheet |
hideGridlines | hides the gridlines of the sheet |
hideHeaders | hides all headers of rows and columns on the sheet |
hideRow | hides a specified row in the sheet |
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 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 | 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 | remakes the action that was reverted by the undo action |
refresh | repaints spreadsheet |
registerMathMethod | adds a custom function that will be used in formulas |
removeFilter | removes filters from the sheet |
removeSheet | removes a sheet by name |
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 |
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 the spreadsheet column |
setFormat | sets a custom format for a cell |
setPlaceholder | sets a data placeholder for a cell |
setRangeStyle | sets a style for a range of cells |
setRangeValue | sets a value for the range |
setRowHeight | sets the height of the spreadsheet row |
setStyle | sets a style for a cell |
show | makes the component visible |
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 events blocking that was enabled by the 'blockEvent' command |
undo | undo operation in SpreadSheet |
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 |
onBeforeLoad | fires immediately before data loading has started |
onBeforeSheetShow | fires before a sheet is opened |
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 |
onChange | fires when any change occurs |
onCommentHide | fires after a comment is hidden |
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) |
onMathRefresh | fires when recalculation of formulas in the sheet is complete |
onReset | fires when the settings of SpreadSheet are reset to the initial state |
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 |
onViewInit | fires before an inner view of spreadsheet is initialized |
onViewShow | fires when any hidden view is shown |
animate | defines the configuration of view change animation or disables it |
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 |
clipboard | enables/disables clipboard support |
clipboardDecimalDelimiter | sets a decimal delimiter 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 that will be applied to the view container or the object with styles |
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 | enables 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) |
readonly | sets readonly mode for SpreadSheet |
resizeCell | defines whether cells of spreadsheet will be resized |
rowCount | the number of rows in the SpreadSheet |
rowHeight | sets the default height for rows |
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 |
width | sets the width of a widget |
$$ | locates sub-item by id |
$getSize | returns the current size of the component |
$height | the current height of the view |
$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 collection for working with comments in cells |
config | all options from the initial component configuration |
name | indicates the name of the component (a read-only property) |