Getting started in TypeScript DataGrid control

8 Jul 20266 minutes to read

This section explains the steps to create a simple DataGrid and demonstrates the basic usage of the DataGrid 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. It requires node v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

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 dependent npm packages from the command prompt.

npm install

Adding CSS reference

You can add the CSS files required for the Syncfusion TypeScript DataGrid component using one of the following methods.

Option 1: Add CSS references from a theme package

Themes for Syncfusion® DataGrid 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";

Option 2: Add CSS references from component packages

After installing the DataGrid package, the required CSS files are available in the corresponding Syncfusion packages under the node_modules/@syncfusion directory. Add the following CSS references to the src/styles/styles.css file:

@import '../../node_modules/@syncfusion/ej2-base/styles/material3.css';  
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material3.css';  
@import '../../node_modules/@syncfusion/ej2-calendars/styles/material3.css';  
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';  
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material3.css';  
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../../node_modules/@syncfusion/ej2-notifications/styles/material3.css';
@import "../../node_modules/@syncfusion/ej2-react-grids/styles/material3.css";

Adding DataGrid component

Add the DataGrid component in app.ts file using the following code.

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

// Defines the data to be displayed in the DataGrid.
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 DataGrid element, which is going to render as Essential JS 2 DataGrid-->
        <div id="Grid"></div>
    </div>
</body>

</html>
@import '../../node_modules/@syncfusion/ej2/fluent2.css';

Run the application

npm start

See also