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({
view:"spreadsheet",
data: base_data
});
addCheckbox | adds a checkbox into a cell |
addImage | adds an image into a cell |
addRadio | adds a radio button 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 |
markCheckbox | marks the specified checkbox |
markRadio | marks the specified radio button |
parse | loads data to the component from an inline data source |
posToRef | converts a position of a cell into a cell reference |
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 |
refToPos | converts a cell reference into a position of a cell |
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 has been 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 |
onBeforeStyleChange | fires before applying a new style for a cell |
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 |
onStyleChange | fires after applying a new style for a cell |
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 |
onZoom | fires after the user has zoomed a sheet |
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 |
validation | a module for working with validation in cells |
views | a module for working with 'above-cell' content |