An editable table that can easily display huge data sets.
The component is full of various possibilities: filtering, sorting, pagination, editing, nadigation, drag-and-drop, internatialization, export to PDF, Excel etc. It also provides the dynamic mode for fast handling thousands of records.
Check datatable documentation for more detailed description.
add | adds an item to the store |
addCellCss | adds a css class to the cell |
addCss | applied CSS class to a component item |
addRowCss | adds a css class to the row |
addSpan | adds colspan or rowspan to the datatable |
adjust | adjusts the component to the size of the parent HTML container |
adjustColumn | adjusts a column to the width of the content |
adjustRowHeight | autodetect height of rows in datatable |
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 |
clearAll | removes all items from the component |
clearCss | removes css class from all items |
clearSelection | clears selection |
clearValidation | removes all validation marks from the component |
collectValues | returns an array of unique values of the specified column |
columnId | returns the id of the column at the specified index |
copy | copies an item to the same or another object |
count | returns the number of currently visible items |
define | redefines a single configuration property (or a hash of properties) |
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) |
eachColumn | iterates over all visible columns in the table |
eachRow | iterates over all rows in the table |
edit | enables the edit mode for the specified item |
editCancel | cancels the edit mode and closes all opened editors. The component is still editable |
editCell | enables the edit mode for the specified cell |
editColumn | enables the edit mode for the specified column |
editNext | closes the current editor and opens one in the next cell of the row |
editRow | enables the edit mode for the specified row |
editStop | stops the edit mode and closes all opened editors. The component is still editable |
enable | enables the calling view that was disabled by the 'disable' method |
exists | checks whether an item with the specified id exists |
exportToExcel | exports data to an Excel file |
exportToPDF | exports data to a PDF file |
filter | filters the component |
filterByAll | refilters DataTable by all specified filters |
find | returns rows that match the criterion |
focusEditor | moves focus to the active editor |
getChildViews | returns child views of the calling component |
getColumnConfig | returns the configuration object of the specified column |
getColumnIndex | returns the index of the column with the specified id |
getEditState | returns info about active editor object |
getEditor | returns editor object |
getEditorValue | returns the value of the active (currently open) editor |
getFilter | returns the filter object that the component uses to filter the values of the specified column |
getFirstId | returns the ID of the first item |
getFormView | returns master form for the input |
getHeaderContent | returns set of helpers for header content manipulation |
getHeaderNode | returns HTML element of the column's header |
getIdByIndex | returns the id of the item with the specified index |
getIndexById | returns the index of the item with the specified id |
getItem | gets the object of the data item with the specified id |
getItemNode | returns html element of the item |
getLastId | returns the id of the last item |
getNextId | returns the ID of an item which is positioned the specified step after the specified item |
getNode | returns the main HTML container for the calling object |
getPage | returns the currently visible page in case of paged view |
getPager | returns the pager object associated with the component |
getParentView | returns the parent view of the component |
getPrevId | returns the ID of an item which is positioned the specified step before the specified item |
getScrollState | returns the current position of scrolls |
getSelectedId | returns the selected cells |
getSelectedItem | gets an object of the selected data item |
getState | returns the current state of the view |
getText | returns text value of a cell |
getTopParentView | returns top parent view |
getVisibleCount | returns count of visible rows |
group | groups data by the specified data property |
hasCss | checks if item has specific css class |
hasEvent | checks whether the component has the specified event |
hide | hides the view |
hideColumn | hides the specified column |
hideOverlay | hides previously defined overlay |
isColumnVisible | returns true if column is visible |
isEnabled | checks whether the view is enabled |
isVisible | checks whether the view is visible |
load | loads data from an external data source. |
loadNext | sends a request to load the specified number of records to the end of the clientside dataset or to the specified position |
locate | converts an HTML node or event object to in-table position |
mapCells | applies the callback to a range of cells |
mapEvent | routes events from one object to another |
mapSelection | executes some custom method for all cells in the currently selected block |
markSorting | marks the sorted column with a dedicated sign (asc/desc) in the header |
move | moves the specified item to a new position |
moveBottom | moves the specified item to the last position |
moveColumn | moves column to different position |
moveDown | increases the item index and moves the item to the new position |
moveSelection | moves selection in the specified direction |
moveTop | moves the specified item to the first position |
moveUp | decreases the item index and moves the item to the new position |
parse | loads data to the component from an inline data source |
refresh | repaints the whole view or a certain item |
refreshColumns | refreshes the structure of DataTable |
refreshFilter | rebuilds list of options in select filter |
refreshHeaderContent | refreshes the header row of DataTable |
registerFilter | registers a filter element |
remove | removes the specified item from datastore |
removeCellCss | remove css class from the cell of datatable |
removeCss | removes CSS class from a component item |
removeRowCss | remove css class from the row |
removeSpan | removes a rowspan/colspan from the datatable |
render | renders the specified item or the whole component |
resize | adjusts the view to a new size |
scrollTo | scrolls the view to the defined position |
select | selects the specified element |
selectRange | selects the specified range of elements |
serialize | serializes data to a JSON object |
setColumnWidth | sets the width of the specified column |
setPage | makes the specified page visible (assuming that the pager was defined ) |
setRowHeight | sets the height of the specified row |
setState | restores the specified state |
show | makes the component visible |
showCell | scrolls the table (if needed) to make the specified cell visible |
showColumn | shows the column which was previously hidden by method 'hidecolumn' |
showColumnBatch | shows or hides a group of columns |
showItem | 'scrolls' the table to make the specified row visible |
showItemByIndex | 'scrolls' the table to make the specified row visible |
showOverlay | shows the overlay message over the body of DataTable |
sort | sorts datastore |
sync | allows syncing two copies of data (all or just a part of it) from one DataCollection to another |
unbind | breaks "bind" link |
unblockEvent | cancels blocking events that was enabled by the 'blockEvent' command |
ungroup | ungroups data |
unselect | cancels selection of the specified element |
updateItem | sets properties of the data item |
validate | validates one record or all dataset against validation rules |
validateEditor | validates data in currently active editor |
onAfterAdd | fires after adding item to datastore |
onAfterColumnDrop | fires after the column has been dragged and dropped to the target position |
onAfterColumnDropOrder | fires after the column order was changed with the help of drag-and-drop |
onAfterContextMenu | fires after the context menu was called in the item area |
onAfterDelete | fires after item deleting |
onAfterDrop | fires after drag-n-drop was finished |
onAfterEditStart | fires after edit operation was initiated, editor opened and ready for input |
onAfterEditStop | fires after edit operation finished |
onAfterFilter | occurs after datatable was filtered |
onAfterLoad | fires after server side loading is complete |
onAfterRender | occurs each time after the view is rendered |
onAfterScroll | occurs when some webix view has been scrolled |
onAfterSelect | fires after a cell is selected |
onAfterSort | fires after sorting dataset |
onAfterUnselect | fires after a cell is unselected |
onBeforeAdd | fires before adding item to datastore |
onBeforeColumnDrag | fires the monent you start dragging the column from its source potition |
onBeforeColumnDrop | fires the moment you drop the column to its target position |
onBeforeColumnDropOrder | fires the moment you drop the column over the target area |
onBeforeContextMenu | fires before the context menu is called in the item area |
onBeforeDelete | fires before item deleting |
onBeforeDrag | fires before the mouse button is pressed and the cursor is moved over a draggable item |
onBeforeDragIn | fires before a dragged element is moved over the droppable area |
onBeforeDrop | fires before a dragged element is released over the droppable area |
onBeforeDropOut | fires before a dragged element is released over the droppable area |
onBeforeEditStart | fires before edit operation is initiated |
onBeforeEditStop | fires before stop edit command is received |
onBeforeFilter | called when filtering process is started, but data is not filtered yet |
onBeforeLoad | occurs immediately before data loading has been started |
onBeforeRender | occurs each time before the view is rendered |
onBeforeSelect | fires before a cell is selected |
onBeforeSort | fires before sorting dataset |
onBeforeUnSelect | fired before a cell is unselected |
onBindRequest | fires when the component is ready to receive data from the master component |
onCheck | fires when a checkbox is checked or unchecked in the datatable item |
onColumnResize | fires when width of column was changed |
onDataRequest | fires when data from the server is requested for linear data structures (List, DataTable, DataView etc.) to implement dynamic data loading |
onDataUpdate | fires when data item is in update process |
onDestruct | occurs when component destroyed |
onDragOut | fires when a dragged element is moved outside of the droppable area |
onHeaderClick | occurs after clicking on header |
onItemClick | fires when a component item was clicked |
onItemDblClick | fires when a component item was double-clicked |
onKeyPress | occurs when keyboard key is pressed for the control in focus |
onLiveEdit | occurs when data was changed in the editor |
onLoadError | fires when an error occurs during data loading ( invalid server side response ) |
onLongTouch | fires on holding finger in some position for a certain period of time |
onMouseMove | fires when the mouse was moved over the specified component |
onMouseMoving | fires when the mouse was moved over the component |
onMouseOut | fires when the mouse was moved out from the specified item |
onResize | fires when the width or height of DataTable was changed |
onRowResize | fires when height of row was changed |
onScrollX | fires when the user scrolls the table left or right |
onScrollY | fires when the user scrolls the table up or down |
onSelectChange | fires when selection is changed in a DataTable |
onStructureLoad | fires when the structure of DataTable (columns configuration) is initialized |
onStructureUpdate | fires when structure of datatable was changed ( column added, hidden or reconfigured ) |
onSwipeX | occurs on a horizontal swipe movement |
onSwipeY | occurs on a vertical swipe movement |
onTimedKeyPress | fires after typing has been finished in the field |
onTouchEnd | occurs when the touch event is ended |
onTouchMove | occurs during touch movement |
onTouchStart | when some webix view has been touched |
onValidationError | fires when newly loaded/added/edited data fails to pass validation |
onValidationSuccess | fires after the newlyloaded/added/edited data has passes validation successfully |
onViewResize | view size was changed by resizer |
animate | defines or disables view change animation. |
autoConfig | datatable adjust configuration to the data |
autoheight | adjusts DataTable to the parent container size vertically |
autowidth | adjusts DataTable to the parent container size horizontally |
blockselect | enables/disables block selection |
borderless | used to hide the component borders |
checkboxRefresh | controls behavior of checkbox editors in grid |
clipboard | enables/disables clipboard support |
columnWidth | defines the default width for columns (in pixels) |
columns | configures columns of the table |
container | an html container (or its id) where the component needs initializing |
css | the name of a css class that will be applied to the view container |
data | JavaScript array containing data for the component |
dataFeed | the URL that the component will use to reload data during binding |
datafetch | defines the number of records that will be loaded into datatable during the next dynamic loading call |
datathrottle | sets the polling interval (the time period between the completion of a network request and the next request for data) |
datatype | the type of loaded data |
delimiter | sets CSV delimiters for clipboard operations |
disabled | indicates whether an item is enabled or not |
drag | enables or disables drag-and-drop |
dragColumn | enables drag-and-drop support for columns |
dragscroll | enables autoscroll of component during drag-n-drop |
editMath | enables formular editing |
editValue | defines which data item is editable (in case of several data item in the cell/line) |
editable | allows/denies editing in the view |
editaction | defines the action on which editors will be opened |
externalData | allows defining custom 'move' logic for the component. |
filterMode | defines filtering rules in tree-like components |
fixedRowHeight | defines whether the height should be fixed for all rows or can vary |
footer | enables/disables the footer in DataTable (disabled, by default) |
form | linked form |
gravity | sets the view gravity (1 by default) |
header | enables/disables the header in DataTable (enabled, by default) |
headerRowHeight | sets the heigth of the header row |
headermenu | adds a headermenu to control column visibility |
height | sets the height of the component |
hidden | defines whether the view will be hidden initially |
hover | css class for a row-hover in the datatable |
id | the component ID |
leftSplit | the number of the fixed columns from the left side of the table (actual for the split mode ) |
liveValidation | validation during cell editing |
loadahead | sets the number of items that will be loaded on each scroll movement relative to the last item in the scrolling direction |
math | enables math formulas in DataTable |
maxHeight | sets the maximum height for the view |
maxWidth | sets the maximum width for the view |
minColumnHeight | sets the minimum height for a row |
minColumnWidth | sets the minimum width for a column |
minHeight | sets the minimal height for the view |
minWidth | sets the minimal width for the view |
mouseEventDelay | the delay between a real mouse action and invoking the related events |
multiselect | enables the multi selection mode |
navigation | activates the selection keyboard navigation |
on | allows attaching custom handlers to inner events of the component |
onClick | attaches a click behavior for component items with the specified CSS class. |
onContext | a property used to define custom context-click (right click) handlers for elements in the DataTable cells
|
onDblClick | attaches a dblclick behavior for component items with the specified CSS class. |
onMouseMove | attaches a mousemove behaviour for component items with the specified CSS class. |
pager | defines paging configuration ( creates a 'ui.pager' object) |
prerender | invokes the full rendering of DataTable data |
ready | event handler called just after the component has been completely initialized |
removeMissed | defines how to treat items in case of reloading |
resizeColumn | enables/disables horizontal resizing of columns |
resizeRow | enables/disables vertical resizing of rows |
rightSplit | sets the number of the fixed columns from the right side of the table (actual for the split mode ) |
rowHeight | sets the default height for rows |
rowLineHeight | default line height for grid's row |
rules | set of validation rules for the component |
save | defines URLs for data saving |
scheme | defines schemes for data processing |
scroll | enables or disables scroll for the datatable |
scrollAlignY | enables/disables scrolling the table just by whole rows (i.e. you won't be allowed to scroll along the full length of rows) |
scrollX | enables/disables horizontal scrolling |
scrollY | enables/disables vertical scrolling |
select | sets the selection mode in DataTable |
spans | array of span configurations for the datatable |
tooltip | sets a popup message appearing on pointing a mouse cursor over the dedicated item. |
type | used for configuring presentation of items |
url | the URL the component will use to load data after its initialization |
width | sets the width of the component |
yCount | defines height of datatable in rows |