Style and Appearance in Angular Data Grid

The Syncfusion® Angular DataGrid provides flexible styling and appearance customization options to align with your application’s design requirements. You can choose from a wide range of built-in themes, customize visual elements using CSS, and create consistent experiences through theme-based styling.

Built-in Themes

The DataGrid components include a comprehensive collection of themes to match popular design systems and provide both light and dark variants. Available themes include:

Theme Style Sheet Name
Tailwind 3.4 tailwind3.css / tailwind3.scss
Tailwind 3.4 Dark tailwind3-dark.css / tailwind3-dark.scss
Bootstrap 5.3 bootstrap5.3.css / bootstrap5.3.scss
Bootstrap 5.3 Dark bootstrap5.3-dark.css / bootstrap5.3-dark.scss
Fluent 2 fluent2.css / fluent2.scss
Fluent 2 Dark fluent2-dark.css / fluent2-dark.scss
Material 3 material3.css / material3.scss
Material 3 Dark material3-dark.css / material3-dark.scss
Bootstrap 5 bootstrap5.css / bootstrap5.scss
Bootstrap 5 Dark bootstrap5-dark.css / bootstrap5-dark.scss
Fluent fluent.css / fluent.scss
Fluent Dark fluent-dark.css / fluent-dark.scss
Google’s Material material.css / material.scss
Google’s Material Dark material-dark.css / material-dark.scss
Tailwind CSS tailwind.css / tailwind.scss
Tailwind Dark CSS tailwind-dark.css / tailwind-dark.scss
Microsoft Office Fabric fabric.css / fabric.scss
Microsoft Office Fabric Dark fabric-dark.css / fabric-dark.scss
High Contrast highcontrast.css / highcontrast.scss

Theme packages

Syncfusion® built-in themes are distributed as theme packages available on npm. These packages include CSS/SCSS files for all components. The following table lists all available theme packages:

Theme Light Package Dark Package
Tailwind 3 @syncfusion/ej2-tailwind3-theme @syncfusion/ej2-tailwind3-dark-theme
Bootstrap 5.3 @syncfusion/ej2-bootstrap5.3-theme @syncfusion/ej2-bootstrap5.3-dark-theme
Fluent 2 @syncfusion/ej2-fluent2-theme @syncfusion/ej2-fluent2-dark-theme
Material 3 @syncfusion/ej2-material3-theme @syncfusion/ej2-material3-dark-theme
Bootstrap 5 @syncfusion/ej2-bootstrap5-theme @syncfusion/ej2-bootstrap5-dark-theme
Bootstrap 4 @syncfusion/ej2-bootstrap4-theme -
Bootstrap @syncfusion/ej2-bootstrap-theme @syncfusion/ej2-bootstrap-dark-theme
Material @syncfusion/ej2-material-theme @syncfusion/ej2-material-dark-theme
Tailwind @syncfusion/ej2-tailwind-theme @syncfusion/ej2-tailwind-dark-theme
Fluent @syncfusion/ej2-fluent-theme @syncfusion/ej2-fluent-dark-theme
Fabric @syncfusion/ej2-fabric-theme @syncfusion/ej2-fabric-dark-theme
High Contrast @syncfusion/ej2-highcontrast-theme -

Size Modes

The DataGrid components support two size modes to optimize user experience across different devices and input methods:

  • Normal mode (default) — Standard sizing optimized for mouse and keyboard interactions.
  • Touch mode (bigger) — Larger elements with increased padding, font sizes, and touch targets for improved touch interaction and accessibility. Apply the e-bigger CSS class to the <body> element to enable touch-friendly sizing.
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridComponent, GridModule, PageService} from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule ],
  standalone: true,
  selector: 'app-root',
  template: `<button (click)="toggleTouchMode()"></button>
            <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 isTouchMode: boolean = false;
  public buttonText: string = 'Enable Touch Mode';  

  ngOnInit(): void {
    this.data = data;
    this.pageSettings = { pageSize: 8 };    
  }
  toggleTouchMode(): void {
    this.isTouchMode = !this.isTouchMode;
    document.body.classList.toggle('e-bigger', this.isTouchMode);
    this.buttonText = this.isTouchMode ? 'Enable Normal Mode' : 'Enable Touch Mode';
  }
}
<!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" />
</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));

Theme Customization

The Data Grid provides flexible theme customization options to help align the control appearance with your application’s design requirements. You can customize built-in themes either by overriding the default CSS variables or by creating a completely customized theme using Syncfusion Theme Studio.

Default CSS overrides

The Data Grid themes use CSS variables with the unified naming convention. This ensures visual consistency, simple customization, and global updates. Centralized variables allow quick adjustments to colors, backgrounds, and borders across the grid.

Material 3 theme color variables

The Material 3 theme applies scalable CSS custom properties to maintain consistency within the Data Grid. Variables are designed for straightforward theming and responsive behavior.
The following table highlights commonly used color related variables in the Material 3 theme.

Name Purpose
–e-font-name Specifies the default font family used across the DataGrid
–color-sf-surface Controls the base surface styling for UI elements
–color-sf-on-surface Sets text appearance on surface elements
–color-sf-primary Defines the core theme styling used across the DataGrid
–color-sf-primary-container Used for background styling of active or highlighted row states
–color-sf-outline-variant Defines border and separator styling

Bootstrap 5.3 theme color variables

The Bootstrap 5.3 theme extends Bootstrap’s framework with CSS custom properties for the Data Grid. The following table lists color related variables defined for the Bootstrap 5.3 theme.

Name Purpose
–e-font-name Specifies the default font family used across the DataGrid
–color-sf-content-bg-color-alt1 Controls the background of the DataGrid header
–color-sf-content-bg-color Controls the background of the DataGrid content
–color-sf-table-bg-color-hover Defines the background styling for selected rows during hover interaction
–color-sf-content-bg-color-hover Defines background behavior when primary elements are hovered
–color-sf-primary Defines the main theme styling used across components
–color-sf-primary-light Provides a softer variation of the primary theme for backgrounds
–color-sf-border-light Specifies styling for light borders and separators

Tailwind 3 theme color variables

The Tailwind 3 theme uses utility first CSS custom properties to deliver a flexible, modern design system. The following table presents color related variables available in the Tailwind 3 theme.

Name Purpose
–e-font-name Specifies the default font family used across the UI
–color-sf-content-bg-color Controls the main background of the application area
–color-sf-table-bg-color-hover Defines background behavior during hover interaction
–color-sf-content-bg-color-hover Defines the background color for pager during hover interaction
–color-sf-primary Defines the main theme color used across components
–color-sf-border-light Defines the border color used across the component

Fluent 2 theme color variables

The Fluent 2 theme leverages modern CSS custom properties to provide a clean and consistent design aligned with Fluent 2 UI principles. The following table outlines the color related variables available in the Fluent 2 theme.

Name Purpose
–e-font-name Specifies the default font family used across the DataGrid
–color-sf-content-bg-color-alt1 Controls the main background of the DataGrid
–color-sf-table-bg-color-hover Defines the background styling for selected rows during hover interaction
–color-sf-content-bg-color-hover Defines background behavior when primary elements are hovered
–color-sf-primary Defines the main theme styling used across components
–color-sf-border-light Specifies styling for light borders and separators
–color-sf-border-alt Defines alternate border styling for DataGrid elements 
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 {
        --e-font-name: 'Verdana';
        --color-sf-content-bg-color: rgba(240, 253, 244);
        --color-sf-content-bg-color-hover: rgba(70, 100, 20, 0.05);
        --color-sf-border-light: rgba(34, 197, 94);
        --color-sf-table-bg-color-hover: rgba(70, 100, 20, 0.05);
        --color-sf-primary: rgba(34, 197, 94);
        --color-sf-table-bg-color-selected: rgba(215, 235, 212, 0.65);
    }
</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));

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.

See Also