[DataGridPro] Add option to infer detail panel height from content #5163
+881
−68
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
m4theushw
added
component: data grid
|
These are the results for the performance tests:
|
m4theushw
force-pushed
the
detail-panel-height-auto
branch
from
190b0d4 to
6eb433c
Compare
m4theushw
force-pushed
the
detail-panel-height-auto
branch
from
6eb433c to
c0aca18
Compare
m4theushw
commented
Jun 9, 2022
packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelSelector.ts
Outdated
Show resolved
Hide resolved
m4theushw
requested review from
flaviendelangle,
cherniavskii,
DanailH,
joserodolfofreitas and
mapache-salvaje
packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts
Outdated
Show resolved
Hide resolved
packages/grid/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanelCache.ts
Show resolved
Hide resolved
| The grid assumes the value of 500px by default however this can be configured by passing a function to the `getDetailPanelHeight` prop that returns the required height. | ||
| Both props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, allowing you to return a different value for each row. | ||
| By default, the detail panel height is 500px. | ||
| However, this can be customized by passing a function to the `getDetailPanelHeight` prop. |
There was a problem hiding this comment.
Suggested change
| However, this can be customized by passing a function to the `getDetailPanelHeight` prop. | |
| You can customize it by passing a function to the `getDetailPanelHeight` prop. |
| Both props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, allowing you to return a different value for each row. | ||
| By default, the detail panel height is 500px. | ||
| However, this can be customized by passing a function to the `getDetailPanelHeight` prop. | ||
| This function must return a number or the `"auto"` string. |
There was a problem hiding this comment.
Suggested change
| This function must return a number or the `"auto"` string. | |
| This function must return either a number or the `"auto"` string. |
| By default, the detail panel height is 500px. | ||
| However, this can be customized by passing a function to the `getDetailPanelHeight` prop. | ||
| This function must return a number or the `"auto"` string. | ||
| Returning a number means that the panel will use as height exactly the value provided. |
There was a problem hiding this comment.
Suggested change
| Returning a number means that the panel will use as height exactly the value provided. | |
| If it returns a number, then the panel will use that value (in pixels) for the height. |
| However, this can be customized by passing a function to the `getDetailPanelHeight` prop. | ||
| This function must return a number or the `"auto"` string. | ||
| Returning a number means that the panel will use as height exactly the value provided. | ||
| With `"auto"`, the height is [derived](#infer-height-from-the-content) from the content. |
There was a problem hiding this comment.
Suggested change
| With `"auto"`, the height is [derived](#infer-height-from-the-content) from the content. | |
| If it returns `"auto"`, then the height will be [derived](#infer-height-from-the-content) from the content. |
| ``` | ||
|
|
||
| :::info | ||
| Both props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, allowing you to return a different value for each row. |
There was a problem hiding this comment.
Suggested change
| Both props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, allowing you to return a different value for each row. | |
| Both props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, which lets you return a different value for each row. |
| :::info | ||
| Both props are called with a [`GridRowParams`](/x/api/data-grid/grid-row-params/) object, allowing you to return a different value for each row. | ||
| ::: | ||
|
|
||
| To expand a row, click on the `+` icon or press <kbd class="key">Space</kbd> inside the detail toggle column. |
There was a problem hiding this comment.
Suggested change
| To expand a row, click on the `+` icon or press <kbd class="key">Space</kbd> inside the detail toggle column. | |
| To expand a row, click on the **+** icon or press <kbd class="key">Space</kbd> inside the detail toggle column. |
| <DataGridPro getDetailPanelHeight={() => 'auto'} /> | ||
| ``` | ||
|
|
||
| The following example demonstrantes this option in action. |
There was a problem hiding this comment.
Suggested change
| The following example demonstrantes this option in action. | |
| The following example demonstrates this option in action: |
github-actions
bot
added
the
PR: out-of-date
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
github-actions
bot
removed
the
PR: out-of-date
cherniavskii
approved these changes
Jun 24, 2022
joserodolfofreitas
approved these changes
Jun 24, 2022
mapache-salvaje
approved these changes
Jun 25, 2022
|
is this available in the latest version on npm? |
|
Not yet no, it will be available on today's / tomorrow's release |
|
Thanks for the prompt reply ! This feature is super useful ! thanks a lot |
joserodolfofreitas
pushed a commit
to joserodolfofreitas/mui-x
that referenced
this pull request
Jul 15, 2022
alexfauquette
pushed a commit
to alexfauquette/mui-x
that referenced
this pull request
Aug 26, 2022
This was referenced May 5, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Preview: https://deploy-preview-5163--material-ui-x.netlify.app/x/react-data-grid/master-detail/#infer-height-from-the-content
Closes #4091