[data grid] Not able to have headerName for togglePanel

[ajayaccuknox]

Related page

https://mui.com/x/react-data-grid/master-detail/

Kind of issue

Unclear explanations

Issue description

So I have a table in the table I need to show the master details under the each row so I have used toggleDetailPanel in that I made it successful but the issue is I couldn't able to have a separate column name like headerName

Context

So I have a table in the table I need to show the master details under the each row so I have used toggleDetailPanel in that I made it successful but the issue is I couldn't able to have a separate column name like headerName

Search keywords: headerName for togglePanel

[MBilalShafi]

Could you expand on what you're trying to achieve?
Do you want to add the headerName on the header cell of the toggle button (the one with blue border in the image below)?

[ajayaccuknox]

Could you expand on what you're trying to achieve? Do you want to add the headerName on the header cell of the toggle button (the one with blue border in the image below)?

Yes exactly @MBilalShafi

[michelengelen]

@ajayaccuknox it is possible to render a custom header for the toggle column. You can use this section of the docs as a starting point: Customizing the detail panel toggle

What you have to do is:

1. use GRID_DETAIL_PANEL_TOGGLE_COL_DEF definition in your columns
2. spread the default definition and
3. overwrite the renderHeader method

example:

const columns: GridColDef[] = [
  {
    ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
    renderHeader: () => <div>Details</div>,
  },
  { field: 'id', headerName: 'Order ID' },
  { field: 'customer', headerName: 'Customer', width: 200 },
];

Just using headerName is not sufficient.

Let me know if this answers your question.

@MBilalShafi we could maybe add a recipe to show how that works. WDYT?

[MBilalShafi]

@michelengelen Sure, that could be useful, or we could improve this similar recipe by adding a custom headerName or at least a couple of lines which explain it in more detail. Wdyt?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.