Grouped rows make the whole table align incorrectly in Quarto HTML

[andrewheiss]

(I think this is a regression, since it used to work fine in previous versions of {tinytable}, like back at 0.2)

Using {tinytable} v0.3.0.19 (and 0.3.0.22), the ability to align columns breaks when using grouped rows, but only when the table has a tbl-* label and gets processed with Quarto.

Here's a reprex:

---
title: "Testing from Quarto"
---

```{r}
#| label: setup
#| include: false

library(tinytable)

tbl <- data.frame(
  Person = c("Alice", "Bob", "Charlemagne"),
  Fruit = c("Apple", "Banana", "Cantaloupe"),
  Count = c(4, 238432, 32)
)

Table without groups with a tbl-* chunk name (see @tbl-testing-no-groups):

#| label: tbl-testing-no-groups
#| tbl-cap: "Here's a caption"
#| echo: false

tbl |> 
  tt() |> 
  style_tt(j = 1:3, align = "l")

Table without groups without a tbl-* chunk name (see table below):

#| label: table-testing-no-groups
#| tbl-cap: "Here's a caption"
#| echo: false

tbl |> 
  tt() |> 
  style_tt(j = 1:3, align = "l")

This is the broken table. Table with groups with a tbl-* chunk name (see @tbl-testing):

#| label: tbl-testing
#| tbl-cap: "Here's a caption"
#| echo: false

tbl |> 
  tt() |> 
  group_tt(i = list("Thing" = 1, "Thing again" = 2)) |> 
  style_tt(i = c(1, 3), j = 1, bold = TRUE, background = "#e6e6e6", align = "l") |> 
  style_tt(j = 1:3, align = "l")

Table with groups without a tbl-* chunk name (see table below):

#| label: table-testing
#| tbl-cap: "Here's a caption"
#| echo: false

tbl |> 
  tt() |> 
  group_tt(i = list("Thing" = 1, "Thing again" = 2)) |> 
  style_tt(i = c(1, 3), j = 1, bold = TRUE, background = "#e6e6e6", align = "l") |> 
  style_tt(j = 1:3, align = "l")

Without groups, the tables are identical when the labels are either `tbl-*` or something else:

<img width="712" alt="image" src="https://github.com/vincentarelbundock/tinytable/assets/73663/7cc4e30b-1647-4076-af80-d41f5bff7de8">

&nbsp;

*With* groups, the columns in the table with the `tbl-*` label are all centered. Everything works fine when the label is something else:

<img width="770" alt="image" src="https://github.com/vincentarelbundock/tinytable/assets/73663/d820d6ae-9b6c-4574-ad9a-9a1ab8b1dc7a">

[vincentarelbundock]

I'm trying to focus on tables 1 and 3 first, because the Quarto devs really want us to use the tbl- prefix in table labels, so I'd rather encourage that supported workflow.

Looks like the second table inherits from this, but not the first:

.quarto-figure-center > figure > p, .quarto-figure-center > figure > div {
  text-align: center;
}

When I un-check that line in Firefox Inspector, the alignment returns to correct.

Honestly, I have no clue why that is. Looking at the HTML, I feel that both should have the same inheritance, since the div structure is similar (identical?).

Do you see any difference in the HTML of those two tables?

Minimal example under the fold:

```` --- title: "Testing from Quarto" --- ```{r} #| label: setup #| include: false library(tinytable) tbl <- data.frame( Person = c("Alice", "Bob", "Charlemagne"), Fruit = c("Apple", "Banana", "Cantaloupe"), Count = c(4, 238432, 32) ) ``` Working: ```{r} #| label: tbl-testing-no-groups #| tbl-cap: "Here's a caption" #| echo: false tbl |> tt() |> style_tt(j = 1:3, align = "l") ``` Borken: ```{r} #| label: tbl-testing #| tbl-cap: "Here's a caption" #| echo: false tbl |> tt() |> group_tt(i = list("Thing" = 1, "Thing again" = 2)) |> style_tt(i = c(1, 3), align = "l") |> style_tt(j = 1:3, align = "l") ``` ````

[andrewheiss]

Ok cool, yeah, I'm not concerned about tables 2 and 4—they work as expected and just don't get handled by Quarto

There is a slight difference between the two tables here. Without group_tt(), the auto-generated tinytable CSS class is applied to all the <td> elements, as expected:

 

In the table with the groups, the "Apple" and "4" <td> elements don't have a tinytable CSS class applied to them, so they inherit the centering from the parent container

[vincentarelbundock]

Thanks for the investigation!

This is a tough one. The CSS classes are inserted dynamically via JS and an addEventListener.

Note to self:

In this case, there are multiple event listeners, apply changes to the same cells, so there seems to be conflict. And the order of listeners appears to make a difference too.

[vincentarelbundock]

Thanks again for the report. I believe this is fixed in main.

[andrewheiss]

Fixed!