6

I'm using React Table (React Bootstrap Table-2) to display a table in a page and populate it with data from an database API. I want to make the values displayed in one of the columns as links( hrefs). This particular column contains only URLs. What i'm trying to achieve is that, If i click on the url("show report") of each row - it should open a new tab with the respective row id. How to implement this in React Bootstrap Table- 2?

I tried:

{
datafield : "report",
text : "Show report",
accessor : "link",
Cell : (e) => <a href={e.value}> {e.value} </a>
},


import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";

const App = () => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { SearchBar } = Search;

  const getListData = async () => {
    try {
      const data = await axios.get("http://localhost:4000/results");
      console.log(data);
      setList(data.data);
      setLoading(true);
    } catch (e) {
      console.log(e);
    }
  };

  const columns = [
    { dataField: "dept_name", text: "DepartMent" },
    { dataField: "Tr_type", text: "Transmission Type", sort: true },
    { dataField: "E_type", text: "Entry Type", sort: true },
    { dataField: "Msg_des", text: "Message Description", sort: true },
    { dataField: "cr_date", text: "Created Date", sort: true },
    { dataField: "ch", text: "Channel", sort: true },
    { dataField: "Del", text: "Delivered", sort: true },
    { dataField: "fl", text: "Failed", sort: true },
    {
      dataField: "report",
      text: "Show Detailed Report",
    },
  ];
  
  useEffect(() => {
    getListData();
  }, []);

  return (
    <div className="App">
      {loading ? (
        <ToolkitProvider keyField="name" data={list} columns={columns} search>
          {(props) => (
            <div>
              <div className="serSec">
                <h3 className="hdrOne">Search:</h3>
                <SearchBar {...props.searchProps} />
              </div>

              <div class="table-responsive">
                <BootstrapTable
                  {...props.baseProps}
                  filter={filterFactory()}
                  pagination={paginationFactory()}
                  
                />
              </div>
            </div>
          )}
        </ToolkitProvider>
      ) : (
        <ReactBootstrap.Spinner animation="border" />
      )}
    </div>
  );
};

export default App;
Thomas Martin
  • 666
  • 2
  • 6
  • 26

1 Answers1

8

the columns data add like below:

{
  dataField : "report",
  text : "Show report",,
  formatter: (cell, row) => <a href={cell}> {cell} </a>
}
Winky
  • 506
  • 2
  • 7
  • hey thanks for the reply. thanks the formatter made the desired column values as links now how can i pass the respective row id with each click on 'show report'. What i'm trying to achieve is that, If i click on the show report of each row - it should open a new tab with the respective row id. – Thomas Martin Aug 05 '20 at 13:35
  • 1
    `row` will be an object, you will get id in one of the keys or nested inside another key – kiranvj Aug 05 '20 at 13:37
  • As @kiranvj said, and formatter function needs to change ,add i.e. row.id (formatter: (cell, row) => {cell} ) – Winky Aug 05 '20 at 13:45
  • here is the [document](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Work%20on%20Columns&selectedStory=Column%20Formatter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) – Winky Aug 05 '20 at 13:48