Customize Table

Tags: #<Tag:0x00007f51b8d6e8c0>
#1

Hi all,

I am not sure if this is a request for new feature or if it is possible, and I just didn’t saw how.
Basically we would need our table to be “customizable” by each user. Mostly 2 features:
-How many rows to display (like for example 10, 20 or 50)
-Select (easily?) which Columns to show. So we have a lot of data that will be displayed, with many fields. Of course by default we will want to show only the 10/15 most used. But each user may/will need this or that row.
So we want to give them the flexibility to easily select which Columns/Fields they want to display to satisfy their needs.

Is this something possible to implement easily or it would be an entirely new feature?
Thank

#2

Hi @christophe.campos.pe

I do not know if that suits your needs but here is a demo that shows how to hide/show columns and rows http://jsfiddle.net/handsoncode/kLrv0Lhd/ and here is a demo for row density http://jsfiddle.net/jgL72034/ which you can combine with hiddenRows or pagination demo to create this

How many rows to display (like for example 10, 20 or 50)

#3

Hi Aleksandra,

Thank you for your answer.

Yes, the first one was something similar that what I saw.
But I was thinking more like a selectable list or checkbox, and you select the column/fields you want to see.

With this approach we would have all the columns by default there, and then we would “compress”/hide some of them, but…then how would the user now on which place he needs to click to show/unhide the specific column that he wants to see?
That’s where this approach doesn’t seem do-able or fitting our needs.

As for Row density, all it seems to do is to give more or less “height” for the row. But basically we will have huge amount of data, and we will use Web-services. I do not think is we could/should load the data and then hide rows.

I am sorry about all this doubts and questions, but before we purchase HoT we really need to be sure that both this features can be extended/created.

#4

There is no problem. You can also use the updateSettings method to replace hiddenColumns array by checkboxes.

Please take a look at this demo http://jsfiddle.net/handsoncode/8qreLnr3/

When it comes to loading rows on pages, if your dataset has a lot of rows it’s the best pick to load them server-side. I have only an example on how to do it using hiddenRows http://jsfiddle.net/handsoncode/g912eb3o/ but if you do not use the Filter by value option from Filters then you are able to fake pagination by loading a number of page buttons that will relate to your dataset length and just replace the instance with data that corresponds to clicked ranges of indexes.

I hope that it will help but if you have any additional questions please feel free to comment.

#5

Thank you Aleksandra, your answers have been really helpful.

My last question would be how well/easy can we handle a huge amount of data (thousands of records), using HoT and Web service?
Meaning that so far, all examples I saw was based on the assumption - If I am not wrong - that the full data of the table will be loaded. In our case, since the amout of data is quite significant, we will call WS to get X rows each time. Either on the first load, or later using tools like ordering/search.

I have read the documentation, but I haven’t found much about working with HoT and Server-side.

Edit:
I saw your answer here:Server Side Pagination
So it seems that while pagination is possible, filtering is not. But, if I understood right, I can just not use your default drop-down filtering and instead create our own, and make it call the Webservice with the filtering option?

#6

I can see that you have made a research. I really appreciate.

Yes, as a front-end solution provider we do not have any examples on how to work server-side. However, we highly encourage to use server-side operations on larger data.

As you rightly spotted the filtering won’t work as it doesn’t allow us to pass an external list of data (yet) so we are not able to pass a different set of values than the visible in the grid. What is great, however, is the fact that dropdown menu allows us to create custom functions so we are able to create the same filtering option that will correspond to your database.

#7