ReactJS - Bootstrap - Table

Bootstrap become the most popular CSS framework. 

Let us create a new React app https://www.knowledgefactory.net/2020/12/react-js-setup-installation-and-first_27.html

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;

Comments