Version 4.0 beta available05/09/2018

A beta version of version 4.0 is now available for user testing and feedback.

Checkout the Version 4 Documentation for more information

FAQ Page Now Available05/09/2018

To help users out the answers to some of the most common Tabulator questions can now be found on the FAQ Page.

New Format Documentation Section05/09/2018

As Tabulator has gorwn so has it s documentation. To make life easier as of version 4.0 the docs have now been broken down into smaller pages that focus on different parts of Tabulator.

Checkout the Version 4 Documentation for more information

Version 4.0 Update05/08/2018

Hi All,

Sorry for going silent for a month or so there, work got a little bit manic so i couldnt put as much time into Tabulator as i would have liked, but im back on it now.

The revised initial release of 4.0 is now looking like the end of august, with beta versions comming out in the next couple of weeks.

Version 4.0 Comming Soon24/06/2018

I have begun work on the mammoth task of building Tabulator 4.0, and thought I would give you some tasters of what is to come.

The updates will include:

  • Tabulator will be free of core dependencies, no more need for JQuery!
  • A jQuery wrapper for those that want to keep using jQuery with Tabulator the way it is
  • Promise based architecture to make it easier to trigger actions after a table has rendered
  • Source refactored to ES8
  • Virtual DOM efficiency and speed improvements
  • Overhaul of the extensions system to make it even easier to use
  • New minimal core.js build that will only included the very basic table functionality to allow for ultra low code footprint
  • Enhaced clipboard functionality with style copy
  • Cell level selection (select ranges of cells)
  • Filter Enhancements
  • Sorter Enhancements
  • Formatter Enhancements
  • Much Much More...

In a couple of weeks I will be looking for some people to alpha test some of the new functionality and give some feedback on what they think. Check the news section in a couple of weeks for details on how to sign up.

Im hoping to get the release out by the end of July, so keep your eyes peeled for more news.

Keep on Tabulating!

Oli :)

Patreon Support14/04/2018

A number of the kind and generous souls that use Tabulator have asked if there was a way to financially help support Tabulators development.

I have now setup a Patreon page, for those users that wish to make a donation towards the costs of keeping up the Tabulator site.

More information on supporting Tabulator can be found on the Community Page

Version 3.5 Released14/04/2018

Ive been a busy beaver once again, and the 3.5 release is jam packed with a whole host of upgrades to almost every part of Tabulator, along with some completely new features.

Row Management Pipeline

A new render pipeline has been created in the row manager to make rendering the table more efficient and make the addition of new render functionality eaiser.

For more information checkout the Pipeline Architecture Documentation

Inter Table Communications

A new inter-table communications extension has been added to allow tables to communicate between each other.

In this release this extension will be used to help with moving rows between tables, and to download multiple tables to one file.

In future this extension will be used to allow futher actions to be shared between tables.

Clipboard

With the new clipboard extension, you can now copy and paste data, into and out of the table, either with keyboard combinations or with new commands.

For more information checkout the Clipboard Documentation

Replace Data

The new replaceData function works like the setData function, except it silently replaces the data in the table, keeping the existing scroll position of the data. Ideal for refreshing lists etc.

For more information checkout the Manipulating Data Documentation

Progressive Ajax Loading

The new ajaxProgressiveLoad works with the ajax and pagination extensions to load large data sets in chunks rather than in one block, improving table load time.

It can either load all the data, sequentially in one go. or with scrolling mode, it can load the data as needed when the user scrolls down the table.

For more information checkout the Progressive Ajax Loading Documentation

Drag Rows Between Tables

With the new movableRowsConnectedTables option, you can now drag rows between different tables.

You can trigger actions on each table when the drag and drop occurs, as well as styling the sending and receiving tables.

For more information checkout the Movable Rows Documentation

Fit Columns Width Scalling

The fitColumns layout mode has been upgraded to allow for more customizable column resizing.

With the new widthGrow and widthShrink column definition objects you can set how much of the total freespace should be allocated to each column when the table is resized.

For more information checkout the Fit Columns Layout Documentation

Responsive Layout Column List Collapse

A new list collapse mode has been added to the responsive layout system.

Enabling this mode with the responsiveLayout option causes the values of hidden columns to be collapsed into a list under the row data.

This list can be fully customised and styled to meet the needs of your table.

For more information checkout the Responsive Layout Documentation

Complex Filtering

You can now use a nested array structure to build filter combinations with AND and OR logic.

For more information checkout the Filtering Documentation

Pagination

The pagination extension has had an overhaul to ensure more consistent rendering across all table configurations.

The new paginationAddRow option lets you decided how you would like new rows added to paginated data, to the start/end of the page or to the start/end of the table data.

The new paginationButtonCount setup option lets you choose how many pagination buttons are shown at the bottom of the table.

For more information checkout the Pagination Documentation

Downloads

The new sheets property on the xlsx downloader lets you download multiple tables into one spreadsheet.

The new sheetName property on the xlsx downlaoder lets you set the name of the sheet in the download.

There is a new pdf downloader, for creating a PDF from your table.

The new accessorDownload column definition property alows you to alter table data as it is downloaded into a file.

For more information checkout the Download Documentation

Mutators

The mutator extension has been rebuilt to allow greater flexibility, you can now create a different mutator for each access type.

There are now mutators available for setting data, editing data, and pasting data in from the clipboard.

The column component is now passed into a mutator function when the cell component is not available, for example on incomming data mutation.

For more information checkout the Mutator Documentation

Accessors

The mutator extension has been rebuilt to allow greater flexibility, you can now create a different accessor ator for each access type.

There are now accessors available for accessing data, downloading data and copying data to the clipboard.

The column component is now passed into the accessor function

For more information checkout the Accessor Documentation

Column Calculations

Column calculations can now use the columnCalcs option to be shown in group mode, for the table as a whole, or for both at the same time.

For more information checkout the Column Calculation Documentation

Column Groups

The getColumns function now takes an additional argument, that lets you get a structured array of column components, that includes column groups. you can then use the getSubColumns and getParentColumn functions to navigate the column struture.

Calling the show or hide functions on a column group component will show or hide all columns in that group.

Column Resizing

Columns can now have resing enabled and disabled on a per column basis, using the new resizable column definition propery.

Scroll To Row Improvements

The scrollToRow function now accepts additional arguments to allow you to align the row to the top, center or bottom of the table, and to not move if the row is already visible.

For more information checkout the Scroll To Row Documentation

Scroll To Column Improvements

The scrollToColumn function now accepts additional arguments to allow you to align the column to the left, center or right of the table, and to not move if the column is already visible.

For more information checkout the Scroll To Column Documentation

Formatter Updates

The progressFormatter now has a ledgendAlign paramter to allow horizontal alignment of the legend.

Global Cell Interaction Callbacks

There are now global callbacks for cell interaction events, including, cellClick, cellDblClick, cellContext, cellTap, cellDblTap and cellTapHold

For more information checkout the Callbacks Documentation

Sorting

You can now use the headerSortStartingDir option to set the default sort starting direction when a user first clicks on a column header.

An alignEmptyValues parameter has been added to every sorter to allow emty data to be foreced to the top or bottom of a sorted column

For more information checkout the Sorting Documentation

Tooltip Generation

You can now use the tooltipGenerationMode option to choose whether a tooltip should be generated when data is loaded into the table, or when a user overs over a cell.

Bootstrap 4 Style

A new table CSS stylesheet is available for Bootstrap 4, it can be found in /dist/css/bootstrap/bootstrap4.min.css

For more information checkout the CSS Classes & Theming Documentation

Architecture Concepts

The documentation has been updated to include a breakdown of some of the core architecture concepts of Tabualtor, to make it easier for people to understand how it works, and when callbacks will be triggered.

For more information checkout the Architechture Concepts Documentation

Extra Examples

A number of additional examples have been aded to the example section to demonstrate some of the new functionality of this release, as well as to show how to use some existing functionality like nested tables and multi-input header filters.

For more information checkout the Examples Page

General System Tweaks

A number of small tweaks have been made to the system including:

  • Group visibility toggling now works correctly when table is paginated and in classic render mode
  • Remote pagination now loads correctly on table initialization
  • Responsive layout mode now correctly takes into account the column visibility and column order
  • The hideInHtml property now hides both header and column data in html output
  • Cell component navigation commands now work correctly through column calculations and group headers
  • The addData and updateOrAddData functions now return rowcomponents for the rows created.
  • The rowSelectionChanged event is now correctly fired when the selection is cleared when data is set
  • A typo in the resize binding for non-chrome browsers has been fixed
  • Some table height issues in classic render mode have been resolved
  • Ajax requests will now be loaded in sequence, if a new request is made, and previous requests will be discarded when they return
  • Group column calculations and calculation formatters now update correctly when a cell in that group is edited
  • The tick editor now works correctly in firefox on macs.
  • A regression in 3.4.6 where deleting a row resulted in a blank line being left in the table, has now been fixed
  • Row deletion no longer causes extra entry in history action list
  • Row resizing is now disabled by default, to match documentation
  • The persistent columns extension will now try to merge the stored columns with the new column layout if the column definitions have changed.
  • Long column group names will no longer cause a rendering glitch if they exceed the width of the columns in the group
  • A extra call to the dataLoaded callback when an ajax request was made has been removed.

Version 3.4 Released11/02/2018

The long awaited version 3.4 is now available. I have spent a lot of time going through the virtual DOM and row grouping systems to improve stability and optimize rendering, and as always added a load of shiney new features.

Rendering Performance

The addRows and updateData functions have been tweaked to dramatically improve performance when loading data into the table.

When rows are added/deleted/hidden/moved in the table, it now remains in the same scroll postion, rather than skipping or bouncing to the top of the table.

The memory leak on the setData function has been fixed.

The issue with random whitespace appearing at the top of the table on scroll or group collapse has now been resolved.

The height property no longer needs to be set to enable the virtual DOM as long as the height has been set on the element either in CSS or as a direct inline style.

The table will use the new ES8 ResizeObserver feature to track when the table changes size and automatically redraw it for you, as this is currently only available on the latest version of chrom it will fallback to tracking when the window changes size on older browsers. This feature can be disabled with the autoResize option if needed.

Column Layout and Resizing

Using the new layoutColumnsOnNewData option, you can force column widths to be recalculated to fit new data when in a fitData layout mode when the setData function is called.

Double clicking on a column resize handle will cause the column to automatically resize to fit the data it contains.

You can now trigger a horizontal scroll to a column using the scrollToColumn function. There is also a scrollTo function on the Column Component that performs the same action.

Complex header group structures now render correctly.

For more information checkout the Layout Documentation

Grouped Row Updates

Group Headers now correctly update when rows are added/deleted/moved.

Dragging and dropping rows between groups now updates the rows data to match the group it has been moved into.

When the table is in grouped mode and the addRow function is used, the row will now appear in the correct group.

The groupClick event is no longer blocked by the group header toggle click.

If a group is made up of rows with an "undefined" key value, the group title is now an empty string instead of the word "undefined".

If all rows are moved out of a group, the group is now removed from the table.

Persistent Configuration

The persistent config extension has had a complete overhaul and now also allows you to persitently store column sorting and filters using the new persistentSort and persistentFilter options.

To fit with the extensions new functionality the persistence mode and ID options are now set in the persistenceMode and persistenceID options respectively.

For more information checkout the Persistence Documentation

Resizable Rows

You can now freeze rows at the top of the table with the new freeze and unfreeze functions on the Row Component.

For more information checkout the Resizable Rows Documentation

Validator Updates

By default all validator excluding the required validator will allow null, undefined and empty strings. You should now use the required validator to prevent these.

Validators can now be used on columns with fields based on nested data.

For more information checkout the Validation Documentation

Column Calculation Improvements

Calculation updates are now triggered whenever a row is added, deleted or moved between groups.

A precision parameter has been added to all numeric calculations.

You can now retrieve the results of column calculations using the getCalcResults function.

For more information checkout the Column Calculation Documentation

Editing Updates

New editors have been added, including range and select.

The number editor now accepts max, min & step paramters.

A range of callbacks for detecting the cell editing lifecycle are now available in the column definition, including cellEditing, cellEdited & cellEditCancelled.

A new cancelEdit function has been added to the Cell Component to allow for programmatic cancelling of a user edit.

A new optional argument has been added to the edit function on the Cell Component to force a cell into edit mode even if its editable property is set to false.

For more information checkout the Editing Data Documentation

Sorter Updates

New sorters have been added, including datetime, array & exists.

You can now set the locale code as a parameter on the the string sorter.

All sorters now correctly handle null, undefined and unexpected values without issue.

For more information checkout the Sorting Documentation

Filter Updates

The new in filter only shows rows if thier value is in a given array of values.

You can now programmatically set the value of header filters using the new setHeaderFilterValue function.

You can now programmatically set focus on header filters using the new setHeaderFilterFocus function.

For more information checkout the Filtering Documentation

Formatting Updates

A new lookup formatter has been added to restrict visible cell values to a predefined list.

The progress formatter now accepts a number of new paramters to set legend text, and define a range of bar colours based on cell value.

The image formatter will now normalize the height of its row once the image has loaded.

The link formatter now has a range of paramters to make it easy to customise its appearance and functionality. As a result of this improvement the email formatter is now depricated.

There is now a reformat function on the Row Component, to programmatically trigger a re-formatting of the row.

For more information checkout the Formatting Documentation

History Extension Updates

The history extension now has historyUndo and historyRedo callbacks to allow you to interact with history events.

The history extension now tracks when a row is moved.

For more information checkout the History Documentation

Row Position Informaton

The new getRowPosition function and Row Component getPosition function allow you to retreive the current position of a row in the table.

You can also retreive a row from its position in the table using the getRowFromPosition function.

HTML Output

The new column definition propery hideInHtml can be used to prevent columns being visible in the output from the getHtml function.

General System Tweaks

A number of small tweaks have been made to the system including:

  • The 5th level grouping header now has the correct left margin
  • The updateData function will now accept JSON encoded strings as well as arrays of objects
  • The rowSelected and rowDeselected callbacks are now triggered when muliple rows are selected/delesected
  • Rows are now deselected on deletion
  • Pagination buttons now have their type attribute set to button to prevent accidental form submission if the table is inside a form element
  • An edge case where group headers were preventing table rendering has been fixed
  • A regression in the getGroups function has been fixed
  • A regression with the ajaxLoader option has been resolved
  • The history list now clears correctly when a new action is performed
  • Header filters no longer affect width calculations for columns
  • Horizontal scroll no longer resets on a non-force redraw event

Version 3.3 Released01/10/2017

So after a couple of months break to focus on setting up the new Tabulator website server, Im back with the 3.3 release, which is jam packed full of loads of new shiney features.

New Column Layout System

A new layout extension has been created to manage column layouts, provide new ways of laying out columns and even allow you to add your own column layout functions.

A new layout mode hase been added, the fitDataFill mode is identical to the fit data mode, but ensures that rows are always at least the full width of the table.

For more information checkout the Layout Documentation

Input Validation

Tabulator now supports the use of validators to check that data entered in the table through an editor is valid before it is stored.

A wide range of build in validators are available to use with the new validator column definition object property. You can even build your own if you fancy it.

For more information checkout the Validation Documentation

Updated Group Functionality

The row grouping system has received some TLC and now has a load of additional features.

The getGroups function has been added to return a list of the current first level group components.

A number of click event calbacks have been added to give greater control of user interaction with groups, including groupClick, groupDblClick, groupContext, groupTap, groupDblTap, groupTapHold.

The new groupToggleElement option allows you to set which element the user should click to toggle the group open/closed.

The groupHeader and groupStartOpen functions are now passed the group component as a fourth argument.

For more information checkout the Grouping Data Documentation

Multi Column Header Sort

Holding down the ctrl or shift key when clicking on column headers will now allow you to sort by multiple columns at once.

For more information checkout the Sorting Documentation

Column Calculations Updates

The new groupClosedShowCalcs option allows you to keep column calculations in groups visible when the group is closed.

You can now apply formatters to column calculation cells using the topCalcFormatter, bottomCalcFormatter, topCalcFormatterParams, and bottomCalcFormatterParams options.

Mathematical calculations now cast strings to numbers for better accuracy.

Calculations in groups now updated when a cell in the group is edited.

For more information checkout the Column Calculations Documentation

Ajax Updates

The new gtAjaxUrl function lets you retrieve the tables current AJAX URL.

Returning a value of false from the ajaxRequesting will now abort an ajax request.

For more information checkout the AJAX Documentation

Ajax Sorting and Filtering

Ajax sorting and filtering has now been improved, with all sorters and filters (including header filters) being passed back in the ajax request. To cope with this update, new filters and sorters parameters are now passed with the ajax requests.

For more information checkout the Ajax Sorting and Ajax Filtering Documentation.

Filter Function Updates

The getFilter function has been renamed to getFilters and now has an optional second argument to retrieve header and programmatic filters.

The getHeaderFilter function has been added to retreive an array of all current header filters.

Select All Filtered Rows

Passing a value of true into the first argument of the selectRow function will now select all filtered rows

For more information checkout the Selectable Rows Documentation

Insert New Data Anywhere In Table

The new addData function lets you insert new data into an existing data set anywhere you like.

For more information checkout the Editing & Manipulating Data Documentation

Component Object Updates

The restoreOldValue function has been added to the cell component to allow the cell to be revered to its previous value without tirggering cell edit callbacks.

For more information checkout the Cell Component Documentation

Pagination Updates

You can now call the getPageSize function to retreive the number of rows allowed on a page

For more information checkout the Pagination Documentation

Format Column Header Titles

You can now use the titleFormatter and titleFormatterParams options to apply formatters to column titles

For more information checkout the Formatting Documentation

Custom Download Column Titles

The new downloadTitle column defintion peroperty allows you to set the title of a column in a download

For more information checkout the Data Download Documentation

Export table data to HTML table

You can now export the contents of your table as an HTML formatted table if needed using the new getHtml function.

Version Numbers in Source Files

All source files now contain their version number to make it easier to track what code you are using when debugging.

General System Tweaks

A number of small tweaks have been made to the system including:

  • Group headers now maintain width when all groups are closed
  • Row handle formatter now vertically aligns to the center of the cell
  • The getSort function has been renamed to getSorters to better fit in with naming convertion of other functions
  • The tooltipHeader column definition property has been renamed to headerTooltip to better fit in with naming convertion of other column header properties
  • Row Components are now passed to the dataSorted callback
  • The getField function is now available on Cell Components in the header filter editor callbacks
  • The like filter now correctly handles null or undefined values
  • Fixed regression in 3.2 where the Cell Component getElement function was returning a DOM node, it now correctly returns a jQuery element
  • Bootstrap tables now have a background color of #ffffff by defualt to prevent visual corruption of frozen columns
  • Row Components are now correctly passed into sorter functions
  • Functions on components have been moved into the objects respective prototypes to improve efficiency

tabulator.info Launched17/09/2017

I am happy to announce that as of today Tabulator will now be hosted on its own domain at tabulator.info

Over the comming months you will notice loads of new features popping up on the site including:

  • Development Roadmap
  • Example Table Builder
  • Package Build Tools
  • FAQ's Section
  • Newsletter Signup

And much much more...

Stay tuned for further announcements

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.1 Released18/06/2017

Well its been a really busy month, with all the great feeback from the 3.0 release I have made a load of improvements to existing funcctionality and added a load of new features!

Virtual DOM Improvements

Additional tweaks have been made to the virtual DOM to make it more efficient, it also handles tables with wide variations in row height much better.

The setHeight function has been added to help with changing the table height after initialization.

The redraw function has been fixed so resizing tables can now be correctly redrawn.

Key Bindings

The new key bindings extension allows for direct interaction with Tabulator with the use of keyboard shortcuts.

For more information checkout the Key Bindings Documentation

Interaction History

The new history extension tracks user interaction with the table, recording cell edit, row add and row delete events. It allows the user to call undo and redo functions on the table to move back and forward through their history.

This extension can also be linked to the key bindings extension to allow users to use keyboard shortcuts to undo and redo edits.

For more information checkout the Interaction History Documentation

Cell Navigation

A range of new cell navigation functions have been added to allow users to navigate the focused editable cell around the table.

These controls can be linked to the keybindings extension to allow users to navigate through the table using the keyboard.

For more information checkout the Navigation Documentation

Custom Footer Element

The footerElement option has been added to allow for customisation of the table footer element.

For more information checkout the Table Footer Documentation

Column Layout Saving

The new getColumnLayout and setColumnLayout functions allow you to store and retrieve custom column layout settings from anywhere you want.

For more information checkout the Persistent Columns Documentation

General System Tweaks

A number of small tweaks have been made to the system including:

  • The updateRow function now only triggers the updated cells to redraw, not the whole row
  • The setColumns function now renders correctly when called multiple times
  • The setValue function on Cell Components now mutates the incomming data by default
  • Input and text area editors have been updated to ensure they take up the full row height when they are displayed

Version 3.0 Updates and Stable Release Date!29/05/2017

A big Thank You goes out to everyone that has provided feedback on the beta so far, it has been a massive help. Keep up the good work!

Following on from the feedback the following tweaks have been made to the beta:

Column Widths

The default "fit to data" column width calculations now take column header titles into account so you dont end up with titles with ellipsis when the column data is small.

Additional Paramters

The editorParams, headerFilterParams, mutatorParams and accessorParams column definition properties have been added to allow you to pass additional data into editors, mutators and accessors, allowing for better code reuse and simple configuration.

Row Styling

Styling of rows in the virtual DOM has been fixed. Rows are now assigned a tabulator-row-odd or tabulator-row-even class based on their position in the table.

Data Sanitization

Text based formatters now sanitize data before it is added to the table to prevent HTML and JavaScript injection attacks. To display HTML direcly in the cell you can now use the new html formatter.

For more information checkout the Formatting Documentation

Improved Framework Compatibility

A new wrapper has been added around the jQuery widget binding to allow for better compatability with node.js and Joomla.

IE 11 Compatability

A number of polyfills have been included in the library to give IE 11 and other older browsers access to all of Tabulators functionality.

Virtual DOM Example

A new example table has been created to demonstrate the new virtual DOM with 1000 randomly generated rows.

Have a play for yourself on the Examples Page

General Bug Fixing

A number of regressions and differences with version 2.12 have been fixed.

Stable Release Date Set

As the issues for 3.0 beta start to dry up we are looking very close to a stable release! With this in mind I am giving one more week for user feedback, and setting the release date for the stable version of 3.0 to next weekend, 03/06/2017

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

Additional 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.

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

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