[Table] Fix Sorting & Selecting tables

[oliviertassinari]

Revert #33236, the logic is 1. has bugs, 2. duplicate the filtering logic, and 3. do the opposite of what's recommended:

1. By "bugs", I mean, open https://deploy-preview-33236--material-ui.netlify.app/material-ui/react-table/#customization and see how the scroll position is wrong, the server-side render is missing the rows.

2. By "duplicated", see the number of times stableSort() is written.
3. By "opposite", see https://react.dev/learn/you-might-not-need-an-effect#caching-expensive-calculations.

To make the review of the changes easier, I have done two commits 1. revert 2. a fix for the original issue. But in practice, I doubt that this has any kind of impact on the operation. The memo is fast, even with 10,000 records (but how do you fetch 10,000 records client-side?). I was close to simply proposing a revert.

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 5bc68f1

[jtejederabit]

What do you think about simplifying this?

const handleRequestSort = (event, property) => {
  setOrder(orderBy === property && order === 'asc' ? 'desc' : 'asc');
  setOrderBy(property);
};

[oliviertassinari]

We could but it won't make much a difference. isAsc has an interesting semantic meaning.

[ZeeshanTamboli]

@oliviertassinari Awesome work! I learned a new thing! :D Adding the useMemo and thus removing the inefficient useEffect changed the game. Thanks. However, I can't find the bug you mentioned in point 1.

The memo is fast, even with 10,000 records

Where did you get this number from?

[oliviertassinari]

I can't find the bug you mentioned in point 1.

@ZeeshanTamboli The scrollbar is messed-up. Disable JavaScript, you will see how the list is empty:

Where did you get this number from?

It's really fast

let array = [...new Array(10000)].map((x, index) => index); 
console.time('filter');
array.filter((x) => `${x}` === '1000');
console.timeEnd('filter');