Tabulator: What one feature would you like to see added to Tabulator

[olifolkerd]

Hey All,

I'm starting to plan the Tabulator roadmap for the next few releases, and i'm looking for a bit of community feedback.

If there was one new feature that could be added to Tabulator to make it extra useful to you what would it be?

It could be an upgrade to an existing system, or a completely new feature.

If you can, please give an example usage case as well as it will help me understand how a feature should be used.

Cheers

Oli :)

[lgraziani2712]

I would like to see two things:

1. Get the diff data between the original and the edited data (see https://github.com/benjamine/jsondiffpatch). This would make it a lot easier to send the updated data to the server. E.g.

const editedData = $('#table').tabulator().diffData();

// Send edited Data to server

It also could be nice to have a parameter that ask for the original data too:

const editedAndOriginalData = $('#table').tabulator().diffData({ withOriginal: true });

console.log(editedAndOriginaData);

This would print something like:

[{
  type: 'insert',
  // No `id` since it's an insert
  new: {
    // new data here
  },
}, {
  type: 'update',
  id: 1,
  new: {}, // New values
  old: {}, // Old values
}]

1. A validation function that validates everything. This would require to keep control of the data, so it validates only the new/edited data and not literally everything. This would allow to validate columns who have never been edited, but are required. E.g.

<button type="button" onclick="handleSubmit">

function handleSubmit() {
  const instance = $('#myTable').tabulator();

  instance.validate(); // throws if doesn't pass?

  // Send data to server
}

If I can help in any ways, ask me!

Thank you, Luciano.

[distraub]

I love the new movable rows between tables. I would love to be able to select multiple rows at once and move them to another table. I think extending this feature to being able to filter on the fromRow then move all of the selected rows would be incredible.

[quangkieu]

How about cells/column auto dependency? Something like {formular:"=[col1]+[col3]*[row10][col2]]"}
As right now mutator, you have to map depended columns to be triggered on change and update its dependencies to new value

[gishman]

Vertical columns. I think it can be achieved vias css.

[lgraziani2712]

Another possible enhancement would be async updates.

I have a column which uses dhtmlx's combo. Right now I'm using a monkey patched version of tabulator to "make it" work. It crashes when rows are reorder, so it isn't a decent monkey patch.

If updates where async by default, or possible async if the success function received a promise, this monkey patch wouldn't be necessary.

It would open a lot of possibilities!!

[olifolkerd]

Hey @lgraziani2712

All ajax updates to Tabulator are asynchronous, im not sure i follow. could you create a new issue to discuss this further.

Cheers

Oli :)

[mrUlrik]

I second the request for .validate to trigger form validation!

[olifolkerd]

@mrUlrik Could you explain what you are after?

Cheers

Oli :)

[mrUlrik]

@olifolkerd I am new to Tabulator and was challenged with form validation. The route I was originally taking was forcefully running a validation against the whole form when the user submitted the form.

The need for this came from creating a blank row for the user to input data but never filling anything out. That row would be sent in the JSON payload and ultimately fail. I've worked around that, but even still it would be very handy to trigger Tabulator's validator against the entire form from outside of Tabulator itself.

Edit: I also wanted to point out that Tabulator is fantastic and it's greatly appreciated. On top of that: you back your product with excellent support, not to mention the excellent documentation that puts so many other products to shame!

[aditya-thimphu]

Hi @olifolkerd,

"add column calculations/column groups/row groups to downloads" that you have included under The Future of Tabulator Roadmap; if this can be prioritized and included in version 4.0. Printing large progressively loaded reports has not been possible without this feature. Although Tabulator has a lot of impressive features, not being able to print large reports has been troublesome for us as we need to design another page for printing. Any other feature that would allow us to print large reports (progressively loaded) as we see in the screen would be great.

Thanks,
Aditya

[RuchiTrehan]

Ability to read json with json array embedded in it -
{
"ObjectName" : "password",
"ObjectType" : "",
"Xpaths" : [ {
"Value" : "//input[@id='password']"
} ]
}

I do not want to flatten the hierarchy.

[quangkieu]

@RuchiTrehan I would suggest JSONPath syntax over the Xpath syntax if you are working with JSON

[olifolkerd]

Hey All,

Just a quick update to let you know that a manic month at work has meant im running a bit behind on the 4.0 release, but it should be coming by the end of august. im hoping to get a beta out in the next couple of weeks.

Cheers

Oli :)

[olifolkerd]

Hey Guys & Girls,

I just wanted to drop you a quick message to let you know that a beta version for 4.0 should be available through the tabulator.info site Wednesday evening UK time.

Thanks for your patience while i have been putting it all together.

It has taken quite a while to extract all the jQuery from every nook and cranny and over two weeks work just to convert the website over to the new format and convert all the examples over to the new vanilla JS options.

I look forward to seeing what you all think.

Cheers

Oli :)

[olifolkerd]

Hey All,

The version 4.0 beta is now available for you to have a play with.

It is still under development in some areas but all the core functionality is in and working, if you find any bugs or have any feedback please create an issue so i can track it all.

Checkout the Version 4.0 Documentation for more information.

Website Updates

The website has also had a bit of a going over, there are now:

Release Notes to explain all the new functionality,

A step by step Upgrade Guide to take you through how to transition to 4.0

A Browser Support page to take you through what browsers are supported by Tabulator,

A jQuery Wrapper Guide for those of you that want to keep your jQuery code as untouched as possible

And a new FAQ Section to cover some of the most frequent questions i see on the issue list.

Let me know how you get on

Cheers

Oli :)

[foaadnami]

This is an amazing project. Havent used it yet as I am not sure if it covers all my needs.
I skimmed through the examples and have some suggestions for features

1) Upload Table Data (there is a download Table Data) once successful table refresh. This would a way to add data to source in bulk
2) Tabulator seems focused on existing data. But what if I like to add a row ? Add/Delete/Edit functionality/button would be a great addition with a popup for user to fill the details. of course changes sent as AJAX to server-side
3) Would be nice to handle dynamic data. So for example JSON from AJAX comes with x key/value pairs, we could make the mandatory fields show in the table and anything extra show as nested table. NoSQL schemas are inherently flexible so I am thinking of a flexible presentation layer to go with it

[olifolkerd]

Hey @foaadnami

Thanks for getting in touch, it is great to hear your enthusiasm.

I appreciate your ideas, but they do seem to push the bounds of what Tabulator is designed for. Tabulator is designed to be a powerful and easy to use library that does one thing well and that is to build tables, it is not a UI framework like jQuery or bootstrap that are designed to provide full UI features.

A lot of your suggestions would tie users in to a specific way of working (ie a specific type of upload format, or a specific type of dialog) most developers will be using their own frameworks to handle these tasks, and it is not for Tabulator to tell a developer how they should be uploading their data or create a popup. modals especially should be handled by the site as a whole and should not be dictated by a library who's purpose is to build a table. It is simple for you to implement these functions yourself for your site as a whole and then tie them into Tabulator.

You could already handle the dynamic data yourself you just need to format it in a way that Tabulator understands, the ajaxResponse callback for example allows you to manipulate data coming into the table into a format that Tabulator understands, so that is where you would map the data from your query into the table format.

Tabulator is deliberately open ended with an extensive API to allow you to tie this custom functionality into your tables, with out forcing choices upon developers.

I hope that makes sense.

Cheers

Oli :)

[haferje]

I would like to see:

1. Column chooser for allowing the user to hide/show columns in the grid
2. Better multi-selection of rows with Ctrl+click, Shift+click, Ctrl+Shift+click
3. Tri-state checkbox for "tickCross" header filter

[ngduc]

1. one click for cell editor (1-click to open a date picker, 1-click to toggle a checkbox)
2. an example for excel spreadsheet (using arrow keys to navigate, editing, etc.)
3. mobile first optimization / examples :)
   Thanks

[avelaMagazi]

Please add PHP support

[olifolkerd]

Hey @avelaMagazi

Im a bit confused, this is a JavaScript library designed to run client side, there is no way for it to be converted to PHP?

If you are asking for support sending data to and from a server, then you can already do this with the built in Ajax Request Support

Cheers

Oli :)

[galcha]

Hey, it would be very nice if Tabulator was able to handle multi column rows, like in that one issue :
https://github.com/olifolkerd/tabulator/issues/100

(Sorry if it is handled already, haven't found it in the doc)

[schrag]

Vertical-text column titles. Desirable when column titles are long, row entries for the column are short---as rendered here: https://imgur.com/DZnw84x.

[olifolkerd]

Version 4.1 has just been released, the following features tick off some of peoples requests:

• @aditya-thimphu column groups and row groups are now available in downloads
• @haferje there is now a "click" row selection mode and a tristate tickCross editor
• @schrag vertical text column titles are now available

Checkout the Version 4.1 Release Notes for more information

Cheers

Oli :)

[aditya-thimphu]

Thanks a lot @olifolkerd That's a good news for me.

[naufan385]

Hi @olifolkerd!
I think table needs customs option, for examples nested table could bе haves name, url for ajax request, identifier.
For example in tabulator.js add string after Tabulator.prototype.defaultOptions
customOptions:{}
Maybe is useful will be modal window in edit mode row, with choice visible column in window.

PS Sorry for my bad english, but if interested idea, i will helf for this task.

[schrag]

Will search capability be returning to document web pages? Missing that since switch from 4.0 to 4.1.

[olifolkerd]

Hey @schrag

The search should be working soon, it is provided by algolia's free docsearch, which only polls the website for updates every couple of days, so im just waiting for them to crawl the site again and it should auto update.

Cheers

Oli :)

[haferje]

Thanks @olifolkerd, new row selection and tristate checkbox is just what i asked for! Nice job on the quick implementation!

There is a small issue with the tristate checkbox, but I will add a new Issue for it.
EDIT: Issue #1558

[apexuser]

Hello Oli,
It would be great to have a possibility to load column definitions by AJAX. Now, as far as I can see, it is possible to load only data.
Thanks in advance.

[olifolkerd]

Hey @apexuser

You can do that with your own ajax request outside of Tabulator if you need the feature right now.

Cheers

Oli

[popey456963]

A standard interface for live updating tables would be a really useful feature table libraries usually seem to miss. It could expect a websocket-like pipe to be provided (there are, if needed, many libraries for wrapping AJAX / HTML polling into a websocket interface) and then use Operational Transformation in order to resolve updates from multiple users into a single document.

If you were willing to tie it to a specific specification, ShareDB currently seems to be the most popular collaborative editing framework around.

[ipalfy]

Ok, this one might be (a bit) out of scope, but I would love to see "Auto-Columns" and "Auto-Group".

• "Auto-Columns" would simply display the table with everything it knows about the data. It could be quite advanced too, like finding out, if is numeric, iso-date, boolean etc. This makes most sense with the AJAX-feature. The results of the AutoColumn-scan could be saved when first opened, or the whole thing could be a separate utility.

• "Auto-Group" would allow to (automatically) display nested json in collapsible subtables.

Background:

• Since Tabulator is so easy to use, I sometimes put together a website in a few minutes, just to test the results with Tabulator.
• .json-data usually comes from REST-Endpoints.
• .json-data is quite common to have no schema or be nested.
• I didn't find any (really) smart component to deal with "real world" .json-data ...

[olifolkerd]

Hey @ipalfy

That is an interesting idea, to make it efficient it would need to be based off the fields in the first row of data (scanning all of them if there are lots would be tricky). but i think it would be a really easy way to build tables It should in fact be fairly simple to do

In fact i like it so much i will add it to the roadmap for the next release :)

Just so you know Tabulator already does determine the correct sorter for cells based on the content of the first row but this only works for boolean, strings, and numbers. anything more complicated and it is left to the user to decide

Thanks for the suggestion :)

[quangkieu]

I would suggest first non-empty (null, N/A) avaliable values of the fields
as that would more correct.

On Mon, Dec 3, 2018, 12:56 PM Oli Folkerd <[email protected] wrote:

Hey @ipalfy https://github.com/ipalfy

That is an interesting idea, to make it efficient it would need to be
based off the fields in the first row of data (scanning all of them if
there are lots would be tricky). but i think it would be a really easy way
to build tables It should in fact be fairly simple to do

In fact i like it so much i will add it to the roadmap for the next
release :)

Just so you know Tabulator already does determine the correct sorter for
cells based on the content of the first row but this only works for
boolean, strings, and numbers. anything more complicated and it is left to
the user to decide

Thanks for the suggestion :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/1043#issuecomment-443805237,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEG9WDlgWI1vcRvviJeq6yL-Bk8hZ-1Nks5u1WXkgaJpZM4TVZaJ
.

[haferje]

It would be nice to have a filter icon to trigger a dropdown selector next to header filters, so users can change the filter type on the fly.

For string filters, the options could be: starts with, ends with, contains, equals, in, regex (and their negative counterparts: doesn't contain, doesn't equal, etc.)
For numeric values: equals, greater than, greater than or equal, less than, less than or equal, in (and negatives)

There could also be another icon or drop option to clear the filter for the current column.

[KES777]

To extend the idea of @ipalfy I would suggest also to fill column's title (if not specified by columns) from field. It seems reasonable default.

@aditya-thimphu
To generate flexible reports look here https://www.fast-report.com
some features for Tabulator may be spied from there ;-)

[KES777]

If this is feature aggregator issuse thus I would suggest _children to allow next options:

_children: "http://url/tofetch/data/from"

_children: function(){ ... }  //like #1038

https://github.com/olifolkerd/tabulator/issues/1038#issuecomment-380902420

also probably belongs to https://github.com/olifolkerd/tabulator/issues/1554#issuecomment-435678171 dataTreeStartExpanded

[KES777]

I would like to see rowEdited callback in addition to cellEdited

This will allow to make only one request to backend server with updated data of whole row (when user finish edit all cells and moved focus to next row), instead of make ajax request after each cell is edited.

[olifolkerd]

Hey @ipalfy

Auto column detection is now available in the 4.2 release.

Cheers

Oli :)

[Aravindhraj]

How about the editor type of input which has X icon to clear data. (Input type=search)``

[olifolkerd]

@Aravindhraj Good thought, i will add that to the 4.2 as an option parameter on the input editor

[devbhosale]

@olifolkerd Does the auto-column feature support datatype detection? I noticed the in the auto-column example, date column gets sorted as a string rather than as a date.

[pythonBerg]

Love the library...moving most of my platform from datatables. A couple of things I would love to see..

When using tree data, tabulator is failing when _children = null. This should simply be ignored. I am serializing using DRF now I need modified serializer for those with children vs those without.

Another minor point (probably my ignorance)...fitColumns layout does not seem to incorporate knowledge of scrollbar. I am looking for a filled div on screen and require specific widths on certain columns. When scroll bar there, table overflows. When not scrolling, white space present.

Thanks

[KES777]

@devbhosale Internally Tabulator detect type of column, but unfortunately does not save this info. I have asked about this but did not remember the issue where I did that.

Would be cool if this detected column type info will be available. I see it useful while extending Tabulator.

[rNianios]

The possibility to show/hide nested tables without using rowformatter

[olifolkerd]

@rNianios If you could provide a bit more detail on how you would like this to function i would be happy to look at adding the functionality in 4.3

[rNianios]

Hi Oli,

Thanks for taking the time to come back to me as this is I guess a hobby project.

I was thinking of an easier way through tabulator, to create nested table with the ability to show hide the nested table the same way as you have done it for the datatree structure.

Right now to achieve this I have a column with a formatter, with an icon, which I call 3 functions. One to set the icon to + initially, one to function to show/hide the content via css on click, and one to change the icon from + to -.

 formatter: RevealIcon, width: 40, align: "center", cellClick: function (e, cell) {
     displayToggle(document.getElementById(cell.getRow().getData().ServiceTag)); //show/hide nested table
     toggleIcon(cell.getElement()); //change icon from fa-plus to fa-minus
                }

When I see at it, it's not too much work, I was able to work out in the end, and without wanted to sound as ungrateful for this great piece of software you have created, which I really like. It was a bit hard to get through the documentation in the beginning and understand the row formatter, your examples were really good.

Maybe having a ready example for this kind of feature? I can't be the only one asking for this. I've seen another raised issue regarding this.

I don't mind sharing my code, which I need to make better anyway...

Thanks,
Romanos

[olifolkerd]

Hey @rNianios

Thanks for the info, reading an array of data from a _nestedTable property of a row would certainly be a good way to go and i would be happy to look at that.

The issues arise that you also need to pass in a table constructor for the new table which will almost certainly be different from the parent table. some users even have multiple levels of nested table. i could look at adding this as a nestedTableDefinition property on the initial table constructor, that can either be an object for the tables, an array of objects to allow specifying for multiple levels of nested table or a function that could return the definition based on the current row.

How does that sound as a proposition?

Cheers

Oli :)

[rNianios]

Hi Oli,

Sounds like a good idea, somehow you will have to account for showing / hiding the nested table(s) and toggle the icon :)

Again, thanks for getting back to me :)

Kind Regards,
Romanos

[popovserhii]

1. Column chooser for allowing the user to hide/show columns in the grid

This feature is really needed. Many users want to have the possibility to customize the grid such as hide/show columns, order columns, change columns width etc.

[Identity404]

Hi @olifolkerd

Are their currently any plans for table grouping to support row-span? In old posts I saw that it was on the road-map, but wasn't sure if it was still planned.

Thanks

[haferje]

@Identity404 Just a bit of info - there is a roadmap posted on Trello (https://trello.com/b/rPZ0Yavc/tabulator-roadmap). "Row Span Functionality" is mentioned for "Future" versions, but does not look to be scheduled for the next v4.3 release.

However, I'll let Oli answer for himself if he wishes to expand upon that.

[olifolkerd]

Hey @Identity404

Row span and collspan will be coming in 5.0

I am currently working on the plan for the next years worth of dev and what features 5.0 will bring to the mix.

As @haferje says keep an eye on the roadmap to find out more.

Cheers

Oli :)

[KES777]

@olifolkerd Hi, Oli

Row span and collspan will be coming in 5.0

Are these features will be based on HTML5 grid?

[olifolkerd]

@KES777 I haven't begun planning this part of the system yet so im not going to commit to any particular course.

There are a great many considerations that need to be taken about how col/rowspan will integrate with other functionality in the table such as movable rows/columns, row deletion, formatters etc. and while grid may offer some benefits it also comes with drawback in that it enforces its on way of doing things, and isnt compatible with IE.

When i start work on the 5.0 branch i will consider it further but at this point i am not going to discuss technical implementation until i have a better idea of the specific features people are after which i will ask about closer to the 5.0 release.

Cheers

Oli :)

[YendorMc]

I’d like to see Column calculations added to grouped data. This would be similar to sub totals. So one could see the column calculations in the same position of the given column. The column definition could have an additional property to be able to choose or not choose to show the calls.

[olifolkerd]

@YendorMc the columnCalcs option lets you choose how calcs are shown at group and table levels.

details of this can be found in the Column Calcs Documentation

Cheers

Oli :)

[c-dante]

Updating a single column without reflowing the entire table. It'd be great if you could patch a single column's definition without having to repaint and re render the entire table.

Essentially some API where I can specify when I call setColumns on an existing table how to "merge" the column defs -- for instance:

table.setColumns([
  { field: 'a', title: 'Column A', id: 'id-a' },
  { field: 'b', title: 'Column B', id: 'id-b' },
]);
// some time later
table.setColumns([
  { field: 'a', title: 'Column A', id: 'id-a' },
 { field: 'b', title: 'Column B Updated', id: 'id-b' },
]);

It'd be awesome if column A didn't completely re-render, and only column B did.

[olifolkerd]

@c-dante It triggers a re render because so much of the table is dependent on the setup of a column that everything needs to be assessed, deepening on render mode, mutator, formatters, row formatters etc it is not as simple as updating a single column of dom entries.

Also with the virtual dom it will only update the display rows and so shouldnt have minimal processing requirements and be barely noticeable but the user.

Cheers

Oli :)

[prateeks39]

Hi oli,

I'm using tabulator in my project and it will very helpful if you include below features if possible.

1. Table can have option to place Pagination on top or bottom or both side in table.

2. Show bottom calculation show in group headers in each row and it should be aligned with particular coloumn. If user resize or hide/ show that column group headers column should reflect according to that column.

3.For responsive layout collapse button of hide/show on each row should be hidden if all columns is in visible state.

1. If user load the table in hidden div after on any event if user set visible the div so user needs to redraw the table, if I have lots of records in the table the redraw cost is very high.
2. Frozen row:- in current tabulator version if user user set a row to frozen true then it will display in first row can you change the placement of row from top to bottom.
   
   
   
   1. Print table option.
   
   
   2. Give configuration on column level to manage Column headers alignment and style formatting. Currently there is cssClass option but if i want to different styling on column header and column value so it will not work.
   
   

[rkhapre]

Hi, I think we need Pivot table as well, as mentioned in another thread, friendly bump here
https://github.com/olifolkerd/tabulator/issues/1890

[YendorMc]

What do you think about colorized heat maps for column and/or row?
The background colors would be scaled based on the maximum/minimum numbers in a column or row then normalized to a range of colors.

[anilsamuel]

Dynamic cell editor based mapped data.
For e.g. if mapped row data is {key:'Data Source',value:'web',options:{web:'Web',research:'Research',iot:'IoT'}} then cell editor for Value to be a select and with no options, the editor to be default editor.

[guiihlopes]

I would like calculation callback... The bottom calculation happen after table renders and there is no callback I've found in the docs which would be trigger after any calculation.

IMO it seems to be an easy feature and it would be usefull for some cases. ;)

[haferje]

I would like to add a suggestion for column filter dropdown options. When a user filters on a certain value, they would like to filter the grid data on if it "begins with", "ends with", "contains", etc. the value. This can be presented as a filter textbox and an accompanying icon/button that drops an overlay with a list of options on how to apply the filter. This could be applied to strings, numbers, dates (anything that has a string representation).

[BurnseyBoi]

One thing I would love to see would be a "See more..." option. If I have a long table of data, I'd love to be able to only show the first X rows, with a "see more" button that would then reveal the rest

[olifolkerd]

You could easily do that yourself by only loading the first few rows into the table, then loading the rest in when they click the button

Or use the built in scroll

[BurnseyBoi]

That's a great idea, I hadn't thought about only loading select rows. Thanks!

[saleyn]

It would be nice to have a record-level editor, such that if the user chooses to edit a row, a form would pop up with the column name and value pairs, and ok/cancel buttons. If ok is pressed, the values would be validated and saved to the edited row.

Currently each cell edit is independent of another cell edit, which is not convenient when row-level validation is needed (e.g. when the row updates need to be sent to a server).

[manojkakarla]

Is it possible to have a filter method to show only the rows with validation failures? Custom filter function in the doc isn't passing row reference to access cells and check if they have a tabulator-validation-fail class.

[olifolkerd]

@manojkakarla Please ask questions on Stack Overflow, that is where the community can provide help on solving a particular challenge

[olifolkerd]

Hey @saleyn

You can do that yourself using the rowClick event to trigger any of the many modal JavaScript Libraries already out there. most sites have a specific look and feel for their modals, so Tabulator focus's on doing what it does best, Tables, and leaves the rest to other libraries.

Cheers

Oli :)