如何在 React 表中制作可点击的列数据? [英] How to make a Column data clickable one in React table?

问题描述

我正在使用 React Table(React Bootstrap Table-2)在页面中显示一个表，并用来自数据库 API 的数据填充它.我想让其中一列中的值显示为链接(hrefs).此特定列仅包含 URL.我想要实现的是，如果我点击每一行的 url(显示报告") - 它应该打开一个带有相应行 ID 的新选项卡.如何在 React Bootstrap Table-2 中实现这一点?

我试过了:

<代码>{数据字段:报告"，text : "显示报告",访问者:链接"，单元格:(e)＝＞{e.value} </a>},

import React, { useState, useEffect } from "react";从./logo.svg"导入标志；导入./App.css"；从axios"导入 axios；从react-bootstrap-table-next"导入 BootstrapTable；从react-bootstrap-table2-paginator"导入分页工厂；从react-bootstrap"导入 * 作为 ReactBootstrap；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 } = 搜索；const getListData = async() =>{尝试 {const data = await axios.get("http://localhost:4000/results");控制台日志(数据)；setList(data.data);设置加载(真)；}赶上(e){控制台日志(e)；}};常量列 = [{ 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 },{数据字段:报告"，text: "显示详细报告",},];useEffect(() => {获取列表数据()；}, []);返回 (<div className="应用程序">{加载?(<ToolkitProvider keyField="name" data={list} columns={columns} search>{(道具)=>(<div><div className="serSec"><h3 className="hdrOne">搜索:</h3><SearchBar {...props.searchProps}/>

<div class="table-responsive"><引导表{...props.baseProps}过滤器={过滤器工厂()}分页={分页工厂()}/>

)}</ToolkitProvider>) : (<ReactBootstrap.Spinner animation="border"/>)}

);};导出默认应用；

解决方案

列数据添加如下:

<代码>{数据字段:报告"，text : "显示报告",,格式化程序:(单元格，行)=><a href={cell}>{单元格}</a>}

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;

解决方案

the columns data add like below:

{
  dataField : "report",
  text : "Show report",,
  formatter: (cell, row) => <a href={cell}> {cell} </a>
}

这篇关于如何在 React 表中制作可点击的列数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！