Code reuse and general development environment question in liferay

Question

I have a situation where I need to create an HTML table to interact with objects using the Liferay REST API. I need to manage different objects, so the table will have varying headers, but the general logic, such as fetch requests, pagination, and styling, will remain consistent. What is the best approach to handle this?

Additionally, I have a question about Liferay environment configurations. In my company, we use fragments with pure JavaScript, HTML, and CSS. I was advised to edit in VSCode and then copy and paste the code into the browser. While this method works, it feels somewhat inefficient. I noticed there was a Fragment Development Toolkit, but it is no longer supported. Is there an alternative solution for fragment development?

I initially tried creating a separate fragment for each table, but this approach led to code duplication. Any changes needed to be applied across all the fragments.

Another approach I considered was creating a JavaScript class called GenericTable that handles all the logic and styling for table creation. By passing a JSON object containing information about the table headers, data URL, etc., I could instantiate GenericTable in each fragment as needed. This way, changes to GenericTable would be reflected in all fragments. However, during testing, I found that a class created in one component cannot be instantiated in another component unless I define it globally, like so: window.GenericTable = class GenericTable {...}. This approach doesn’t feel ideal.

I’ve noticed that React components can be reused, but I’m not sure how this could be applied to my situation.