Recommended approach for public custom controls

I have a requirement to create a html table containing data from an API we host elsewhere (none umbraco).

The ‘control’ will be hosted in multiple front end pages ( e.g. public ) in Umbraco.

The complexity is the user interaction because it will have dropdowns (filters) above the table and when changing these, the data will change based on an API call.

What’s the best / Recommended approach for doing this in Umbraco 15?

Few options here I think. Does the data need to be server to server or can you make client call?

If you can do client side, then you can hook it in via some JS and templating. Have it tied to data attributes on an element, and then have the element output in block list (or whatever you have setup in Umbraco).

If you need to do server to server I would potentially create a surface controller which would call the external API and then return HTML via a partial. You can then call that surface controller from your front end code.