Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Problem

While working on the aggregation (#4208) I noticed that the execution order of the pipe-processors was from the oldest-updated-processor to the latest-updated-processor. We should try to always have execution orders respect the order of initialization (ie the order of the hooks in useDataGridXXXComponent).

This unstable execution order was causing a double execution of hydrateColumns in some scenario when used with aggregation and row grouping.

Reproduction case

If you change a prop triggering an update of the row grouping processor of hydrateColumns (for instance switch rowGroupingColumnModel from single to multiple), then the aggregation processor of hydrateColumns will be ran before the row grouping one. But the aggregation needs the new row grouping columns to decide how to aggregate. So we have 2 execution of hydrateColumns

1. The hydrateColumns processor of Row Grouping is updated, firing a 1st hydrateColumns execution
2. hydrateColumns processor executed: Aggregation does nothing, Row Grouping update its columns
3. columnsChange events is fired, Aggregation manually fires a 2nd hydrateColumns execution because it needs to update its columns
4. hydrateColumns processor executed: Aggregation updates its columns, Row Grouping does nothing

Expected behavior

1. The hydrateColumns processor of Row Grouping is updated, firing a 1st hydrateColumns execution
2. hydrateColumns processor executed: Row Grouping update its columns, Aggregation updates its columns based on the new Row Grouping columns,
3. columnsChange events is fired, Aggregation do not fires a 2nd hydrateColumns because its columns are up to date

Solution

• Replace the object storing the processors by a Map to have a guaranteed key order
• Do not delete the map item when removing a processor but replace it by null to keep its position in the execution order

• I have followed (at least) the PR section of the contributing guide.

If a prop receives a function whose return has undefined, then yarn docs:api crashes with:

TypeError: resolveType for 'UndefinedLiteral' not implemented

This can be tested applying the diff below:

diff --git a/packages/mui-material/src/Rating/Rating.d.ts b/packages/mui-material/src/Rating/Rating.d.ts
index 1eb262d4c4..704c4443f9 100644
--- a/packages/mui-material/src/Rating/Rating.d.ts
+++ b/packages/mui-material/src/Rating/Rating.d.ts
@@ -42,12 +42,12 @@ export interface RatingProps
    *
    * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
    * @param {number} value The rating label's value to format.
-   * @returns {string}
+   * @returns {string | undefined}
    * @default function defaultLabelText(value) {
    *   return `${value} Star${value !== 1 ? 's' : ''}`;
    * }
    */
-  getLabelText?: (value: number) => string;
+  getLabelText?: (value: number) => string | undefined;
   /**
    * If `true`, only the selected icon will be highlighted.
    * @default false

The reason for this change is because in https://github.com/mui/mui-x/pull/4859 I added a prop to the DataGrid which can return null and other values. I can't add undefined because the docs generator crashes.

I am working on the "Aggregation + Tree Data" doc. The current dataset we use for the Tree Data is not well suited for aggregation. I think it would be nice to have example like AG-Grid with a file explorer.

I created a small script to turn a file tree into a list of tree data rows that can be used for Tree Data examples. Here are a few example from the core repo

• create-react-app template
• tailwind-css template
• material-next package

For now I only store the hierarchy, the size and the modification date. And of course there is no aggregation for now

With the Github API we could even do a real file explorer of our repo which would give a very good example of the Tree Data

I am working on the "Aggregation + Tree Data" doc. The current dataset we use for the Tree Data is not well suited for aggregation. I think it would be nice to have example like AG-Grid with a file explorer.

I created a small script to turn a file tree into a list of tree data rows that can be used for Tree Data examples. Here are a few example from the core repo

• create-react-app template
• tailwind-css template
• material-next package

For now I only store the hierarchy, the size and the modification date. And of course there is no aggregation for now

With the Github API we could even do a real file explorer of our repo which would give a very good example of the Tree Data

I am working on the "Aggregation + Tree Data" doc. The current dataset we use for the Tree Data is not well suited for aggregation. I think it would be nice to have example like AG-Grid with a file explorer.

I created a small script to turn a file tree into a list of tree data rows that can be used for Tree Data examples. Here are a few example from the core repo

• create-react-app template
• tailwind-css template
• material-next package

For now I only store the hierarchy, the size and the modification date. And of course there is no aggregation for now

With the Github API we could even do a real file explorer of our repo which would give a very good example of the Tree Data

Fix #4906

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

Preview: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Closes #417

Dynamic row height is the ability to derive the row height from its content. The implementation here is easy to understand. It work as follow:

1. Give all rows an estimation of its height using the default row height or getEstimatedRowHeight
2. Calculate rowsMeta.currentPageTotalHeight size based on the estimation
3. Calculate how many rows, based on the estimated height, will fit into the viewport, then render them
4. Once a row is rendered, measure its size with ResizeObserver and replace the estimation with the true measurement
5. Trigger a hydration to update rowsMeta.currentPageTotalHeight every time a row is measured

There're some edge cases. The column virtualization needs to be disabled, otherwise, if the tallest column is not rendered, the row height will be based on the other columns. When scrolling continually, the steps above are sufficient to ensure that we won't have the condition of row measured + row estimated + row measured. However, if the user manually sets the scrollTop, some rows not measured yet might be rendered before the visible rows, causing the scrollbar to not reflect the true height. As a solution, there's a ref keeping track of the last rendered row and we always calculate the render context beginning in the last rendered row.

Rows with dynamic height receive the MuiDataGrid-row--dynamicHeight class. Initially it was MuiDataGrid-row--autoHeight, but this could create confusion with the autoHeight prop. I still use internally "auto height" to refer to these rows, since they are activated when getRowHeight=auto.

The support for column pinning is basic for now. If done nothing, the rows from the pinned columns will fight with the rows from the non-pinned columns when sending dimensions and we enter a infinite loop. The solution is to only measure the content of the rows in the non-pinned columns, then apply this measurement to the rows of the pinned columns to make them look aligned. In the future, this can be improved by adding a prop to select which rows (left, center or right) to use. To support use cases like https://github.com/mui/mui-x/issues/417#issuecomment-1075401142 minHeight can be added to a cell.

By @ajaikm

./node_modules/@mui/x-data-grid/components/toolbar/GridToolbarQuickFilter.js Cannot find module: '@mui/icons-material/Search'. Make sure this package is installed.

I've noticed that feedback widget on MUI X docs website doesn't work:

The reason is missing FEEDBACK_URL was missing in MUI X env.

Preview: https://deploy-preview-4905--material-ui-x.netlify.app/x/advanced-components/

I've noticed that feedback widget on MUI X docs website doesn't work:

The reason is missing FEEDBACK_URL was missing in MUI X env.

Preview: https://deploy-preview-4905--material-ui-x.netlify.app/x/advanced-components/

I've noticed that feedback widget on MUI X docs website doesn't work:

The reason is missing FEEDBACK_URL was missing in MUI X env.

Preview: https://deploy-preview-4905--material-ui-x.netlify.app/x/advanced-components/

I am working on the "Aggregation + Tree Data" doc. The current dataset we use for the Tree Data is not well suited for aggregation. I think it would be nice to have example like AG-Grid with a file explorer.

I created a small script to turn a file tree into a list of tree data rows that can be used for Tree Data examples. Here are a few example from the core repo

• create-react-app template
• tailwind-css template
• material-next package

For now I only store the hierarchy, the size and the modification date. And of course there is no aggregation for now

With the Github API we could even do a real file explorer of our repo which would give a very good example of the Tree Data