Getting started in TypeScript Data Grid control

22 Jul 20266 minutes to read

This section explains the steps to create a simple Data Grid and demonstrates the basic usage of the Data Grid component using the Essential® JS 2 quickstart seed repository. This seed repository is pre-configured with the Essential® JS 2 package.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. For more information about webpack and its features, refer to the webpack documentation.

Prerequisites

Ensure the following tools are installed on your machine:

Setup for local development

Clone the Essential® JS 2 quickstart application project from GitHub using the following command line scripts.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack
cd ej2-quickstart-webpack

Adding Syncfusion® TypeScript Grids package

Syncfusion® TypeScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® TypeScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

Use the following command to install the @syncfusion/ej2-grids package:

npm install @syncfusion/ej2-grids --save

Then, install the remaining dependent npm packages using the following command:

npm install

Adding CSS reference

Themes for Syncfusion® Data Grid components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/styles/styles.css file:

@import "../../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css";

Adding Data Grid component

Add the Data Grid component in src/app/app.ts file using the following code.

import { Grid } from '@syncfusion/ej2-grids';

// Defines the data to be displayed in the Data Grid.
const data: object[] = [
    { OrderID: 10248, CustomerName: 'Ana Trujillo', OrderDate: new Date(2025, 0, 12), ShipCountry: 'France', Freight: 32.38 },
    { OrderID: 10249, CustomerName: 'Martin Sommer', OrderDate: new Date(2025, 0, 15), ShipCountry: 'Germany', Freight: 11.61 },
    { OrderID: 10250, CustomerName: 'Thomas Hardy', OrderDate: new Date(2025, 1, 5), ShipCountry: 'Brazil', Freight: 65.83 },
    { OrderID: 10251, CustomerName: 'Elizabeth Lincoln', OrderDate: new Date(2025, 1, 18), ShipCountry: 'France', Freight: 41.34 },
    { OrderID: 10252, CustomerName: 'Victoria Ashworth', OrderDate: new Date(2025, 2, 10), ShipCountry: 'Belgium', Freight: 51.30 },
    { OrderID: 10253, CustomerName: 'Martine Rance', OrderDate: new Date(2025, 2, 22), ShipCountry: 'Brazil', Freight: 58.17 },
]

let grid: Grid = new Grid({
    dataSource: data,
    columns: [
        { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', type: 'number', isPrimaryKey: true },
        { field: 'CustomerName', headerText: 'Customer Name', width: 140, type: 'string' },
        { field: 'OrderDate', headerText: 'Order Date', width: 140, format: 'yMd', textAlign: 'Right' },
        { field: 'Freight', headerText: 'Freight', width: 120, textAlign: 'Right', format: 'C' },
        { field: 'ShipCountry', headerText: 'Ship Country', width: 140, type: 'string' },
    ]
});

grid.appendTo('#Grid');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <!-- Syncfusion styling reference -->
    <link href="/styles/styles.css" rel="stylesheet" />
</head>

<body>
    <div>
        <!--HTML Data Grid element, which is going to render as Essential JS 2 Data Grid-->
        <div id="Grid"></div>
    </div>
</body>

</html>
@import '../../node_modules/@syncfusion/ej2-material3-theme/styles/grid/index.css';

Run the application

The npm start command compiles the TypeScript source files and starts the webpack development server. Run the following command:

npm start

Registering Syncfusion license

The Syncfusion® Data Grid requires a valid license key to be registered in the application. To prevent license validation warnings, refer to the Syncfusion licensing documentation.

Troubleshooting

Grid styles are not applied: Ensure that the required Syncfusion theme package is installed and the theme CSS is imported correctly in the src/styles/styles.css file.

Trial license warning message: Register your Syncfusion license key before initializing any Syncfusion® control. Refer to the Registering a license key section.

See also