Syncfusion AI Assistant

How can I help you?

Getting Started with TypeScript Spreadsheet control

18 May 20264 minutes to read

This section explains how to create a simple TypeScript application and add the Syncfusion® TypeScript Spreadsheet control with the minimum required setup.

Prerequisites

To get started, ensure the following software is installed on your machine:

Create a TypeScript application

Create a simple TypeScript application using the Essential® JS 2 quickstart seed repository.

NOTE

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.

Step 1: Open the command prompt from the required directory and clone the quickstart project from GitHub.

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

Step 2: Navigate to the ej2-quickstart folder.

cd ej2-quickstart

Step 3: By default, the ej2‑quickstart repository is preconfigured with the @syncfusion/ej2 package in ~/package.json. This package installs all Syncfusion Essential JS 2 components packages, including the Spreadsheet and other EJ2 controls.

To install only the Spreadsheet component, replace the dependency with @syncfusion/ej2-spreadsheet, as shown below:

"dependencies": {
  "@syncfusion/ej2-spreadsheet": "*"
}

Step 4: Install the dependent npm packages.

npm install

Add CSS references

Add the following Spreadsheet and dependent component style references.

@import '../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../../node_modules/@syncfusion/ej2-spreadsheet/styles/tailwind3.css';

NOTE

Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in a TypeScript project.

Add the Syncfusion® Spreadsheet control to the application

Add a container element for the Spreadsheet control in the index.html file and then initialize the control in the app.ts file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Syncfusion TypeScript Spreadsheet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Syncfusion TypeScript Spreadsheet" />
    <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" />
</head>
<body>
    <!-- Element which will render as Spreadsheet -->
    <div id="element"></div>
</body>
</html>
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

// Initialize the Spreadsheet component
const spreadsheet: Spreadsheet = new Spreadsheet({
    openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
    saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
});

// Render initialized Spreadsheet
spreadsheet.appendTo('#element');

NOTE

The openUrl and saveUrl properties are used to connect the Spreadsheet control to a server-side service for Excel import and export operations. For development and production use, we recommend configuring your own local or hosted service instead of relying on demo endpoints. For more information, refer to the link.

Run the application

The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.

npm start

The image below shows how the spreadsheet is rendered in the browser:

Rendered spreadsheet in browser

You can also explore the Spreadsheet interactively using the live sample below.

NOTE

View Sample in GitHub.

See also