How can I have grouped columns on the table?

[maralihart]

How could I make grouped columns like Column A, B, and C, which rest on top of another header?

[tombohub]

Hi, this doesn't seem to be supported out of the box. Did you try anything so far?

[maralihart]

I couldn't think of anything and was advised by someone to just do a regular HTML table because they don't have a colspan attribute.

[tombohub]

I am not sure myself either. I guess you can use noNativeElements prop for the table which will render table as flex divs instead of html table maybe you can attach another header on top? Or you can use tanstack table and style it with fluent ui tokens?

[maralihart]

I just ended up using HTML table tags and styling with fluent UI. Looks pretty similar and I didn’t need sorting or resizing anyway.

…

On Fri, Feb 2, 2024 at 4:41 PM tombohub ***@***.***> wrote: I am not sure myself either. I guess you can use noNativeElements prop for the table which will render table as flex divs instead of html table maybe you can attach another header on top? Or you can use tanstack table and style it with fluent ui tokens? — Reply to this email directly, view it on GitHub <#30456 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKECPHZTPFS4F2XLIGTGUB3YRVMO5AVCNFSM6AAAAABCVS4PBKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNJRGA2TO> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[tombohub]

nice, maybe you can share code to spread the knowledge. Probably somebody will want similar in the future