Как реализовать сортировку массива элементов на проекте на React?

Question

[miniven]

Ситуация такая: есть массив сотрудников. Хранится он в состоянии приложения. Вывожу его простым списком. Но мне нужно, чтобы можно было сортировать сотрудников по отделам, по именам и по должностям. Но также мне необходимо, чтобы список выводился в таком формате:

Соответственно, если сортировка по отделам, но группы будут отделами и т.д. То есть элементы должны сначала сгруппироваться, а потом выводиться группами на странице.
Подскажите, как это реализовать? Нужно ли мне трансформировать массив в объект или как вообще поступить?

Comments

[Роман Александрович]

точно могу сказать что трансформировать массив в объект не нужно

Answer 1

[Александр Петров]

Собственно, в вопросе уже и есть ответ.
Сначала группируем по нужному полю, потом каждую группу сортируем по нужному полю.

Результат группировки на выходе может быть разным. Но тут вполне себе подойдет, если в итоге будет объект, где ключ — название группы, значение — сами элементы (именно так _.groupBy и R.groupBy и работает). Далее просто проходимся по этому объекту и каждую группу сортируем (опять же map + sort\sortBy из lodash \ ramda). Если без них, то чуть сложнее.

И после выводим значения. Берем все группы, по группам рендерим список первого уровня, для каждой группы берем её элементы и рендерим внутренний список.