How to Add href to React-Bootstrap-Table Column Dynamically ?

0 0 3 minutes read

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

// DynamicLinkDemo.jsx 
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://example.com/${data.Id}`}> 
                                            Link 
                                        </a> 
                                    </td> 
                                </tr>))} 
                    </tbody> 
                </Table> 
            </div> 
        </div> 
    ); 
}; 
  
export default DynamicLinkDemo;

Javascript

// App.js 
import React from "react"; 
import DynamicLinkDemo from "./DynamicLinkDemo"; 
import "./App.css"; 
const App = () => { 
    return ( 
        <div className="component"> 
            <DynamicLinkDemo /> 
        </div> 
    ); 
}; 
export default App;

Javascript

// Index.js 
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

/* DynamicLinkDemo.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

/* App.css */
.component { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
}

Steps to run the application:

npm start

Output:

Output

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!