[GH #6782, #6783] Is there any way to save and restore user preferences like column resize, sorting, ordering

Tags: #<Tag:0x00007efc64f98d48> #<Tag:0x00007efc64f98bb8>
#1

Is there any way to save and restore user preferences like column resize, sorting, ordering In handsontable.??

#2

Hi @suman.dutta

Each of the feature have their own hooks.

Some of the settings can be saved via persistentState https://handsontable.com/docs/7.4.2/Options.html#persistentState

Turns on saving the state of column sorting, column positions and column sizes in local storage.

You can control the the state of the settings via hooks

#3

Hey @suman.dutta

Have you had time to try it?

#4

Yup, I tried persistentState and its working fine. But persistentStateSave feature i haven’t tried yet.

#5

Can you please provide a demo of persistentStateSave, It will be helpful to me.

#6

Sure. Here it is https://jsfiddle.net/95u0kay2/ (v. 7.4.2)

#7

Thanks its working fine.But i want a demo where where i can store freeze column or filter column in local storage and load the same after refresh the page.

#8

This demo is already saving key/value pairs to the localStorage

30
Zrzut ekranu 2020-03-27 o 11.01.30.png1418×428 81.8 KB

If you’d like to get the same information from the instance you can track the hook

30
Zrzut ekranu 2020-03-27 o 11.03.30.png755×323 35.6 KB

#9

Yes its saving column sorting feature , But i Want to save filter also.

#10

Filtering is not supported by the persistentState functionality.

In this case, you can use the afterFilter hook to save settings into localStorage. There are a lot of information you can get from this filter (complex object is returned by the hook) so let me just give an example

afterFilter: function(){
      let columnsFiltered = arguments[0].length.toString();
      localStorage.setItem('columnsFiltered', columnsFiltered)
}

demo https://jsfiddle.net/ykm50do8/

52
Zrzut ekranu 2020-03-27 o 11.33.52.png1413×190 44.3 KB

ps. I 've added the request to add filtering to persistentState plugin https://github.com/handsontable/handsontable/issues/6782
I will notify you once it happens.

#11

Thanks its working now . Is there any hooks to save freeze columns ??

#12

Actually there is no hook dedicated for freezing columns. Freezing calls the move plugin


But that is not a way to track freezing as now it does not tell the developer if the column moved or has been frozen.

I reported the need for the following hook here https://github.com/handsontable/handsontable/issues/6783

At this point I need to thank you. I have realized that we miss two different functionalities in the library.

  • saving filtering to localStorage
  • reporting freezing

I will definitely inform you once any of those functionalities will be added to the official version of Handsontable.

#13

Great thanks…

#14

Hi @aleksandra_budnik

I am trying to store fixed columns manually, How can I get manually fixed columns or any event will be fired when I click on “freeze column” from the context menu ??

#15

Hi @suman.dutta

does the fixedColumnsLeft of getSettings help?

demo https://jsfiddle.net/dn1bxtsk/

#16

I tried it but, I want array of column’s index which are fixed.

#17

Does getting column name help?

Here’s https://jsfiddle.net/qL94c82e/ an example that returns the current column order

#18

Its not working when you set dropdownMenu: true,
And if i get column id it would be helpful.

#19

You’re right - adding any other element to headers breaks the rule

TH.children[0].children[0].innerText

so this has to be adjusted.

When you use dropdownMenu the rule changes to

if (TH.children[0].children[1]) {
        console.log(TH.children[0].children[1].innerText);
}

(2n children, not the first one)

if i get column id it would be helpful.

If you would set the colHeaders as an array of values you’d be able to call the native indexOf method on that array in the afterGetColHeader hook.

#20

Thanks.