Theming

This section describes how to use your themes or use a pre-built one.

Live example

Theming live example.

DikeGrid theming

The DikeGrid bases its theming process on the Angular Material's theming system. Therefore, DikeGrid exposes color, typography, and theme mixins.

See the official docs for further details on Angular Material's theming system.

You have to define your theme and include DikeGrid's mixins and Angular Material's mixins in your application.

Defining a theme

You have to create your primary and accent palettes with an optional warm palette when defining a theme. Once you have the palettes, you can create a light or a dark theme.

See the official docs on Theming Angular Material.

Let us create a theme:

@use "@angular/material" as mat;
@use "@dikesoft/angular-data-grid" as dkg;

// The core mixin must be included exactly once for your application:
@include mat.core();

// The "warn" palette is optional:
$primary: mat.define-palette(mat.$indigo-palette);
$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);

// You can define a dark theme as well:
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  )
));

// Emit styles for all Angular components:
@include mat.all-component-themes($theme);
// Emit style for the DikeGrid component:
@include dkg.theme($theme);

Customizing typography

You can also provide your typography specifications when defining a theme.

@use "@angular/material" as mat;
@use "@dikesoft/angular-data-grid" as dkg;

// The core mixin must be included exactly once for your application:
@include mat.core();

// Define a custom typography:
$custom-typography: mat.define-typography-config(
  $font-family: Open Sans,
  $title: mat.define-typography-level(1.25rem, 2rem, 600),
  $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
  $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
  $input: mat.define-typography-level(0.875rem, 1, 400)
);

// The "warn" palette is optional:
$primary: mat.define-palette(mat.$indigo-palette);
$accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);

// You can define a dark theme as well:
$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent
  ),
  typography: $custom-typography
));

// Emit styles for all Angular components:
@include mat.all-component-themes($theme);
// Emit style for the DikeGrid component:
@include dkg.theme($theme);

See the official doc for customizing typography.

Using a pre-built theme

DikeGrid includes four pre-built themes CSS files. Each of them uses the same palettes as Angular Material pre-built themes.

Theme	Scheme	Palettes
deeppurple-amber.css	Light	deep-purple, amber, red
indigo-pink.css	Light	indigo, pink, red
pink-bluegrey.css	Dark	pink, bluegrey, red
purple-green.css	Dark	purple, green, red

You can add the DikeGrid styles in two ways: importing the CSS file directly in the styles.scss file or adding the entry in the styles array from the angular.json file.

Importing the CSS file

Open the styles.scss file and add the following line:

@import "@dikesoft/angular-data-grid/prebuilt-themes/indigo-pink.css";

Adding the CSS file to the styles array

angular.json

"styles": [
   "node_modules/@dikesoft/angular-data-grid/prebuilt-themes/indigo-pink.css",
   "src/styles.scss"
]

Custom scrollbars

As you notice, all the live examples show thin and colored scrollbars.

By default, the DikeGrid applies styles to its scrollbars.

Custom scrollbars

You can unset this scrollbar customization by providing a false value through an Injection Token called CUSTOM_SCROLLBARS.

Let us provide the CUSTOM_SCROLLBARS Injection Token:

theming.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { DikeDataGridModule, CUSTOM_SCROLLBARS } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';

import { themingRoutes } from 'app/modules/admin/theming/theming.routing';
import { GridThemingComponent } from './grid-theming/grid-theming.component';

@NgModule({
  declarations: [
    GridThemingComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(themingRoutes),

    SharedModule,
    DikeDataGridModule
  ],
  providers: [
    { provide: CUSTOM_SCROLLBARS, useValue: false }
  ]
})
export class ThemingModule { }

When providing the mentioned Injection Token, the DikeGrid shows the default scrollbars.

Default scrollbars

Summary

Since the DikeGrid bases its theming process on the Angular Material's theming system is very easy to customize your DikeGrid instances because you are familiar with that process.

grid-theming.component.html

<dike-grid id="grid-theming" height="600px"
    [displayRowId]="gridProperties.displayRowId"
    [gridElevation]="gridProperties.matElevation"
    [gridElevationValue]="gridProperties.elevationValue"
    [striped]="gridProperties.stripeRows"
    [verticalRowLines]="gridProperties.verticalRowLines"
    
    [allowColumnDragging]="gridProperties.allowColumnDragging"

    [datasource]="dkgDataSource">

    <dike-grid-column
        fieldName="employeeId"
        headerText="Employee Id"
        dataType="Text"
        width="350">
    </dike-grid-column>

    <dike-grid-column
        fieldName="completeNameGroup"
        headerText="Complete Name">

        <dike-grid-column
            fieldName="firstName"
            headerText="Name"
            dataType="Text"
            width="150">
        </dike-grid-column>

        <dike-grid-column
            fieldName="lastName"
            headerText="Surname"
            dataType="Text"
            width="150">
        </dike-grid-column>
    </dike-grid-column>

    <dike-grid-column
        fieldName="gender"
        headerText="Gender"
        dataType="Binary"
        width="110">
    </dike-grid-column>

    <dike-grid-column
        fieldName="age"
        headerText="Age"
        dataType="Numeric"
        contentAlign="center"
        width="100">
    </dike-grid-column>

    <dike-grid-column
        fieldName="email"
        headerText="Email"
        dataType="Text"
        width="300">
    </dike-grid-column>

    <dike-grid-column
        fieldName="hireDate"
        headerText="Hire Date"
        dataType="Date">
    </dike-grid-column>
</dike-grid>

grid-theming.component.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';

import { DikeGridDataSourceInput } from '@dikesoft/angular-data-grid';

import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';

@Component({
  selector: 'grid-theming',
  templateUrl: './grid-theming.component.html',
  styleUrls: ['./grid-theming.component.scss'],

  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GridThemingComponent implements OnInit, OnDestroy {

  dkgDataSource: DikeGridDataSourceInput<Employee>;
  gridProperties: DikeGridProperties;

  private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;

  constructor(
    private cdr: ChangeDetectorRef,
    private gridConfig: DikeGridConfig,
    private sampleData: SampleData) { }

  ngOnInit(): void {
    // Get 1000 entries from the REST API:
    this.dkgDataSource = this.sampleData.getEmployees(1000);
    // Listening to any config property change:
    this.setChangeGridPropertiesSubscription();
  }

  ngOnDestroy(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
  }

  private setChangeGridPropertiesSubscription(): void {
    this.changeGridPropertiesSubscription.unsubscribe();
    this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
      this.gridProperties = props;
      this.cdr.markForCheck();
    });
  }
}

theming.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { DikeDataGridModule, CUSTOM_SCROLLBARS } from '@dikesoft/angular-data-grid';
import { SharedModule } from 'app/shared/shared.module';

import { themingRoutes } from 'app/modules/admin/theming/theming.routing';
import { GridThemingComponent } from './grid-theming/grid-theming.component';

@NgModule({
  declarations: [
    GridThemingComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(themingRoutes),

    SharedModule,
    DikeDataGridModule
  ],
  providers: [
    { provide: CUSTOM_SCROLLBARS, useValue: false }
  ]
})
export class ThemingModule { }