Kunal Kumar's Blog

Hi Friends, Extending my previous post to enable the application to show the dropdown on your page. To show the dropdown on our page we are going to use the bootstrap library of ReactJS. To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window: npm install react-bootstrap --save Then you have to import this library in your code as follows: import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; import NavDropdown from 'react-bootstrap/lib/NavDropdown'; import MenuItem from 'react-bootstrap/lib/MenuItem'; Once it is imported you can add the dropdown in your component class as shown below: <div><Nav bsStyle="tabs" activeKey={this.state.activePage} onSelect={this.handleSelect}>             <NavItem eventKey={1} >Tab1</NavItem>   ...

Hi Friends, As I have mentioned in this post that the tabs in React application can be created in two ways. 1. By using react-tabs library 2. By using react-bootstrap Since we have already see the first method in  this post so we will see now the second method i.e. by using  react-bootstrap. To use the bootstrap feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window: npm install react-bootstrap --save Then you have to import this library in your code as follows: import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; Once it is imported you can write you component class as shown below: import React from "react"; import ReactDOM from "react-dom"; import Nav from 'react-bootstrap/lib/Nav'; import NavItem from 'react-bootstrap/lib/NavItem'; var TabApp = React.createClass({  getIniti...

Hi Friends, In this post I am going to show you how you can create the tabs in your ReactJS application. To create the ReactJS tab we need to install all the required library for it. Tabs in ReactJS application can be created in two ways: 1. By using react-tabs library 2. By using react-bootstrap In this blog we will see how we can create the tab using react-tabs library. In the next post we will see how we can create the tab using react-bootstrap. To create the ReactJS tab using react-tabs, we need to install it first. To install this we need to run the following command : npm install react-tabs --save Once it will be installed, you need to import this in your application as follows:   import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; Once it is imported you can write you component class as shown below: import React from "react"; import ReactDOM from "react-dom"; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs...

Hi All, In this blog I am going to show you how you can create the pagination in ReactJS fixed data table. The pagination component comes with built-in styles. HTML layout is compatible with bootstrap pagination stylesheets. To use the pagination feature given by ReactJS, we need to install the library related to this.  To install it we need to run the following command in command prompt window: npm install react-bootstrap --save Then you have to import this library in your code as follows: import {Pagination} from 'react-bootstrap'; Then you have to reference the  bootstrap.min.css in your html file as follows:  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">  Once all the above thing is done we are good to go for the rendering our pagination component component.  The pagination component will look like as below: In my example I have integrated this pagination compo...