Styling

CSS/SASS Styles

Load the default Bootstrap theme style and/or customize it to your taste (customization can applied by using SASS)

CSS

Default compiled css (if you use the plain Bootstrap Theme CSS, you could simply add it to your .angular-cli.json file and be done with it)

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/flatpickr/dist/flatpickr.css",
    "../node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css",
    "styles.css",
    "../node_modules/angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css"
],

SASS (scss)

You could also compile the SASS files with your own customization, for that simply take any of the _variables.scss (without the !default flag) variable file and make sure to import the Bootstrap Theme afterward. For example, you could modify your style.scss with the following changes:

/* for example, let's change the mouse hover color */
$cell-odd-background-color: lightyellow;
$selected-hover-color: lightgreen;

/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
@import '../node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';

Bootstrap support

The creation of Angular-Slickgrid started with Bootstrap 3 and now it's up to Bootstrap 5 as Bootstrap library keeps evolving.

• Bootstrap 4 demo / examples repo
• Bootstrap 5 demo / examples repo

Other UI frameworks

Note that Bootstrap is totally optional, you could use any other UI framework, also 2 new themes were added in version 2.18.x, first is a Material Design Theme and also a Salesforce Theme.

• Material Theme - demo
• Salesforce Theme - demo

For more demo, you can also take a look at my other repo (Slickgrid-Universal) demos. Also, note that Bootstrap is completely optional (and has been for some time), the other demo that I mentioned was created using only the Bulma CSS framework, you will also notice that only the Material & Salesforce Themes were used across these multiple examples.

Each of these Styling Themes are compiled in CSS and created from a SASS file, so you can use either or. Both Themes are shown in each Tree Data demo

• Note: you might need to refresh the page to see the theme correctly since the styling is global and if you change page, the style will follow on the next page (unless you refresh).

SVG Icons

The 2 new Themes were created with only SVG icons, most of the icons were pulled from the Material Design Icons set. If you wish to create your own set of SVG Icons, you can refer to the new Uncyclo - SVG Icons

• Uncyclo - SVG Icons.

Note: Just to point out that both the Fonts and SVG icons are supported, the default Bootstrap theme will keep Font-Awesome 4 so that it still works for everyone. You could however use SASS to override the Font and use SVG, again see the Uncyclo - SVG Icons for more details.

More info can be found in the release of version 2.18.x here