How to render React Grid with bootstrap theme?

3 mins read

This article explains how to create an Essential JavaScript 2 Grid sample in React with the 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 the ../node_modules/@syncfusion package folder. These 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 the src/App.tsx file 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 the 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

Comments (0)

How to render React Grid with bootstrap theme?

Access denied