|
This Document explains how to create Essential JavaScript 2 Grid sample in React with bootstrap theme. Setting up new React project You can use create-react-app to setup the applications. To install create-react-app run the following command. npm install -g create-react-app
Use the below commands to create a basic react sample. create-react-app quickstart --template typescript cd quickstart npm install
Adding Syncfusion Grid packages All the available Essential JS 2 packages are published in npmjs.com public registry. To install Grid component, use the following command npm install @syncfusion/ej2-react-grids –save
Adding CSS reference The following CSS files are available in ../node_modules/@syncfusion package folder. This can be added as reference in src/index.css. @import '../node_modules/@syncfusion/ej2-base/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-calendars/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css'; @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap.css'; @import "../node_modules/@syncfusion/ej2-react-grids/styles/bootstrap.css";
Adding Grid component Now, you can start adding the Grid component in src/App.tsx file like as follows. import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { orderdata } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <GridComponent dataSource={orderdata} allowPaging={true}>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Page]} />
</GridComponent>
}
};
Running the application The create-react-app will pre-configure the project to compile and run the application in browser. Use the following command to run the application. npm start The output will appear as follows
Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart836176618.zip
|
2X faster development
The ultimate React UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
