Dynamically freezing or adding a frozen column always makes it frozen-right

[sndurkin]

Describe the bug I'm using the following code to dynamically freeze the 2nd column (the 1st column is already frozen):

table.updateColumnDefinition('progress', { frozen: true });

The column is frozen to the right instead of to the left.

Tabulator Info Version 4.7.0

Working Example https://codepen.io/sndurkin/pen/NWxaOJg?editors=0010

To Reproduce No steps needed, the code freezes the "Progress" column 500ms after creating the table.

Expected behavior I expected the column to freeze to the left because there were no unfrozen columns to left of the target column.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome v83.0.4103.106

Additional context I wouldn't mind helping fix this issue if you can point me in the right direction.

I also tried dynamically adding a frozen column at the very beginning of the list, like this:

table.columnManager.addColumn({title:"Just added", field:"added", frozen: true}, true, 'name');

But it seemed to be added to the end as well.

[sndurkin]

I did a little initial investigation and found that a dynamically added column which has { frozen: true } set is being frozen-right because initializationMode is always 'right' after the table is first constructed.

This could potentially be addressed by determining whether the column should be frozen left or right by its positioning, but that information isn't available in initializeColumn. Another option might be to add a function like setFrozenColumn(column, 'left' | 'right' | false) for dynamically freezing/unfreezing, which addColumn could call?

[olifolkerd]

Hey @sndurkin

This is correct behaviour, as you will see in the Frozen Column Documentation it states:

Tabulator builds the frozen columns by looking through the column definition array from both sides, building up the frozen columns as it see the frozen property. Once a non-frozen column is reached it stops building the frozen list for that side of the table.

which basically means as soon as a non frozen column is encountered the module switches to adding rows to the right of the table.

I like the idea of the function call to freeze a column to a specific edge. i will add that to the roadmap for a future release.

Cheers

Oli :)

[sndurkin]

Hi @olifolkerd, thanks for the response. If you have an idea of how that function call should be implemented, I could submit a PR for it.

[biv-21]

Hi @olifolkerd Is this behavior correct? When I update the definition of a frozen column(e. g. title) , it moves to the right? https://jsfiddle.net/341kwcL2/16/ before update title: after update:

[olifolkerd]

Yes, that is correct behaviour. Once the table has been drawn any rows with updated definitions will move to the right.

Have you tried using the free property on the column component

[biv-21]

@olifolkerd In addition after update definition I got a blank space in place of the moved column(between col1 and col3) and error in console Sorry but what does that mean free property?

[AndrewHutcheson]

@sndurkin Did you ever figure out a workaround for this? @olifolkerd Have you included a lefthand frozen option for dynamic row freezing in any of the releases?

[olifolkerd]

I have just pushed an update to the 5.2 branch that addresses this. the positions of frozen columns will be recalculated when a row is added or updated, so it would appear aligned to the correct side of the table.

This will be included in the 5.2 release later this month.

Cheers

Oli :)

[RalphMartinez]

Hi Oli,

I was recently introduced to Tabulator.js and it is a great piece of software. Thank you for making it.

I'm have been implemented different features for a new application I'm creating, and I have added a header popup to the columns where I allow the end user to add the column to a group, freeze the column or filter it.

Now the issue in this tread is related to frozen which is the latest feature I'm testing and I'm using the latest version 5.5, however, when I dynamically freeze the first column, everything works as expected, after I freeze the second, then the column stays in the proper place which sounds like that's the fixed you did in version 5.2 from the previous comment, however, all the subsequence columns do the same thing and everything works as expected only if you unfreeze the last column you froze.

Below is my little function where I pass the column and screenshots of the issue where you will see the Addr 1 column overwriting the customer and customer name columns and the only visible column would be the Addr 1 and part of the customer name due to the length. Sorry, this is already too long.

// freeze column const freezeColumn = (column) => { let columnDefinition = column.getDefinition(); if (columnDefinition.frozen) column.updateDefinition({frozen:false}); else column.updateDefinition({frozen:true}); }

[michaelhuch]

I like the idea of the function call to freeze a column to a specific edge. i will add that to the roadmap for a future release.

hi @olifolkerd, forgive my ineptitude, but was this feature added? i'd like to dynamically let users pin freezed columns to the left, regardless of the position of the column on the table. preferably being able to target individual columns within column groups, but i'll take what i can get.