Ag Grid for data management
Requirements: create an easy to use table data management tool similar to Google Spreadsheet and MS Excel experience. Following requirements were expected:
- Possibility to create infinite amount of tables with different columns.
- Table columns need to have different types, like (attachment, date, text, select box, check boxes, etc)
- Events associated with different columns, like disabling other columns or copying data to other tables.
- Multiple people should be able to edit data simultaneously.
- Rows can be grouped and expanded.
- Different users need to have different permissions for every table.
- Sorting and filtering data.
Result: many different solutions for js tables has been reviewed, in the end Ag Grid was chosen, because it was able to handle a big amount of data on the page, tests on 100 000 rows and 30 column were made. The library performed well, because the data is not kept in form of HTML on the page and only visible rows and columns are present. For back-end solution Laravel 5 + Voyager back-end was picked.
To enable simultaneous table editing, Redis + Laravel Echo Server was set up enabling usage of channels. All table data changes are broadcasted to every user on the page.
At the top of the page a small avatar icon is shown for each person editing and viewing the page.
Sorting and filtering is present out of the box in Ag Grid.
Separate pages for editing table settings and user permissions were created. For each column and role there is a separate permissions, so it is possible to define for each role columns that they can edit. On table editing page it is possible to add new columns, edit column types and other column settings.