[docs][Table] Refactor `Sorting & Selecting` table demo #33236

IFaniry · 2022-06-20T17:15:54Z

When you toggle the "Dense padding" switch, the heavy client-side sorting and pagination logics are unnecessarily triggered.

I have moved the sorting and pagination logics into their respective handlers.
I have renamed some variables for readability.
I have created some constants for convenience.

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

The demo is making React render function too computationally expensive.

mui-bot · 2022-06-20T17:19:48Z

Netlify deploy preview

https://deploy-preview-33236--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 4d67993

ZeeshanTamboli

Changing the number of rows per page (Rows per page) isn't working.

Preview: https://deploy-preview-33236--material-ui.netlify.app/material-ui/react-table/#sorting-amp-selecting

IFaniry · 2023-03-15T08:50:20Z

Changing the number of rows per page (Rows per page) isn't working.

Preview: https://deploy-preview-33236--material-ui.netlify.app/material-ui/react-table/#sorting-amp-selecting

@ZeeshanTamboli Apologies for the many unsuccessful commits that may have bothered you with notifications.

Now, the preview link you gave me works!

Thank you.

Signed-off-by: RAMANOHISOA Tahina Faniry Willy <faniry.consulting@gmail.com>

ZeeshanTamboli

@IFaniry I found one more thing while testing:

When you go to the last page, which has some empty rows, and then you change the number of rows per page, it still shows the empty rows and does not occupy them. While it does not happen in the latest deployed version: https://mui.com/material-ui/react-table/#sorting-amp-selecting.

Also please update with the latest master branch to include #36546.

docs/data/material/components/table/EnhancedTable.tsx

Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: RAMANOHISOA Tahina Faniry Willy <faniry.consulting@gmail.com>

IFaniry · 2023-03-22T10:18:49Z

@IFaniry I found one more thing while testing:

When you go to the last page, which has some empty rows, and then you change the number of rows per page, it still shows the empty rows and does not occupy them. While it does not happen in the latest deployed version: https://mui.com/material-ui/react-table/#sorting-amp-selecting.

When you change the number of rows per page then you automatically go to the first page and afterwards the last page still works as expected.

So, when you test the deploy link now, it works as expected, right?

ZeeshanTamboli · 2023-03-22T14:00:38Z

@IFaniry I found one more thing while testing:
When you go to the last page, which has some empty rows, and then you change the number of rows per page, it still shows the empty rows and does not occupy them. While it does not happen in the latest deployed version: https://mui.com/material-ui/react-table/#sorting-amp-selecting.

When you change the number of rows per page then you automatically go to the first page and afterwards the last page still works as expected.

So, when you test the deploy link now, it works as expected, right?

@IFaniry What I meant was this:

In https://deploy-preview-33236--material-ui.netlify.app/material-ui/react-table/#sorting-amp-selecting, see the empty space on last page after changing rows per page:

issue.sorting.and.pagination.demo.mov

While the working version in https://mui.com/material-ui/react-table/#sorting-amp-selecting (no empty space):

Working.version.mov

IFaniry · 2023-03-22T18:11:12Z

Good catch @ZeeshanTamboli ! I made a commit to fix my bug.

ZeeshanTamboli

One more thing I found is that when you change the rows per page or go to the next page, the rows get disorganized. It should be kept sorted in ascending order.

ZeeshanTamboli

@IFaniry It looks good and it's a great first pull request on MUI 👌 Thank you for working on it!

IFaniry · 2023-03-24T08:29:38Z

yeahhh 🤩 Thank you for supporting me on this PR, @ZeeshanTamboli. You are a great maintainer 👊

…33236)" This reverts commit 952d82a.

oliviertassinari · 2023-04-22T09:47:37Z

Reverted in #36898

Refactor Demo Table sorting and pagination handlers

12f368b

The demo is making React render function too computationally expensive.

IFaniry added 2 commits June 20, 2022 20:36

Fix type mismatch between ts and js

3d0bc6a

Fix lint errors

738162f

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 28, 2022

zannager added the component: pagination This is the name of the generic UI component, not the React module! label Oct 25, 2022

zannager requested a review from siriwatknp October 25, 2022 08:13

merge master branch and resolve conflicts

c91017e

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 8, 2023

ZeeshanTamboli added the docs Improvements or additions to the documentation label Mar 8, 2023

ZeeshanTamboli changed the title ~~Refactor Demo Table sorting and pagination handlers~~ [docs] Refactor Demo Table sorting and pagination handlers Mar 8, 2023

ZeeshanTamboli requested changes Mar 8, 2023

View reviewed changes

ZeeshanTamboli changed the title ~~[docs] Refactor Demo Table sorting and pagination handlers~~ [docs] Refactor sorting and pagination handlers in Sorting and Selecting table demo Mar 8, 2023

ZeeshanTamboli added component: table This is the name of the generic UI component, not the React module! and removed component: pagination This is the name of the generic UI component, not the React module! labels Mar 8, 2023

ZeeshanTamboli changed the title ~~[docs] Refactor sorting and pagination handlers in Sorting and Selecting table demo~~ [docs][Table] Refactor sorting and pagination handlers in Sorting and Selecting table demo Mar 8, 2023

IFaniry and others added 2 commits March 14, 2023 16:20

Merge branch 'mui:master' into enhancedtable-handlers

3c44373

fix isSelected helper function

fe0d990

IFaniry force-pushed the enhancedtable-handlers branch from 5446b46 to fe0d990 Compare March 14, 2023 16:27

tahina_ramanohisoa added 5 commits March 14, 2023 17:33

format files

c0fff33

fix js mirror file

e81ed84

put isSelected back

ac0e46e

yarn docs:typescript:formatted

44dbf02

add material-ui upstream

f6d48a4

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 17, 2023

Merge branch 'master' into enhancedtable-handlers

2f8f234

Signed-off-by: RAMANOHISOA Tahina Faniry Willy <faniry.consulting@gmail.com>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 20, 2023

ZeeshanTamboli requested changes Mar 22, 2023

View reviewed changes

docs/data/material/components/table/EnhancedTable.tsx Outdated Show resolved Hide resolved

fix default calories column sort

a24699a

Co-authored-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com> Signed-off-by: RAMANOHISOA Tahina Faniry Willy <faniry.consulting@gmail.com>

IFaniry and others added 2 commits March 22, 2023 09:47

Merge branch 'mui:master' into enhancedtable-handlers

297ce1a

include cursor on selectable rows

4df0962

handle paddingHeight on rowPerPage change

30fb591

ZeeshanTamboli reviewed Mar 23, 2023

View reviewed changes

IFaniry and others added 4 commits March 23, 2023 13:50

Merge branch 'mui:master' into enhancedtable-handlers

7ecfba8

preserve order on rowsPerPage change

f7009ff

preserve order on pageChange

2026449

rename property -> newOrderBy in onRequestSort

bcbe8ee

IFaniry force-pushed the enhancedtable-handlers branch from 4d67993 to bcbe8ee Compare March 23, 2023 14:55

ZeeshanTamboli changed the title ~~[docs][Table] Refactor sorting and pagination handlers in Sorting and Selecting table demo~~ [docs][Table] Refactor Sorting & Selecting table demo Mar 24, 2023

ZeeshanTamboli approved these changes Mar 24, 2023

View reviewed changes

ZeeshanTamboli merged commit 952d82a into mui:master Mar 24, 2023

oliviertassinari added a commit to oliviertassinari/material-ui that referenced this pull request Apr 15, 2023

Revert "[docs][Table] Refactor Sorting & Selecting table demo (mui#…

8e6131e

…33236)" This reverts commit 952d82a.

oliviertassinari mentioned this pull request Apr 15, 2023

[Table] Fix Sorting & Selecting tables #36898

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs][Table] Refactor `Sorting & Selecting` table demo #33236

[docs][Table] Refactor `Sorting & Selecting` table demo #33236

IFaniry commented Jun 20, 2022

mui-bot commented Jun 20, 2022 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

IFaniry commented Mar 15, 2023

ZeeshanTamboli left a comment

IFaniry commented Mar 22, 2023

ZeeshanTamboli commented Mar 22, 2023

IFaniry commented Mar 22, 2023

ZeeshanTamboli left a comment •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

IFaniry commented Mar 24, 2023

oliviertassinari commented Apr 22, 2023

[docs][Table] Refactor Sorting & Selecting table demo #33236

[docs][Table] Refactor Sorting & Selecting table demo #33236

Conversation

IFaniry commented Jun 20, 2022

mui-bot commented Jun 20, 2022 • edited Loading

Netlify deploy preview

Bundle size report

ZeeshanTamboli left a comment • edited Loading

Choose a reason for hiding this comment

IFaniry commented Mar 15, 2023

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

IFaniry commented Mar 22, 2023

ZeeshanTamboli commented Mar 22, 2023

IFaniry commented Mar 22, 2023

ZeeshanTamboli left a comment • edited Loading

Choose a reason for hiding this comment

ZeeshanTamboli left a comment • edited Loading

Choose a reason for hiding this comment

IFaniry commented Mar 24, 2023

oliviertassinari commented Apr 22, 2023

[docs][Table] Refactor `Sorting & Selecting` table demo #33236

[docs][Table] Refactor `Sorting & Selecting` table demo #33236

mui-bot commented Jun 20, 2022 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading