Release Notes
- Easy Upgrade
- ESM Tree Shaking
- Build Tools
- Modules
- Row Headers
- Spreadsheets
- Components
- Resize Guides
- Editing
- Exporting
- Clipboard
- Accessors
- Events
- Internal Events
- CSS Styling
- Bug Fixes
Easy Upgrade
This release sees many new features added to Tabulator, along with a few tweaks to system architecture. Unlike previous major releases there is not a big upgrade process to move to 6.0
In fact, for most developers you will be able to seamlessly upgrade from 5.6 to 6.0 without making any changes. If you build your own custom variations of Tabulator or make your own modules, then have a look below at the Module and Build Tools sections for changes that affect your code.
A full breakdown of key upgrade steps can be found in the Upgrade Guide
Looking to the Future
A lot the work in this release has gone into making changes behind the scenes in how some of Tabulators key features work togeather to make things like ESM Tree Shaking work correctly, and to lay the ground work for some future features that will be comming in the next few releases.
Deprecated Code
All 5.x deprecated code has been removed from the codebase. The updated functionality for each of the deprecated options can be found in the upgrade documentation for the relevant release.ESM Tree Shaking
The ESM module structure has been tweaked to fix issues preventing tree shaking from working properly. This should result in a significant reduction in library size for most usage cases.
The full minified version of Tabulator is about 420kb in size, which is rather big. But in most cases you only need a small subset of the functionality that Tabulator can provide.
By importing only the Tabulator core (which is only 120kb in size), and only the modules you actually use, the library can have a much smaller footprint in your code.
To start your project you should import the Tabulator class, along with any modules that you may need to add features to your table.
You then register those modules with the Tabulator class, using the registerModule function before you instantiate your first table. This function takes one argument of either a module class or an array of module classes. If needed you can call this function multiple times.
import {Tabulator, FormatModule, EditModule} from 'tabulator-tables';
Tabulator.registerModule([FormatModule, EditModule]);
var table = new Tabulator("#example-table", {
//table setup options
});
Build Tools
Dependencies
All the dev dependencies used to package the library have been upgraded to their latest version in this release.
This will likely have no affect on the vast majority of Tabulator users. But if you do build custom versions of Tabulator yourself, or submit Pull Requests to the library then please take note of the following.
This release sees Tabulator upgrade to using Rollup v4 for its package bundling, this now means that in order to build your own version of Tabulator, you will need to be running node v18 or higher.
Build Files
In additon to this, several of the build files have now been renamed to match the requirements of Rollup 4, this should have little impact unless you have implemented custom build steps.
NPM Commands
All of the existing npm run commands still work as they did before.
Modules
Custom modules have been given a couple of upgrades as part of this release
Static Properties
Several of the existing setup options for custom modules have been moved to static properties inside the module class definitions
Module Names
The name of a module should now be set using the static moduleName property in the object class definition instead of on the prototype
class CustomModule extends Module{
static moduleName = "custom"; //module name
}
Module Initialization Order
The name optional initialization order for a module now be set using the static moduleInitOrder property in the object class definition instead of on the prototype
class CustomModule extends Module{
static moduleInitOrder = 10; //when to initialize the module compared to other modules
}
Extending Other Modules
The module structure now provides a way for you to extend the default settings of other modules if you need to enhance their functionality to fit with your custom module. For example if your new module required a new formatter to be made available in the format module for instance.
This helps keep all new functionality related to a module contained in that module, making the codebase easier to maintain.
This works in a similar way to the Extending Module functionality that is available outside of a module, and is available to alter all the same settings outlined in the documentation for that functionality.
Inside a module this is done using the optional static moduleExtensions property.
In this example we are extending the format module, and adding bold and uppercase formatters to the formatters property:
class CustomModule extends Module{
static moduleName = "custom"; //module name
static moduleExtensions = {
format:{ //module you want to extend
formatters:{ //property you want to extend
bold:function(cell, formatterParams){ //new bold property
return "" + cell.getValue() + ""; //make the contents of the cell bold
},
uppercase:function(cell, formatterParams){ //new uppercase property
return cell.getValue().toUpperCase(); //make the contents of the cell uppercase
}
}
}
}
constructor(table){
...
}
}
The moduleExtensions option takes an object as its value. The properties of that object should be the names of any modules you want to extend. In the example above this is the format property. Each of these properties should have an object assigned to them.
Each of those objects should have properties for each of the modules properties that you want to extend which in-turn also contain an object. In the example above this is the formatters property.
Each of those objects should have properties for the elements you want to add to that property. In the example above this is the bold and uppercase properties.
Static Extension
Because modules can only be extended before the table has been instatiated, these extensions must be defined statically and cannot be altered based on table configuration. Attempting to alter these after a table has been instantiated may result in unpredictable behaviour.
Missing Modules
Exenstions will only be applied to modules that have been registered with your Tabulator class. If extensions have been added for a module that has not been registered, they will be safely ignored. For example, in this case if the table did not have a format module, these extensions would be ignored
Row Headers
Sometimes it can be useful to add a visual header to the start of a row. The new rowHeader option allows you to define a column definition for a styalized header column at the start of the row.
This can be great for adding row number, movable row handles or row selections, and keeps the controls visually eperated from the table data.
var table = new Tabulator("#example-table", {
rowHeader:{formatter:"rownum", headerSort:false, hozAlign:"center", resizable:false, frozen:true},
});
You can alternativley pass a value of true to the rowHeader option to add a small empty row header
var table = new Tabulator("#example-table", {
rowHeader:true,
});
Module Examples
Checkout the movable rows, row selection and responsive collapse demos to see the new row header functionality in use.
Module Integrations
A number of existing modules have been reworked to make use of this new functionality, checkout the rest of the release notes to see which modules can now incorporate the row header
Spreadsheet Module
This release sees the introduction of the new spreadsheet module, which can generate a blank empty spreadsheet with standard alphabetical columns and numeric rows, and then load an array of data into that table.
The purpose of the spreadsheet module is to layout columns and rows, handle multiple sheets of data, map data into the table and extract it in array format. The real power of this module is realised when it is combined with many other table modules like range selection, editing and clipboard to give a comprehensive spreadsheet experience.
Formulas
The spreadsheet module does not currently support cell based formulas, but this will be comming in a future release.
Data Format
The spreadsheet module works differently than other modules, and is designed to handle spreadsheet data as an array of row arrays rather than objects. This essentially replicates the grid format of a spreadsheet:
[
[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, ""],
[7040, 4861, 2988, 5584, 2344, 9749, 8872, 9177, 6246],
[6334, 1674, 2967, "", 9353, 396, 6006, 8572 , ""],
[6359, "", 2580, 5723, 9801, 554, 1044, 5266, 8532],
[7278, 6971, 2232, 5720, 5665, 7231, 1165, "", 168],
]
Because it is designed to handle array formatted data across multiple sheets it has its own properties and functions for loading and retreiving data from the table.
Compatability
Because the spreadsheet module lays out data in a very rigid spreadsheet format, it is not compatible with ant modules that add other custom elements into rows or columns, such as pagination, grouping, responsive collaspe, column calculations etc.
Simple Spreadsheet
If you only want to display a single sheet of data, then there is are a series of quick options you can setup to get you spreadsheet up and running.
You can enable spreadsheet mode by setting the spreadsheet option to true:
var table = new Tabulator("#example-table", {
spreadsheet:true,
});
Sheet Size
You can define dimensions of your sheet using a couple of options, Tabulator will then generate the needed empty columns and rows for your spreadsheet.
It is worth noting that if you load in data with more rows or columns than your current sheet, the sheet will be expanded to fit the data, you can never have a sheet smaller than the data it contains
You can define the numbr of columns you want in your spreadsheet using the spreadsheetColumns option. This option has a default value of 50 if not set.
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetColumns:100, //create spreadsheet with 100 columns
});
You can define the numbr of rows you want in your spreadsheet using the spreadsheetRows option. This option has a default value of 50 if not set.
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetRows:100, //create spreadsheet with 100 rows
});
Loading Data
You can load array formatted data into your spreadsheet in one of two ways.
You can either load it at the point the table is loaded using the spreadsheetData option:
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetData:[
[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, ""],
]
});
Or you can load it at any point after the table is built, using the setSheetData function, passing the array as the first argument in the function:
var 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, ""],
];
table.setSheetData(data);
Spreadsheet Data Loading
It is very important to note that when using the spreadsheet module, you must only use the spreadsheet functions and options for loading data into the table, this is because the module maps that data into a format that Tabulator can understand. If you use any of the standard data options or and data manipulation functions like setData, it will result in the table malfunctioning.
Cell Setup
All cells in the spreadsheet will be setup with the same column definition, you can customize this using any of the standard column definition options by passing a object to the spreadsheetColumnDefinition option.
For exammple if you wanted to add an input editor to all cells then you could the following:
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetColumnDefinition:{editor:"input"}, //add an input editor to every cell
});
Row Header
A good way to improve the functionality of the spreadsheet is to use the tables built in row header functionality to add a row header to each row with that rows number displayed.
The spreadsheet module injects the index for each row onto its _id property, so if you set that as the field of the header row then each row will show its assigned row number:
var table = new Tabulator("#example-table", {
spreadsheet:true,
rowHeader:{field:"_id", hozAlign:"center", headerSort:false},
});
Exporting Data
You can extract data from your sheet at any point by calling the getSheetData function. This will return an array of sheet data in the same format as outlined above
var data = table.setSheetData(data);
It is worth noting that by default the spreadsheet will only export the rows and columns of a spreadheet that actually contain data (ie. it ignores a column or row if all of it cells have a value of undefined).
For example if you had a table with 50 columns and only the first 10 contained data, only the first 10 would be exported. This prevents large numbers of empty rows and columns from clogging up a data set.
Only empty rows and columns after the data are ignored, empty cells before the data (ie above and to the left of data) are included so that the data does not change its index in the table
If you would like to export the entirety of a dataset including empty columns and rows, you can do this using the spreadsheetOutputFull option.
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetOutputFull: true, //export all data including empty columns
});
Multiple Sheets
If you are looking to include multiple sheets in your table then Tabulator has a range of options to setup the table and make it easier for your users to interact with data across multiple sheets
Sheet Definitions
If you want to load multiple sheets of data into yout table then you can pass an array of sheet definition objects to the spreadsheetSheets option. A sheet definition object contains the the data for the sheets as well as meta data about the sheet such a its size and title.
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetSheets:[
{
title:"Sales Info",
key:"info",
columns:20,
rows:20,
data:[
[9937, "", "", 7749, 9816, 4355, 8279, "", ""],
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
]
},
{
title:"Profitablility",
key:"profit",
data:[
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
[1924, 8734, 1819, 1838, 2330, 7921, 9219, "", 3537],
]
},
]
});
The following options can be set on a sheets definition object:
- title - The title displayed in the sheets tab
- key - The key used to reference the sheet when calling functions (if this is not defined it will default to the title)
- columns - the number of columns in the sheet (if not defined it will default to the spreadsheetColumns option)
- rows - the number of rows in the sheet (if not defined it will default to the spreadsheetRows option)
- data - the data array for the sheet
You can either use the spreadsheetSheets to load multiple sheets or the spreadsheetData to load a single sheet. Yu cannot use both at the same time
Tabs
By default Tabulator will load in multiple sheets and show the contents of the first sheet, you can then programatically choose when to show other sheets to the user.
If you would prefer the user to be able to navigate through the sheets themelves via some tabs in the footer, enable the spreadsheetSheetTabs option:
var table = new Tabulator("#example-table", {
spreadsheet:true,
spreadsheetSheetTabs:true, //show spreadsheet tabs in footer
});
Ajax Loading
In addition to the spreadsheetData and spreadsheetSheets options for loading your spreadsheets from local data, you can also make use of the ajax module to request your spreadsheet data from a remote source.
Set the standard ajaxURL option to the source URL for your spreadsheet data. This enpoint should either return an array of sheet data or an array of structure definition objects as outline above. The spreadsheet module can detect which format it is and will load the data appropriately.
var table = new Tabulator("#example-table", {
spreadsheet:true,
ajaxURL:"http://www.mysite.com/sheets", //url endpoint for sheet data
});
You can also use all other standard ajax options for configuring your request, checkout the Ajax Documentation for full details
Sheet Management
The spreadsheet module provieds a wide range of functions for interacting with sheets. Most of these functions can either be called on both the table or on a matching function on a specific Sheet Component
Sheet Lookups
A lot of the management functions have a first argument that is the sheet lookup define which sheet the action should be carried out on. This can take one of three values:
- undefined - if you leave the field empty it will default to the currently active sheet
- sheeet component - you can pass in the sheet component for a sheet you want to action
- key - pass in the string for the key of the sheet you want to action
For eaxample the function below will clear the data for the sheet with a key of "info":
table.clearSheet("info"); // clear info tab data
Set Sheets
You can replace all sheets in the table using the setSheets function. This function takes an array of sheet definitions as its first argument.
var sheetDefs = [
{
title:"Sales Info",
key:"info",
columns:20,
rows:20,
data:[
[9937, "", "", 7749, 9816, 4355, 8279, "", ""],
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
]
},
{
title:"Profitablility",
key:"profit",
data:[
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
[1924, 8734, 1819, 1838, 2330, 7921, 9219, "", 3537],
]
},
];
table.setSheets(sheetDefs);
Add Sheet
You can add a new sheet to the end of the existing set of sheets by calling the addSheet function, passing the sheet definition for the sheet as the first argument. The function returns the Sheet Component for the new sheet:
var sheetDef = {
title:"New Sheet",
key:"new",
data:[
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
[1924, 8734, 1819, 1838, 2330, 7921, 9219, "", 3537],
]
};
var sheet = table.addSheet(sheetDef);
Get Sheet Definitions
You can get the sheet definitions for all current sheets by using the getSheetDefinitions function:
var sheetDefs = table.getSheetDefinitions();
This is particularly useful if you want to capture state of all the current sheets, you can then load this back into the table via the setSheets function at a later date to restore the tables state.
Get All Sheet Components
You can retreive an array of all current Sheet Components using the getSheets function:
var sheets = table.getSheets();
Get Sheet Component
You can retreive a Sheet Component for a specific sheet using the getSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to retrieve:
var sheet = table.getSheet("info"); //get the sheet component for the info sheet
Set Sheet Data
You can replace the data on a sheet by calling the setSheetData function, the first argument of this function is a Sheet Lookup for the sheet you want to retrieve, the seciond argument is the data array:
var data = [
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
[1924, 8734, 1819, 1838, 2330, 7921, 9219, "", 3537],
];
table.setSheetData("info", data); //set data on info sheet
If you only pass data into this function it will replace the data on the currently active sheet:
var sheet = table.getSheet("info"); //get the sheet component for the info sheet:
var data = [
[2380, "", 6977, 8896, 4012, 3803, 5408, 3415, 3056],
[9180, "", 39, 9445, 3917, "", 18, 5239, 2516],
[1924, 8734, 1819, 1838, 2330, 7921, 9219, "", 3537],
];
table.setSheetData(data); //set data on the active sheet
Get Sheet Data
You can retrieve the data from a sheet by calling the getSheetData function, the first argument of this function is a Sheet Lookup for the sheet you want to retrieve:
var data = table.getSheetData("info"); //get the data from the info sheet
Clear Sheet
You can clear all data on a sheet by calling the clearSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to clear:
table.clearSheet("info"); //clear the data from the info sheet
Make Sheet Active
You can make a sheet active by calling the activeSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to make active:
table.activeSheet("info"); //make the info sheet active
Remove Sheet
You can remove a sheet from the table by calling the removeSheet function, the first argument of this function is a Sheet Lookup for the sheet you want to remove:
table.removeSheet("info"); //remove the info sheet from the table
Components
Sheet Component
With the introduction of the spreadsheet module, we also see the introduction of the new sheet component, this provides access to the functionality of a particular sheet 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();
Resize Guides
By default when resizing columns or rows, the row will automatically resize as you drag the elements edge across the table. While this is often desierable, if you have complex cell contents this can sometimes lead to unpleasent or jittery redrawing of the table.
To improve these scenarios, the resize modules now provide resize guides. When using guides, when you drag the edge of a column or row, a guide is shown that helps you see how big the element will be when you have finished dragging, but it will only actually resize the elements when the resize is complete.
Column Resize Guides
Column resize guides can be enabled with the resizableColumnGuide option. These guides will only appear on columns with the resizable option enabled in their column definition.
var table = new Tabulator("#example-table", {
resizableColumnGuide: true,
});
Row Resize Guides
Row resize guides can be enabled with the resizableRowGuide option. These guides will only appear if the resizableRows option is enabled.
var table = new Tabulator("#example-table", {
resizableRows: true,
resizableRowGuide: true,
});
Editing
Empty Value
When editing a cell, if a user clears the value of the cell and then leaves focus the value of the cell is often set to an empty string "" or other similarly empty value. This is not always a desierable option, you may want to ensure that empty cells always have the same value, for example a value of undefined.
For this reason the editorEmptyValue option lets you set what value should be assigned to a cell when it is edited and the value is empty.
Tabulator considers an edit to be empty when the value is either:
- An empty string
- null
- undefined
The editorEmptyValue option can either be set on the table as a whole to affect all columns.
var table = new Tabulator("#example-table", {
editorEmptyValue:undefined, //set empty cell values to undefined after edit
});
Or on a column definition alongside an editor.
{title:"Name", field:"name", editor:"input", editorEmptyValue:undefined}
If neither of these options are set, then the empty cell will be asigned the value returned from the editor.
Empty Value Classification
As mentioned above, Tabulator will consider a very specific list of values to be empty, you can customise this behaviour using the editorEmptyValueFunc option, that lets you define custom callback logic to determine what is classed as empty.
You should pass a callback to this option that takes the edited value as its first argument, it should return a value of true if the value should be considered empty:
var table = new Tabulator("#example-table", {
editorEmptyValue:undefined, //set empty cell values to undefined after edit
editorEmptyValueFunc:(value) =>{
return value === ""; //only consider empty strings as empty
},
});
This can also be set on a column by column basis in the column definition:
{title:"Name", field:"name", editor:"input", editorEmptyValue:undefined, editorEmptyValueFunc:(value) =>{
return value === ""; //only consider empty strings as empty
}}
Exporting
Empty Columns
In previous version of Tabulator, when you exported data from the table (print, clipboard, download, etc) it would include all visible columns whether they contained data or not. This was problematic as it resulted in empty columns in the output.
From this version onwards, only columns with a field set in their definitions will be included in the output, this is because exports are generated from table data, and if a column has no field it has no data.
If you want to force the column to be visible in the output even with no field set then you can use the export visibility column definition prop for that export method to force the field to reamin in the output.
For example if we wanted to force this empty column to appear in the output we could set the download column definition option to true:
{title:"Empty", download:true}
Row Header Exports
The export module has been updated to include exporting of the new row headers by default (as long as it has a field set). You can override this bhaviour using the relevant rowHeaders option as needed
Print Row Headers
If you want to prevent row headers being shown in the print output, you can set the rowHeaders property to false in the printConfig option
var table = new Tabulator("#example-table", {
printConfig:{
rowHeaders:false, //do not include row headers in printed table
},
});
Download Row Headers
If you want to prevent row headers being shown in a downloaded file, you can set the rowHeaders property to false in the downloadConfig option
var table = new Tabulator("#example-table", {
downloadConfig:{
rowHeaders:false, //do not include row headers in downloaded table
},
});
Clipboard Row Headers
If you want to prevent row headers being shown in the clipboard output, you can set the rowHeaders property to false in the clipboardConfig option
var table = new Tabulator("#example-table", {
clipboardConfig:{
rowHeaders:false, //do not include row headers in clipboard data
},
});
HTML Row Headers
If you want to prevent row headers being shown in the HTML output of the getHTML function, you can set the rowHeaders property to false in the htmlOutputConfig option
var table = new Tabulator("#example-table", {
htmlOutputConfig:{
rowHeaders:false, //do not include row headers in HTML table
},
});
Export Config Defaults
The export module has been updated to allow it to be extended to handle custom definitions for row and column lookups for exports.
Column Lookups
This module can be extended to add custom column lookups to define which columns should be included in an exported output. It should return an array of columns, or undefined if all columns are to be included:
Tabulator.extendModule("clipboard", "columnLookups", {
range:function(clipboard){
return this.modules.selectRange.selectedColumns(); //array of columns
}
});
This can be used on any range lookup type property that exports data from the table such asclipboardCopyRowRange property in the settings object.
var table = new Tabulator("#example-table", {
clipboardCopyRowRange: "range",
});
Row Lookups
This module can be extended to add custom row lookups to define which rows should be included an exported output. It should return an array of rows:
Tabulator.extendModule("clipboard", "rowLookups", {
range:function(clipboard){
return this.modules.selectRange.selectedRows(); //array of rows
}
});
This can be used on any range lookup type property that exports data from the table such asclipboardCopyRowRange property in the settings object.
var table = new Tabulator("#example-table", {
clipboardCopyRowRange: "range",
});
Accessors
Row Number
A common problem at the moment is when you include the row number formatter in your table to show the number for each row, but that information is not included in your exported data (print, clipboard, download, etc)
A new built in rownum accessor has been added in this release to support including the rownum in exported table data.
In order for this to work you will need to make sure that you have set a field for the row number to be read from.
{title:"Example", formatter:"rownum", field:"rownum", accessor:"rownum"}
Events
A number of new events have been added in this release
Row Events
Row Height
The rowHeight event will be triggered when the height of a row is set or changed.
table.on("rowHeight", function(row){
//row - row component of the resized row
});
Row Resizing
The rowResizing event will be triggered when a row has started to be resized by the user.
table.on("rowResizing", function(row){
//row - row component of the resizing row
});
Column Events
Column Width
The columnWidth event will be triggered when the width of a column is set or changed.
table.on("columnWidth", function(column){
//column - column component of the resized column
});
Column Resizing
The columnResizing event will be triggered when a column has started to be resized by the user.
table.on("columnResizing", function(column){
//column - column component of the resizing column
});
Spreadsheet Events
Sheet Added
When a sheet is added to the table the sheetAdded event will triggered, passing the sheet component for the sheet:
table.on("sheetAdded", function(sheet){
//sheet - sheet component for sheet
});
Sheet Loaded
When a sheet is loaded into view sheetLoaded event will triggered, passing the sheet component for the sheet. This event will occour when a sheet is made active or its data is replaced:
table.on("sheetLoaded", function(sheet){
//sheet - sheet component for sheet
});
Sheet Updated
When the configuration of a sheet is changed, the sheetUpdated event will triggered, passing the sheet component for the sheet:
table.on("sheetUpdated", function(sheet){
//sheet - sheet component for sheet
});
Sheet Removed
When a sheet is removed from the table, the sheetRemoved event will triggered, passing the sheet component for the sheet:
table.on("sheetRemoved", function(sheet){
//sheet - sheet component for sheet
});
Internal
A number of new internal events have been added in this release
Table Lifecycle Events
| Key | Type | Arguments | Response | Notes |
|---|---|---|---|---|
| table-initialized | dispatch | Table initialized flag has been set |
CSS Styling
Spreadsheet
A number of new CSS classes have been added to the table with the new spreadsheet module
| Class | Element Description |
|---|---|
| tabulator-spreadsheet-tabs | The holding element for spreadsheet tabs |
| tabulator-spreadsheet-tab | A tab for a spreadsheet |
| tabulator-spreadsheet-tab-active | Applied to a spreadsheet tab when it is active |
Resize Guides
A number of new CSS classes have been added to the table with the resize guide functionality
| Class | Element Description |
|---|---|
| tabulator-col-resize-guide | The resize guide bar shown when resizing a column with guards enabled |
| tabulator-row-resize-guide | The resize guide bar shown when resizing a row with guards enabled |
| tabulator-row-header | The cell or column header is part of the row header column |
Bug Fixes
v6.0.0 Release
The following minor updates and bugfixes have been made:
- The performance of the data tree module has been significantly improved in this release
- The scope of the responsiveLayoutCollapseFormatter callback has now be changed to be the table
- Fixed issue with range selection functionality nor working with the virtual horizontal renderer
- Fixed issue with selection being broken if hidden columns are inside range
- Fixed issue with looking up row by position when non-rows are used in the table (eg group headers or column calcs)
- Fixed isssue with copying range selections that span over group headers
- Header top and bottom border styles are now correctly replicated on exported html & print output
- The selectableRange functionality now works correctly when the textDirection of the table is set to rtl
- The RangeComponent is now avaliable to import from the ESM package, it was missed out in the last release
- Rows now correctly recalculate their height after a responsive collapse event
- The tableBuilt event now waits for the intial data load to complete before triggering
v6.0.1 Release
The following minor updates and bugfixes have been made:
- Fixed regression preventing autoColumns feature from working on table load when data was coming from a remote source