How to sort an array of elements in a React project?

Question

JavaScript

The situation is this: there is an array of employees. It is stored in the application state. I bring it out in a simple list. But I need to be able to sort employees by department, by name and by position. But I also need the list to be displayed in this format:

Accordingly, if the sorting is by departments, but the groups will be departments, etc. That is, the elements must first be grouped, and then displayed in groups on the page.
Tell me how to implement it? Do I need to transform the array into an object, or how should I do it?

Answer 1

Actually, the question already has an answer.
First, we group by the desired field, then we sort each group by the desired field.
The result of grouping at the output can be different. But here it’s quite suitable if in the end there is an object where the key is the name of the group, the value is the elements themselves (this is exactly how it _.groupByworks R.groupBy). Then we just go through this object and sort each group (again, map + sort \ sortBy from lodash \ ramda). Without them, it's a little more difficult.
And then output the values. We take all groups, by groups we render the list of the first level, for each group we take its elements and render the internal list.