Column header is not Freeze

Tags: #<Tag:0x00007fbe883711c8>

Hi Team, am using setting as below and my table Column header is not fixed while scrolling down, please help in this Fix.
this.hotSettings = {
columns: this.columns,
data: this.dataSet,
fixedColumnsLeft: 1,
fixedRowsTop: 1,
readOnly: this.isReadOnly,
cells: (row: number, col: number, prop: any) => {
let cellProps: any = {};
// logic is Hidden
return cellProps;
},
mergeCells: mergedCells,
afterChange: (changes) => {
this.cellEditEventHandler(changes);
},
observeChanges: true
}

Ref -


Thanks

Hi @martin.anbuselvan

can you share a sandbox demo? You are using a reference to this that hasn’t been added to the topic so I do know know what do you use for columns, afterChange, and how your data is structured.

ps. Please do not expose licenseKey (It has been removed it from your post).

Sorry for Sandbox now, due to some technical issue.

here are some details.

Html -
#div class=“edit-container”#
#hot-table [hotId]=“hotId” class=“hot handsontable-overflow” [settings]=“hotSettings”
/hot-table#
#/div

TS -

public columns: any[];
public dataSet: any;
this.columns = [ {title: " ", readOnly: true} ];
this.dataSet = [ [ “OEE (%)” ], [ “PPH (units/hour)” ], [ “SBR (hrs)” ], [ “Stoppage (hrs)” ] ]
this.columns.push({ title: this.getMonthYearFromPeriod§ // returns “Jan2020” });
//Data will be pushed -
this.dataSet[ rowNumber ].push(“25,25,25,25…”);// value in string

and Hotsettings is in above.

Thanks

I’m still lacking some settings https://jsfiddle.net/AMBudnik/j1bh4e5g/
Nevertheless, the code itself does not look suspicious. Please tell me

  • what Handsontable version (and wrapper version) do you use?
  • what frameworks/libraries do you use?
  • is that issue replicable on all all browsers/devices?

Could you also record the issue replication?

Hi @aleksandra_budnik,

am using Angular 7 and “handsontable”: “^7.4.2”,

this issue can replicate in all browser.

Thanks

Here https://jsfiddle.net/AMBudnik/c6tkpso5/ is an example that uses Angular 7 and Handsontable 7.4.2
I’ve loaded your settings

      fixedColumnsLeft: 1,
      fixedRowsTop: 1,
      mergeCells: true,
      observeChanges: true,
      colWidths: 100,
      colHeaders: true

and used the helper to construct data

data: Handsontable.helper.createSpreadsheetData(40, 7),

Everything seems to be right, but we are missing afterChange in the declaration part. Can you share it? It might be blocking some scripting.

Hi @aleksandra_budnik,

i have columns properties in the hotsetting with structure of - columns = [{ title: " ", readOnly: true }]; and you did not add in settings.
please avoid spread sheet it is not fitting my requirement instead, please use simple data set with 2 dimensional array

FYI - when i use both Column left and rows top, the matrix of the both are fixed and others are not.

please dont consider after change now.

Thanks

I added

and changed data to an array of arrays https://jsfiddle.net/AMBudnik/1b2kwqy4/
But with

columns = [{ title: " ", readOnly: true }];

you declare to have only one column (number of objects is equal to the number of columns). So in the result, we do not see fixing for the columns.

no its a structure of single column and array. you need to have as many number of coumns.

ex - columns: [{ title: “a”, readOnly: true },
{ title: “b”, readOnly: true },{ title: “c”, readOnly: true },{ title: “d”, readOnly: true },{ title: “e”, readOnly: true }];

and please keep row header and column header to be freezed.

Thanks

Here is an updated demo, and here is what I get on scroll left-right and top-bottom.

reproduction

It seems to work as expected. Please tell me if I missed anything.

sandbox link please.

Aaa yes, sorry. Here’s the demo https://jsfiddle.net/AMBudnik/1b2kwqy4/2/

in the above demo, i could not see freeze - column left. please add. Thanks

@martin.anbuselvan I think that we might not be on the same page. When I open the demo above this is what I get

37

  • headers do not disappear when we scroll
  • we have 1 row and 1 column fixed

Additionally, here https://jsfiddle.net/AMBudnik/y3mdcaqz/ I added context menu (opened of RMB). You can try to fix columns manually

21

Can you show me what do you get when you open and interact with my demo?

Am sorry, i donno where the mistake is. But same setting in demo (except width) is used here. But am getting this out put.

only first 2 rows and first column is working as expected.

image

This might be related to other CSS settings and settings of other elements on the website.
You can add a parent DIV container for Handsontable DIV with a fixed width, height, overflow: scroll, and position: relative.

Hi @martin.anbuselvan

have you found the settings that relate to this misalignment?

Hi @aleksandra_budnik, No not yet, Due to priority i picked other tasks.