Sticky header for double row headers

[ingegneri-bruno-clorox]

Hi fellows!

I got the following scenario where I need a double row header to group metrics of a period.

But, whenever I do this, I cannot properly make use of the StickyHeader functionality. Only the second header row is working fine and being sticky as I scroll down the table, but the first row goes behind it, as you can see it on the above screenshots.

I have enableStickyHeader: true on table props.

My columns got another set of columns inside it, something like that:

{
  accessorKey: "values",
  header: $monthYear,
  size: "auto",
  columns: [
    {
      accessorKey: "Xdata"
      size: "auto",
      header: "X"
    },
    {
      accessorKey: "Ydata"
      size: "auto",
      header: "Y"
    },
    {
      accessorKey: "Zdata"
      size: "auto",
      header: "Z"
    }
  ]
};

How can I get this double row header being sticky integrally?

[rajaththomson]

The z-index property might affect the stacking of the elements. Ensure that the first header row has a higher z-index than the content rows so that it does not go behind them as you scroll.

Also verify that the table layout is set to fixed. You can do this by setting the 'table-layout' CSS property of the table to 'fixed'.

[ingegneri-bruno-clorox]

Thanks for the reply! That gave me a better perspective of the roots of the issue.
I was not able to work this out with table-layout CSS property.

What I had to do was apply these tableProps:

muiTableHeadProps: {
      sx:{
        position: "sticky",
        top: "0px",
        zIndex: 10,
      }
    }

This way, my <thead> element stays on top of <tbody> cells.

Helped me a lot! Thanks again!