HelpBot Assistant

How can I help you?

Style and Appearance in Angular Grid Component

19 Mar 20265 minutes to read

The Grid component offers various ways to customize its appearance using both default CSS and custom themes. Common approaches:

Default CSS overrides

Custom CSS can override the default styles of the Grid component. This allows changes to colors, fonts, paddings, and more. Inspect the generated HTML of the grid using browser developer tools to identify the relevant CSS classes and styles.

A basic example demonstrates overriding the grid’s header background color:

/* In the component's CSS file */
.e-grid .e-headercell {
    background-color: #333; /* Override the header background color */
    color: #fff;
}

Change header background

Using Theme Studio

Syncfusion’s Theme Studio tool allows creation of custom themes for all controls, including the grid. This advanced approach defines a comprehensive set of styles to achieve a consistent look and feel across an application.

  1. Visit the Syncfusion® Theme Studio.
  2. Select the grid control from the left panel.
  3. Customize various aspects of the control’s appearance, such as colors, typography, and spacing.
  4. Download the generated CSS file and include it in the Angular project.

Customize the Grid root element

The .e-grid class is used to style the root element of the Syncfusion® Angular Grid component.

.e-grid {
    font-family: cursive;
}

grid root element

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridComponent, GridModule, PageService, SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid [dataSource]='data' [allowPaging]='true' [pageSettings]='pageSettings' [selectionSettings]='selectionOptions' height='268px'>
            <e-columns>
                  <e-column field='OrderID' headerText='Order ID' type='number' isPrimaryKey='true' textAlign='Right' width=100></e-column>
                  <e-column field='CustomerID' headerText='Customer ID' type='string' width=120></e-column>
                  <e-column field='Freight' headerText='Freight' type='number' textAlign='Right' format='C' width=100></e-column>
                  <e-column field='ShipName' headerText='Ship Name' type='string' width=180></e-column>
            </e-columns>
            </ejs-grid>`,
      providers: [PageService]
})
export class AppComponent implements OnInit {
  public data?: Object[];
  public grid?: GridComponent;
  public pageSettings?: Object;
  public selectionOptions?: SelectionSettingsModel;

  ngOnInit(): void {
    this.data = data;
    this.pageSettings = { pageSize: 8 };
    this.selectionOptions = { type: 'Multiple' };
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Syncfusion Angular Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    
<meta name="author" content="Syncfusion" />
    <style>
    .e-grid {
        font-family: cursive;
    }
    .e-grid .e-row:hover .e-rowcell {
        background-color: rgb(204, 229, 255) !important;
    }
    .e-grid .e-rowcell.e-selectionbackground {
        background-color: rgb(230, 230, 250);
    }
    .e-grid .e-row.e-altrow {
        background-color: rgb(150, 212, 212);
    }
    .e-grid .e-row {
        background-color: rgb(180, 180, 180);
    }
    </style>
</head>
<body>
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>
</html>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also

Footer template styling in Angular Grid