标签: react-table

我在 React.js 中开发，我使用的是React-Table。我需要获取特定列中的单元格值。

我引用了 table 组件来访问其内部状态。

但我不知道在哪里可以找到列中的单元格值。

是否可以在列上获取单元格值？

我在获得非常基本的功能方面遇到了问题，即。当页面小于表格大小时，我想在 React 表格​​上设置水平滚动。我的代码中没有任何异常，但无论如何我都会把它留在这里：

<ReactTable
  data={bookingPerson}
  columns={columns}
  className="-striped -highlight"
  defaultPageSize={7}
  loading={loading}
/>

Header: "Delete",
id:'delete',
accessor: str => "delete",

Cell: (row)=> (
<span onClick={(row) => this.onRemoveHandler(row,props)} style={{cursor:'pointer',color:'blue',textDecoration:'underline'}}>
    Delete
</span>
)

React Table 这与标题删除跨度链接相关。代码片段显示了使用超链接渲染删除标签。

在这里，一旦用户单击删除链接，我如何获取该特定行的 ID。ID 已分配给 json 数据中的所有行。那么，如何在onClick函数内部传递cellInfo或rowInfo。

嗨，我正在尝试设置我的反应应用程序，以便当您单击反应表中行项目中的按钮时，该行中的数据将传递到另一个组件。目前我只是想在 console.log 中记录正确的数据，但不确定如何根据点击传递反应表行数据。我怎样才能做到这一点？谢谢

我的虚拟数据与按钮（显示详细视图）一起存储在状态中，我想触发通过 onclick 的数据：

    columns: [
      {
        Header: "First Name",
        accessor: "fname"
      },
      {
        Header: "Last Name",
        accessor: "lname"
      },
      {
        Header: "Employee Group",
        accessor: "egroup"
      },
      {
        Header: "Date of Birth",
        accessor: "dob"
      },
      {
        Header: "",
        id: "id",
        Cell: ({ row }) => (
          <button onClick={e => this.handleShow()}>
            Detailed View
          </button>
        )
      },
    ],
    posts: [
      {
        fname: "gerald",
        lname: "nakhle",
        egroup: "faisbuk",
        dob: "8/10/1995"
      }
    ]

我调用渲染表：

<ReactTable columns={this.state.columns} data={this.state.posts}></ReactTable>

我的 onclick 处理函数，但我不确定如何访问我所追求的表格行数据

handleShow(e) { …

React-table 正在对小数进行排序，如下所示：

我的猜测是，虽然我从服务器接收数字，但 react-table 将它们作为文本处理。所以，我像这样修改了访问器：

accessor: d => Number(d.Invoice_Weight).toFixed(2)

但我一直在排序错误。

这是列的代码：

 {
                      Header: () => 
                      <DropDownMenu 
                      header={content[lang].Invoice_Weight}
                      openModal = {this.onOpenSelectColumnsModal}
                      />,
                      id: 'Invoice_Weight',
                      sortable: true,
                      accessor: d => Number(d.Invoice_Weight).toFixed(2),
                      //width: 200,
                      getProps: () => {
                        return {
                          style: {
                            textAlign: 'right'
                          }
                        }
                      },
                      show: Invoice_Weight,
                    },

我试图使用语义-ui-react提供的Spinner来覆盖react-table提供的默认加载器。但这似乎不起作用。我维护了三个组件；一个是应用程序，一个用于数据网格，另一个用于微调器。有人可以帮我吗？

沙箱：https://codesandbox.io/s/react-table-row-table-g3kd5

应用程序组件

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false }); …

使用react-table，我可以很好地过滤数据，但希望它更动态

现在我正在努力完成的是过滤图表中的数据，使其更有意义，部分方法是将来自单一品牌的产品聚集在一个条形图中，以及删除过多的品牌，这些品牌使信息更难理解.

这是我正在使用的 Table 组件

import React from 'react'
import {
    useTable,
    usePagination,
    useSortBy,
    useFilters,
    useGroupBy,
    useExpanded,
    useRowSelect,
  } from 'react-table'
  import matchSorter from 'match-sorter'
  
  // import makeData from '../example/makedata.js'
  
  
  // Create an editable cell renderer
  const EditableCell = ({
    value: initialValue,
    row: { index },
    column: { id },
    updateMyData, // This is a custom function that we supplied to our table instance
    editable,
  }) => {
    // We need to keep and update the state of the cell …

使用带有 useGlobalFilter 的 react-table 时出现打字稿错误。我只是按照互联网上的一些说明进行操作。这是我的代码：

const DataTable : React.FC<IDataTableProps> = ({columns, data}) => {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        setGlobalFilter,
        state,
    } = useTable({columns, data}, useGlobalFilter);

    const GlobalFilter = ({ globalFilter , setGlobalFilter} : {globalFilter: any, setGlobalFilter: any})  => {
        return (
            <input
                value={globalFilter || ""}
                onChange={e => {
                setGlobalFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
                }}
                placeholder={`Search All ...`}
            />
            );
        };

    return <Container>
        <GlobalFilter globalFilter={state.globalFilter} setGlobalFilter={setGlobalFilter} />
        <Table {...getTableProps()}>
            <THead>
                {headerGroups.map(headerGroup => …

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

我试过：

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

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

如何根据日期范围过滤表格数据？

在此处将过滤器设置为日期列：

const tableInstance = useRef(null);
  const filterTable = (dates) => {
    if (tableInstance.current) {
      tableInstance.current.setFilter('session_date', dates);
    }
  };

onClick 功能在这里：

const handleFilter = () => {
    setSessionsData(data);
    if (sessionsData) {
      const dateArray = getDates(
        moment(fromDate).format('L'),
        moment(toDate).format('L')
      );
      filterTable(dateArray);
    }
  };