Ag Grid для управления данными 2021-04-12T15:16:55+00:00

Project Description

Ag Grid для управления данными

Требования: создать простой в использовании инструмент управления табличными данными, аналогичный Google Spreadsheet и MS Excel. Ожидались следующие требования:

  • Возможность создавать бесконечное количество таблиц с разными столбцами.
  • Столбцы таблицы должны иметь разные типы, например (вложение, дата, текст, поле выбора, флажки и т. Д.)
  • События, связанные с разными столбцами, например отключение других столбцов или копирование данных в другие таблицы.
  • Несколько человек должны иметь возможность редактировать данные одновременно.
  • Строки можно группировать и расширять.
  • У разных пользователей должны быть разные разрешения для каждой таблицы.
  • Сортировка и фильтрация данных.

Результат: было рассмотрено много различных решений для таблиц js, в итоге был выбран Ag Grid, потому что он мог обрабатывать большой объем данных на странице, были проведены тесты на 100 000 строках и 30 столбцах. Библиотека работала хорошо, потому что данные не хранятся в форме HTML на странице, а присутствуют только видимые строки и столбцы. В качестве back-end-решения был выбран Laravel 5 + Voyager back-end.

Чтобы разрешить одновременное редактирование таблиц, был настроен Redis + Laravel Echo Server, позволяющий использовать каналы. Все изменения данных таблицы транслируются каждому пользователю на странице.

Вверху страницы отображается небольшой значок аватара для каждого человека, редактирующего и просматривающего страницу.

Сортировка и фильтрация доступны в Ag Grid «из коробки».

Созданы отдельные страницы для редактирования настроек таблиц и прав пользователей. Для каждого столбца и роли есть отдельные разрешения, поэтому для каждой роли можно определить столбцы, которые они могут редактировать. На странице редактирования таблицы можно добавлять новые столбцы, редактировать типы столбцов и другие параметры столбцов.