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 |