Datagrid

[AlexanderFraltsov]

1. Task - https://github.com/rolling-scopes-school/tasks/blob/master/tasks/datagrid.md
2. Screenshot -
   
3. Deploy - https://compassionate-brattain-bc988b.netlify.com/
4. Date of completion: 2020-03-17 / deadline date: 17.03.2020
5. Total

Non-interactive scope (30/30)

• Данные отображаются в таблице в соответствии с функциональными требованиями. +30

Basic scope (70/70)

• Реализована сортировка по одной колонке. +10
• Понятная индикация, по какой колонке применена сортировка и в каком направлении (по возрастанию или убыванию) +10
• Реализована фильтрация по введённому тексту (поиск подстроки как минимум в значениях одной колонки). +10
• (В дополнение к предыдущему) При фильтрации по тексту производится поиск подстроки в нескольких колонках. +10
• Реализована фильтрация по boolean колонке с помощью UI-элемента toggle иди аналогичного. +10
• Реализована фильтрация по enum колонке. Можно использовать react-select или аналогичный UI-элемент. +10
• (В дополнение к предыдущему) При фильтрации по enum колонке можно выбрать несколько значений (multiselect UI-элемент). +10

Advanced scope (130/150)

• С зажатым shift можно сортировать по нескольким колонкам. +20

• Реализована виртуализация рядов для отображении большого объёма данных. +30.

• Функцию виртуализации можно выключить c помощью toggle и сравнить скорость работы и отрисовки страницы. +10

• Ряд таблицы можно выделить кликом и применить к нему какое-либо действие. Выделенный ряд должен отличатся визуально. Самый простой пример действия - удаление из таблицы, но можно придумать любое другое. +20

• (В дополнение к предыдущему) С помощью зажатых Ctrl/shift и/или колонки чекбоксов слева можно выделить одновременно несколько рядов и применить к ним действие. +20

• Можно настраивать видимость колонок (всех или некоторых) демо1, демо2 +20

• Фиксированный заголовок таблицы aka sticky header, то есть при скролле таблицы строка с названиями колонок остаётся видна поверх данных. +10

• Фиксированная левая колонка. Принцип тот же, что и для sticky header, но левая колонка (как правило идентифицирующая данные в ряде, например - имя человека) остаётся видна при горизонтальном скролле. +20

Hacker scope (20/50)

• Сохранение значений для сортировки, фильтрации, видимости колонок (если реализовано) сохранаются в localStorage так, что при обновлении страницы состояние таблицы сохраняется. +20
• Экспорт данных в CSV файл (только видимые ряды с сохранением сортировки). +20
• Значения фильтров для текстовых и enum колонок можно передавать в querystring (приоритет выше, чем у localStorage). +10

Штрафы (0)

• ошибки в консоли, связанные с работой приложения: -10
• любой сбой/поломка приложения, связанная с действиями пользователя: -20
• нет поддержки Redux DevTools в продакшн сборке: -10
• заметные подтормаживания в работе на более-менее современном десктопе: -10

total: 30+70+130+20 = 250