Version 6.3 Released!

Click to checkout the new features

Component Objects

Overview

Component objects are a key feature of Tabulator, that allow you to interact directly with the components of your table.

There is a component object for each row, column, cell and row group in your table. Each component provides a range of functions you can call to manipulate the table.

Components are passed into almost every callback available in Tabulator.

Component Types

Row Component

The row component provides access to a specific row. The example below shows how it is passed to the rowFormatter callback:

var table = new Tabulator("#example-table", {
    rowFormatter:function(row){
        var data = row.getData(); //get data object for row

        if(data.col == "blue"){
            row.getElement().style.backgroundColor = "#1e3b20"; //apply css change to row element
        }
    },
});

The component provides the following functions:

Get Data

The getData function returns the data object for the row.

var rowData = row.getData();

You can optionally pass the transform method into this function if you want to trigger column accessors on the data

var rowData = row.getData("data");

Get Element

The getElement function returns the DOM node for the row.

var rowElement = row.getElement();

Get Table

The getTable function returns the Tabulator object for the table containing the row.

var table = row.getTable();

Get Next Row

The getNextRow function returns the Row Component for the next visible row in the table, if there is no next row it will return a value of false.

var nextRow = row.getNextRow();

Get Previous Row

The getPrevRow function returns the Row Component for the previous visible row in the table, if there is no previous row it will return a value of false.

var prevRow = row.getPrevRow();

Get Cells

The getCells function returns an array of CellComponent objects, one for each cell in the row.

var cells = row.getCells();

Get Cell in Specific Column

The getCell function returns the CellComponent for the specified column from this row.

var cell = row.getCell(column);

Get Index

The getIndex function returns the index value for the row. (this is the value from the defined index column, NOT the row's position in the table)

var rowIndex = row.getIndex();

Get Position

Use the getPosition function to retrieve the numerical position of a row in the table. This position number is the same as the value shown in the rownum formatter and starts at 1 

var rowPosition = row.getPosition(); //return the position of the row in the filtered/sorted data

This function will only return the position of a row currently displayed in the table. if the row is currently filtered out or is part of a collapsed group or data tree, this will return a value of false

Get Group

When using grouped rows, you can retrieve the group component for the current row using the getGroup function.

var group = row.getGroup();

Delete

The delete function deletes the row, removing its data from the table

row.delete();

The delete method returns a promise, this can be used to run any other commands that have to be run after the row has been deleted. By running them in the promise you ensure they are only run after the row has been deleted.

row.delete()
.then(function(){
    //run code after row has been deleted
})
.catch(function(error){
    //handle error deleting row
});

Scroll To

The scrollTo function will scroll the table to the row if it passes the current filters.

row.scrollTo();

You can pass optional arguments to the function to change the behaviour of the scroll. The first optional argument is used to set the position of the row, it should be a string with a value of either top, center, bottom or nearest, if omitted it will be set to the value of the scrollToRowPosition option which has a default value of top.

The second argument is optional, and is a boolean used to set if the table should scroll if the row is already visible, true to scroll, false to not, if omitted it will be set to the value of the scrollToRowIfVisible option, which defaults to true

row.scrollTo("bottom", true); //scroll row to bottom if it is currently visible

The scrollTo method returns a promise, this can be used to run any other commands that have to be run after the row has been scrolled to. By running them in the promise you ensure they are only run after the row has been scrolled to.

row.scrollTo()
.then(function(){
    //run code after row has been scrolled to
})
.catch(function(error){
    //handle error scrolling to row
});

Page To

The pageTo function will load the page for the row if it passes the current filters.

row.pageTo();

The pageTo method returns a promise, this can be used to run any other commands that have to be run after the row has been scrolled to. By running them in the promise you ensure they are only run after the page has been loaded.

row.pageTo()
.then(function(){
    //run code after row has been scrolled to
})
.catch(function(error){
    //handle error scrolling to row
});

Local Pagination Only
This functionality is only available on local pagination. when using remote pagination Tabulator has ow way to lookup which page the requested row is on.

Move Row

You can move a row next to another row using the move function.

The first argument should be the target row that you want to move to, and can be any of the standard row component look up options.

The second argument determines whether the row is moved to above or below the target row. A value of false will cause to the row to be placed below the target row, a value of true will result in the row being placed above the target

row.move(12, true); //move the current row above the row with an index of 12

Update

You can update the data in the row using the update function. You should pass an object to the function containing any fields you wish to update. This object will not replace the row data, only the fields included in the object will be updated.

row.update({"name":"steve"}); //update the row data for field "name"

The update method returns a promise, this can be used to run any other commands that have to be run after the row has been updated. By running them in the promise you ensure they are only run after the row has been updated.

row.update()
.then(function(){
    //run code after row has been updated
})
.catch(function(error){
    //handle error updating row
});

Select

The select function will select the current row.

row.select();

Deselect

The deselect function will deselect the current row.

row.deselect();

Toggle Selection

The toggleSelect function will toggle the selected state the current row.

row.toggleSelect();

Check Selection State

The isSelected function will return a boolean representing the current selected state of the row.

var selected = row.isSelected();

Normalize Height

If you are making manual adjustments to elements contained within the row, it may sometimes be necessary to recalculate the height of all the cells in the row to make sure they remain aligned. Call the normalizeHeight function to do this.

row.normalizeHeight();

Re-Format

If you want to re-format a row once it has been rendered to re-trigger the cell formatters and the rowFormatter callback, Call the reformat function.

row.reformat();

Freeze

You can freeze a row at the top of the table by calling the freeze function. This will insert the row above the scrolling portion of the table in the table header.

row.freeze();

Unfreeze

A frozen row can be unfrozen using the unfreeze function. This will remove the row from the table header and re-insert it back in the table.

row.unfreeze();

Check Frozen State

The isFrozen function will return a boolean representing the current frozen state of the row.

var frozen = row.isFrozen();

Expand Row

When the tree structure is enabled the treeExpand function will expand current row and show its children.

row.treeExpand();

Collapse Row

When the tree structure is enabled the treeCollapse function will collapse current row and hide its children.

row.treeCollapse();

Toggle Row

When the tree structure is enabled the treeToggle function will toggle the collapsed state of the current row.

row.treeToggle();

Get Parent Row

When the tree structure is enabled the getTreeParent function will return the Row Component for the parent of this row. If no parent exists, a value of false will be returned.

var parent = row.getTreeParent();

Get Child Rows

When the tree structure is enabled the getTreeChildren function will return an array of Row Components for this rows children.

var children = row.getTreeChildren();

Check If Tree Expanded

When the tree structure is enabled the isTreeExpanded function will return true if the row is expanded and showing its children and false if it is collapsed.

var expanded = row.isTreeExpanded();

Validate Row Data

The validate method will check the data in the cells of this row to see that it passes any validatiors defined on the rows columns

var valid = row.validate();

This will return a value of true if every cell passes validation, if any cells fail, then it will return an array of Cell Components representing each cell in that row that has failed validation.

Popup

The popup method will trigger a popup to be displayed over the row

row.popup("Hey There", "center");

The first argument of the popup function is the contents of the popup, this can take any of the standard popup contents options.

The second optional argument is the position of the popup relative to the components element. This can take one of 5 values:

  • center - the top left of the popup is positioned in the center of the element (default)
  • right - the top left of the popup is positioned to the top right of the element
  • bottom - the top left of the popup is positioned to the bottom left of the element
  • top - the top left of the popup is positioned to the top left of the element
  • left - the top left of the popup is positioned to the top left of the element

Get Ranges

You can retreive all ranges that overlap a row by calling the getRanges function:

var ranges = row.getRanges();

This will return an array of Range Components for any ranges that overlap the row. If no ranges overlap the row, an empty array will be returned.

Column Component

The column component provides access to a specific column. The example below shows how it is passed to the columnMoved callback.

var table = new Tabulator("#example-table", {
    columnMoved:function(column, columns){
        alert("The user has moved column: " + column.getField()); //display the columns field name
    }
});

The component provides the following functions:

Get Element

The getElement function returns the DOM node for the column.

var columnElement = column.getElement();

Get Table

The getTable function returns the Tabulator object for the table containing the column.

var table = column.getTable();

Get Definition

The getDefinition function returns the column definition object for the column.

var columnDefinition = column.getDefinition();

Update Definition

You can update the definition of a column by calling the updateDefinition function passing in an object containing properties of the column that you want to change. Any properties defined on the original column definition and not contained in the update object will be unchanged.

The function will return a promise that will resolve when the column has been updated, passing in the updated column component as an argument.

column.updateDefinition({title:"Updated Title"}) //change the column title
.then(function(column){
    //column - column component for the updated column;
})
.catch(function(error){
    //handle column update error
});

New Column Component It is worth noting that using this function actually replaces the old column with a totally new column component, therefor any references to the previous column component will no longer work after this function has been run.

Get Field

The getField function returns the field name for the column.

var columnField = column.getField();

Get Cells

The getCells function returns an array of CellComponent objects, one for each cell in the column.

var cells = column.getCells();

Get Next Column

The getNextColumn function returns the Column Component for the next visible column in the table, if there is no next column it will return a value of false.

var nextColumn = column.getNextColumn();

Get Previous Column

The getPrevColumn function returns the Column Component for the previous visible column in the table, if there is no previous column it will return a value of false.

var prevColumn = column.getPrevColumn();

Get Visibility

The isVisible function returns a boolean to show if the column is visible, a value of true means it is visible.

var visible = column.isVisible();

Show Column

The show function shows the column if it is hidden.

column.show();

Hide Column

The hide function hides the column if it is visible.

column.hide();

Toggle Visibility

The toggle function toggles the visibility of the column, switching between hidden and visible.

column.toggle();

Get Width

The getWidth function returns the width of the column in pixels

var width = column.getWidth();

Set Width

You can set the width of a column using the setWidth function, passing the width of the column in pixes as an integer as the first argument,

column.setWidth(123); // set the column width to 123 pixels

Passing a value of true to the function will resize the column to fit its contents

column.setWidth(true); // set the column width to fit its contents

Delete

The delete function deletes the column, removing it from the table

column.delete();

Scroll To

The scrollTo function will scroll the table to the column if it is visible.

column.scrollTo();

You can pass optional arguments to the function to change the behaviour of the scroll. The first argument is used to set the position of the column, it should be a string with a value of either left, middle or right, if omitted it will be set to the value of the scrollToColumnPosition option which has a default value of left.

The second argument is optional, and is a boolean used to set if the table should scroll if the column is already visible, true to scroll, false to not, if omitted it will be set to the value of the scrollToColumnIfVisible option, which defaults to true

column.scrollTo("right", true); //scroll column to right if it is currently visible

The scrollTo method returns a promise, this can be used to run any other commands that have to be run after the column has been scrolled to. By running them in the promise you ensure they are only run after the column has been scrolled to.

column.scrollTo()
.then(function(){
    //run code after column has been scrolled to
})
.catch(function(error){
    //handle error scrolling to column
});

Move Column

You can move a column next to another column using the move function.

The first argument should be the target column that you want to move to, and can be any of the standard column component look up options.

The second argument determines whether the column is moved to before or after the target column. A value of false will cause to the column to be placed before the target column, a value of true will result in the column being placed after the target

column.move("age", true); //move the current column after the age column

Get Sub Columns

The getSubColumns function returns an array of ColumnComponent objects, one for each sub column of this column.

var subColumns = column.getSubColumns();

Get Parent Column

The getParentColumn function returns the ColumnComponent for the parent column of this column. if no parent exists, this function will return false

var parentColumn = column.getParentColumn();

Focus on Header Filter

The headerFilterFocus function will place focus on the header filter element for this column if it exists.

column.headerFilterFocus();

Set Header Filter Value

The setHeaderFilterValue function set the value of the columns header filter element to the value provided in the first argument.

column.setHeaderFilterValue("steve");

Get Header Filter Value

The getHeaderFilterValue function will retrieve the current value of the columns header filter.

var filterValue = column.getHeaderFilterValue();

Reload Header Filter Element

The reloadHeaderFilter function rebuilds the header filter element, updating any params passed into the editor used to generate the filter.

column.reloadHeaderFilter();

Column Data Validation

The validate method will check the data in the cells in this column to see that it passes any validatiors defined on the column

var valid = column.validate();

This will return a value of true if every cell passes validation, if any cells fail, then it will return an array of Cell Components representing each cell in that column that has failed validation.

Popup

The popup method will trigger a popup to be displayed over the column header

column.popup("Hey There", "center");

The first argument of the popup function is the contents of the popup, this can take any of the standard popup contents options.

The second optional argument is the position of the popup relative to the components element. This can take one of 5 values:

  • center - the top left of the popup is positioned in the center of the element (default)
  • right - the top left of the popup is positioned to the top right of the element
  • bottom - the top left of the popup is positioned to the bottom left of the element
  • top - the top left of the popup is positioned to the top left of the element
  • left - the top left of the popup is positioned to the top left of the element

Get Ranges

You can retreive all ranges that overlap a column by calling the getRanges function:

var ranges = column.getRanges();

This will return an array of Range Components for any ranges that overlap the column. If no ranges overlap the column, an empty array will be returned.

Cell Component

The cell component provides access to a specific cell. The example below shows how it is passed to the cellClick callback for a cell.

{title:"Name", field:"name", cellClick:function(e, cell){
        alert("The cell has a value of:" + cell.getValue()); //display the cells value
    },
}

The Component provides the following functions:

Get Value

The getValue function returns the current value for the cell.

var cellValue = cell.getValue();

Get Old Value

The getOldValue function returns the previous value of the cell before the last edit. Very useful in the event of cell update callbacks.

var cellOldValue = cell.getOldValue();

Restore Old Value

The restoreOldValue reverts the value of the cell back to its previous value, without triggering any of the cell edit callbacks.

cell.restoreOldValue();

Get Initial Value

The getInitialValue function returns the value the cell held when it was first loaded, before any editing took place.

var cellInitialValue = cell.getInitialValue();

Restore Initial Value

The restoreInitialValue reverts the value of the cell back to its initial value, without triggering any of the cell edit callbacks.

cell.restoreInitialValue();

Get Element

The getElement function returns the DOM node for the cell.

var cellElement = cell.getElement();

Get Table

The getTable function returns the Tabulator object for the table containing the cell.

var table = cell.getTable();

Get Row

The getRow function returns the RowComponent for the row that contains the cell.

var row = cell.getRow();

Get Column

The getColumn function returns the ColumnComponent for the column that contains the cell.

var column = cell.getColumn();

Get Data

The getData function returns the data for the row that contains the cell.

var data = cell.getData();

You can optionally pass the transform type into this function if you want to trigger column accessors on the data

var data = cell.getData("data");

Get Field

The getField function returns the field name for the column that contains the cell.

var field = cell.getField();

Get Type

The getType can be used to determine if the cell is being used as a cell or a header element. This can be useful for editors or formatters if you want them to behave differently when used ina header vs a cell.

var type = cell.getType();

This function will return a string:

  • cell - This cell is being used as a cell
  • header - This cell is being used as a header

Set Value

You can change the value of the cell using the setValue function. The first parameter should be the new value for the cell, the second optional parameter will apply the column mutators to the value when set to true (default = true).

cell.setValue("Steve", true); //set the cell's value to "Steve" and apply the column mutators if present

Check Height

If you are making manual adjustments to elements contained withing the cell, or the cell itself, it may sometimes be necessary to recalculate the height of all the cells in the row to make sure they remain aligned. Call the checkHeight function to check if the height of the cell has changed and normalize the row if it has.

cell.checkHeight();

Edit

You and programmatically cause a cell to open its editor element using the edit function.

cell.edit();

If you want to ignore the editable property of the column definition and force the edit, you can pass an optional value of true to the function

cell.edit(true); //force the editor to open even if editable is set to false

Cancel Edit

You and programmatically cancel a cell edit that is currently in progress by calling the cancelEdit function.

cell.cancelEdit();

Check If Cell Has Been Edited

The isEdited function can be used to check if a cell has been edited in the past, it will return a value of true if the cell has been edited and false if it hasnt.

var edited = cell.isEdited();

Clear Edit Flag

The clearEdited function clear the edited state of the cell used by the isEdited function and mark the cell as unedited.

cell.clearEdited();

Navigation

When a cell is being edited it is possible to move the editor focus from the current cell to one if its neighbours. There are a number of navigation functions that can be called current cell to move the focus in different directions.

cell.navigateLeft(); //move focus left to next editable cell.

You can navigate any direction around the table using the following functions:

  • navigatePrev - next editable cell on the left, if none available move to the right most editable cell on the row above
  • navigateNext - next editable cell on the right, if none available move to left most editable cell on the row below
  • navigateLeft - next editable cell on the left, return false if none available on row
  • navigateRight - next editable cell on the right, return false if none available on row
  • navigateUp - move to the same cell in the row above
  • navigateDown - move to the same cell in the row below

Cell Validation

The validate method will check the value of the cell against any validators defined on its column

var valid = cell.validate();

This will return a value of true if the cell passes validation, or an array of failed validators if it fails validation.

The failed validation array contains validator objects for each validator that has failed. each object has a type prop which is the key for that validator (eg. "required"), and parameters prop which contains any props passed with the validator

In the example below, the validation failed on the min validator with its parameter set to 5:

[
    {
        key:"min"
        parameters:5,
    }
]

Cell Data Is Valid

The isValid method checks if a cell has previously passed a validation check without revalidating it, This is useful if you are using the highligh validation mode and want to check if an edited cell has passed validation

var valid = cell.isValid();

As with the validate function, this will return a value of true if the cell passes validation, or an array of failed validators if it fails validation.

Clear Invalid Validation

The clearValidation method clears the invalid flag used by the isValid function and marks the cell as valid

cell.clearValidation();

Popup

The popup method will trigger a popup to be displayed over the cell

cell.popup("Hey There", "center");

The first argument of the popup function is the contents of the popup, this can take any of the standard popup contents options.

The second optional argument is the position of the popup relative to the components element. This can take one of 5 values:

  • center - the top left of the popup is positioned in the center of the element (default)
  • right - the top left of the popup is positioned to the top right of the element
  • bottom - the top left of the popup is positioned to the bottom left of the element
  • top - the top left of the popup is positioned to the top left of the element
  • left - the top left of the popup is positioned to the top left of the element

Get Ranges

You can retreive all ranges that overlap a cell by calling the getRanges function:

var ranges = cell.getRanges();

This will return an array of Range Components for any ranges that overlap the cell. If no ranges overlap the cell, an empty array will be returned.

Group Component

The group component provides access to a set of grouped rows. The example below shows how it is passed to the groupVisibilityChanged callback.

var table = new Tabulator("#example-table", {
    groupVisibilityChanged:function(group, visible){
        alert("The user has " (visible ? "opened" : "collapsed") +" group: " + group.getKey()); //display the groups unique key
    }
});

The component provides the following functions:

Get Element

The getElement function returns the DOM node for the group header.

var groupElement = group.getElement();

Get Table

The getTable function returns the Tabulator object for the table containing the group.

var table = group.getTable();

Get Key

The getKey function returns the unique key that is shared between all rows in this group.

var key = group.getKey();

Get Field

The getField function returns the string of the field that all rows in this group have been grouped by. (if a function is used to group the rows rather than a field, this function will return false)

var field = group.getField();

Get Rows

The getRows function returns an array of RowComponent objects, one for each row in the group.

var rows = group.getRows();

Get Sub Groups

The getSubGroups function returns an array of GroupComponent objects, one for each sub group of this group.

var subGroups = group.getSubGroups();

Get Parent Group

The getParentGroup function returns the GroupComponent for the parent group of this group. if no parent exists, this function will return false

var parentGroup = group.getParentGroup();

Get Visibility

The isVisible function returns a boolean to show if the group is visible, a value of true means it is visible.

var visible = group.isVisible();

Show Group

The show function shows the group if it is hidden.

group.show();

Hide Group

The hide function hides the group if it is visible.

group.hide();

Toggle Visibility

The toggle function toggles the visibility of the group, switching between hidden and visible.

group.toggle();

Scroll To

The scrollTo function will scroll the table to the group header if it passes the current filters.

group.scrollTo();

You can pass optional arguments to the function to change the behaviour of the scroll. The first optional argument is used to set the position of the group header, it should be a string with a value of either top, center, bottom or nearest, if omitted it will be set to the value of the scrollToRowPosition option which has a default value of top.

The second argument is optional, and is a boolean used to set if the table should scroll if the group header is already visible, true to scroll, false to not, if omitted it will be set to the value of the scrollToRowIfVisible option, which defaults to true

group.scrollTo("top", true); //scroll group to top if it is currently visible

The scrollTo method returns a promise, this can be used to run any other commands that have to be run after the group has been scrolled to. By running them in the promise you ensure they are only run after the group has been scrolled to.

group.scrollTo()
.then(function(){
    //run code after group has been scrolled to
})
.catch(function(error){
    //handle error scrolling to group
});

Popup

The popup method will trigger a popup to be displayed over the group header

group.popup("Hey There", "center");

The first argument of the popup function is the contents of the popup, this can take any of the standard popup contents options.

The second optional argument is the position of the popup relative to the components element. This can take one of 5 values:

  • center - the top left of the popup is positioned in the center of the element (default)
  • right - the top left of the popup is positioned to the top right of the element
  • bottom - the top left of the popup is positioned to the bottom left of the element
  • top - the top left of the popup is positioned to the top left of the element
  • left - the top left of the popup is positioned to the top left of the element

Calculation Component

The calc component is a subset of the Row Component, and is used for all calculation rows in the table, it has similar basic functionality to the row component, without a lot of the row specific functionality.

The component provides the following functions:

Get Data

The getData function returns the data object for the row.

var rowData = row.getData();

Get Element

The getElement function returns the DOM node for the row.

var rowElement = row.getElement();

Get Table

The getTable function returns the Tabulator object for the table containing the row.

var table = row.getTable();

Get Cells

The getCells function returns an array of CellComponent objects, one for each cell in the row.

var cells = row.getCells();

Get Cell in Specific Column

The getCell function returns the CellComponent for the specified column from this row.

var cell = row.getCell(column);

Range Component

The range component provides access to a selected range of cells. The example below shows how it is passed to the rangeAdded event

table.on("rangeAdded", function(range){
    //range - range component for the selected range
    alert("The user has selected a new range containing " + range.getCells().length + " cells");
});

The component has the following functions:

Update Range Bounds

You can update the bounds for an existing range using the setBounds function, passing in the Cell Components for the top-left and bottom-right bounds of the selection:

    var topLeft = table.getRows()[2].getCells()[1];
    var bottomRight = table.getRows()[5].getCells()[6];

    range.setBounds(topLeft, bottomRight);

Update Range Start

You can change the top left start edge of an existing range using the setStartBound function, passing in the Cell Component for the top left bound of the selection:

    var topLeft = table.getRows()[2].getCells()[1];

    range.setStartBound(topLeft);

Update Range End

You can change the bottom right ending edge of an existing range using the setEndBound function, passing in the Cell Component for the bottom right bound of the selection:

    var bottomRight = table.getRows()[5].getCells()[6];

    range.setEndBound(bottomRight);

Remove Range

You can remove a range by calling the remove function on the range:

range.remove();

Get Element

You can retrieve the bounding rectagle element for a range by calling the getElement function on the range:

var element = range.getElement();

Get Data

You can retrieve the cell data for a range by calling the getData function on the range:

var data = range.getData();

This will return a range data array, which is structured as a series of row data objects with only the props for cells in that range:

[
    {color:"green", country:"England", driver:true}, //data for selected cells in first row in range
    {color:"red", country:"USA", driver:false}, //data for selected cells in second row in range
    {color:"blue", country:"France", driver:true}, //data for selected cells in third row in range
]

Clear Values

You can clear the value of every cell in a range by calling the clearValues function on the range:

var data = range.clearValues();

This will set the value of every cell in the range to the value of the selectableRangeClearCellsValue table option, which is set to undefined by default.

Get All Cells

You can retrieve all the Cell Components in a range by calling the getCells function on the range:

var cells = range.getCells();

This will return a array of Cell Components

Get With Structure

You can retrieve a structured map of all the Cell Components in a range by calling the getStructuredCells function on the range:

var cells = range.getStructuredCells();

This will return a array of row arrays, with each row array containing the Cell Components in order for that row:

[
    [Component, Component, Component], //first row
    [Component, Component, Component], //second row
    [Component, Component, Component], //third row
]

Get Rows

You can retrieve all the Row Components in a range by calling the getRows function on the range:

var rows = range.getRows();

This will return a array of Row Components

Get Columns

You can retrieve all the Column Components in a range by calling the getColumns function on the range:

var columns = range.getColumns();

This will return a array of Column Components

Get Bounds

You can retrieve the bounds of a range by calling the getBounds function on the range:

var bounds = range.getBounds();

This will return an object containing two Cell Components, for the two bounds of the range

{
    start:Component, //the cell component at the top left of the range
    end:Component, //the cell component at the bottom right of the range
}

Get Top Edge

You can find the position number for the top row of the range by calling the getTopEdge function on the range:

var topPosition = range.getTopEdge();

Get Bottom Edge

You can find the position number for the bottom row of the range by calling the getBottomEdge function on the range:

var bottomPosition = range.getBottomEdge();

Get Left Edge

You can find the position number for the left column of the range by calling the getLeftEdge function on the range:

var leftPosition = range.getLeftEdge();

Get Right Edge

You can find the position number for the right column of the range by calling the getRightEdge function on the range:

var rightPosition = range.getRightEdge();

Sheet Component

The sheet component provides access to the functionality of a particular sheet from the spreadsheet module, and provides a wide range of functions for manipulating that sheet.

The example below shows how the component is passed into the sheetUpdated event

table.on("sheetUpdated", function(sheet){
    //sheet - sheet component for the affected sheet
    alert("The user has updated a sheet: "+ sheet.getTitle());
});

The component has the following functions:

Get Title

You can get the title of a sheet by calling the getTitle function:

var title = sheet.getTitle();

Set Title

You can set the title of a sheet by calling the setTitle function, the first argument should be the new title:

sheet.setTitle("Info");

Get Key

You can get the key of a sheet by calling the getKey function:

var key = sheet.getKey();

Get Definition

You can get the definition object of a sheet by calling the getDefinition function:

var def = sheet.getDefinition();

Set Row Count

You can set the row count of a sheet by calling the setRows function, the first argument should be the number of rows for the sheet:

sheet.setRows(20);

Set Column Count

You can set the row count of a sheet by calling the setColumns function, the first argument should be the number of columns for the sheet:

sheet.setColumns(20);

Get Data

You can get the data array of a sheet by calling the getData function:

var data = sheet.getData();

Set Data

You can set the data array of a sheet by calling the setData function, the first argument of the function is the data array:

data = [
    [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
    [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
    [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
    [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
    ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
];

sheet.setData(data);

Clear

You can clear the data of a sheet by calling the clear function:

sheet.clear();

Remove

You can remove a sheet from the table by calling the remove function:

sheet.remove();

Activate

You can make a sheet the active sheet by calling the active function:

sheet.active();

Component Lookup

Any function that takes a component as an argument will also attempt to find that component based on the value provided if it is not a component itself. The following values can be used for each component type:

Row

Column

Cell

Sheet

  • A SheetComponent
  • The string for the key of the sheet
  • if you leave the field empty it will default to the currently active sheet

Row Range Lookup

Functions that export rows from the table, like print and clipboard require a range of rows to be specified to be included in the export. This range variable can take one of the following strings as input:

  • visible - Rows currently visible in the table viewport
  • active - Rows currently in the table (rows that pass current filters etc)
  • selected - Rows currently selected rows by the selection module (this includes not currently active rows)
  • range - Any currently selected ranges from the range selection module
  • all - All rows in the table regardless of filters
var table = new Tabulator("#example-table", {
    printRowRange:"selected", //print only currently selected rows
});

Custom Row Range

For custom row ranges it is also possible to pass a function into range properties that should return an array of Row Components:

var table = new Tabulator("#example-table", {
    printRowRange:function(){
        //only print rows where the age is over 18
        return this.getRows().filter((row) => {
            return row.getData().age > 18;
        });
    },
});
Donate