[data grid] Remove `getDetailPanelContent` from `DataGridPropsWithDefaultValues`

[chitsutote]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

import { DataGrid } from '@mui/x-data-grid';

const MyTable = () => {
  return (
    <DataGrid
        rows={rows}
        columns={columns}
        getDetailPanelContent={() => <div>Expand row goes here</div>}
      />
  )
}

Current behavior 😯

Hi, I am using the free version of x-data-grid. I am trying to have a expanded row when I click on the cell. I used getDetailPanelContent prop to render my expanded row, but nothing happened.

I also attempted to use the useApiRef hook to programmatically toggle the expanded row by calling apiRef.current.toggleDetailPanel, but unfortunately, it didn't work. Upon further investigation, I realized that the toggleDetailPanel function is not accessible in the free version, as mentioned in the documentation.

I'm wondering if the DetailPanel feature is not available in the free version. If that's the case, it's confusing to have the getDetailPanelContent prop available in the free version. Is there any workaround or hack that I can use to achieve the expanded row functionality with the free data grid? Or do I need to build my own grid using a table component?

Any guidance or suggestions would be greatly appreciated. Thank you!

Expected behavior 🤔

Should show expanded row when I click on the cell

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

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

Order ID or Support key 💳 (optional)

No response

[romgrk]

From what I can see in our docs, the detail panels are only available for premium and pro users.

The blue square indicates pro features, the yellow one premium features:

it's confusing to have the getDetailPanelContent prop available in the free version

Do you mean the typings include that prop?

Is there any workaround or hack that I can use to achieve the expanded row functionality with the free data grid?

I don't think so, but you could use an alternative such as using a modal.

[chitsutote]

From what I can see in our docs, the detail panels are only available for premium and pro users.

The blue square indicates pro features, the yellow one premium features:

it's confusing to have the getDetailPanelContent prop available in the free version

Do you mean the typings include that prop?

No. I mean I can use this prop with free data grid component to render custom detail panel content . I think that is confusing. Free version data grid doesnt have expanded row, but I can use a prop to render custom component for it.

Is there any workaround or hack that I can use to achieve the expanded row functionality with the free data grid?

I don't think so, but you could use an alternative such as using a modal.

Could you kindly provide more information? I want it in row level, but it seems that only renderCell is accesible with free version data grid

[m4theushw]

We mistakenly added getDetailPanelContent to the props of the MIT version, however, the functionally is only available on Pro. It's only a matter of adjusting the types.

diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
index fc453f7c2..3bcfcb002 100644
--- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
+++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
@@ -421,12 +421,6 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * @returns {GridRowSpacing} The row spacing values.
    */
   getRowSpacing?: (params: GridRowSpacingParams) => GridRowSpacing;
-  /**
-   * Function that returns the element to render in row detail.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {JSX.Element} The row detail element.
-   */
-  getDetailPanelContent?: (params: GridRowParams<R>) => React.ReactNode;
   /**
    * Callback fired when a cell is rendered, returns true if the cell is editable.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

Could you kindly provide more information?

Using a modal won't give the same look of the detail panel feature. It will be rendered on top of the grid and only the content from a single row can be visible at the time. Even so, if you still want to implement it there's some inspiration in https://mui.com/x/react-data-grid/editing/#confirm-before-saving. The idea is to store in a state variable which cell was clicked, then render a Dialog.