标签: react-table

我将需要一个服务器端表，所以在我react-table在 github 上看到9k+ 星后决定使用它，我正在尝试构建一个 React-Table，它可以轮询远程服务器的每个请求数据以获取最新数据。所以在示例中，我确实使用了 jsonplaceholder 我请求了数据 func 工作，它将获取我过滤的数据排序pageSize，pageIndex（https://jsonplaceholder.typicode.com/posts?_start={pageIndex will come here}&_limit={pageSize will come here}...排序和过滤的数据）我该怎么做？谢谢你。

下面我写了一些代码但没有很好的编码抱歉

//Table.js
import React, { useState, useEffect } from 'react';
import { useTable, useFilters, useSortBy, usePagination } from 'react-table';

export default function Table({ columns, data, pages, onFetchData, loading, pageCount: controlledPageCount, error }) {
    const [ filterInput, setFilterInput ] = useState('');
    // Use the state and functions returned from useTable to build your UI
    const {
        getTableProps,
        getTableBodyProps, …

我正在尝试对反应表中的数据进行排序，但是随着新数据的到达，排序将被取消。包含表的组件从 prop 获取其数据。该数据本身来自 redux，它每 15 秒更新一次来自服务器（经常更改）的最新数据。

我想要的是对数据进行排序，并让这些排序在数据更改时保持不变。实际发生的情况是，我按列标题对表进行排序，然后当数据更改时，排序将被删除。

我努力了：

• 设置autoResetSortBy为假
• 实现了这个： https: //react-table.tanstack.com/docs/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes
• 通读文档和示例寻找明显的差异

排序工作：

但一旦数据发生变化就会变成这样：

我想保留排序过滤器，以便当新数据到达时（99% 的时间相同，但 1% 的时间列值不同或存在新行），它会按应用的排序过滤器进行排序。

这是我的代码的简化示例（尽可能小）：

import * as React from 'react'
import { useTable, Column, useSortBy } from 'react-table'
import * as SharedTypes from '@shared/declarations'

interface Props {
    serverData: SharedTypes.API.MarketBotSummary[]
}

export const TableTest: React.StatelessComponent<Props> = ({ serverData }: Props) => {

    const [localData, setLocalData] = React.useState<SharedTypes.API.MarketBotSummary[]>(serverData)
    const skipPageResetRef = React.useRef<boolean>(false)

    React.useEffect(() => {
        skipPageResetRef.current = true
        setLocalData(serverData)
        console.log('data changed', serverData)
    }, [serverData]) …

我有以下代码用于检索单击行的数据：

    <ReactTable
      getTdProps={(state, rowInfo, column, instance) => {
        return {
          onClick: (e, handleOriginal) => {
            if (typeof rowInfo !== "undefined") this.rowClick(rowInfo.row.RecipeName);
            if (handleOriginal) {
              handleOriginal()
            }
          }
        }
      }}

如何更改点击行的背景颜色？或突出显示单击的行的最佳方法是什么？

我正在尝试刷新用这个库react-table 生成的表中的内容。但是，由于某种原因，它不起作用，即使我更改了传递给组件的参数的状态。

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

以及改变数据的函数：

  let data= this.state.data;
  for (var i = 0; i < data.length; i++) {
    data[i].name="TEST"
  }
  this.setState({data: data})

我可以看到数据已更改，但表的内容保持不变。

我正在开发一个功能，我必须在使用react-table的组件外部应用过滤器，但应用过滤器后当前页码不会重置。获取的结果（已应用服务器端分页）显示第一页的数据。

我尝试使用回调 onFetchData 来更改当前页码，但当应用组件外部的过滤器时，它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page …

我想在反应表中显示嵌套的 JSON 数据。

我尝试过这样的：

   render() {
    const columns = [{
     //Not Displaying
      Header: 'Owner ID',
      id: 'ownerid',
      accessor: '_links.customer.href.ownerid', // <- i think this is wrong
      Cell: this.renderEditable
    }, 

    {
      //Displaying
      Header: 'Price',
      accessor: 'price',
      Cell: this.renderEditable
    }, {

我返回并绑定到表的数据的结构如下：

[
    {
        "id": 1,
        "date": "20.07.2019",
        "price": 3.2,
        "customer": {
            "ownerid": 1,
            "firstname": "John",
            "lastname": "Johnson"
        }
    }
]

这里我使用的是列数组：

import ReactTable from "react-table";

<ReactTable data={this.state.offers} columns={columns} 
          filterable={true} pageSize={10}/>

绑定数据：

fetchOffers = () => {
        const token = sessionStorage.getItem("jwt");
        fetch(SERVER_URL …

我有一个反应表，我正在尝试更改列大小。我尝试编辑列中的“宽度”值，编辑 scss 样式表中的值，并添加内联样式，但没有任何效果。我在哪里对这个 react-table 进行 css 更改？任何帮助，将不胜感激。我看到的任何示例都会在我尝试过的列区域内更改它。

import React, {useState, Fragment} from "react";
import {useTable, useFilters, useGlobalFilter, useRowSelect} from "react-table";
import dataSet from "../data";
import {IndeterminateCheckbox} from './TableCheckbox';


function DeployTable() {

    function DefaultColumnFilter({
                                     column: { filterValue, preFilteredRows, setFilter },
                                 }) {
        const count = preFilteredRows.length

        return (
            <input
                value={filterValue || ''}
                onChange={e => {
                    setFilter(e.target.value || undefined) // Set undefined to remove the filter entirely
                }}
                placeholder={`Search ${count} records...`}
            />
        )
    }

    const [data] = useState(dataSet);

    const [columns] = useState([ …

我正在使用该react-table插件，但很难对定义了自定义链接的一列进行排序。

此列的内容基于该行中数据的一些属性，因此我为其创建了一个自定义单元格。显示正常，但排序执行得很奇怪。

我很确定问题出在columns定义中，但为了完整性，我将在此处发布所有代码：

export default function CloudfrontList() {
    const [loading, setLoading] = useState(true);
    const [columns, setColumns] = useState([]);
    const [data, setData] = useState([]);

    const getDataForTable = async () => {
        const _columns = [{
            // This is the cell that doesn't sort properly
            Header: "Name",
            Cell: cell => {
                const row = cell.row.original;
                const value = row.comment ? row.comment : row.origins[0].domain_name;
                return (
                    <Link href="/view/cloudfront/[id]" as={`/view/cloudfront/${row.id}`}>
                        <a>{value}</a>
                    </Link>
                );
            },
            accessor: row => {
                return row.comment …

我是 React 新手，并尝试模拟此处找到的行拖放代码：https ://react-table-omega.vercel.app/docs/examples/row-dnd

如果我打开沙箱，所有默认代码都可以正常工作。如果我在本地复制粘贴代码，编译时会出现以下错误：

Attempted import error: 'react-dnd-html5-backend' does not contain a default export (imported as 'HTML5Backend')

我使用安装了该库npm install react-dnd-html5-backend --save，并且没有对其进行任何修改。

导入行是：

import HTML5Backend from 'react-dnd-html5-backend'

这是从教程中复制粘贴的。我不明白为什么它会抛出错误，也不明白如何修复它。有什么想法吗？

我正在尝试使反应表可水平和垂直滚动，但现在它根据数据占用了所有空间。我想使该表格具有固定高度并可在两个方向上滚动。

表组件：

import React from "react";
import { useTable } from "react-table";

const Table = ({ columns, data }) => {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({
      columns,
      data,
    });
  return (
    <table {...getTableProps()} className="text-center">
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th
                className="bg-primary-dark text-white p-4 text-center"
                {...column.getHeaderProps()}
              >
                {column.render("Header")}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody
        {...getTableBodyProps()}
        className="bg-primary-light text-primary-dark overflow-scroll"
      >
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return …