m4theushw

m4theushw

I'm a 25 y.o. React developer and a Python enthusiast. I'm developing software since I was 14 y.o.

Member Since 3 years ago

@mui-org , Esteio, Brazil

Experience Points
36
follower
Lessons Completed
26
follow
Lessons Completed
50
stars
Best Reply Awards
18
repos

1271 contributions in the last year

Pinned
⚡ MUI X: Advanced and powerful React components for complex use-cases.
⚡ A website to calculate the yield of a portfolio of stocks listed in Bovespa
⚡ Source code of https://achacasa.online
⚡ Adds up and down buttons to reorder records in react-admin
Activity
May
18
13 hours ago
push

m4theushw push m4theushw/material-ui-x

m4theushw
m4theushw

[docs] Add docs for filter panel components

commit sha: eeca387dd139b4991ddb89a7d58eba535aeb983e

push time in 11 hours ago
push

m4theushw push m4theushw/material-ui-x

m4theushw
m4theushw

[docs] Add docs for filter panel components

commit sha: 6ef2595ebc25781d9e1057eb85e8d791b7805ac8

push time in 11 hours ago
pull request

m4theushw pull request mui/mui-x

m4theushw
m4theushw

[docs] Add docs for filter panel components

Activity icon
created branch
createdAt 11 hours ago
May
17
1 day ago
open pull request

m4theushw wants to merge mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

m4theushw
m4theushw

If the content has 100px as height, then the row height should be also 100px. With #4858 will be able to vary the padding according to the density.

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

open pull request

m4theushw wants to merge mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[core] Execute the pipe-processors in their initialization order

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
Activity icon
issue

m4theushw issue comment mui/material-ui

m4theushw
m4theushw

[docs] Allow function prop to return `undefined`

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.

m4theushw
m4theushw

@siriwatknp I didn't understand you. Do you mean to use React.ReactNode in the diff? The diff is only an example of how to test this PR. In https://github.com/mui/mui-x/pull/4859 I don't want to support React elements.

open pull request

m4theushw wants to merge mui/mui-x

m4theushw
m4theushw

[core] Add new script to generate tree data rows from file tree

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

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

m4theushw
m4theushw

It won't write to the root when executed from inside scripts.

    path.join(__dirname, '../treeDataFromFileTreeResponse.json'),
pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[core] Add new script to generate tree data rows from file tree

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

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

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[core] Add new script to generate tree data rows from file tree

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

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

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[core] Use internal icons for quick filter

Fix #4906

m4theushw
m4theushw

LGTM

git merge master && yarn install should fix the failing task.

pull request

m4theushw pull request mui/mui-x

m4theushw
m4theushw

[DataGrid] Fix rendering of the no rows overlay when the `loading` prop is changed

Fixes #4788

Activity icon
created branch

m4theushw in m4theushw/material-ui-x create branch no-rows-overlay-regression

createdAt 1 day ago
May
16
2 days ago
push

m4theushw push m4theushw/material-ui-x

m4theushw
m4theushw

[DataGrid] Prevent crash if row is removed with click (#4831)

m4theushw
m4theushw

[core] Fix naming collision (#4853)

m4theushw
m4theushw

[pickers] Invalid character does not delete last digit (#4839)

m4theushw
m4theushw

v5.11.0 (#4827)

Co-authored-by: Matheus Wichman [email protected] Co-authored-by: Andrew Cherniavskii [email protected] Co-authored-by: Olivier Tassinari [email protected] Co-authored-by: José Rodolfo Freitas [email protected] Co-authored-by: Mike Mathew [email protected] Co-authored-by: Andrew Cherniavskyi [email protected]

m4theushw
m4theushw

[docs] Disable ads on paid-only pages (#4842)

m4theushw
m4theushw

[docs] Complet instructions for pickers installation in readme (#4852)

m4theushw
m4theushw

[docs] Don't redirect on deploy preview (#4818)

m4theushw
m4theushw

[pickers] Close Popper when pressing Esc inside a modal (#4499)

Co-authored-by: Matheus Wichman [email protected]

m4theushw
m4theushw

[pickers] Add slots for toolbar components (#4855)

m4theushw
m4theushw

Bump yargs to ^17.5.1 (#4888)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump react-hook-form to ^7.31.1 (#4887)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump lru-cache to ^7.10.1 (#4886)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump @mui/styles to ^5.7.0 (#4884)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump webpack to ^5.72.1 (#4883)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump karma to ^6.3.20 (#4882)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump @types/react-dom to ^18.0.4 (#4880)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump @types/prettier to ^2.6.1 (#4879)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump date-io to ^2.14.0 (#4798)

Co-authored-by: Renovate Bot [email protected]

m4theushw
m4theushw

Bump sinon to ^14.0.0 (#4804)

Co-authored-by: Renovate Bot [email protected]

commit sha: 030d66870b0b2083c2a139b0ef9ae3ff87e1a07a

push time in 1 day ago
Activity icon
issue

m4theushw issue comment mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

m4theushw
m4theushw

About the support of pinned columns, would it be possible that the measured height is not a number, but an object

Yes, this would be the best solution. However, it requires deeper changes to allow a row in rowsHeightLookup to have several base sizes but which only one should be considered. I propose to implement this logic in a follow-up once this PR is merged.

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

open pull request

m4theushw wants to merge mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

m4theushw
m4theushw

currentPage.range.firstRowIndex is added to the index below and I need to remove it here to make the index relative to only the visible rows in the current page.

https://github.com/mui/mui-x/blob/afd72a9c304a1608d2b325df761bdefe4573f878/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx#L388

The last measured index is supposed to always begin at 0 in every page.

open pull request

m4theushw wants to merge mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

m4theushw
m4theushw

The for loop is a small optimization to keep complexity at O(n). Using Array.slice with Array.some has complexity O(n²) because it first iterates between the two indices to create the sliced array, then iterates again over it to test if it satistifies the condition.

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[DataGrid] Support dynamic row height

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.

Activity icon
issue

m4theushw issue comment mui/mui-x

m4theushw
m4theushw

It seems that the x-data-grid related changes in latest release causing build issues with npm update

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.

m4theushw
m4theushw

We even already have the icon duplicated, but it's not used. @alexfauquette do you wanna take this one?

diff --git a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
index 5abb24f9a..1c7e5fd17 100644
--- a/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
+++ b/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
-import SearchIcon from '@mui/icons-material/Search';
 import { styled } from '@mui/material/styles';
 import { debounce } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -78,7 +77,7 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
       aria-label={apiRef.current.getLocaleText('toolbarQuickFilterLabel')}
       type="search"
       InputProps={{
-        startAdornment: <SearchIcon fontSize="small" />,
+        startAdornment: <rootProps.components.SearchIcon fontSize="small" />,
       }}
       {...other}
       {...rootProps.componentsProps?.baseTextField}
pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[docs] Fix docs feedback widget not working

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

Screenshot 2022-05-16 at 12 50 10

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/

open pull request

m4theushw wants to merge mui/mui-x

m4theushw
m4theushw

[docs] Fix docs feedback widget not working

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

Screenshot 2022-05-16 at 12 50 10

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/

m4theushw
m4theushw

It could be an environment variable set by Netlify.

@oliviertassinari @mbrookes Is there a reason that forces to use docs/.env instead of an envvar? I didn't find any comment considering this option in https://github.com/mui/material-ui/pull/22885

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[docs] Fix docs feedback widget not working

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

Screenshot 2022-05-16 at 12 50 10

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/

pull request

m4theushw merge to mui/mui-x

m4theushw
m4theushw

[core] Add new script to generate tree data rows from file tree

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

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

Previous