How to render React Grid with bootstrap theme?
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
