ReactJS - Bootstrap - Table



After engendering the React app, the best way to install Bootstrap is via the npm package. To install Bootstrap, navigate to the React app folder, and run the following command.

$ npm install react-bootstrap bootstrap --save

Example: Dark Table

Use the striped, bordered, and hover props to customize the table.

import React from 'react';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
render() {
return (
<div>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sibin</td>
<td>sibin@gmail.com</td>
<td>Noob developer</td>
</tr>
<tr>
<td>2</td>
<td>Sabin</td>
<td>sabin@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>3</td>
<td>Safin</td>
<td>safin@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>4</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>5</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>6</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>7</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>8</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>9</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
</tbody>
</Table>

</div>
);
}

}
export default App;

Example: Light Table


import React from 'react';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
render() {
return (
<div>
<Table striped bordered hover >
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Sibin</td>
<td>sibin@gmail.com</td>
<td>Noob developer</td>
</tr>
<tr>
<td>2</td>
<td>Sabin</td>
<td>sabin@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>3</td>
<td>Safin</td>
<td>safin@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>4</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>5</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>6</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>7</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>8</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
<tr>
<td>9</td>
<td>Appos</td>
<td>appos@gmail.com</td>
<td>pro developer</td>
</tr>
</tbody>
</Table>

</div>
);
}

}
export default App;

Popular posts from this blog

Spring boot video streaming example-HTML5

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

DataTable-Pagination example with Spring boot, jQuery and ajax

Registration and Login with Spring Boot + Spring Security + Thymeleaf

Node JS mini projects with source code - free download

Spring boot web project free download:User Registration System

Spring Boot + Apache Commons Export Data to CSV Example