Make a striped table with alternate bgColor in Angular App

Tags: #<Tag:0x00007efc650a6fc8>
#1

Hi,
How do I make a striped table with alternating colors?

I referred above query and it’s solution, but I’m still not able to add className to the row.

Please find the code below:

TS Code:
cells: function(row, col) {
var cellProp:any = {};
if(row % 2 === 0){
cellProp.className = ‘even’;
cellProp.readOnly = true;
}
else {
cellProp.className = ‘odd’;
cellProp.readOnly = false;
}
return cellProp;
},

SCSS Code:
.odd{
background: grey !important;
color: white !important;
}
.even{
background: white !important;
color: white !important;
}

Also note that, the readOnly property is being applied to alternate rows but not the backgroundColor property.

Please help to solve this query.

#2

Hi @sam

Here’s a solution: https://jsfiddle.net/aszymanski/t308e6oy/

When you are adding a custom CSS class you always have to add also .handsontable before that class.

#3

Hey @adrian.szymanski, thanks for quick reply.

However I’m using different way to create Handsontable Instance as below:
image

image
image.png1087×408 21.5 KB

Also I tried adding .handsontable before class, but it didn’t work for me.

Can you please suggest some other way to get the result ?

#4

Hi @sam

Here’s the same case created within our Angular wrapper: https://jsfiddle.net/aszymanski/a6st9uc3/

I used the code you sent me, the only thing I added is that .handsontable class in CSS. If that still doesn’t work for you, please modify my demo to your exact settings so I’ll be able to investigate it further.

#5

Hi @adrian.szymanski,

Please find below link :
https://jsfiddle.net/05Lmv8sz/

I have modified your demo with my exact settings, and it’s not working.

Can you please check this and help ASAP.

Thanks.

#6

Hi @sam

In your example I can see that the whole table isn’t defined correctly in the template, here’s a correct way to do this:

https://handsontable.com/docs/angular-simple-example/

Secondly, if you want to access the Handsontable instance, here’s an instruction how to do it:

https://handsontable.com/docs/angular-hot-reference/

Can you also tell me what would you like to achieve in this line?

this.hotInstance = new Handsontable(this.hotElement?.nativeElement,this.hotSettings);
#7

I am using this to create handsonTable instance only once when the data is received from API. Once the handsontable instance is created then if new data is fetched from the API then I’m just loading new data to the instance, showing the block of code below:

hotInstance!: Handsontable;
getSubsidiaryDetails(id:Number){
this.httpService.getData("/getTableDetails/"+ id).subscribe(
(data) => {
if(!this.hotInstance){
this.hotInstance = new Handsontable(this.hotElement?.nativeElement,this.hotSettings);
}
this.hotInstance.loadData(data)
})
}

#8

One more question. Does that configuration works in you local project and the only issue is the one with adding custom CSS for striped rows?

#9

Yes, that configuration works for me locally, and the issue is only with custom CSS for striped rows.

#10

Ok, I see. So maybe are you able to send me a package with your project so I can try to fix it on my end? I think that would be the best solution.

#11

Actually the project is pretty much big. Can you please create a Demo with exact my config code, by creating everything from TS file ?
That would be much helpful.

Thanks in advance.

#12

I think we already did that with this demo, and it’s throwing errors after you applied your config: https://jsfiddle.net/05Lmv8sz/

That’s why I asked if the same config works in your local project.

#13

Yes, that config is working for me in my local project.

However I also tried to change my config according to your code but it didn’t worked for me.

Can you please make this config run ?

#14

Hi @adrian.szymanski,

I found following points,

image
image.png1653×444 66 KB

In above image, for tag “td” “class=odd” is getting applied but td.odd style is not been added in styles section automatically. (I have added td.odd style manually in styles and then the table striped rows appeared).

However I have added it in my css file as below:

image
image.png625×712 43.3 KB

I tried multiple ways to add, but none of them worked or added in styles.

Can you please tell where should I add those css blocks in order to get added in style ?

PS: I am using this exact code : https://jsfiddle.net/okx3dsug/

#15

Hi @sam

@adrian.szymanski way with defining .handsontable .odd as the CSS className and using !important for the background-color is the recommended way.

If that does not work in your project you should check the computed part of the CSS section in the Chrome webtools. Maybe there is some CSS framework/library that overwrites your settings.

#16

Hi @aleksandra_budnik, I also tried .handsontable .odd as CSS className and using with !important for the background-color.
In that case, there was no CSS class found in CSS section in Chrome webtools.

So, can you let me know why it is not getting applied in CSS section or is there any other way to add CSS class?

#17

It is added in the JSfiddle above https://jsfiddle.net/okx3dsug/ so without the ability to replicate the exact environmental details as you have we won’t be able to help much.

#18

I used the same code from the JSfiddle you mentioned, but still classname is not getting added in CSS section.

#19

If you did apparently some other factors differ. If that’s not the browser, system, and code. Maybe it’s script execution order, library interference, or environmental settings.

#20

I’m closing this issue as there are no further updates. Nevertheless, I hope that it means that the issue is solved. If it’s not @sam please feel free to reopen the topic or create a new one.