Columns in Angular Grid Component

17 Sep 202524 minutes to read

In Syncfusion Grid, columns are essential for organizing and presenting data. Columns determine which data fields are shown, control their formatting and styling, and enable interactions such as sorting, filtering, grouping, and editing. Column configuration directly impacts the usability and appearance of the grid.

Column types

The Syncfusion Grid component lets you specify a column’s data type using the columns.type property. This property determines the format applied to the column, such as number or date formatting.

Supported column types:

  • string: Binds string data. This is the default type if type is not specified.
  • number: Binds numeric data. Supports number formatting.
  • boolean: Binds boolean data. Can display as text or a checkbox.
  • date: Binds date values. Supports date formatting.
  • datetime: Binds combined date and time values. Supports date/time formatting.

The checkbox visual in a column is not a separate column type but a rendering mode. You can use type: 'boolean' in combination with the displayAsCheckBox property to display boolean values as checkboxes.

You can explicitly set column types using the type property. For example:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'


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

@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

  1. Use the boolean column type when you want to bind boolean values from your datasource and/or edit boolean property values from your type.
  2. Use the checkbox column type when you want to enable selection/deselection of the whole row.
  3. When the grid column type is a checkbox, the selection type of the grid selectionSettings will be multiple. This is the default behavior.
  4. If you have more than one column with the column type as a checkbox, the grid will automatically enable the other column’s checkbox when selecting one column checkbox.

For more details, see Checkbox.

Column Width

Adjust column width in the Grid using the width property of a column definition. Width can be set in pixels, percentage, or as 'auto' for automatic sizing.

  1. Grid column widths are distributed based on the sum of declared widths. For instance, four columns in an 800 pixel–wide grid default to 200 pixels each if widths are unspecified.
  2. Specifying widths for some columns makes the grid allocate remaining space among columns without explicit widths.
  3. Percentage-based widths ensure columns are responsive to the grid container’s size.
  4. Manual column resizing enforces a minimum width (10 pixels by default) to maintain readability, unless otherwise specified.
  5. If combined column width exceeds the grid’s width, a horizontal scrollbar appears.
  6. When columns are hidden (for example, via the column chooser), their width is excluded, and remaining columns expand to fill space.
  7. If the parent container has a fixed width, the grid fills it. Otherwise, grid width adjusts dynamically to available space.

Supported types for column width:

  1. Auto: Width is determined automatically based on cell content. Excess content is truncated with ellipsis (...). Example: 
    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='auto'></e-column>
  2. Percentage: Width is a percentage of the total grid width, responsive to container resizing. Example: 
    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='25%'></e-column>
  3. Pixel: Width is a fixed pixel value. Example: 
    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='100'></e-column>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'



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

@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 enables customization of data display within grid columns. Use the columns.format property for number or date formatting, supporting both format strings and format options objects.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'



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

@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.
  • Format strings vary based on column data type.
  • The format property also accepts a formatting options object for advanced customization.
  • Ensure the format string or options object matches the column’s data type.

Number formatting

Customize numeric values using standard or custom numeric format strings in the columns.format property.

Format Description Remarks
N Denotes numeric type. The numeric format is followed by integer value as N2, N3. etc which denotes the number of precision to be allowed.
C Denotes currency type. The currency format is followed by integer value as C2, C3. etc which denotes the number of precision to be allowed.
P Denotes percentage type The percentage format expects the input value to be in the range of 0 to 1. For example the cell value 0.2 is formatted as 20%. The percentage format is followed by integer value as P2, P3. etc which denotes the number of precision to be allowed.

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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
@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 more information on number formatting, see the Number Formatting section.

Date formatting

Display date values using standard or custom date format strings through the format property. Built-in format types include “d”, “D”, “yMd”, or customize with an options object:

Format object Sample 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'



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

@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.

Date column formatting with 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService, PageService } from '@syncfusion/ej2-angular-grids'



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

@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 Grid provide a way to customize the appearance of column values using HTML templates. In addition to HTML markup, you can also use number formatting to format the value displayed in a template column. To format values in a column template, you can use Angular pipes and the format property. In this example, we are using the date pipe to format the OrderDate value as a date in the format ‘dd/MMM/yyyy’.

 <e-column field='OrderDate' headerText='Order Date' textAlign='Right' width=120>
   <ng-template #template let-data>
     
   </ng-template>
 </e-column>
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    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));

You can use other Angular pipes, such as currency, decimal, percent, etc., to format other types of values in the column template based on your requirements.

Custom formatting

Apply custom format objects to numerical or date columns via the format property. Define formatting options objects per Angular’s Internationalization guidelines for advanced scenarios.

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 ‘OrderDate’ 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'

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

@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));

Learn more about custom date formatting and custom number formatting.

Align the text of content

Align cell text using the textAlign column property. Values include:

  • Left (default): Aligns text to the left.
  • Center: Centers content.
  • Right: Aligns right.
  • Justify: Stretches text for justified alignment.

Example using the textAlign property:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'

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

@Component({
imports: [
        
        GridModule,
        DropDownListModule
    ],

standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
        <label style="padding: 30px 17px 0 0;">Align the text for columns :</label>
        <ejs-dropdownlist  style="padding: 26px 0 0 0" index="0" width="100" [dataSource]="alignmentData" (change) ="changeAlignment($event)"></ejs-dropdownlist>
   </div>
   <ejs-grid #grid [dataSource]='data' height='315px'  style="padding-top:20px">
        <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 {
        (this.grid as GridComponent).columns.forEach((col: Column) => {
            col.textAlign = args.value as string;
        });
        (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 allows you to render boolean values as checkboxes in columns. This can be achieved by using the displayAsCheckBox property, which is available in the columns. This property is useful when you have a boolean column in your Grid and you want to display the values as checkboxes instead of the default text representation of true or false.

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'



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

@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.

Prevent rendering checkbox for blank rows

Hide a checkbox when row data is blank, even if displayAsCheckBox is enabled. Use the rowDataBound event to detect blank rows and clear the cell content.

Example implementation:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { RowDataBoundEventArgs, GridComponent, Column } 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

AutoFit automatically adjusts column width to match the widest cell’s content. Double-click the column header’s resizer symbol to use this feature. Set allowResizing to true and inject ResizeService.

Resizing a column to fit its content using AutoFit method

Invoke autoFitColumns to auto-size specific columns. Call autoFitColumns in the dataBound event for initial rendering.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ResizeService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } 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 autofit all columns.

AutoFit columns with empty space

Set the autoFit property to true so columns only use the width defined in column declarations. White space remains if total column width is less than the grid’s width.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ResizeService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } 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 column’s width is undefined, that column expands to fill the entire grid width, even with autoFit 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ResizeService, ToolbarService, ColumnChooserService,PageService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ActionEventArgs, GridComponent, ToolbarItems } 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="350px" [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 specific row range by sending start and end index parameters to autoFitColumns.

This feature will calculate 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 will be applied to the entire column of the grid.

Here is an example of how to autofit 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 is passed to apply the autofit functionality to these columns. After, the second parameter are start index is set to 1 and third parameter are end index is set to 3. When specifying these start and end index, the autofit operation is applied only to the range of rows from 1 to 3 for column width adjustment.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ResizeService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { inventoryData } from './datasource';
import { GridComponent } 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));

Locked columns

Lock columns to prevent reordering and keep them positioned at the left of the grid. Set column.lockColumn to true on the column.

Example:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ReorderService } from '@syncfusion/ej2-angular-grids'



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

@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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body style="margin-top: 125px">
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>
</html>

Show or hide columns

The Syncfusion Grid control allows you to show or hide columns dynamically by using property or methods available in the grid. This feature can be useful when you want to customize the visibility of columns in the Grid based on the requirements.

At least one column must always remain visible.

Using the visible property

You can show or hide columns in the Angular Grid using the visible property of each column. By setting the visible property to true or false, you can control whether the column should be visible or hidden in the grid. Here’s an example of how to show or hide a column in the Angular Grid using the visible property:

Example: Toggling the visible property (using a Switch Button). Call refreshColumns to update the UI.

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

@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='315px' style="padding: 10px 10px">
        <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 the hidden column will still be available in the underlying data source, and can be accessed or modified programmatically.
  • When a column is hidden, its width is not included in the calculation of the total grid width.
  • To hide a column permanently, you can set its visible property to false in the column definition, or remove the column definition altogether.

Using methods

Show or hide columns at runtime using showColumns and hideColumns. Identify columns by either headerText or field.

Based on header text

You can dynamically show or hide columns in the Grid based on the header text by invoking the showColumns or hideColumns methods. These methods take an array of column header texts as the first parameter, and the value headerText as the second parameter to specify that you are showing or hiding columns based on the header text.

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } 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

You can dynamically show or hide columns in the Grid using external buttons based on the field by invoking the showColumns or hideColumns methods. These methods take an array of column fields as the first parameter, and the value field as the second parameter to specify that you are showing or hiding columns based on the field.

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } 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

Enable or disable column-specific actions using these column properties:

Example:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService, SortService, FilterService, GroupService, ReorderService, ToolbarService, ResizeService, } from '@syncfusion/ej2-angular-grids'

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

@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

Customize grid column appearance through events, CSS, or API methods. This includes modifying font, background color, and other visual styles.

See the Customize Cell Styles documentation for details.

Manipulating columns

Syncfusion Grid for Angular enables runtime access, update, addition, or removal of columns using its API methods.

Accessing Columns

Use these methods on the grid instance:

  • getColumns: Returns an array of all column definitions. 
      let columns = this.grid.getColumns();
  • getColumnByField: Returns the column object by field name. 
      let column = this.grid.getColumnByField('ProductName');
  • getColumnByUid: Returns a column by unique ID. 
      let column = this.grid.getColumnByUid();
  • getVisibleColumns: Returns only currently visible columns. 
      let visibleColumns = this.grid.getVisibleColumns();
  • getForeignKeyColumns: Returns foreign key columns. 
      let foreignKeyColumns = this.grid.getForeignKeyColumns();
  • getColumnFieldNames: Returns all field names as an array. 
      let fieldNames = this.grid.getColumnFieldNames();

For a full API reference, see the Grid Column API section.

Updating column definitions

Modify any column configuration object in the columns array and call refreshColumns to apply changes.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'



import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent } 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 {
      // Modifying column properties
      (this.grid as GridComponent).columns[0].textAlign = 'Center';
      (this.grid as GridComponent).columns[0].width = '100';
      (this.grid as GridComponent).columns[2].visible = false;
      (this.grid as GridComponent).columns[1].customAttributes = { class: 'customcss' };
      // Applying changes to the grid
      (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));

Adding/Removing Columns

The Grid component allows you to dynamically add or remove columns to and from the grid using the columns property, which can be accessed through the instance of the Grid.

To add a new column to the Grid, you can directly push the new column object to the columns property.To remove a column from the Grid, you can use the pop method, which removes the last element from the columns array of the Grid. Alternatively, you can use the splice method to remove a specific column from the columns array.

Here’s an example of how you can add and remove a column from the grid:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { PageService, SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



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


@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 {
        var newColumns = [
            { field: 'EmployeeID', headerText: 'EmployeeID', width: 120 },
            { field: 'OrderDate', headerText: 'Order Date', width: 120, format: 'yMd' },
          ];
          newColumns.forEach((col) => {
            (this.grid as GridComponent).columns.push(col as Column);
          });
          (this.grid as GridComponent).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));

How to refresh columns

Call refreshColumns after updating, adding, or removing columns to re-render grid columns:

this.grid.refreshColumns();

Responsive columns

Toggle column visibility responsively using the hideAtMedia property. This property accepts standard Media Queries.

In this example, the data in the Grid is displayed with three columns: Order ID, Customer ID, and Freight. We have set the hideAtMedia property of the OrderID column to (min-width: 700px) which means that this column will be hidden when the browser screen width is less than or equal to 700px.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'



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

@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