DataTables: Column visibility, reorder, and resize

General
1

Hi there,

one of our clients wants to have the listing view extended so that he can

  • toggle column visibility
  • reorder columns via drag and drop
  • resize columns via drag and drop

Preside currently uses DataTables 1.9.4, which only supports the legacy API, whereas the newer API has built-in methods for e.g. toggling and columns can be reordered via a plugin. With the legacy API, much of this has to be done via DOM manipulation instead of using the API.

I understand that updating DataTables to a more recent version is a major project, because of implications/dependencies in Preside.

Then again, table manipulation like this is not an unusual requirement in modern UIs, so I was wondering how do you do this for your clients?

Thank you,

Chris

2

I managed to put together a few JavaScripts to at least enable reordering and column toggling. Doesn’t feel like the best solution, though.

So I’d like to ask again… it’s not an unusual request and I am sure, some of your clients, have asked for this feature, too. How do you do this. @seb @dominic.watson, anyone, really… care to offer some insight?

Thank you,

Chris

3

We just don’t, unfortunately. It would defo be nice though!

It would be possible to do this as a regular datamanager customisation where you implement a listing viewlet (Preside Documentation :: Data Manager customization: listingViewlet) for the object.

You are able to pass an array of grid fields to _objectDataTable so would be a case of making that dynamic. Making a nice UI of it would of course be the challenging part.

4

Hey Dom, thanks for the answer!

As a matter of fact I did use _objectDataTable.cfm in an extension and added some scripts.

The tricky part is that with DataTables 1.9 you have to go with DOM manipulation, because the API methods for this were only introduced in 1.10. And with manipulating the DOM you run into all kinds of issues, like dt.draw events when running in a tab.

I’m a bit surprised you never had to build this, was one of the first things, our latest client asked for. :wink:

Thanks again!

1 Like