How to render React Data Grid with bootstrap theme?

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

Looking for a complete React Data Grid Component overview, including features, pricing, and documentation? Explore the React Data Grid Component page.

Did you find this information helpful?

Yes

Comments (0)

How to render React Data Grid with bootstrap theme?

Access denied