Expanded row should be pinned automatically

[DaCao]

When I expand a row to open its detailed panel content, the row should be pinned in the table automatically such that if the detailed panel content is very long, when I scroll down, the "root" row is still sticky or pinned at the top;

Now we have the "pinned row" feature as a separate and individual feature. I would like to see this combined with the detailed panel (expanded row) feature;

Is this feature already existing?

[KevinVandy]

You can easily implement this by calling row.pin in the expand button onclick

[DaCao]

Thank you so much for the guidance!
Could you please share some more details or a link to the documentation where it documents the row.pin method? I read through the documentation but could not find helpful information.

I have been using this table for a few weeks and I really love how it is designed. I am sure such feature can be accomplished relatively easily. I just feel like this level of customization is not really clearly documented.

Based on what I was able to find in the docs, I tried something like this:

    renderDetailPanel: ({ row }) =>
      cases[row.id] ? <DetailPanelContent thisCase={cases[row.id]} /> : null,

    muiExpandButtonProps: ({ row, table }) => ({
      onClick: () => row.pin,
    }),

but no luck

[KevinVandy]

row.pin is a function, you have to call it

[DaCao]

Thank you. I also tried this :

    muiExpandButtonProps: ({ row, table }) => ({
      console.log(row);
      onClick: () => row.pin(),
    }),

but it did not work.
I was able to trigger the console.log and see the printed row object:

...
pin: function pin(position, includeLeafRows, includeParentRows)
​​
length: 3
​
name: ""
​
<prototype>: function ()
...

Could you please help with some guidance?

I tried a couple things and I was able to come up with this method that works for my purpose but not necessarily elegant:

const [pinnedRowIndexes, setPinnedRowIndexes] = useState([]);

const table = useMaterialReactTable({
    ...
    muiExpandButtonProps: ({ row, table }) => ({
      onClick: () => {
        const rowIsPinned = row.getIsPinned();
        if (rowIsPinned) {
          setPinnedRowIndexes([]);
        } else {
          setPinnedRowIndexes([row.index]);
        }
      },
    }),

    state: {
      ...
      rowPinning: {
        top: pinnedRowIndexes,
      },
    },

  ...

})