We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to render React Grid with bootstrap theme?

Platform: React - EJ 2 |
Control: Grid

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

 

2X faster development

The ultimate React UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile