React-Bootstrap Tables Component

23 Sep, 2021
React-Bootstrap is a front-end framework that was designed keeping react in mind. Bootstrap was re-built and revamped for React, hence it is known as React-Bootstrap. 
Tables in react-bootstrap come with predefined style classes which are both responsive and reliable.
Table props:
bordered: Adds borders on all sides of the tables and cells.
borderless: Removes borders on all sides including table header.
variant: It is used to invert the colors of the table from dark to light and vice versa.
size: It is used to set the size of the table. When we set it as ‘sm’ the cell padding is reduced by half.
bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required modules using the following command:
npm install react-bootstrap bootstrap
Step 4: Add the below line in index.js file:
import 'bootstrap/dist/css/bootstrap.css';
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Filename: App.js
Javascript
import React from 'react';import Table from 'react-bootstrap/Table'   export default function TableExample() {  return (    <> <h3>Default Variant Small Size Theme Table</h3> <Table stripped bordered hover size="sm">  <thead>    <tr>      <th width="170">Student Name</th>      <th width="170">Reg.no</th>      <th width="170">Course</th>      <th width="870">City Name</th>      <th width="1950">Percentage</th>     </tr>  </thead>  <tbody>    <tr>      <td>Rakesh</td>      <td>1123</td>      <td>CSE</td>      <td>Mumbai</td>      <td>86.9%</td>     </tr>    <tr>      <td>Jackson</td>      <td>1124</td>      <td>ECE</td>      <td>Hyderabad</td>      <td>72.4%</td>     </tr>    <tr>      <td>Keshav</td>      <td>1124</td>      <td>CSE</td>      <td>Chennai</td>      <td>88%</td>     </tr>    <tr>      <td>Neilesh Jain</td>      <td>1125</td>      <td>EEE</td>      <td>Gwalior</td>      <td>66.9%</td>     </tr>    <tr>      <td>Akbar sheikh</td>      <td>1126</td>      <td>Mechanical</td>      <td>Indore</td>      <td>96.5%</td>     </tr>    <tr>      <td>Sarita</td>      <td>1127</td>      <td>CSE</td>      <td>Delhi</td>      <td>96.9%</td>     </tr>   </tbody></Table>  <h3>Dark Variant Small Size Table</h3> <Table stripped bordered hover variant="dark" size="sm">  <thead>    <tr>      <th width="170">Student Name</th>      <th width="170">Reg.no</th>      <th width="170">Course</th>      <th width="870">City Name</th>      <th width="1950">Percentage</th>     </tr>  </thead>  <tbody>    <tr>      <td>Rakesh</td>      <td>1123</td>      <td>CSE</td>      <td>Mumbai</td>      <td>86.9%</td>     </tr>    <tr>      <td>Jackson</td>      <td>1124</td>      <td>ECE</td>      <td>Hyderabad</td>      <td>72.4%</td>     </tr>    <tr>      <td>Keshav</td>      <td>1124</td>      <td>CSE</td>      <td>Chennai</td>      <td>88%</td>     </tr>    <tr>      <td>Neilesh Jain</td>      <td>1125</td>      <td>EEE</td>      <td>Gwalior</td>      <td>66.9%</td>     </tr>    <tr>      <td>Akbar sheikh</td>      <td>1126</td>      <td>Mechanical</td>      <td>Indore</td>      <td>96.5%</td>     </tr>    <tr>      <td>Sarita</td>      <td>1127</td>      <td>CSE</td>      <td>Delhi</td>      <td>96.9%</td>     </tr>   </tbody></Table>    </>  );}
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Reference: https://react-bootstrap.netlify.app/components/table/#tables
akshaysingh98088
Picked
React-Bootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.