How to Add href to React-Bootstrap-Table Column Dynamically ?
Last Updated :
19 Oct, 2023
In this article, we are going to learn how to add a href to the react-bootstrap table column dynamically. In this article, we will create a React Bootstrap table and an input form to add data dynamically with a href.
Prerequisites:
Steps to Create React Application And Installing Modules:
Step 1: Create your react-app by using this command
npx create-react-app appdemo
Step 2: Navigate to your project structure using this command.
cd appdemo
Step 3: Install the required modules i.e. react-bootstrap and bootstrap and other modules as per your requirement. To install react-bootstrap and bootstrap use this command
npm install react-bootstrap bootstrap
Package.json:
"name": "appdemo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Step 4: Create your file with extension .jsx or .js and import the required components from react-bootstrap. Here I am importing Bootstrap CSS and Form, Table, Button components from react-bootstrap.
Project Structure
Approach
- In DynamicLinkDemo, we created a form to take input names and IDs with form validations, and when the user enters the data and presses enter, that data will be stored inside a state called inputData with the help of the handleStoredData() function.
- Data will be stored inside the state in the form of an array, and we are using array methods to map the data with a table format for the display of the various rows.
- In each row, the last cell will contain an example link that is created with the help of an anchor tag in HTML, and the target will be “https://example.com/${data.Id}”
Example: This example shows the use of the above-explained appraoch.
Javascript
import React, { useState } from "react" ;
import {
Table,
Form,
Button,
} from "react-bootstrap" ;
import "./DynamicLinkDemo.css" ;
const DynamicLinkDemo = () => {
const [inputData, setInputData] =
useState({ Id: "" , Name: "" });
const [storedData, setStoredData] =
useState([]);
const handleInputData = (e) => {
const { name, value } =
e.target;
setInputData((prev) => ({
...prev,
[name]: value,
}));};
const handleStoredData = (e) => {
const validId =
inputData.Id.trim();
const validName =
inputData.Name.trim();
if (validId !== "" &&
validName !== "" ) {
setStoredData((prev) => [
...prev,
{ ...inputData },
]);
setInputData({
Id: "" ,
Name: "" ,
});}
else {
alert(
"Please enter all the details." );
}};
return (
<div className= "main-container" >
<div className= "form-container" >
<Form>
<Form.Group controlId= "Id" >
<Form.Label>
Id
</Form.Label>
<Form.Control
type= "text"
name= "Id"
value={
inputData.Id}
onChange={
handleInputData}
required />
</Form.Group>
<Form.Group controlId= "Name" >
<Form.Label>
Name
</Form.Label>
<Form.Control
type= "text"
name= "Name"
value={
inputData.Name}
onChange={
handleInputData}
required />
</Form.Group>
<Button
variant= "primary"
onClick={
handleStoredData}
className= "addButton" >
Add
</Button>
</Form>
</div>
<div className= "table-container" >
<Table
striped
bordered
hover>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
{storedData.map(
( data,
index ) => (
<tr
key={
index }>
<td>
{
data.Id}
</td>
<td>
{
data.Name}
</td>
<td>
<a
href={
`https:
Link
</a>
</td>
</tr>))}
</tbody>
</Table>
</div>
</div>
);
};
export default DynamicLinkDemo;
|
Javascript
import React from "react" ;
import DynamicLinkDemo from "./DynamicLinkDemo" ;
import "./App.css" ;
const App = () => {
return (
<div className= "component" >
<DynamicLinkDemo />
</div>
);
};
export default App;
|
Javascript
import React from "react" ;
import ReactDOM from "react-dom" ;
import "bootstrap/dist/css/bootstrap.min.css" ;
import App from "./App" ;
ReactDOM.render(
<App />,
document.getElementById( "root" )
);
|
CSS
.main-container {
display : flex;
justify- content : space-between;
padding : 20px ;
}
.link-class {
color : green ;
text-decoration : none ;
}
.form-container {
width : 45% ;
padding : 20px ;
border : 1px solid #ccc ;
}
.table-container {
width : 45% ;
padding : 20px ;
border : 1px solid #ccc ;
}
.addButton {
margin-top : 20px ;
background-color : green ;
}
@media ( max-width : 768px ) {
.main-container {
flex- direction : column;
}
.form-container,
.table-container {
width : 100% ;
margin-bottom : 20px ;
}
}
|
CSS
.component {
display : flex;
flex- direction : column;
justify- content : center ;
align-items: center ;
height : 100 vh;
}
|
Steps to run the application:
npm start
Output:
Output
Share your thoughts in the comments
Please Login to comment...