How to add multiple headers to the table?

[Ivy-ops]

May I know how to add multiple headers to the table, similar as below, with reactable package? I see below code can draw 2 headers, but have difficulty in 3 headers (below figure show).

reactable(
  iris[1:5, ],
  columns = list(
    Sepal.Length = colDef(name = "Length"),
    Sepal.Width = colDef(name = "Width"),
    Petal.Length = colDef(name = "Length"),
    Petal.Width = colDef(name = "Width")
  ),
  columnGroups = list(
    colGroup(name = "Sepal", columns = c("Sepal.Length", "Sepal.Width")),
    colGroup(name = "Petal", columns = c("Petal.Length", "Petal.Width"))
  )
)

Thanks!!

[glin]

Hi, reactable doesn't support more than two levels of column headers, but I'll take this as a feature request.

In general though, I'd recommend breaking up complex tables like this into multiple tables (e.g., one table for each group). Multiple tables would likely be easier to read and understand, and are better supported by assistive technologies like screen readers.

[Ivy-ops]

Thanks!! @glin