HelpBot Assistant

How can I help you?

Columns in Angular Grid Component

19 Mar 202624 minutes to read

In Syncfusion® Angular Grid, columns are the fundamental building blocks that display data from a data source. Each column maps to a specific field in the data source and is responsible for rendering values in the required format. For example, a dataset containing customer details such as “ID”, “Name”, “Email”, and “Purchase Date” will present each field as an individual column in the Grid.

A column definition commonly includes the following properties:

  • field: The field property establishes the connection between the dataset and the column by mapping a data source field to a grid column. This property is required for performing data operations between the Grid and the data source.
  • headerText: The headerText property defines the text displayed in the column header. It provides a clear label for the column, making the grid easier to read and understand.

Column types

The type property defines the data type of the values in a column. Defining the correct column type is important because it determines the way the Grid formats, filters, and sorts the data.

The type property applies formatting rules, such as number formats or date formats, to ensure proper display of column values. By default, the Grid automatically assigns the column type based on the first value in that column. If the first value is “null”, “undefined”, or “empty”, the type cannot be inferred and must be set manually to ensure correct formatting and data operations.

Supported column types

The Grid provides column types to represent different data types. Each type ensures that values are displayed accurately and that operations such as sorting and filtering function properly. The supported column types are:

  • string: Contains text values. This is the default type. If the first value is “null”, “undefined”, or “empty”, and no type is set, the column defaults to string.
  • number: Contains numeric values.
  • boolean: Represents true or false values. By default, these values are displayed as text in the grid cell. To show them as checkboxes with checked or unchecked states, set the displayAsCheckBox property for the column.
  • date: Represents date values.
  • datetime: Represents date and time values.
  • checkbox: Provides checkboxes for row selection.

Column types can be explicitly defined using the type property. For example:

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

@Component({
  imports: [ GridModule ],
  providers: [ PageService, SortService, FilterService, GroupService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid [dataSource]='data'>
                <e-columns>
                    <e-column type='checkbox' width=90></e-column>  
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 type='number'></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120 type='string'></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90 type='number'></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120 type='date'></e-column>
                    <e-column field='ShippedDate' headerText='Shipped Date' textAlign='Right' format='dd/MM/yyyy hh:mm' width=200 type='dateTime'></e-column>
                    <e-column field='Verified' headerText='Verified' width='100' type='boolean' [displayAsCheckBox]='true'></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];

  ngOnInit(): void {
    this.data = data;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • If type is not defined, the grid detects it from the first record in the dataSource.
  • In case the first record’s value for a column is null or blank, define the type for accurate filtering and editing dialogs.

Difference between boolean type and checkbox type column

  • boolean: Represents true or false values from the data source. Values can be edited. By default, values are displayed as text, but can be shown as checkboxes by setting the displayAsCheckBox property.
  • checkbox: When a column type is set to checkbox, it enables row selection. By default, the Grid allows multiple records to be selected, as the selectionSettings automatically defaults to multiple selection.

For more information on rendering boolean values as a checkbox, refer to the Checkbox section.

Column Width

The Grid allocates column space using the width property. Widths can be defined in pixels (e.g., “100” for “100px”), as a percentage (e.g., “25%” for one-quarter of the grid width), or set to “auto” to let the Grid size the column automatically based on its content.

Understanding column width distribution

Scenario Result
No widths defined for any columns The Grid divides the total width equally among all columns. Example: 4 columns in an “800px” grid → each column gets “200px”.
Some columns have widths, others do not The remaining space is shared equally among the columns without a defined width.
All columns use percentage widths Columns resize responsively based on the grid size. Example: “50%” → column always takes half of the grid width.
Combined column widths exceed grid size A horizontal scrollbar appears automatically to allow scrolling.
Columns set to auto width The Grid calculates the width based on the widest cell in the column. If content is too long, it is truncated with an ellipsis (…).
Parent container has a fixed width The Grid inherits that fixed width from its parent.
Parent container has a flexible width The Grid adjusts dynamically to fit the available space.

Supported types for column width:

  1. Auto

    Column width is automatically calculated based on the content within the column cells. If the content exceeds the specified width in the e-column, it is truncated with an ellipsis (…) at the end. To allow a column to adjust its width dynamically based on content, set the width property of the e-column to “auto”.

    A Grid can combine both flexible and fixed-width columns to create a balanced layout. For example, consider three columns “Order ID”, “Customer Name”, and “Freight”. The “Customer Name” column automatically adjusts its width based on the length of the names, while the “Order ID” and “Freight” columns remain fixed. This ensures that numeric fields stay consistent while text fields expand as needed.

       <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='auto'></e-column>

  2. Percentage

    Column width can be defined as a percentage relative to the total width of the grid container. For example, assigning “25%” to a column will allocate one-fourth of the grid’s width to that column. This approach is useful for distributing space proportionally across columns.

       <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='25%'></e-column>

  3. Pixel

    The column width can be defined using an absolute pixel value. For example, setting a column width to “100px” means the column will always occupy “100” pixels, regardless of the grid container’s size. The width for e-column can be set as pixels in the Grid configuration as shown below:

       <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='100'></e-column>
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FilterService, GridModule, GroupService, PageService, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ PageService, SortService, FilterService, GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' width='auto'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='auto'></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=100></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width='30%'></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Column formatting

Column formatting serves as a powerful feature in Syncfusion® Angular Grid, enabling customization of data display in grid columns. Different formatting options can be applied to columns to meet specific needs, including number formatting with defined patterns, date formatting according to particular locales, and the use of templates for column values.

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

@Component({
    imports: [GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height="315px">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The grid uses the Internationalization library to format values based on culture and format.
  • By default, number and date formats use the en-US locale. Customize by specifying the locale.
  • The available format codes may vary depending on the data type of the column.
  • Column formatting allows advanced customization by assigning a custom function to the format property, rather than using a predefined format string.
  • Ensure that the format string is valid and compatible with the data type of the column to avoid unexpected results.

Number formatting

Number formatting enables customization of numeric value display in Syncfusion® Angular Grid columns. Standard numeric format strings or custom numeric format strings specify the desired presentation. The format property of Grid columns can be used to specify the number format for numeric columns.

Format Description Remarks
N Denotes numeric type. The numeric format is followed by integer value as N2, N3, etc., where the number specifies the number of decimal places to display.
C Denotes currency type. The currency format is followed by integer value as C2, C3, etc., where the number specifies the number of decimal places to display.
P Denotes percentage type. The percentage format expects input values in the range of 0 to 1. For example, a cell value of “0.2” is displayed as “20%”. The format can include an integer value such as P2, P3, etc., where the number indicates the number of decimal places to display.

The following example code demonstrates the formatting of data for “Mark 1” and “Mark 2” using the N format, “Percentage of Marks” using the P format, and “Fees” using the C format.

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

@Component({
  imports: [ GridModule ],
  providers: [PageService, SortService, FilterService, GroupService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid [dataSource]='data'>
                <e-columns>
                    <e-column field='RollNo' headerText='Roll No'></e-column>
                    <e-column field='Mark1' headerText='Mark 1'></e-column>
                    <e-column field='Mark2' headerText='Mark 2' format='N'></e-column>
                    <e-column field='Average' headerText='Average' format='N2'></e-column>
                    <e-column field='Percentage' headerText='Percentage of Marks' format='P'></e-column>
                    <e-column field='Fees' headerText='Fees' textAlign='Right' format='C'></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {
  public data?: object[];

  ngOnInit(): void {
    this.data = data
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For additional details on number formatting options supported by the Grid component, refer to the number formatting section in the Internationalization documentation.

Date formatting

Date formatting customizes the display of date values in Grid columns. It supports standard date format strings (such as “d”, “D”, or “MMM dd, yyyy”), built-in skeletons (such as “yMd”), and custom format strings. The format property of Grid columns specifies the desired date format.

Additionally, custom format strings provide precise control over the way date values are displayed, and the table below shows examples of custom formats with their corresponding outputs.

Format Formatted value
{ type:'date', format:'dd/MM/yyyy' } 04/07/1996
{ type:'date', format:'dd.MM.yyyy' } 04.07.1996
{ type:'date', skeleton:'short' } 7/4/96
{ type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' } 04/07/1996 12:00 AM
{ type: 'dateTime', format: 'MM/dd/yyyy hh:mm:ss a' } 07/04/1996 12:00:00 AM 
import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height="315px">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='OrderDate' [format]='formatOptions' headerText='Order Date' textAlign='Right' width=120></e-column>
                    <e-column field='OrderDate' [format]='shipFormat' headerText='Ship Date' textAlign='Right' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public formatOptions?: object;
    public shipFormat?: object;

    ngOnInit(): void {
        this.data = data;
        this.formatOptions = {type: 'date', format: 'dd/MM/yyyy'};
        this.shipFormat = { type: 'dateTime', format: 'dd/MM/yyyy hh:mm a' };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Date formatting for more details.

Format the date and currency column based on localization

Date columns can be formatted based on user locale by combining the format and locale properties.

Example: Set format: "yyyy-MMM-dd" and locale: "es-AR" for Spanish (Argentina) localization.

import { cagregorian } from './ca-gregorian.json';
import { currencies } from './currencies.json';
import { data } from './datasource';
import { numbers } from './numbers.json';
import { timeZoneNames } from './timeZoneNames.json';
import { Component, OnInit } from '@angular/core';
import { GridModule, GroupService, PageService } from '@syncfusion/ej2-angular-grids';
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';

@Component({
    imports: [GridModule ],
    providers: [GroupService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [locale]='locale' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width=150></e-column>
                    <e-column field='OrderDate' headerText='OrderDate' [format]='formatOptions' textAlign='Right' width=150></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' width=150></e-column>
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public formatOptions?: object;
    public locale: string = 'es-AR';

    ngOnInit(): void {
        setCulture('es-AR');
        setCurrencyCode('ARS');
        loadCldr(
          cagregorian,
          currencies,
          numbers,
          timeZoneNames
        );
            
        this.formatOptions= { type: 'date', format: 'yyyy-MMM-dd'};
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Format template column values

Template columns in Syncfusion® Angular Grid enable customization of column value appearance through HTML templates. Number formatting can also be applied within template columns to control the display of values. To format values in a column template, use the Angular pipes and the format property.

In this example, the date pipe formats the “Order Date” value as a date in the format “dd/MMM/yyyy”.

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { CommonModule } from '@angular/common';

@Component({
    imports: [GridModule, CommonModule],
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height="315px">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' width=120>
                        <ng-template #template let-data>
                            {{ data.OrderDate | date:'dd/MMM/yyyy' }}
                        </ng-template>
                    </e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' textAlign='Right' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  public formatOptions?: object;
  public shipFormat?: object;

  ngOnInit(): void {
    this.data = data;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Other Angular pipes, such as “currency”, “decimal”, “percent”, etc., can be used to format different types of values in the column template based on the requirements.

Custom formatting

Syncfusion® Angular Grid supports customizing the formatting of data in its columns. Custom formats can be applied to numeric or date fields to display values in a specific style as required. The format property is used to define these custom formats.

A custom format string must contain one or more of the following standard date/time symbols.

Symbol Description Format Formatted Value
G Era (for example: AD (Anno Domini, after year 0), BC (Before Christ, before year 0) ) { type: 'Date', format: 'G' } AD or BC (for example: September 17, 2025, the era is AD)
y Year { type: 'Date', format: 'yyyy' } 2025
M / L Month { type: 'Date', format: 'MM' } 09
E / c Day of the week { type: 'Date', format: 'EEEE' } Wednesday
d Day of the month { type: 'Date', format: 'dd' } 17
m Minutes { type: 'DateTime', format: 'mm' } 09
h / H Hour (12/24-hour) { type: 'DateTime', format: 'hh a' }
{ type: 'DateTime', format: 'HH' } 		04 PM
16
s Seconds { type: 'DateTime', format: 'ss' } 00
f Milliseconds { type: 'DateTime', format: 'fff' } 000
a AM/PM (with 12-hour) { type: 'DateTime', format: 'hh:mm a' } 04:09 PM
z Time zone { type: 'DateTime', format: 'z' } IST
’ (single quotes) Literal text in format { type: 'Date', format: "'Date:' yyyy-MM-dd" } Date: 2025-09-17

The custom format specifiers listed in the table below can be used to create custom number format.

Specifier Description Example Input Format Output
0 Displays digit or zero if absent. { format: '0000' } 0123
# Displays digit if present; hides if absent. { format: '####' } 1234
. Defines decimal precision. { format: '###0.##0#' } 546321.000
% Converts value to percentage. { format: '0000 %' } 0100 %
$ Formats value as currency. { format: '$ ###.00' } $ 13.00
; Separates formats for positive, negative, and zero. { format: '###.##;(###.00);-0' } (120.00)
‘String’ (single Quotes) Displays literal text in output. { format: "####.## '@'" } 123.44 @

In the below example, the “numberFormatOptions” object is used as the format property for the “Freight” column to apply a custom numeric format with four decimal places. Similarly, the “dateFormatOptions” object is used as the format property for the “Order Date” column to apply a custom date format displaying the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g. Sun, May 8, ‘23).

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

@Component({
    imports: [ GridModule ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height="315px">
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' [format]='numberFormatOptions' width=90></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' [format]='dateFormatOptions' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public numberFormatOptions?: object;
    public dateFormatOptions?: object;

    ngOnInit(): void {
        this.data = data;
        this.numberFormatOptions = {
            // Custom format for numeric columns
            format: '##.0000',
        };
        this.dateFormatOptions = {
            // Custom format for date columns
            type: 'date',
            format: "EEE, MMM d, ''yy",
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For more information, refer to the custom date formatting and custom number formatting sections.

Align the text of content

The alignment of text within Grid column cells can be controlled using the textAlign property. This property specifies the alignment of text within the cells of a particular column. By default, text is aligned to the left, but the alignment can be changed by setting the textAlign property to one of the following options:

  • Left: Aligns the text to the left (default).
  • Center: Aligns the text to the center.
  • Right: Aligns the text to the right.
  • Justify: Align the text to the justify.

Example using the textAlign property:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { Column, GridComponent, GridModule, TextAlign } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, DropDownListModule ],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
        <label style="padding: 5px 5px 0 0;">Align the text for columns :</label>
        <ejs-dropdownlist index="0" width="100" [dataSource]="alignmentData" (change) ="changeAlignment($event)" [fields]="{ text: 'text', value: 'value' }"></ejs-dropdownlist>
   </div>
   <ejs-grid #grid [dataSource]='data' height='295px'  style="padding-top:5px">
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' type='number'  width=120></e-column>
            <e-column field='CustomerID' headerText='Customer ID' type='string' width=90></e-column>
            <e-column field='OrderDate' headerText='Order Date' type='date'  textAlign='Center' format='yMd' width=140></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' type='string'  width=120></e-column>
        </e-columns>
    </ejs-grid>`,
})
export class AppComponent implements OnInit {
    public data?: object[];
    @ViewChild('grid') public grid?: GridComponent;
    public alignmentData: Object[] = [
        { text: 'Left', value: 'Left' },
        { text: 'Right', value: 'Right' },
        { text: 'Center', value: 'Center' },
        { text: 'Justify', value: 'Justify' },
    ];
    public changeAlignment(args: ChangeEventArgs): void {
        const align: TextAlign = (
        typeof args.value === 'string' ? args.value : 'Left'
        ) as TextAlign;

        const cols: Column[] = (this.grid as GridComponent).getColumns();

        cols.forEach((col: { textAlign: TextAlign; }) => {
        col.textAlign = align;
        });
        (this.grid as GridComponent).refreshColumns();
  }
    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The textAlign property affects only cell content; to align the header, use headerTextAlign.

Render boolean value as checkbox

The Grid component supports rendering boolean values as checkboxes within columns. This can be achieved by using the displayAsCheckBox property, which is available in the columns. This property is useful for displaying boolean column values as checkboxes instead of the default text representation of true or false.

To enable the rendering of boolean values as checkboxes, set the displayAsCheckBox property of the column to true.

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

@Component({
    imports: [GridModule ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [height]='315'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign= 'Right' width=100 format= 'C2'></e-column>
                    <e-column field='Verified' headerText='Verified' [displayAsCheckBox]="true" width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The displayAsCheckBox property applies only to boolean columns. Checked = true; unchecked = false.

Preventing checkbox in blank rows

To prevent the checkbox in blank rows of the Grid, even when the displayAsCheckBox property is set to true for that column, use the rowDataBound event to detect empty or null values in the row data. If all values in the row are empty or null, set the inner HTML of the corresponding cell to an empty string to hide the checkbox.

Example implementation:

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

@Component({
    imports: [ GridModule ],
    providers: [PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='315'
               (rowDataBound)='rowDataBound($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=80></e-column>
                        <e-column field='Verified' headerText='Verified' width=130 displayAsCheckBox="true"></e-column>
                    </e-columns>
                </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    rowDataBound(args: RowDataBoundEventArgs) {
        let count = 0;
        let data: { [key: string]: object | string } = args.data as { [key: string]: object | string };

        let keys = Object.keys(data);
        for (let i = 0; i < keys.length; i++) {
            if (data[keys[i]] == null || data[keys[i]] == '' || data[keys[i]] == undefined) {
                count++;
            }
        }
        if (count == keys.length) {
            for (let i = 0; i < (this.grid as GridComponent).columns.length; i++) {
                if (((this.grid as GridComponent).columns[i] as Column).displayAsCheckBox) {
                    (args.row as Element).children[i].innerHTML = '';
                }
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

AutoFit columns

The AutoFit feature in the Syncfusion® Angular Grid allows columns to automatically adjust their widths based on the maximum content width within each column. This ensures that all cell values are fully visible without truncation or wrapping.

Usage:

  • Hover the mouse over a column header. A resizer icon appears on the right edge of the header.
  • Double-click the resizer icon to resize the column to fit its longest content.

To display the resizer icon on column headers while hovering in the Syncfusion® Angular Grid:

  • Set the allowResizing property to true in the Grid component.
  • Inject the Resize module from @syncfusion/ej2-angular-gridsand inject ResizeService.

Resizing a column to fit its content using AutoFit method

The Grid can automatically adjust column widths to fit the widest cell content, ensuring that all data remains visible without wrapping. This behavior can also be triggered programmatically without user interaction by calling the autoFitColumns method inside the dataBound event. Columns are resized immediately after the Grid finishes rendering its data.

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

@Component({
    imports: [GridModule],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `
    <ejs-grid #grid [dataSource]='data' height='315px' gridLines='Both' (dataBound)='dataBound()' >
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
            <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
        </e-columns>
    </ejs-grid>`
    })
export class AppComponent implements OnInit {

public data?: object[];
@ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    dataBound() {
        (this.grid as GridComponent).autoFitColumns(['ShipAddress', 'ShipName']);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Call autoFitColumns() without parameters to resize every column in the Grid.

AutoFit columns with empty space

The AutoFit feature adjusts column widths in the Grid based on the values defined in the column declarations. If the total width of all columns is smaller than the overall Grid width, the remaining space will appear as white space. In this case, the columns do not automatically adjust to fill the entire Grid width.

This feature can be enabled by setting the autoFit property to true. When enabled, the column width is rendered strictly according to the values defined in the Grid’s column definitions, without expanding to occupy unused space.

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

@Component({
    imports: [ GridModule],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' allowResizing= 'true' height= '400' width= '850' autoFit= 'true'>
            <e-columns>
            <e-column field='OrderID' headerText='Order ID' minWidth='100' width='150' maxWidth='200' textAlign='Right'></e-column>
            <e-column field='CustomerID' headerText='Customer ID' minWidth='8' width='150'></e-column>
            <e-column field='Freight' headerText='Freight' minWidth='8' width='120' format='C2' textAlign='Right'></e-column>
            <e-column field='ShipCity' headerText='Ship City' [allowResizing] = 'false' width='150' textAlign='Right'></e-column>
            <e-column field='ShipCountry' headerText='Ship Country' minWidth='8' width='150'></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

public data?: object[];
@ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

If any one of the e-column widths is undefined, then the particular column will automatically adjust to fill the entire width of the Grid table, even if the autoFit property of Grid is enabled.

AutoFit columns when changing column visibility using column chooser

Use autoFitColumns in the actionComplete event (with requestType: 'columnState') to auto-fit columns after toggling their visibility via column chooser.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActionEventArgs, ColumnChooserService, GridComponent, GridModule, PageService, ResizeService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [GridModule],
  providers: [ResizeService, ToolbarService, ColumnChooserService,PageService],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-grid #grid [dataSource]="data" height="245px" [allowPaging]="true"
    [toolbar]="toolbarItems" (actionComplete)="onActionComplete($event)" [showColumnChooser]= 'true'>
      <e-columns>
        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
        <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
        <e-column field='ShipAddress' headerText='Ship Address' width=120></e-column>
        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
      </e-columns>
    </ejs-grid>
`
})
export class AppComponent implements OnInit {
  public data?: object[];
  @ViewChild('grid')
  public grid?: GridComponent;
  public toolbarItems?: ToolbarItems[];
  ngOnInit(): void {
    this.data = data;
    this.toolbarItems = ['ColumnChooser'];
  }

  public onActionComplete({ requestType }: ActionEventArgs): void {
    if (requestType === 'columnstate') {
      (this.grid as GridComponent).autoFitColumns();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

AutoFit columns for specific rows

AutoFit can adjust columns according to the widest content within a Column width adjustment for a specific range of rows based on their content can be achieved using the autoFitColumns method by passing the second and third parameters (optional) as the start and end index for the columns to fit.

This feature calculates the appropriate width based on the maximum content width of the specified range of rows or the header text width. Subsequently, the maximum width of the content of the specified rows or header text is applied to the entire column of the grid.

The following example demonstrates auto-fitting columns with specific rows. The first parameter is an array containing the specific column field names, such as “Inventor”, “Number of INPADOC patents” and “Main fields of invention” to apply the auto-fit functionality to these columns. The second parameter (start index) is set to “1” and the third parameter (end index) is set to “3”. When specifying these start and end indices, the auto-fit operation is applied only to the range of rows from “1” to “3” for column width adjustment.

import { inventoryData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, ResizeService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' height='315px' [allowResizing]='true' (dataBound)='dataBound()' >
            <e-columns>
                <e-column field='Inventor' headerText='Inventor' textAlign='Right' width=100 clipMode='EllipsisWithTooltip'></e-column>
                <e-column field='NumberofPatentFamilies' headerText='Number of Patent Families' width=120></e-column>
                <e-column field='Country' headerText='Country' width=80></e-column>
                <e-column field='NumberOfINPADOCPatents' headerText='Number of INPADOC patents' width=150></e-column>
                <e-column field='Active' headerText='Active' width=100></e-column>
                <e-column field='Mainfieldsofinvention' headerText='Main fields of invention' width=100></e-column>
            </e-columns>
        </ejs-grid>`
})
export class AppComponent implements OnInit {

public data?: object[];
@ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = inventoryData;
    }
    dataBound() {
        (this.grid as GridComponent).autoFitColumns(['Inventor', 'Number of INPADOC patents', 'Mainfieldsofinvention'], 1, 3);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Lock columns

The Syncfusion® Angular Grid allows locking columns to prevent reordering and automatically position them first. This can be achieved by setting the lockColumn property to true.

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

@Component({
    imports: [ GridModule  ],
    providers: [ReorderService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowReordering]='true' [allowSelection]='false' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' width=100 [lockColumn]='true' [customAttributes]='customAttributes'></e-column>
                    <e-column field='ShipName'width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public customAttributes?: object;

    ngOnInit(): void {
        this.data = data;
        this.customAttributes = {class: 'customcss'};
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<!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>
    #loader {
        color: #008cff;
        font-family:  'Helvetica Neue','calibiri';
        font-size: 16px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
    #reorderMultipleCols {
        text-transform: none;
    }
    #reorderSingleCol {
        text-transform: none;
    }
    .e-grid .e-rowcell.customcss{
        background-color: #ecedee;
    }
    .e-grid .e-headercell.customcss{
        background-color: #ecedee;
    }
</style>
</head>
<body style="margin-top: 125px">
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>
</html>

Show or hide columns

Column visibility in the Syncfusion® Angular Grid can be shown or hidden dynamically through built-in properties and methods. This feature helps customize which columns appear based on specific needs.

At least one column must always remain visible.

Using the visible property

The visible property controls whether columns appear in the Angular Grid. Setting this property to true shows the column, while false hides it.

In the below example, the “Ship City” column is defined with visible property set to false, which will hide the column in the rendered grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChangeEventArgs, ButtonModule,CheckBoxModule,RadioButtonModule,SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule
        ],
    standalone: true,
    selector: 'app-root',
    template: `
    <div>
        <label style="padding: 10px 10px">
        Enable or disable visible property
        </label>
        <ejs-switch id="switch" (change)="change($event)"></ejs-switch>
    </div>
    <ejs-grid #grid [dataSource]='data' height='300px' style="padding: 5px 5px">
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=140></e-column>
            <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120></e-column>
            <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=140></e-column>
            <e-column field='ShipCity' headerText='Ship City' [visible]='false' width=100></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    change(args: ChangeEventArgs) {
        if (args.checked) {
            (this.grid as GridComponent).getColumnByField('ShipCity').visible = true;
        } else {
            (this.grid as GridComponent).getColumnByField('ShipCity').visible = false;
        }
        (this.grid as GridComponent).refreshColumns();
    }

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • Hiding a column using the visible property only affects the UI representation of the Grid. The data for hidden columns still exists in the data source and can be accessed or modified through code.
  • When a column is hidden, its width is not included in the calculation of the total grid width.
  • Columns can be permanently hidden by setting the visible property to false in the column definition, or by removing the column entirely.

Using methods

The showColumns and hideColumns methods provide another way to control column visibility in the Angular Grid. These methods work by specifying either the headerText or the field name of the column.

Based on header text

The showColumns and hideColumns methods provide another way to control column visibility in the Angular Grid. These methods work by specifying either the headerText or the field name of the column.

Here’s an example showing how to show or hide a column based on the HeaderText in the Angular Grid:

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

@Component({
    imports: [GridModule, ButtonModule],
    standalone: true,
    selector: 'app-root',
    template: ` <button id='show' ejs-button cssClass="e-info" (click)='show()'> Show </button>
                <button id='hide' ejs-button cssClass="e-info" (click)='hide()'> Hide </button>
                <ejs-grid #grid [dataSource]='data' [height]='280'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    @ViewChild('grid') public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
    }
    show() {
        (this.grid as any).showColumns('Customer ID', 'headerText'); // show by HeaderText
    }
    hide() {
        (this.grid as any).hideColumns('Customer ID', 'headerText'); // hide by HeaderText
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Based on field

External buttons can control column visibility by field name using the showColumns or hideColumns methods. These methods require an array of column field names as the first parameter and the value field as the second parameter to indicate the operation is based on field names.

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

@Component({
    imports: [GridModule,  ButtonModule ],
    standalone: true,
    selector: 'app-root',
    template: ` <button id='show' ejs-button cssClass="e-info" (click)='show()'> Show </button>
                <button id='hide' ejs-button cssClass="e-info" (click)='hide()'> Hide </button>
                <ejs-grid #grid [dataSource]='data' [height]='280'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                        <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    @ViewChild('grid') public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
    }
    show() {
        (this.grid as GridComponent).showColumns('CustomerID', 'field'); // show by field
    }
    hide() {
        (this.grid as GridComponent).hideColumns('CustomerID', 'field'); // hide by field
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Controlling Grid actions per column

Column-specific actions like filtering, grouping, sorting, resizing, reordering, editing, and searching in the Syncfusion® Angular Grid can be enabled or disabled using these properties:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { FilterService, GridModule, GroupService, PageService, ReorderService, ResizeService, SortService, ToolbarService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [GroupService, PageService, SortService, ReorderService, FilterService, ToolbarService, ResizeService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]='true'[allowSorting]='true' [allowFiltering]='true'  [allowReordering]='true' [allowResizing]='true' [toolbar]="toolbar" [allowGrouping]='true'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='100' [allowGrouping]="false" [allowResizing]= 'false'></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' textAlign='Left' width='150' [allowSorting]="false"></e-column>
                    <e-column field='ShipCity' headerText='Ship City' textAlign='Left' width='150' [allowReordering]="false"></e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' textAlign='Left' width='150'  [allowSearching]="false"></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' width='150' format='C2' [allowFiltering]="false"></e-column>
                </e-columns>
            </ejs-grid>
            `,
})
export class AppComponent implements OnInit {
    public data?: object[];
    public toolbar: any;

    ngOnInit(): void {
        this.data = data;
        this.toolbar = ['Search'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize column styles

Column style customization enables changes to the appearance of columns in the Grid control based on design needs. Properties like font, background color, and other styles can be modified. Grid events, CSS, properties, or methods can be used to customize column styles.

For more information refer to the documentation.

Manipulating columns

This section explains working with columns in the Syncfusion® Angular Grid, including accessing columns, changing column settings, and adding or removing columns using the Grid’s properties, methods, and events.

Accessing Columns

Accessing columns in the Syncfusion® Angular Grid is done using these grid methods:

Method Description Example
getColumns Returns the array of all columns defined in the grid. let columns = grid.getColumns();
getColumnByField Returns the column object that matches the specified field name. let column = grid.getColumnByField('ProductName');
getColumnByUid Returns the column object that matches the specified UID. let column = grid.getColumnByUid();
getVisibleColumns Returns the array of all visible columns. let visibleColumns = grid.getVisibleColumns();
getForeignKeyColumns Returns the array of all foreign key columns. let foreignKeyColumns = grid.getForeignKeyColumns();
getColumnFieldNames Returns an array of field names of all the columns in the Grid. let fieldNames = grid.getColumnFieldNames();

All available column properties can be found in this section.

Updating column definitions

The columns property enables updating column definitions in the Grid. Column properties like headerText, width, visible, and others can be modified in the columns array to change the way columns appear and behave. After making changes, the refreshColumns method applies the updates to the Grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { ColumnModel, FilterService, GridComponent, GridModule, GroupService, PageService, SortService, TextAlign } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule, ButtonModule ],
    providers: [PageService, SortService, FilterService, GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<button ejs-button id="btnId" cssClass="e-info" (click)='updateColumns()'> Update Columns </button>
                <ejs-grid #grid [dataSource]='data'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid') grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
    }
    
     updateColumns(): void {
        const grid = this.grid!;
        const cols = grid.getColumns() as ColumnModel[];
        cols[0].textAlign = 'Center' as TextAlign; // Center/Left/Right/Justify
        cols[0].width = 100; // width is number, not string
        cols[2].visible = false;
        cols[1].customAttributes = { class: 'customcss' };

        grid.refreshColumns();
     }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Adding/Removing Columns

Adding or removing columns dynamically in the Grid component is possible through the columns property, accessible via the Grid instance.

New columns can be added using the push method to add the column object to the columns property. Columns can be removed using the pop method to delete the last column, or the splice method to remove a specific column from the columns array.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { ColumnModel, FilterService, GridComponent, GridModule, GroupService, PageService, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, ButtonModule ],
    providers: [ PageService, SortService, FilterService, GroupService],
    standalone: true,
    selector: 'app-root',
    template: `<button ejs-button id='add' cssClass="e-info" (click)='addColumns()'> Add Column</button>
               <button ejs-button id='delete' cssClass="e-info" (click)='deleteColumns()'> Delete Column</button>
                <ejs-grid #grid [dataSource]='data' [height]='280' >
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=120 ></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    addColumns(): void {
        const grid = this.grid!;
        const cols = grid.columns as ColumnModel[];
        cols.push(
            { field: 'EmployeeID', headerText: 'EmployeeID', width: 120 },
            {
                field: 'OrderDate',
                headerText: 'Order Date',
                width: 120,
                type: 'date',
                format: 'yMd',
            }
        );
        grid.refreshColumns();
    }
    deleteColumns(): void {
        (this.grid as GridComponent).columns.pop();
        (this.grid as GridComponent).refreshColumns();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Refreshing columns

The refreshColumns method of the Syncfusion® Angular Grid can be used to refresh the columns in the grid. This method is useful when grid columns need to be updated dynamically based on user actions or data changes.

this.grid.refreshColumns();

Responsive columns

Column visibility in the Syncfusion® Angular Grid can be toggled based on screen size using the hideAtMedia property. This property accepts valid Media Queries to control when columns appear or hide.

This example shows a Grid with three columns: “Order ID”, “Customer ID”, and “Freight”. The “OrderID” column uses hideAtMedia set to “(min-width: 700px)”, hiding the column when the browser width is “700px” or less.

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

@Component({
    imports: [GridModule],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120 hideAtMedia='(min-width: 700px)'>
                    </e-column> //  column visibility hide when browser screen width less than 700px;
                    <e-column field='CustomerID' headerText='Customer ID' width=140 hideAtMedia='(max-width: 700px)'>
                    </e-column> // column visibility show when browser screen width  500px or less;
                    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C' width=120
                    hideAtMedia='(min-width: 500px)'>
                    </e-column> // column visibility hide when browser screen width less than 500px;
                    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=140>
                    </e-column> // it always shown
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also