[docs] Pinning functionality dose not work for columns in docs example

[masoud-keykha]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/master-detail/#disable-detail-panel-content-scroll

Steps:

1. Click on any column menu
2. Click on Pin to left or Pin to right
3. Dose not work

Solution: Using pinnedColumns and onPinnedColumnsChange

Code:

const [pinnedColumns, setPinnedColumns] = useState({
  left: [GRID_DETAIL_PANEL_TOGGLE_FIELD],
});

const handlePinnedColumnsChange = useCallback((updatedPinnedColumns) => {
  setPinnedColumns(updatedPinnedColumns);
}, []);

<DataGridPremium
{ ...props }
        pinnedColumns={pinnedColumns}
        onPinnedColumnsChange={handlePinnedColumnsChange}
/>

Current behavior

With current behavior pinning dose not work because pinnedColumns prop of data grid is staticky GRID_DETAIL_PANEL_TOGGLE_FIELD

Expected behavior

Works correctly all features of data grid

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: pin, pin to left, pin to right

[kalyan90]

DataGridPro pin columns is working fine. Just have to update the demo for Disable detail panel section. Have raised a PR for the same #14854

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@masoud-keykha How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.