标签: react-table

我正在使用 react-table，这是我的表：

<ReactTable
          data={this.props.data}
          columns={[
            {
              Header: "id",
              accessor: "id",
              width: 50
            },
            {
              Header: "Name",
              accessor: "name",
              width: 200
            },
            {
              Header: "",
              id: "id",
              Cell: ({ row }) => (
                <button onClick={e => this.handleButtonClick(e, row)}>
                  Click Me
                </button>
              )
            }
          ]}
          defaultPageSize={10}
          showPaginationBottom
       />

按钮点击后的动作

handleButtonClick = (e, row) => {
    this.setState({ visible: true});
    return 
       <Modal 
          title="title" 
          visible={this.state.visible}
        >
        // show data here
    </Modal>
  }; 

所以这就是我现在的工作方式，但没有显示模态。谁能帮我这个？我究竟做错了什么？

我结合了有关调整大小和列排序的最基本示例。现在，如果我单击下面示例中的调整大小对象（蓝色条），该列将同时调整大小和排序。我想在调整大小时抑制排序。

参见：106号线

  {/* Use column.getResizerProps to hook up the events correctly */}
  <div
  {...column.getResizerProps()}
  className={`resizer ${column.isResizing ? "isResizing" : ""}`}
  />

https://codesandbox.io/s/react-tablev2-stt1z

我怀疑我需要以某种方式重写 OnClick 事件处理程序来调用“stopPropagation”，同时仍然调用原始处理程序。有没有一种简单的方法可以做到这一点？如果不是的话，该如何处理？

我对 js/react 很陌生

我之前使用过 show 属性来显示/隐藏表中的列，并且使用 react-table v7 运行良好。但是，最近我无法让它继续工作，因为我进行了大量更改，而且我的表非常复杂，我不确定是什么原因造成的，可能也是 react-table 本身的更新（7.0.0- beta.12 到 7.0.0-rc.5）。

无论如何，现在我什至无法让最基本的展示示例起作用：

const columns = React.useMemo(
() => [
  {
    Header: "Info",
    columns: [
      {
        Header: "Age",
        accessor: "age",
        show: false
      },
      {
        Header: "Visits",
        accessor: "visits"
      }
    ]
  }
],
[]);

https://codesandbox.io/s/react-table-hide-column-2g3js

为什么显示“年龄”列？

编辑 挖掘更改日志我现在明白列显示/隐藏确实发生了变化：

7.0.0-beta.28添加了 useColumnVisibility 插件作为核心插件以及几个新的实例和列级方法来控制列可见性 添加了“列隐藏”示例

但是，我仍然没有弄清楚如何以类似于 show 过去工作方式的方式将 useColumnVisibility 挂钩应用于列。“列隐藏”示例显示了如何使用复选框进行操作，但对我的情况没有帮助（afaik）。

我正在制作一个基于 react-table v7 和 react-window 的表格。我在这个网站上发现了其他问题，但他们几乎都在使用 v6 - 几乎不同。

问题是过滤器文本字段在我们输入后会失去焦点，即使我们只是触摸输入（我知道表格是重新渲染的）。但是我好几天都找不到任何解决方案。

请帮助并非常感谢。

这是代码沙盒

我是 React.js 的超级新手，想在这里使用这个 api：https : //covidtracking.com/api/v1/states/current.json 来创建一个包含最新 COVID-19 数据的表来自美国各州。问题是，当我呈现应用程序时，我似乎无法将数据上传到表格中。任何帮助将不胜感激，谢谢。

import React, { useMemo, useState, useEffect } from "react";
import axios from "axios";
import Table from "./Table";
import "./App.css";

function App() {

  const [loadingData, setLoadingData] = useState(true);
  const columns = useMemo(() => [
    {
      Header: "State",
      accessor: "show.state",
    },
    {
      Header: "Positive Cases",
      accessor: "show.positive",
    },
    {
      Header: "Recovered Cases",
      accessor: "show.recovered",


    },
    {
      Header: "Deaths",
      accessor: "show.death",
    },
    {
      Header: "Total Tested",
      accessor: "show.total",
    }

  ]);

  const [data, setData] …

我正在研究一个复杂的反应形式，它几乎没有受控输入以及网格/表格。目前我正在使用react-hook-form进行验证。
这是我的模型。这里的想法是根据需要显示网格，直到用户添加一些数据。用户可以通过单击“+”或“-”按钮添加/删除数据。


当我在这里提交时，我在提交的数据中看到的是

{
  "fname": "sasa",
  "lname": "asasasa"
} 

这是预期的输出

{
  "fname": "sasa",
  "lname": "asasasa",
  "localAddress":[
    {
      "street1":"street1",
      "street2":"street2",
      "city":"city"
    },
    {
      "street1":"street2",
      "street2":"street2",
      "city":"city"
    }
  ]
} 

这是我的codesanbox
Codesanbox

不知道如何将react-table（或任何表组件）与react-hook-form（或任何react形式）集成。使用“react-table”构建表单对我来说是必须的。

感谢任何帮助。

我正在尝试使用 react-table 并且它抛出了一个错误。当我运行它时，它会在屏幕上显示以下堆栈跟踪：

它似乎试图从列创建映射，但由于列未定义而引发错误。

我正在传递我的专栏，但也许我做得不正确。

这是我的代码：

class Blog extends Component {
...
    createTable() {
        return this.state.blogPosts.length ? <Table posts={this.state.blogPosts} /> : null;
    }
...
    componentDidMount() {
...     
        axios.get('/blogs').then(response => {
            if (response.data) {
                const entries = Object.entries(response.data);
                this.setState({blogPosts: entries.map(p => Object.assign({id: p[0]}, {...p[1]}))
                    .sort((p1, p2) => p1.updatedAt > p2.updatedAt ? -1 : 1)});
            }
        }, err => {
            console.log('err=', err);
        });
    }
}

import React from 'react';
import {
    useTable,
    useGroupBy,
    useFilters,
    useSortBy,
    useExpanded,
    usePagination
} from 'react-table';

function Table(props) …

我使用 React Table (react bootstrap table-2) 在页面中显示一个表，并使用从数据库 API 调用的数据填充它。我想让其中一列中的值显示为链接（hrefs）。此特定列仅包含 URL。如何在react bootstrap table-2 中实现这个？

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 } = …

我使用单选按钮来选择行。如何禁用多行选择以便一次只能选择一行？

我正在使用selectedFlatRows，但它允许选择多行。

const Table = props => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    selectedFlatRows,
  } = useTable(
    {
      columns,
      data: props.linkedProducts,
    },
    useSortBy,
    usePagination,
    useRowSelect,
    hooks => {
      hooks.visibleColumns.push(columns => [
        {
          id: 'selection',
          disableGlobalFilter: true,
          accessor: 'selection',
          Cell: ({row}) => (
            <RadioButton
              {...row.getToggleRowSelectedProps()}
            />
          ),
        },
        ...columns,
      ]);
    }
  );

快速帮助这里！当我尝试将数据渲染到反应表中时，出现上述错误。数据来自 axios 的 api。

这是代码

import axios from "axios";
import React, { useEffect, useState, useMemo } from "react";
import "./Modal.css";
import { useTable } from "react-table";
import { COLUMNS } from "./columns";
import "./my_style.css";
const ViewTcMapping = () => {
  const [data, setData] = useState({});

  const baseURL =
    "http://127.0.0.1:8000/api/business_process/risk_tc_mapping_details";

  useEffect(() => {
    axios
      .get(baseURL)
      .then((response) => {
        setData(response.data);
      })
      .then(
        (response) => {},
        (err) => {
          alert("No Data To Show");
        }
      )
      .catch((err) => {
        return false;
      });
  }, []); …