Version 3.2 Released23/07/2017
Its been a busy month in the world of Tabulator, following tons of great user feedback I am happy to announce the release of Tabulator 3.2
Virtual DOM Render Speed Dramatically Improved
The render speed of the virtual DOM has been dramatically improved, allowing for a great experience even on older browsers like IE 11. Fallback modes have also been introduced to replace some of the graphically intensive operations with simpler alternatives on less capable browsers.
The virtualDomBuffer option has been added to allow more control over the efficiency of the renderer.
For more information checkout the Virtual DOM Documentation
Column Field Binding to Nested Objects
You can now bind columns to fields inside object by passing the nested field name to the column definition object using dot notation.
For more information checkout the Column Definition Documentation
Column Calculations
It is now possible to add calculation rows to the top and bottom of your tables, providing a range of calculations on the column data, including, max, min, average, sum and count.
For more information checkout the Calculations Documentation
Multi Level Grouping
You can now create groups inside groups when grouping rows, allowing you to nest row groups as many times as you want.
You can now alter the grouping structure once the table has been created, using the new setGroupBy, setGroupStartOpen and setGroupHeader functions.
For more information checkout the Grouping Data Documentation
Touch Events
Touch events have been added on cells, rows and headers to allow you to act on tap, double tap and tap hold events.
For more information checkout the Callbacks Documentation
Header Filter Functions
You can now set custom filter functions on header filter elements instead of just the default like and equals filters.
For more information checkout the Header Filters Documentation
Filter Parameters
You can now pass a paramters object to custom filter functions when they are called.
For more information checkout the Filtering Documentation
Scroll Key Bindings
New key bindings have been added to allow control of page up, page down, home and end scroll events.
For more information checkout the Keybindings Documentation
Mutator Cell Components
When edit type mutators are called, the cell component for the edited cell is now passed to the mutator.
For more information checkout the Mutators Documentation
Get Rows Function
The getRows function has been added to allow retrieval of all table row components.
Download Data Updates
You can now hide columns in downloaded data by setting the download property to false in a columns definition array.
The downloadDataMutator table option allows you to mutated data before it is parsed into the download file.
For more information checkout the Download Documentation
Localization Updates
The item and items text in group headers is now localizable.
For more information checkout the Localization Documentation
New Component Object Functions
The select, deselect and toggleSelect functions have been added to the row component
The getData and getField functions have been added to the cell component as shortcuts so you dont have to call getRow or getColumn first.
The getSubGroups and getParentGroup functions have been added to the group component.
For more information checkout the Component Objects Documentation
Resizable Column Updates
The resizableColumns option now accepts the values of header and cell to give more choice on how a user can resize columns.
Variable Height Formatters
The textarea formatter will now automatically adjust the height of a row as its column is resized to ensure that no text is hidden by overflowing the cell. To enable this behaviour on other formatters you can now use the variableHieght property in column definition object.
For more information checkout the Column Definition Documentation
General System Tweaks
A number of small tweaks have been made to the system including:
- The pagination element will now act responsively, hiding the page number selector when the table is too narrow to display it
- The fit columns to data display mode now correctly resizes columns when data is set
- The redraw function has been improved to give a better look after redrawing a previously hidden table
- Fixed placeholder element rendering on table redraw
- Initial data is now correctly loaded into table in local pagination mode
- Cell navigation functions now work correctly after column reorder
Version 3.0 Beta Available!21/05/2017
The beta version of tabulator 3.0 is now available to Download from GitHub. And what a a treat is is going to be!
I have been busy beavering away for the last month, compleatly rebuilding Tabulator from the ground up to make it faster, more feature packed, and more extensible than ever before.
There are a lot of changes in 3.0 so here is a highlight of the updates, checkout the Documentation for full details of all the changes.
Virtual DOM
Tabulator now uses a virtual DOM to render only the rows that are currently visible in the display. This allows the table to process 10,000's of rows with no performance overhead!
For more information checkout the Virtual DOM Documentation
Modular Structure
The Tabulator code base has now been split into core modules and extenisons to make it easier to maintain and much more extensible.
The extension modules can be removed as needed to allow you to build your own version of Tabulator including only the extensions you will use.
To make the process of creating your own custom build easier, Tabulator now uses the Gulp task runner.
As a bonus, the new modular structure has exposed even more configuration options that you can customise to personalize your tables.
For more information checkout the Extensions Documentation
Components
One of the biggest changes of this release is the introduction of the component.
Version 2 struggled with many callbacks, each with their own set of arguments that constantly needed updating to match users needs. To simplify this, callbacks are now passed component objects that represent the cells, rows, columns and groups of the table.
Each object has its own set of fuctions that you can call on it to access DOM elements, get parent components, set values and trigger actions.
Any future functionality needed in callbacks will be added to the components, keeping the argument lists the same, making it easier to move from version to version.
For more information checkout the Components Documentation
SASS Stylesheets
Tabulator is now styled using SASS instead of LESS.
Minified Source Files
Minified JS and CSS files are now available in the /dist/ folder.
Console Logging
To help developers out, Tabulator now produces a wide array of console warnings and errors when you try and make it do something it shouldn't.
New Callbacks
The callback system has been completely overhauled, with components passed into every callback. Existing callbacks have had functionality changes and loads of new callbacks have been created.
For more information checkout the Callback Documentation
Naming Conventions
The naming of configuration options and callbacks in version 2 had become a bit eratic. To help make things more intuative a number of properties and functions have been renamed to follow a standard convention.
Have a look through the documentation to familiarize yourself with the changes.
Remote Sorting and Filtering
The ajaxFiltering and ajaxSorting options now give you the choice of passing filter and sort parameters a remote server to let it do the fitlering and sorting instead of Tabulator.
For more information checkout the Ajax Documentation
Empty Table Placeholder
Empty tables can look a bit dull and confuse your users. There is now a placeholder option that lets you add placeholder text or elements to your table to show your users it is supposed to be empty.
For more information checkout the Placeholder Documentation
Excel Downloads
The long awaited ability to download table data as an xlsx file is now available.
For more information checkout the Download Documentation
Improved Sorters and Formatters
Tabulator will now automatically try and guess the appropriate sorter for a column based on its data, without you having to declare it in the column definition array.
Sorters and formatters have all received a bit of a polish to make them eaiser to use, and faster. The updated date and time formatters use the moment.js library to perform even more complex sorting functionality.
For more information checkout the Sorting Documentation and Formatting Documentation
Multiple Filters
You can now apply multiple filters at the same time, as well as independently apply header filters and programmatic filters.
For more information checkout the Filter Documentation
New Editor Functionality
Editors have been completly overhauled, custom editors now have access to the success, cancel and onRendered functions, to make interaction with the table simpler than ever.
The new editable column option allows you to use a callbck to check whether a cell should be editable.
For more information checkout the Editors Documentation
Improved Column Resizing
Columns can now be resized from the edge of the column anywhere in the table, rather than just the table header.
For more information checkout the Column Resizing Documentation
Version 2.12 Released12/04/2017
Its been a couple of months since the last update so we have a bumper release for you this month!
Advanced Ajax Config
The new ajaxConfig option has been added, to allow complete configuration of ajax requests
More information can be found in the Ajax documentation
Bootstrap and Semantic UI Themes
Two additional themes have been added to make Tabulator layout and functionality comparable with the Bootstrap and Semantic UI layout frameworks.
More information can be found in the Themes documentation
Enhanced Data Access Functions
Two new functions, updateOrAddRow & updateOrAddData, have been added to allow you to insert new data or update existing data in the same function.
The addRow has been enhanced to allow you to add a new row anywhere in the table.
The getRow and getRowData functions now allow you to find individual row DOM elements and their associated data without having to search through the whole table.
When a cell is being edited, its parent row has the tabulator-row-editing class added to help with custom styling.
More information can be found in the Manipulating Data documentation
Header Filter Improvements
Header filter placeholders can now be set on a per column basis using the headerFilterColumnPlaceholders option.
Header filter placeholders can now be localized in the langs option.
More information can be found in the Header Filters documentation
Header Events
Three new callbacks, headerOnClick, headerOnDblClick & headerOnContext, have been added to the column definition object to track user interaction with the column header elements.
More information can be found in the Callbacks documentation
Row Scroll Animations
You can now trigger Tabulator to scroll to a specific row using the scrollToRow function.
More information can be found in the Rows documentation
Sorter Improvements
Custom sorter functions are now passed the field being sorted and the direction of the sort.
More information can be found in the Sorting documentation
Fixes
A number of fixes have been made throughout Tabulator, rendering glitches and IE compatibility improvements.
Tabulator Now Hosted on CDNJS25/02/2017
Thanks to the lovely team over at CDNJS, Tabulator is now availble to use from their extensive list of libraries.
More information can be found in the Setup documentation
Version 2.11 Released12/02/2017
Its been a busy month in the world of Tabulator. This release contains a number of new features and a ton of improvements to existing components.
Responsive Layout
Responsive layout will automatically hide/show columns to fit the width of the Tabulator element.
More information can be found in the Responsive Layout documentation
Row Selection Improvements
The selectableRollingSelection and selectablePersistence options have been added to give you more control over how the row selection feature functions.
More information can be found in the Selectable Rows documentation
HTML Options Parsing
When building a Tabulator from an HTML table, you can now set tabulator options directly in the table markup using tabulator- attributes.
More information can be found in the Set Table Data documentation
Improved CSV Generation
CSV generation now automatically escapes reserved characters, and you can pass additional setup options and custom delimiters in the new options object.
More information can be found in the Download Table Data documentation
Row Number Formatter
A new rownum formatter has been added to show an incrementing row number next to each row in a table. The formatter has been designed to work with standard and paginated tables.
More information can be found in the Formatters documentation
Cell Context Menu Callback
The onContext callback has been added to the column definition object to trigger an action on a right click on a cell.
More information can be found in the Column Definition documentation
Fixes and Improvements
There have been a number of small tweaks to Tabulator to improve functionality, including:
- String row id's can now be used throughout Tabulator.
- Header filters that use an input element now have a 300ms delay before they trigger a filter on keypress.
Version 2.10 Released21/01/2017
To celebrate the new year, we have a new release of Tabulator, packed full of new and improved features:
Selectable Rows
A range of options are now available to allow users to select one or multiple rows on the table.
More information can be found in the Selectable Rows documentation
Column Freezing
Columns can now be frozen in place on the left and right edges of the table to keep them in position during horizontal scrolling.
More information can be found in the Frozen Columns documentation
Double Click Events
A new rowDblClick callback is available to capture when a user double clicks on a row.
A new onDblClick column definition property is available to capture when a user double clicks on a cell.
More information can be found in the Callbacks & Events documentation
Table Build Callbacks
The tableBuilding and tableBuilt callbacks are now available to trigger events during Tabulators build process.
More information can be found in the Callbacks & Events documentation
Fixes and Improvements
There have been a number of small tweaks to Tabulator to improve functionality, including:
- Momentum scrolling on mobile devices
- Improved header filter functionality
- UI and Styling fixes
- The open state of row groups can now be set using the groupStartOpen property
Version 2.9 Released12/12/2016
It has been a busy month in the world of Tabulator, this months update sees a bucket load of new and improved features:
Localization
You can now localize the contents of a Tabulator to the language of the browser being used to view it. A whole host of configuration options are now available to make your tables accessible no mater where in the world they are being used.
More information can be found in the Localization documentation
Downloadable Table Data
It is now possible to download data as a file direct from Tabulator with no need to download files from the server. At present CSV and JSON files are available, with more coming soon. You can even define your own file formatter to create your own custom file types.
More information can be found in the Downloading Table Data documentation
Progressive Rendering with Ajax
The existing progressive rendering functionality can now be combined with ajax pagination, to allow table data to be loaded from a remote server as a user scrolls down the table.
More information can be found in the Remote Pagination documentation
Ajax Request Methods
You can now set the HTTP request method to be used with ajax requests
More information can be found in the Ajax Request documentation
Column Sizing
Column sizing has been improved so you can now specify column widths in both pixels and percentage of total table width.
the minWidth column definition option is now available to set minimum width on a column by column basis.
More information can be found in the Column Definition documentation
Aditional Functions and Callbacks
getSort Function
Returns information on the currently sorted column and sort direction.
More information can be found in the Sorting documentation
getPageMax Function
When using pagination this function returns the maximum available page for the paginated data.
More information can be found in the Pagination documentation
ajaxResponse Callback
The ajaxResponse callback is triggered whenever a response from an ajax request is received. It allows access to all received ajax data before the data is loaded into the table, and provides an opportunity to make and changes to the data before it is parsed into Tabulator.
More information can be found in the Callbacks & Events documentation
Sparklines Demo Added12/11/2016
A guide to using the Sparklines js library to add graphs to your Tabulator..
The demo can be found here.
We're Amazing!10/11/2016
Tabulator has just been featured on SitePoint's list of 12 Amazing jQuery Tables.
The full article can be found at https://www.sitepoint.com/12-amazing-jquery-tables/
Version 2.8 Released06/11/2016
Aria Accessibility
Aria accessibility tags have now been added to every element in Tabulator make the table machine readable by screen readers and other digital accessibility equipment.
More information can be found in the Accessibility documentation
Column Grouping
Columns can now be grouped together in the column definition array to allow for complex multi-line table header generation.
More information can be found in the Column Grouping documentation
HTML Table Import Column Definitions
You can now use the column definitions array when importing table data from HTML table elements, this opens up all of the standard column setup options to imported tables.
More information can be found in the HTML Table Import documentation
Persistent Columns now available with localStorage Option
In addition to storing persistent column layouts in cookies, you can now store them in the localStorage object.
More information can be found in the Persistent Column Layout documentation
How To Guide Published on SitePoint01/11/2016
SitePoint has just published a guide on how to use Tabulator to spice up your HTML tables.
The full article can be found at https://www.sitepoint.com/dynamic-tables-json/
Version 2.7 Released16/10/2016
Remote Ajax Pagination
You can now accept paginated data directly from a remote server.
More information can be found in the Pagination documentation
New Data Update Functions
The updateData function has been added to allow updates to existing data without redrawing the entire table.
The updateRow function has been added to allow updating of an individual row.
The rowUpdated event is now triggered when a row is updated.
More information can be found in the Editing & Manipulating Data documentation
Extendable Mutators and Accessors
Mutators and Accessors can now be extended to allow for easy reuse of code.
More information can be found in the Extending Tabulator documentation
Ajax URL Autoloading
If the ajaxURL option is set in a table constructor, the data is now automatically loaded once the table is created, without any need to call the setData function.
Version 2.6 Released09/10/2016
Mutators and Accessors Added
Mutators (setters) and Accessors (getters) have been added to allow you to manipulate the table data as it enters and leaves your Tabulator, allowing you to convert values for use in your table and then change them again as they leave.
More information can be found in the Mutators & Accessors documentation
Time Sorter Added
A time sorter has been added to help sorting time columns.
More information can be found in the Sorters documentation
Money Formatter Improved
The money formatter has been improved to cope with non numeric values.
getData Function Improved
The getData function can now be passed an argument to decide if you want to return all of the table data or just that matching the current filter/sort.
More information can be found in the Editing & Manipulating Data documentation
Extending Tabulator Documentation Added08/10/2016
A guide to adding your own custom extensions to Tabulator has been added to the documentation section.
The full guide can be found here.
Version 2.5 Released10/09/2016
Callbacks and Events Overhaul
This release has seen a complete overhaul of the callbacks and events system to make interacting with Tabulator programmatically even easier.
Full documentation of all the new callbacks can be found in the Calbacks Documentation.
New Data Flow Callbacks Added
New callbacks to monitor all stages of data flow in the system have been added.
- dataLoading
- dataLoaded
- dataLoadError
- dataEdited
- dataFiltering
- dataFiltered
- dataSorting
- dataSorted
rowEdit Callback Replaced With cellEdited
The rowEdit callback has been replaced with the cellEdited callback. Not only is this more descriptive of the event, it also contains new arguments, passing the old value of the cell, the new value, the DOM objects for the cell and the row and the name of the field being edited.
rowContext Callback No Longer Prevents Default Browser Context Menu
The rowContext callback no longer prevents the default browser context menu from opening.
Callbacks Renamed
Several callbacks have been renamed to make sure they all follow the same naming conventions.
Callbacks ending in Load now end in Loaded.
Callbacks ending with Edit now end with Edited.
Movable Row Placeholder Style Added
The tabulator-row-moving class has been added to allow styling of the movable row placeholder.
Scrollable Empty Tables
Empty tables can now be scrolled horizontally if the combined width of the column headers exceeds the width of the tabulator elemen.
Improved Custom Sorters and Editors
Sorter and editor functions are now passed an additional data argument so they can see all the data for the current row rather than just the cell being processed.
Version 2.4 Released13/08/2016
Packaged Themes
Four new prepacked themes have now been included with tabulator:
- Simple - A plain, simplistic layout showing only basic grid lines. (/themes/tabulator_simple.css)
- Midnight - A dark, stylish layout using simple shades of grey. (/themes/tabulator_midnight.css)
- Modern - A neat, stylish layout using one primary color. (/themes/tabulator_modern.css)
- Autumn - A colorful, bright layout using shades of orange and brown. (/themes/tabulator_autumn.css)
A demo of each of these in action can be found on the Examples page.
Textarea Formatter and Editor
A new textarea formatter and editor have been added to allow for the display and editing of multi-line text.
For more Information on the formatter, check out the Formatter Documentation.
For more Information on the editor, check out the Editor Documentation.
Header Filters
Is is now possible to filter the table data directly from the column headers, by setting the headerFilter parameter in the column definition object for that column.
For more Information on the header filtering, check out the Header Filtering Documentation.
Editable Column Titles
Column titles now can be made user editable by setting the editableTitle parameter to true in a columns definition object.
For more Information, check out the Editable Column Title Documentation.
IE Compatibility Issues Resolved
Various compatibility issues with Internet Explorer 11 have now been resolved.
Examples Section Updated10/08/2016
Source Views
You can now view the source code relating to any example by clicking the View Source button under the example table.
To try for your self, check out the Examples Page
Version 2.3 Released 04/07/2016
Column Header Tooltips
It is now possible to set tooltips to display on column headers. This is particularly useful when your columns are too narrow to display full header names.
More information can be found in the Formatting Data documentation
Add and Remove Columns
You can now add and remove columns from a table using the addColumn and deleteColumn functions.
More information can be found in the Movable Rows and Columns documentation
setColumns Rendering Fix
Set columns has been updated to fix a rendering glitch when changing the number of columns.
New dataFiltered Callback
The dataFiltered callback is now available offering access to the filtered subset of the table data after new data is loaded into a table or a filter operation is performed.
More information can be found in the Callbacks documentation
Input Validation
All functions now validate argument data before updating the table.
Version 2.2 Released 15/05/2016
Create tabluator from HTML Table
It is now possible to create a tabulator directly from an HTML table element, converting all the tables data directly in to tabulator
More information can be found in the Data Loading documentation
Progressive Rendering on Scroll
Progressive rendering has been updated so it is now triggered as the user scrolls down the table, leading to a much smoother rendering experience.
NOTE - Progressive rendering is no longer enabled by default, you must enable it using the progressiveRender option
More information can be found in the Progressive Rendering documentation
More CSS Styling Options
Event more Tabulator elements have had thier classes added to the CSS file
More information can be found in the CSS documentation
Improved Redraw Function
The redraw function has been updated to improve table redrawing, and to add the option for a full table redraw including all data.
More information can be found in the Layout documentation
Rendering Tweaks
A number of rendering issues have been fixed.
Version 2.1 Released 05/05/2016
Styling Moved to tabulator.css
All styling options have been moved from the tabulator constructor to tabulator.css to allow greater flexibility in styling the table.
NOTE tabulator.css must now be loaded before tabulator.js when setting up Tabulator in a file.
More information can be found in the CSS documentation
Column Resize Bug Fixed
Columns will now resize smoothly even when the cursor leaves the tabulator element.
Version 2.0 Released31/04/2016
Progressive Rendering
Progressive rendering has been added to improve the rendering of large data sets without blocking the UI.
More information can be found in the Progressive Rendering Documentation
Pagination
Pagination has been added to display only a section of data at a time, allowing for smaller tables without scroll bars
More Information can be found in the Pagination Documentation
Optimized Filtering, Sorting & Rendering
The Filtering, Sorting & Rendering systems have been significantly upgraded to offer improved performance when loading and rendering data.
Website Launched31/04/2016
We have launched our new look website to help the Tabulator community find the resources it needs to keep on building those tables.
Documentation
The Documentation section contains all the information on the latest version of tabulator.
Check out the documentation section
Quick Start
The Quick Start guide provides a simple how-to guide for getting yourself setup with Tabulator in a matter of minutes.
Check out the quick start guide
Examples
The Examples section demonstrates a wide range of different functions and uses for the Tabulator library.
Check out the documentation section
Github
A link back to the GitHub repository where the source code for this project is managed.
Check out the GitHub repository
Version 1.9 Released06/02/2016
Tooltips
On hover tooltips can now be set on a global or per column basis using the tooltip parameter.
More information can be found in the Tooltips Documentation
New Formatters
A couple of new formatters have been added for creating button columns:
- buttonTick - displays a tick icon on eac row (for use as a button)
- buttonCross - displays a cross icon on eac row (for use as a button)
An additional formatter has been added for colored cells:
- color - sets the background colour of the cell to the value. Can be any valid CSS color eg. #ff0000, #f00, rgb(255,0,0), red, rgba(255,0,0,0), hsl(0, 100%, 50%)
More Information can be found in the Formatting Documentation
Custom Filter Functions
If you want to perform more complicated filter operations you can now pass a callback function to the setFilter method.
More information can be found in the Filtering Documentation
Added dataEdited Event
The dataEdited event is now triggered when an action edits data in the table, (ed. editing a cell, adding/deleting a row)
Additional improvements
- rendering speeds have been improved for large data sets (> 1000 rows)
- row deletion bug fixed
- examples.html has been improved
Version 1.8 Released24/01/2016
Column Layout Updates
A number of column manipulation functions have been added in this release
More information can be found in the Columns Documentation
Persistent Column Layout
Tabulator can store the layout of columns in a cookie so that each time a user comes back to the page, the table is laid out just as they left it. To enable this feature set the columnLayoutCookie options parameter to true.
Set New Column Definitions
Column definitions can be changed after Tabulator creation using the setColumns function.
Get Column Definitions
To get the current column definition array (including any changes made through user actions, such as resizing or re-ordering columns), call the getColumns function.
Cell Editor Updates
A number of updates have been made to the cell editing system.
More information can be found in the Manipulating Data Documentation
New Editing Class
When cells are being edited, they now gain the tabulator-editing class.
Abort Edit
It is now possible to abort the creation of an editor by returning false from the editor function instead of the editor DOM element.
Version 1.7 Released19/01/2016
Column Visibility Toggle Functions
Several new functions have been added to programmatically change column visibility.
- showCol - function to show hidden columns.
- hideCol - to hide visible columns.
- toggleCol - to toggle the visibility of columns.
More information can be found in the Column Visibility Documentation
Number Editor
A new editor has been added, number uses a number formatted input element for editing numbers, Has increment and decrement buttons.
Version 1.6 Released16/01/2016
Movable Rows
Using the movableRows parameter you can now allow users to reorder the rows of the table.
Movable Columns
Using the movableCols parameter you can now allow users to reorder the columns of the table.
More information can be found in the Movable Rows & Columns Documentation