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
<div>
<hot-table
[data]="dataset"
[colHeaders]="true"
[rowHeaders]="true"
height="auto"
licenseKey="non-commercial-and-evaluation">
<hot-column data="id" [readOnly]="true" title="ID"></hot-column>
<hot-column data="name" title="Full name"></hot-column>
<hot-column data="address" title="Street name"></hot-column>
</hot-table>
</div>
component:
import { Component } from '@angular/core';
import * as Handsontable from 'handsontable';
@Component({
selector: 'app-root',
templateUrl: './table.component.html',
styleUrls: ['./app.component.css']
})
class AppComponent {
dataset: any[] = [
{id: 1, name: 'Ted Right', address: 'Wall Street'},
{id: 2, name: 'Frank Honest', address: 'Pennsylvania Avenue'},
{id: 3, name: 'Joan Well', address: 'Broadway'},
{id: 4, name: 'Gail Polite', address: 'Bourbon Street'},
{id: 5, name: 'Michael Fair', address: 'Lombard Street'},
{id: 6, name: 'Mia Fair', address: 'Rodeo Drive'},
{id: 7, name: 'Cora Fair', address: 'Sunset Boulevard'},
{id: 8, name: 'Jack Right', address: 'Michigan Avenue'},
];
}
styles
@import '~handsontable/dist/handsontable.full.css';
I would appreciate any and all help!
Instead of importing it in styles.css
/ styles.scss
... add the CSS to your angular build by adding the relevant css file to the "styles" property in angular.json
This should look something like this:
"styles": [
"node_modules/handsontable/dist/handsontable.full.css",
"src/styles.scss"
]
You will need to restart the Angular dev server to pick up this change.
NOTE: there are 2 "styles" properties within angular.json
- make sure to add it to either the first one only or to both.