How to create a dynamic table

[antoineb]

Hello,
I created a query loop within a block that is displayed in a 3-column grid.

I would like to be able to manipulate the rows and columns.
First, I would like to create a header with the name of each column.

Secondly, I want every other line to be a different color.

I tried using chatgpt, but the fact that there’s a query loop complicates things. How can I fix this?

[tibo]

https://www.youtube.com/watch?v=BMVeU0LPWD4

Template can be copy/pasted into Bricks.

Good base, dynamic data / loop can be integrated, design changed.

[antoineb]

Thanks, it works.
Now I need to figure out how to make every other light a different color.

[tibo]

normalement c’est de base dans le template (il a cree un pseudo sur la classe tr je crois), c’est explique dans la video. C’est juste un peu de CSS (CSS: even and odd rules)

[antoineb]

j’ai chercher du css personnalisé mais j’ai pas trouver …
j’ai ajouter ceci mais sa fonctionne partiellement:

.table__container .table__body .table__row:nth-child(even) > .table__data {
background: grey;
}
.table__container .table__body .table__row:nth-child(odd) > .table__data {
background: yellow;
}

[antoineb]

.table__container .table > .table__body:nth-of-type(even) .table__row,
.table__container .table > .table__body:nth-of-type(even) .table__data {
background:grey !important;
}

.table__container .table > .table__body:nth-of-type(odd) .table__row,
.table__container .table > .table__body:nth-of-type(odd) .table__data {
background:yellow !important;
}

fonctionne