Articles in this section
Category / Section

How to render React Grid with bootstrap theme?

1 min read

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

React Grid with bootstrap theme

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart836176618.zip

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied