Remove jquery dependency

[joncameron]

Description

jQuery has been used in Avalon code for a long time, but at this point we no longer need to maintain it as a dependency and can transition our use of jQuery to standard JS.

Done Looks Like

• Find jQuery usage in Avalon code
• Identify dependencies that rely on jQuery (or jQuery UI)
  • jQuery is a dependency of data-tables. Evaluate whether it's reasonable to replace data-tables with a different library (could we retain it as a dependency only for data-tables?
• Replace jQuery code with vanilla JS

[Dananji]

For DataTables replacement, there are multiple options;

Library	Pros	Cons	Code Changes
Grid.js	Modern, lightweight, and no jQuery dependency. It has server-side processing support, bootstrap-compatible styling.	It has less mature ecosystem, i.e. fewer plugins and extensions. For advanced features this might need some work.	Code changes would be scoped to index pages mostly and around styling changes
TanStack Table v8	Extremely powerful and flexible headless UI library formerly known as React Table. Highly customizable and allows integration with any styling framework or custom CSS.	Requires introducing more React components and props in the application, and major changes to the current architecture.	Code changes would include new ReactJS components, and changes to the API endpoints to serve required content for the React components to build the tables
Vanilla JS + Custom	Provides maximum control and flexibility and no external dependencies.	This would require more effort to build everything from scratch and for figuring out CSS. More effort to implement accessibility needs and maintain in the long run.	Code changes for this would be significant as it needs us to strip down everything and build the UI from scratch.

Based on these, I'm trying out Grid.js as it seems like the one that would help us to replace DataTable with minimal code changes.

[Dananji]

It seems the ready defined in the gridjs library is not supported anymore, which is needed to make adjustments to the view once the table is rendered on the page. I was not able to get tag filter working with the gridjs implementation, because there was no supported event handlers in gridjs that I could use to attach the tag filter change event to refresh the data in the table.

Therefore, I'm experimenting with a ReactJS approach. Starting off with a vanilla ReactJS implementation and if it seems to be complex, I will explore @tanstack/react-table library.