Version 6.2 Released!

Click to checkout the new features
Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.2

Release Notes

Columns

Move Columns

Tabulator now provides a way for you to programmatically move rows around your table

Move Column on Table

If you want to programmatically move a column to a new position you can use the moveColumn function.

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

The second 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 third argument determines whether the column is moved to before or after the target column. A value of true will cause to the column to be placed after the target column, a value of false will result in the column being placed before the target

table.moveColumn("name", "age", true); //move the name column after the age column

Move Column on Component

You can move a column component 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

Editors

Editor Element Attributes

All editors now have and additional property on thier editorParams option. The new elementAttributes peoperty allows you to pass in an object of key value pairs to set attributes directly on the editor element. the key of theproperty will represent the attribute name and the value will be set as the attributes value.

{title:"Name", field:"name", editor:"input", editorParams{
    elementAttributes:{
        maxlength:"10", //set the maximum character length of the input element to 10 characters
    }
}}

By default this will automatically replace any existing value on that attribute, which may cause trouble if for example you are trying to update the style attribute of an element. In this case you can prefix the attribute name with a +, this will cause the value to be appended to the end of the existing attribute.

{title:"Name", field:"name", editor:"input", editorParams{
    elementAttributes:{
        "+style":"background-color:#f00;", //set background colour of the element to red and keep existing styles.
    }
}}

Select and Autocomplete Default Values

The defaultValue property can now be set on the editorParams for the select and autocomplete editors.

This property will cause a value from the list to be selected by default when an editor is loaded on a cell with an undefined value.

{title:"Color", field:"col", editor:"select", editorParams{
    values:["red", "green", "blue"]
    defaultValue:"green", //select the value of green in the dropdown list by default if the cell has no value
}}

Select and Autocomplete Generate Values List From Other Column

You can now pass a string representing the field of another column in the table to the values property on the editorParams for the select and autocomplete editors. Tabulator will automatically build the values list out of all unique values in cells in the specified column.

{title:"Example", field:"example", editor:"select", editorParams:{values:"color"}}

Clipboard

Column Visibility

If you don't want to show a particular column in the clipboard output you can set the clipboard property in its column definition object to false:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Hidden Column", field:"secret", clipboard:false} //hide data in clipboard data
    ]
});

You can also force a hidden column to be visibile in the clipboard output by setting the clipboard property in its column definition object to true:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Hidden Column", field:"secret", visible:false, clipboard:true} //show hidden column in clipboard output
    ]
});

Row Groups

Get Field of Group Component

The new getField function on the group component 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();

New Row on Tab

The new tabEndNewRow option allows you to specifcy the behaviour when the user tabs fro the last editable cell on the last row of the table.

By default nothing will happen when you tab out of the last editable cell on the table. Setting the tabEndNewRow option will cause the table to create a new row and add focus on the first editable cell in that row when you tab out of the last editable cell on the table. You can set it to one of a number of options to determine the data of the new row.

Boolean

Passing a value of true to the option will result in an empty new row being created

var table = new Tabulator("#example-table", {
    tabEndNewRow: true, //create empty new row on tab
});

Data Object

Passing an object to the option will result in a new rown being created with the data object provided

var table = new Tabulator("#example-table", {
    tabEndNewRow: {name:"steve", age:62}, //create new row with this data
});

Function

If you pass a function to the option the function will be called and passed the row component for the row of the current cell, the function should return the data object for the new row.

var table = new Tabulator("#example-table", {
    tabEndNewRow: function(row){
        //row - row component for current last row in table
        return {name:"bob", age:34}; // return data object for new row
    }
});

Sorting

Global Header Sort

The headerSort option can now be set in the table options to affect all columns as well as in column definitions.

var table = new Tabulator("#example-table", {
    headerSort:false, //disable header sort for all columns
});

Global Header Tristate Sort

The headerSortTristate option can now be set in the table options to affect all columns as well as in column definitions.

var table = new Tabulator("#example-table", {
    headerSortTristate:true, //enable tristate header sort for all columns
});

Row Selection

Row Selection Formatter

The new rowSelection formatter allows you to add a column of tickboxes down one side of your table to handle row selection:

var table = new Tabulator("#example-table", {
    columns:[
        {formatter:"rowSelection", titleFormatter:"rowSelection", align:"center", headerSort:false},
    ]
});

Invalid Setup Options

Setting the invalidOptionWarnings option to false will disable console warning messages for invalid properties in the table constructor and column definition objects 

var table = new Tabulator("#example-table", {
    invalidOptionWarnings: false, //disable console warnings for invalid table properties
});

Bug Fixes

The following minor bugs have been fixed:

  • Fixed typo in progress formatter
  • Added warning when groupHeader array size is different from groupBy array size
  • Fixed typos in console warning messages
  • Fixed vairable scope issue in redraw function
  • Improved cross browser detection of localStorage functionality
  • Ensured that the getPrevColumn and getNextColumn functions only return visible rows, as per the documentation
  • Fixed issue with column header filters where they were sending empty strings as filter values after the clearHeaderFilter function was called
  • Fixed issue with getData function missing from sudo cell component on getHTML/print formatters
  • Fixed issue with getRow returning empty object from sudo cell component on getHTML/print formatters
  • Fixed missing table level column calcs in getHTML/print output

Donate