Evaluating DataTables - A few questions about the features

Karlo

Hi All!

I'm looking into DataTables as a replacement for another grid plugin that has too many limitations. DataTables seems to fit with most of my requirements, its intuitive, mature and the documentation is really super. I'd really like to use it.

Here are a few features (some are blockers, others are nice-to-have) that I'd like to check. Can you please tell me if available (with demo?) or not or maybe what customization steps may be required:

1. Resize column widths by end user action (touch / mouse)
2. Excel Style Filtering (let a popup box show up with a check-list of all distinct values in the column)
3. Custom Sorting (implement own sorting rules for specific columns)
4. Typescript support (d.ts files)
5. Grouping by end user selection (e.g. other solutions allow to drag/drop a column into a Group-by section)
6. Pure client side data loading (I want to do the server calls in my own js code and then fill the Grid with json data)
7. Add/modify/delete a single row by js code on (client-side, without re-loading all)
8. Multiline rows (with both header and data rows showing two or more lines of fields)
9. Preview line (**)

(**) This is a bit specific, what I mean is an extra text line showing up for every data rows that spans all columns (on top of the regular data cells). I already found https://datatables.net/examples/api/row_details.html which comes close to what I need. In my case, the details shall show up before (not after) the regular row and I don't want the little button to show/hide details (the detail line shall just be always visible)

Thanks so much!
Karlo

allan

Hi Karlo,

Resize column widths by end user action (touch / mouse)

No - this isn't a feature of DataTables at this time.

Excel Style Filtering (let a popup box show up with a check-list of all distinct values in the column)

There isn't one exactly like the one in Excel, although there are plenty of ways to column filter the table - e.g. 1 and 2.

Custom Sorting (implement own sorting rules for specific columns)

Yes.

Typescript support (d.ts files)

Community provided.

Grouping by end user selection (e.g. other solutions allow to drag/drop a column into a Group-by section)

You can RowGroup and could provide an interface to let the user change the group through the rowGroup().dataSrc() method.

Pure client side data loading (I want to do the server calls in my own js code and then fill the Grid with json data)

Yes. Use rows.add().

Add/modify/delete a single row by js code on (client-side, without re-loading all)

If you are using Editor, yes.

Multiline rows (with both header and data rows showing two or more lines of fields)

No.

Preview line (**)
In my case, the details shall show up before

No. They are only shown after. You can have them automatically open using the API if you wish.

Allan

Karlo

Thanks, Alan, for your quick response.

My only big concern is the Preview Line thing, which is a blocker for me, so I need to find a solution.

Browsing thru your docs + code and examples, here are two ideas. Could you please tell me whether you think it is viable:

a) Can I make use of https://datatables.net/examples/advanced_init/row_callback.html to insertBefore an extra tr that spans over all columns and as such displays the extra "Preview" line within the same logical row, but one line above the regular column tr/td's row ?

b) Hack into your source code and change occasions of "row._details.insertAfter" into "row._details.insertBefore" (hoping that you may add a config option at some time later)?

allan

Yes, either of those would work. You could also use drawCallback which is how I used to do row grouping (actually - it is how RowGroup still does).

Its a fair feature request I think - the problem would be how to configure it on a per instance basis. Still quite possible, but its the first request I've seen for this feature, so I'm not sure how popular or useful it would be beyond your use case.

Allan

Karlo

Hi Allan,

I tried both options. Using the row_callback approach didn't work for me. It seems that when the tr element is passed to the callback method (as the row argument) there's no way for me to replace it by something like an array of multiple tr's.

However, the second approach (changing "row._details.insertAfter" into "row._details.insertBefore" in your source) seems to work just fine:) Could you give me a hint how I can make the details appear for every row by default (without a 2nd rendering)?

It would be great if the before/after choice would make it into your lib as an option. When I modify the code, I cannot use NPM any more and I wound need to maintain the local copy.

Thanks!
Karlo

allan

You can't replace a row as such - you have a reference to it so you can insert before or after it though.

Good to hear that the second approach works. To make child rows show, call the row().child().show() method on each row. In the example it is activated by a click event handler. You could just use rows().every() and loop over all rows calling that function.

Allan

Karlo

Great.
I added these lines right after creating the DataTable:

            table.rows().every(function (rowIdx, tableLoop, rowLoop) {
                this.child(format(this.data())).show();
            });

Is that what you mean? Well, it works:) I was just concerned that rendering happens twice this way. I may have to loop over 1000+ rows sometimes. Do you think this is the fastest way to do it.

As for the show-details-before-row feature, I'd be glad if you put it on the wish list. Thanks!!

kthorngren

Try the selector-modifier of {page: 'current'} to loop through only those displayed. For example:

table.rows({page: 'current'}).every(function.......`

Kevin

allan

Yup - good thinking Kevin. Then use draw or drawCallback to know when to run that code again for new page displays.

Allan

Karlo

Thanks, Kevin & Allan.

I ended up using the drawCallback because it fires for the first drawing as well, while it seems that when I register the draw event it's too late for the first.

Karlo

Hi Allan,

so far I made very good progress integrating DataTables on my site. Thanks for you help.

As for the change that I had to make to display the details before and not after the row: I had to change the source code and just replaced "row._details.insertAfter" by "row._details.insertBefore" (3 findings).

I already asked to consider to introduce the ability to control the position of the details (before or after). I think this could be done relatively easy on a per-row base. My suggestion for this:

• Add an optional bool argument "placeBefore" to row().child.show() which defaults to false.
• Internally, make the row._detailsShow field (currently boolean) a tri-state, so that it saves the states "no" (don't show, currently like false) or "after" (currently like true) or "before" (which is new).

This way, it would be flexible, the change should be manageable and backwards-compatible.

What do you think? If it helps, I could try to prepare it this way and file a PR, please just tell me.

Thanks
Karlo

allan

Hi Karlo,

Thanks - yes that sounds like a reasonable approach. The only reason I'm slightly hesitant about this though is that you are the only one that has requested this feature thus far. I'm not certain about including such a feature if it isn't really going to be used. If others request it, then yes, it seems like a good addition.

Regards,
Allan

Karlo

Hi Allan,
ok, I understand that there's no wide demand for this feature. However, maybe some others may want to use it when they see it's possible.

I'm currently fine with the brute change I made, but of course I'd prefer to use the official release unchanged, for better maintainability, clarity etc. That's why I'm offering to prepare the change. Please just tell me if you'd consider (I don't mean promise) to include the change.

Thanks
Karlo

allan

I'd certainly consider it!

Allan

Karlo

Hi Allan,

I just created a pull request:
https://github.com/DataTables/DataTablesSrc/pull/120

I don't have much experience with github yet. Could you please just look into it and tell me if I used the right repository etc. And I was not sure whether to edit the xml files in docs folder directly (that's what I did), or if there's a special tool/editor or such...

Thanks!

allan

Yup - that looks good to me - thanks! And yes, XML files in just a plain text editor is what I do myself.

Allan

meyk

hello list

how can i make use of the placeBefore feature mentioned in this thread?

thank you!

allan

You'd need to incorporate the code from @Karlo's link above. It hasn't yet been merged in.

Allan

meyk

works like a charm !!

meyk

one more question:
when turning paging on, is there a chance that the (placed-before-) detail line will be on one page and the row (it belongs to) with the "normal" columns on the next page?

allan

No.

Looking at that code, that shouldn't be possible.

Allan

meyk

super! that's what i wanted!!