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