hot-table | Best Data Grid Web Component with Spreadsheet Look | Grid library

I am trying to display a Handsontable to my Angular frontend. I've gotten the basic example https://handsontable.com/docs/angular-simple-example/ to work in a brand new Angular project, but when I add the exact code to my existing repo, I cannot get the necessary CSS styles to apply. If I check sources on my browser, the style sheet is imported but the styles are not applied to the elements, resulting in an out of position and distorted table.

Here is the source code: table.component.html

I am working on displaying a Handsontable on my Angular frontend. When I give the data. When the table is displayed, the first row of the body has a font style that makes it look like a header (bold, larger, color).

Here is a copy of my implementation:

So, I currently have this which pulls data from finviz and outputs the whole stats table for a stock. However, I'd like to be able to only pull the amount or percentage from a specific "cell:

I have some quasar panels with some content inside. One of these contents is a handsontable but it is not rendering correctly. At the beginning of the code I perfectly render a handsontable into a q-card.

Well drawn handsontable

The exact same piece of code is drawn incorrectly if I put it inside a q-tab-panel.

Incorrectly drawn handsontable

This is the whole code of my vue component

I need to load data to a hands-on table,

When I use:

1. case: if used directly into data, its work good, but I need to load data when is created from Axios, using Axios. This doesn't work.