Javascript Fast Sorting a 2 dimensional array

Question

So I'm trying to implement a sort of data table view with in React Native. All I really need to do is sort the columns. The data structure I am trying to sort is sorta like this:

[
   [
     element,
     element,
     (9 elements per array)
   ],
   [
     element,
     element,
     (9 elements per array)
   ]
]

where I have a total of 170+ arrays in the base array and each child array has 9 elements.

I've been able to accomplish the sorting using essentially this method:

return items.sort(function(a,b) {
   return a[col].value > b[col].value ? 1:-1
})

The problem I run into is that the sort takes a good second or two. I don't notice this delay with web data tables so I'm wondering if there is some sort of sorting algorithm I should be using for a faster sort? Should I possibly be structuring my data differently (though I was having similar results by having an array of objects)?

If value is a number, use return a[col].value - b[col].value — Barmar
– Barmar, Commented May 16, 2019 at 21:34
Although I wouldn't expect this to take so long with your method. — Barmar
– Barmar, Commented May 16, 2019 at 21:35
The size of the child arrays shouldn't affect the sorting time. — Barmar
– Barmar, Commented May 16, 2019 at 21:35
Can the values ever be equal? You're supposed to return 0 when they are. — Barmar
– Barmar, Commented May 16, 2019 at 21:36
@Barmar thanks, the equals return 0 may have helped a little. What sped up the operation significantly was just rendering the first 20 rows. The underlying data is still there (and getting sorted) but React doesn't have to re-render as much once sorted... which unfortunately leads me to think that its a react rendering issue rather than the sorting itself (sigh) — David Jarrin
– David Jarrin, Commented May 16, 2019 at 21:45

Peter Cheng · Accepted Answer · 2019-05-16 21:46:36Z

1

You can shorten your sort function to

items.sort(function(a,b) {
   return a[col].value - b[col].value;
})

but even then, you probably won't see much improvements in speed. Memoization may help with successive calls if you don't expect your data to change often. Will all 170 elements be visible from the same screen? If not, you may consider using lazy loading (sort the first 30 elements, display results and then consider the rest of your data).

answered May 16, 2019 at 21:46

Peter Cheng

7587 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Barmar Over a year ago

If you don't sort the whole array, how do you know which are the first 30?

Peter Cheng Over a year ago

This can be handled on the backend, have it send 9 additional array of arrays of entries sorted by lowest values for each column.

Adam B · Accepted Answer · 2019-05-16 23:00:11Z

1

Sorting 170 items using Javascript's Array.prototype.sort() shouldn't take more than a few ms-s so it is likely to be a rendering issue.

It's a good practice to separate logic like this sorting from rendering so that it can be unit tested and measured.

answered May 16, 2019 at 23:00

Adam B

1,1639 silver badges16 bronze badges

Comments

Jack Bashford · Accepted Answer · 2019-05-16 21:37:25Z

0

You can eliminate the ternary operation - just use subtraction:

return a[col].value - b[col].value;

If they're strings, not numbers:

return a[col].value.localeCompare(b[col].value);

edited May 16, 2019 at 21:37

answered May 16, 2019 at 21:35

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

1 Comment

David Jarrin Over a year ago

I don't believe localeCompare works in React Native for whatever reason.

Collectives™ on Stack Overflow

Javascript Fast Sorting a 2 dimensional array

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related