Getting started in EJ2 TypeScript Spreadsheet control
18 Nov 20187 minutes to read
This section explains the steps to create a simple Spreadsheet component using Essential® JS 2quickstart seed repository.
This application is integrated with the
webpack.config.jsconfiguration and uses the latest version of thewebpack-cli. It requires nodev14.15.0or higher. For more information about webpack and its features, refer to thewebpack documentation.
Dependencies
The following list of dependencies are required to use the Spreadsheet component in your application:
|--@syncfusion/ej2-spreadsheet|--@syncfusion/ej2-base|--@syncfusion/ej2-dropdowns|--@syncfusion/ej2-navigations|--@syncfusion/ej2-gridsSet up development environment
Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project fromGitHub.
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstartAfter cloning the application in theej2-quickstart folder, run the following command line to navigate to theej2-quickstart folder.
cd ej2-quickstartAdd Syncfusion® JavaScript packages
Syncfusion® JavaScript (Essential® JS 2) packages are available on thenpmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single@syncfusion/ej2 package or individual packages for each control.
The quickstart application is preconfigured with the dependent@syncfusion/ej2 package in the~/package.json file. Use the following command to install the dependent npm packages from the command prompt.
npm installImport the Syncfusion® CSS styles
Syncfusion® JavaScript controls come withbuilt-in themes, which are available in the installed packages. It’s easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes.
The quickstart application is preconfigured to use theMaterial theme in the~/src/styles/styles.css file, as shown below:
@import"../../node_modules/@syncfusion/ej2/material.css";You can check out thethemes section to know more about built-in themes and CSS reference for individual controls.
Add Spreadsheet component
Add the HTMLdiv element with ID attribute aselement in yourindex.html file.
[src/index.html]
<!DOCTYPE html><htmllang="en"><head><title>Essential JS 2</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=no"/><metaname="description"content="Essential JS 2"/><metaname="author"content="Syncfusion"/><linkrel="shortcut icon"href="resources/favicon.ico"/><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/></head><body><!--Element which will render as Spreadsheet--><divid="element"></div></body></html>Now, import the Spreadsheet component into yourapp.ts to instantiate a spreadsheet and append the spreadsheet instance to the#element.
[src/app/app.ts]
import{Spreadsheet}from'@syncfusion/ej2-spreadsheet';// Initialize Spreadsheet componentletspreadsheet:Spreadsheet=newSpreadsheet();// Render initialized Spreadsheetspreadsheet.appendTo('#element');Run the application
Thequickstart project is configured to compile and run the application in the browser. Use the following command to run the application.
npm startThe following example shows a basic Spreadsheet component.
import{Spreadsheet}from'@syncfusion/ej2-spreadsheet';// Initialize the Spreadsheet componentletspreadsheet:Spreadsheet=newSpreadsheet();// Render initialized Spreadsheetspreadsheet.appendTo('#element');<!DOCTYPE html><htmllang="en"><head><title>EJ2 SpreadSheet</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript Spreadsheet Control"/><metaname="author"content="Syncfusion"/><linkrel="shortcut icon"href="resources/favicon.ico"/><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-inputs/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-splitbuttons/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-lists/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-navigations/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-popups/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-dropdowns/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-grids/styles/material.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-spreadsheet/styles/material.css"rel="stylesheet"/><linkhref="styles.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script><scriptsrc="system.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><!--Element which is going to render--><divid='loader'>Loading....</div><divid='container'><divid="element"></div></div></body></html>You can refer to ourJavaScript Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore ourJavaScript Spreadsheet example that shows you how present and manipulate data, including editing, formulas, formatting, importing, and exporting.
See Also
[8]ページ先頭