1

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!

5
  • What does the actual CSS look like? Is that @import in app.component.css, styles.css or somewhere else?
    – Mordred
    Commented Nov 9, 2021 at 21:15
  • @Mordred CSS is empty besides the '@import'. Styles contains the '@import' as well
    – wezrine
    Commented Nov 9, 2021 at 21:18
  • Try to import the css at the global css file, maybe it is not importing the CSS properly at the component CSS file. Commented Nov 9, 2021 at 21:23
  • Okay, so if it's in app.component.css can you past the contents of the import itself (or at least part of it)?
    – Mordred
    Commented Nov 9, 2021 at 21:23
  • I should also say that import path looks suspect to me. My guess is it's not finding the handsontable.full.css.
    – Mordred
    Commented Nov 9, 2021 at 21:27

1 Answer 1

3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.